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

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

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

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

好吧，当我从 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的介绍还不确定，敬请期待！