在租用服务器上获得满分 PageSpeed Insights的途径一(服务器篇)

在租用服务器上获得满分 PageSpeed Insights的途径一(服务器篇)

作者:云资讯    浏览次数:130    2021-07-07 15:36:10

2018年开始方便网站制作和网站管理,例如通过引入PHP模块模式加速,免费提供备份和登台功能,添加网络字体功能等。我们通过添加各种工具不断发展。

尤其是2018年2月-2018年4月标准计划服务器的规格有明显提升,nginx的采用和PHP模块模式的引入,加快了HTTP/2的SSL通信速度,显着提升了PHP程序执行性能,极具吸引力您可以继续以每月 515 日元的价格使用它,同时提高性能。

什么是 PageSpeed 洞察力?
PageSpeed Insights是谷歌发布的页面加载时间基准测试工具。它从服务器响应速度中检测到大量 JavaScript 和大图像,并提供有关减少页面权重的建议。

在租用服务器上获得满分 PageSpeed Insights的途径一(服务器篇)

好吧,当我从 ogcloud 的租用服务器搬走后,PageSpeed Insights 得分明显上升了!看到一篇博文说,但是租用服务器的负责人其实是试错了,看看是不是真的,服务器的性能对分数有多大影响。我的目标是实现 100 的梦想移动分数。还有一个服务器因素导致得分不好,但认为其他各种因素重叠,因此我们将研究该领域。

本次使用的站点使用WordPress作为CMS,使用联盟站点常用的主题,挑选那些安装了插件的与实际站点比较接近的,以及实际服务器环境中的PageSpeed Insights。我会稳步碾压项目指出并尝试多少分数会增加。

有什么办法可以让我得到 100 分吗?
这是我个人的看法,但我认为没有必要给100分。这次写的好像是轻装上阵,其实为了100分,查了各种方法,死死盯着源码,改了插件设置,网站一片空白。有一种可能. 不过分数在70左右,显示速度也足够(TTFB在1秒以内),而且即使分数再提高,速度似乎也没有大幅提升(AMP除外)。请记住,页面显示速度不是评分的唯一因素,仅仅因为您获得 100 分并不意味着超然显示速度很快。

当然,如果页面显示速度慢到影响可用性,你需要采取措施,但如果你能在一定程度上流畅地显示它,我认为与其追求进一步的分数提高,不如增加内容。这个系列真的有100分吗?那怎么做呢?小樱的出租服务器能出100个吗?请注意,目的是验证这一点。

如果只更改服务器,分数会改变多少?
这就是为什么我想立即比较分数。这次我准备了

ogcloud租用服务器标准方案(PHP7.3模块模式)
nginx + php7.3 (php-fpm) + MySQL5.7 在 ogcloud 的云上,具有 3 个不同的规格
我们准备了这4种模式。ogcloud Cloud允许您从 1 核 1GB 内存到 20 核 224GB 内存中自由选择实例的性能。正如预期的那样,其他公司的服务得分是○○!我不会写,如果服务器规格改变会发生什么?我决定使用云服务器进行试验。这次我们用1核1GB、4核8GB、8核16GB的2种模式进行测量。

我立即测量了它
这就是为什么我将模型站点复制到每个服务器并使用PageSpeed Insights进行测量的原因。公平地说,我们测量了 5 次并发布了平均值。除了服务器环境,它处于完全相同的状态。
根据规格的不同,分数似乎没有太大差异。把它放在CPU几乎空闲的服务器上可能没有多大意义(虽然创建环境相当麻烦)。从现在开始,我想再看看并改进存储在租赁服务器中的不良分数的帖子页面。得分不仅仅与服务器速度有关,因此即使是轻微的速度差异也可能不会产生显着的得分差异。

比较服务器时需要注意的事项
在撰写本文时,我使用完全相同的文件和数据库将同一个 WordPress 站点复制到多个服务器,但比较速度时另一个非常重要的因素是 PHP 版本。特别是PHP5系列设置的租赁服务器和PHP7系列的租赁服务器性能可能相差10到20倍。

如果你不用担心PHP版本,你长期签约的租用服务器用的是PHP 5.6,考虑搬家时,新签约的租用服务器设置为PHP 7.3。快速地!后来发现我用了很久的租用服务器可以用PHP7.3了!只需要时间切换!有很多这样的事情。

关于改进顺序
在本网站上,指出的项目按顺序如下。

下一代格式的图像分发
排除干扰渲染的源
请删除未使用的 CSS
高效的图像格式
让我们暂时从顶部开始处理这个问题。

  • Page Speed Insights 是通过 5 个审计项目的加权平均值来衡量的,所以写完之后从下面的文章中了解到,最好从有权重的开始。

PageSpeed Insights 分数是如何计算的?获得100分的条件——奇塔

作者对300个EC站点的Page Speed Insights Score Deviation Table的文章很感兴趣。

如果EC网站上PageSpeed Insights的分数是80,那么偏差值就相当于70!我做了一个性能偏差表(邮购网站) – Ideaman’s Blog

下一代格式的图像分发
一个麻烦的回答立刻传来。下一代图像格式是WebP,它是 Google 开发的一种高压缩率图像格式。相较于JPEG、GIF等传统格式,即使在相同的画质下,也可以缩小图像尺寸,节省下载图像的时间。您试图在不改变图像外观的情况下减少容量。

在 WordPress 中使用 WebP 仍然有很多障碍,但让我们按照我们所说的去做。这次我在库中安装了一个插件来使用WebP。WebP 还是太先进了,比如不被 Internet Explorer 和 Safari 支持,在网站上使用还为时过早。使用时要小心。

这次我会使用一个叫做EWWW Image Optimizer的插件,将图片强制转换为WebP,并将rewrite描述放在.htaccess中。有了这个,你实际上可以提供一个名为 WebP 的图像,而它看起来像 JPEG。如果你用 DevTools 查看,你可以看到图像格式是 WebP。将图片放在库外并指定路径的一种,例如站点的徽标图像,也是手动转换和上传的。此次拍摄时会优化图片的大小,所以也可以同时支持“高效图片格式”项。

TYPE 显示为 webp

结果手机平均为49,PC平均为80,效果相当微妙。这是微妙的,或者分数低一点。我不知道分数下降的原因,但可能是因为原始图像已经相当优化。如果您使用 DevTools 进行检查,并且有许多图像可以达到几 MB,那么简单地压缩或减少它们似乎更好。从上图可以看出,图片大小缩小到10kb左右,所以缩小文件大小的效果很可能是可观的。

  • 压缩 = 提高图像压缩率。减少 = 改变分辨率。

排除干扰渲染的源
HTML + CSS / JavaScript 首先读取页面的 HTML,然后按照 HTML 中编写的顺序解释 CSS 并执行程序。因此,如果在 HTML 文件的上部描述了需要长时间处理的 JavaScript 等,则执行它需要很长时间,并且存在无法进行下一个处理的缺点。

关于这一点,意图是通过尽可能晚地在HTML文件中编写这样的程序,延迟加载或异步执行来加快进程并高速显示第一个视图。简而言之,目的是减少首次有意义绘制的时间。这次我将安装一个名为Autooptimize的插件。当我试图通过修改源代码来修复它时,修改很多,很难,所以我决定依靠插件,没有考虑任何事情。

在插件设置界面勾选 JavaScript 代码优化、CSS 代码优化、HTML 代码优化,特别是勾选 CSS inline 和 delay,设置为只加载需要的 CSS 先做。在我的环境中,我在优化JS代码的时候,不知怎么没有显示出会员的外部图片,所以这次我关掉了。

所需的 CSS可以在称为关键路径生成器的站点上生成。输入站点的URL,复制粘贴父主题和子主题的整个CSS填充左边的框,然后按生成按钮导出单行CSS。这是最低要求的 CSS(关键路径),其余为延迟加载。

设置成这样

这就是我立即对其进行测量的原因,但我能够通过66 台移动设备平均值和96 台 PC 平均值显着提高速度。它的可定制性稍差(如果你弄乱了 CSS,你可能需要再次做一个关键路径生成器),但它在分数方面要好得多。顺便说一下,当我打开JS延迟,图像显示有问题时,是mobile 72 和 PC 96。这似乎也很有效。我决定关闭一次 JavaScript 延迟加载,以后再想如果分数不上升怎么处理。

请删除未使用的 CSS
在这里,识别和删除没有实际使用的 CSS 并不是什么难事,但它在子主题中并没有被覆盖,除非从父主题中删除它似乎没有意义,所以这次我们将采取措施。如果分数没有通过其他措施增加,我想送行并回应。

减少服务器响应时间 (TTFB)
终于来了。这个项目租用服务器的性能是最重要的。值得庆幸的是,ogcloud 的租用服务器可以使用 APCu,它是一种内存缓存,所以让我们使用名为W3 Total Cache的插件将其设置为在内存中缓存页面和 DB。

即使不使用缓存,在可以使用PHP模块模式的ogcloud租用服务器上也能以相当高的速度执行PHP程序,但与使用缓存的情况相比还是有很大区别的。由于内存缓存容量较小,建议页数较多的使用磁盘缓存。W3 Total Cache 允许您选择其中之一。

这就是为什么W3 Total Cache的Page Cache、Object Cache、Database Cache都在APCu模式下开启的原因。

现在,移动端平均值为 73 ,PC 平均值为 99。由于页面在TTFB大约20ms内返回,超过了分数,体验的显示速度非常快。老实说,我认为实现这一点是可以的,但我打算尽我所能,直到移动分数达到100,所以请保持联系。

这里是关于TTFB的一点补充。TTFB 是 Time To First Byte 的缩写,表示从服务器发送文件的第一个字节之前的时间。特别是在WordPress站点上,页面的第一个字节HTML是在服务器端完成大量的数据库处理和PHP处理后发送的,所以如果服务器规格低或者PHP版本老性能差, TTFB 将被发送。它有很大的影响。事实上,这个测试站点,在不使用缓存的情况下,大约是 500ms,通过使用缓存的处理,缩短到了大约 20ms。

由于使用大量插件和重主题等因素,TTFB越来越慢,并且您使用的PHP版本较旧,因此您需要仔细检查您使用的插件。这一次,通过使用缓存,可以跳过PHP和数据库处理,因此加速到了这一点。事实上,一些你经常使用的插件仅仅通过添加它们就可以使 TTFB 恶化 20-40%。考虑安装插件的目的和好处。

改进TTFB最重要的就是改变PHP版本
经常被问到网站显示慢的问题,实际查了一下,最近用PHP5.2的WordPress也老的情况越来越多。只需从 PHP 5.2 更改为最新的 7.3,TTFB 的性能将提高 4 倍以上,请尝试一下。

如果您使用的是 ogcloud Rental Server Premium 或更高版本的计划,您可以更改为 PHP 7.3 并将 PHP 设置为“模块版本”。如果有可用的模块化版本,它的性能将提高很多倍。有关如何更改 PHP 版本和使用模块版本的信息,请参阅支持页面。PHP 版本更改是不太可能对您的站点造成破坏性更改的配置更改。如果从控制面板更改,会立即反映,如果站点显示有问题,可以恢复,显示和以前一样。更改风险自负,但尝试并充分检查操作也是蚂蚁。

我经常听到有人说我使用的插件和主题不支持 PHP7,但 PHP7 发布已经几年了。到2019年,不支持PHP7系列的插件很可能会过维护,存在安全风险的可能性很大,所以考虑停止使用,切换到其他插件,最好这样做。

另外,ogcloud 的租用服务器提供了备份和登台功能,您可以随意尝试更改登台服务器上的 PHP 版本或插件,请务必查看!

页面显示重的原因是一个复合因素
当您点击链接时,页面空白的时间变成了TTFB,但是有各种因素,例如图像大小、PHP版本、数据库处理过多等,会减慢这一速度。当然,即使你使用的是PHP5.2,如果你准备一个规格极高的服务器,当然可以比在ogcloud的租用服务器上使用PHP7.3时获得更好的性能,但实际上每台500日元月。当我认为它可以提供的计划时,我觉得它是微妙的。

此外,CSS 和 JavaScript 处理不在服务器端,而是在客户端(浏览网站的人的 PC 或智能手机),超大图像在网络带宽上存在瓶颈。这个频段也会因为服务器端、移动数据通信部分,还是家里上网重等多种原因造成“页面显示变慢”。同时强调网站的速度不能仅用分数来衡量,本文只是一个项目,所以我会继续努力提高分数。

WordPress 重吗?
我经常听到“WordPress很重”的名声。这有点不对,说“容易变重”更正确。例如,在一个静态的 HTML 站点上,页面显示不会那么慢,除非它与 JavaScript 不合理。原因是页面的 HTML 已经创建。

另一方面,WordPress 网站需要在处理各种主题和插件后生成 HTML。由于复杂多样的主题和大量安装的插件,这个生成过程变得越来越重,因此有“WordPress重”之说。WordPress 比静态网站更具可定制性。WordPress通常可以做你想做的事情,但可以说WordPress会根据你想做的事情减慢页面显示速度。加入大量常驻应用程序时的图像类似于智能手机的重量,而运行WordPress的服务器端的资源(CPU功率和内存)是有限的,因此随着处理量的增加它不可避免地会变慢……

ogcloud 的租用服务器真的很慢吗?
其实,如果你有一个标准的方案,可以使用模块版本的PHP,那么你可以在本站没有缓存的情况下在TTFB 200-500ms 内返回HTML,使用缓存可以缩短到几十ms。如果觉得页面显示慢,先检查PHP版本,如果有模块版本,换模块版本试试。即使无法升级PHP版本,缓存插件也相当有效。

所以,到了Part 1的这个点,我认为速度已经达到了我看到的目的,但是为了进一步加快移动页面的速度,Part 2最终会是AMP版本。如果您对AMP的介绍还不确定,敬请期待!