网站需要快速保持竞争力，并提供良好的用户体验，以保持每个访问者的高页面浏览量，减少跳出率或购物车放弃率，并提高搜索引擎排名。
你可能已经读过很多关于让网站更快的文章，哪些WordPress插件可能有帮助，哪些可能没有，还有很多类似的技巧可以提高你的网站速度。您可能还在移动设备和桌面设备上获得了100/100的PageSpeed得分。
但重要的问题是，100/100的pagesspeed评分是否足够？它是否意味着绝对最大的性能？b谷歌的加里·伊利斯最近说：
本文将解释为什么PageSpeed工具的100分可能还不够。如果你是一个性能爱好者，你会发现一些有趣的优化技术适用于你的网站。如果你不是，下面这些优化建议可能会帮助你在网站性能方面保持领先于竞争对手。让我们首先介绍一下PageSpeed工具。
谷歌页面速度是什么？以及它是如何工作的
谷歌PageSpeed Insights衡量网页在移动和桌面设备上的表现，并提供可操作的指导，以提高网站的速度。然后，该工具根据0到100的分数分别对移动和桌面网站进行排名，其中100表示性能评分标准得到了很好的满足。
标准包括第一次内容油漆、最大内容油漆、速度指数、总阻塞时间、交互时间和累计布局移位。
到处都有很多文章可以帮助您更多地了解如何最好地理解PageSpeed工具的工作原理，以及如何使用该工具提供的指导并将其实际应用于您的网站。
然而，既然你在这里，我假设你已经很好地通过了这一点，并准备学习更多的下一步，你可以采取使你的网站更快。
难道PageSpeed工具不能指导您获得绝对最大的性能吗？
不。
我还需要担心性能吗？
是的。
PageSpeed工具很好，总是能让你的网站更快，但这并不意味着100分就意味着没有什么可做的了。在大多数情况下，您仍然有机会节省大量的页面重量和页面加载时间。
因此，让我们看一下使用PageSpeed工具达到100/100分后可以执行的额外步骤。
1. 使用竞争对手的浏览器缓存
如果你的竞争对手的关键词排名比你高一点，那么用户很可能会在点击你的网站之前先访问它的网站。但是，如果用户访问过另一个站点，则可以通过检查站点的源代码来重用访问者的浏览器缓存，以查看它是否使用任何公共CDN，如果使用，则使用哪个库。
如果你们都使用相同的库，例如jQuery 3.2.1，你可以从你的竞争对手使用的相同的公共CDN上加载它。
正如你可能猜到的那样，这个技巧很少奏效，在某些情况下，如果访问者先访问你的网站，然后再访问你的竞争对手，可能会给你的竞争对手带来好处。
虽然这个技巧不太可能对你的竞争对手起作用，但这通常是有效的。从公共CDN加载所有开源资源可以帮助您重用用户过去任何时间访问过的第三方网站的浏览器缓存中的公共资源。
一些免费的WordPress插件，如Easy Speedup和CommonWP，可以自动链接到公共CDN上托管的开源主题、插件和库。这样的插件使它成为可能和容易重用其他网站的浏览器缓存在规模上没有太多的努力。
这种方法可能不适用于某些访问者，但可能适用于其他访问者。这样做的好处是，即使是第一次访问，也可以减少页面加载时间。额外的好处是这些开源资产可以从CDN获得，而不需要任何带宽费用。
2. 合并文件，但要小心
一些性能测试工具可能会建议您将多个CSS和JavaScript文件合并为一个文件以提高速度。这在很久以前是真的，但现在时代变了。
在谷歌Chrome V8博客上写的这篇题为“2019年JavaScript的成本”的流行博客文章中，Addy Osmani提供了一些关于改进JavaScript下载时间的指导。他建议保持JavaScript包较小，如果一个包的大小超过50-100KB，则将其分成更小的包。他还指出了一条一般的经验法则，即如果脚本大于1kb，则避免将其内联。
总的来说，将较小的文件捆绑到一个或多个bundle中是不值得的，因为它不再提高页面加载速度——相反，它会影响移动设备上的速度。这是因为，使用HTTP/2多路复用，可以同时处理多个请求和响应，从而减少了额外请求的开销。
那么，您的网站代码是否需要进行任何重构才能再次以旧方式做事？你可能想要考虑禁用WordPress站点上启用此功能的插件。这将减少插件膨胀，并将加快您的网站。
但是，这并不意味着将整个JavaScript代码库拆分为许多较小的文件不会对您造成伤害。您需要仔细地测试您的用例。
3. 切换图像格式
图片占页面加载的很大一部分。因此，它们比常用的常见图像优化技术需要更多的考虑。
如果您的站点使用图像（我确信确实如此），您可能需要了解哪种图像格式适合您的需要。一些图像格式更适合矢量，而另一些则更适合照片。
上面的图表可以帮助您根据图像需求选择正确的格式。JPEG支持对照片进行有损压缩，而SVG是一种基于文本的格式，可以动态压缩，并且在大多数情况下可以将文件大小减小到小于PNG。
另一个需要考虑的问题是新的图像格式。
PageSpeed建议“以下一代格式提供图像”。唯一被广泛支持的下一代格式WebP只有77%的浏览器支持，而且没有Safari浏览器的支持。因此，web上使用WebP的图像不超过4%。
因此，使用WebP作为主要的图像格式仍然是一个很大的错误。但是WebP格式提供了如此巨大的文件大小减少，使其成为性能优化的一个非常有吸引力的选择。而且，大多数情况下，根据浏览器的兼容性向浏览器提供图像是一个不错的选择。
这听起来可能很复杂，但事实并非如此。有一些解决方案可以自动进行这种即时图像转换。一旦你准备好在你的网站上使用WebP，你有多种选择：
你可以使用Easy Speedup WordPress插件，它使用基于云的图像优化和转换服务，对WordPress和非WordPress网站同样有效，并提供浏览器可以支持的最优图像格式。还有一个PHP库可以在不增加存储使用量的情况下为非wordpress网站自动完成这项工作。这个库非常擅长做这项工作，对于我的一个客户，我已经看到它将PNG图像转换和优化为WebP，并将其大小减少了原始图像的95%。这种情况并不总是发生，但有时确实会发生。你的里程可能会有所不同。
对于现场优化和转换，WebP Express将图像转换为WebP，并在服务器上维护每个图像的多个副本，以便将正确的图像传递给正确的浏览器。缺点是它使文件系统膨胀，增加了备份大小，并且使迁移变得困难。它们也给主机带来了负担，因为转换和优化图像是一项昂贵的任务。
将图像转换为WebP是值得的。节省是巨大的，在大多数情况下，整个页面大小减少到一半甚至更少。
旁注：在苹果2020年6月22日的WWDC主题演讲中，他们指出他们首次在Safari中添加了WebP图像支持。
还有更多。
另一件重要的事情是关注即将推出的令人兴奋的图像格式JPEG XL。它正处于标准化的最后阶段，可能很快就会完成并开始看到一些浏览器的支持。它是基于b谷歌的PIK和Cloudinary的FUIF图像格式研究的结合。JPEG XL的格式设置了以下两个设计要求，使其成为未来网络的图像格式：
高质量：在合理的比特率下视觉无损；
解码速度：对于大图像，多线程解码应该能够达到4亿像素/秒左右。
JPEG XL有望将图像尺寸减小到原始尺寸的1/3而不损失质量。它将成为一种通用格式，有效地支持摄影和非摄影图像。所以，那些想让你的网站在未来更快的人可能会想要关注JPEG XL浏览器的支持。先行者的优势是显著的。
4. 区分动态压缩和静态压缩
这可能会以最少的努力加快您的网站的速度，并且可能是我将要建议的最简单的技术。让我解释一下。
网站通常使用一段从web到。htaccess或NGINX配置文件的代码来对所有可压缩资源启用Gzip或Brotli压缩。这是可行的，但为更多的优化留下了空间。由于更好的Brotli压缩，网页可以节省超过50 KB的额外空间。想要学习诀窍吗？这很简单。区分动态压缩和静态压缩。
您的web服务器主机的可压缩内容可以分为两种类型，动态和静态。动态内容是动态生成的，不能提前压缩。HTML页面就是一个例子。静态内容，如CSS和JS，在一段时间内保持不变。
您可以预压缩这些资源，并配置服务器以动态地提供这些预压缩文件。预压缩允许您使用更高的压缩级别，如Brotli:11，这对于动态压缩来说通常太慢了。如果每次文件更改时都难以预压缩资源，您也可以使用第三方服务（如PageCDN）为您无缝地完成此操作。
5. 减少DNS查找时间
DNS解析时间是指将域名解析为IP地址所花费的时间。然后使用这个IP地址查找服务器在Internet上的位置。
当用户访问一个页面时，浏览器执行的第一个高延迟任务是域名的DNS查找。除非浏览器从DNS查询中获得IP地址，否则它无法继续连接到服务器并发出HTTP请求。
理想情况下，减少DNS查找时间应该是时间到第一字节优化策略的一部分，但似乎PageSpeed工具没有考虑到这一点，因为在许多情况下，网站管理员不可能在这方面进行优化。结果，大量的网站管理员不打扰他们的DNS提供商的性能。
有几种方法可以减少个人用户的DNS查找时间：
通过使用快速DNS提供商。如上所示，从DNS基准测试服务DNSPerf.com上截取的屏幕截图显示，一些服务提供的全球平均延迟小于30毫秒，这足以使DNS查找过程难以察觉。
使用更高的TTL缓存DNS响应。DNS递归解析器可以在全局最终用户附近缓存这些响应，并且可以大大减少它们所服务的所有用户的DNS查找时间。
6. 利用浏览器缓存字体
由于插件或主题在您的网站上使用的谷歌字体，您可能会获得95或98分而不是100分，您可能会认为在这方面您可以做的事情不多；解决这个问题的方法不止一种。
谷歌字体CSS服务仅1天到期。这是一个特性而不是错误，因为这允许谷歌字体团队更快地将更改传播给最终用户。但是，问题是PageSpeed工具希望您对静态资产使用30天的缓存。
如果您对解决这个浏览器缓存问题感兴趣，首先需要对字体的自托管与第三方托管进行非常详细的比较。
一个解决方案是使用一个工具，下载字体和CSS为您。你只需要选择字体族，你的向后兼容性偏好和可下载的文件已经准备好了，你可以在你的项目中的目录中提取，并使用HTML中的CSS来提供字体。如果你使用WordPress， OMGF插件可以为你做这一切。
您还可以使用Easy Fonts，它是谷歌字体的克隆，但添加了一些CSS实用程序类，使使用字体更容易，并促进快速原型。幸运的是，这个CDN托管库也修复了浏览器缓存问题。
7. 使用HTTP/2服务器推送
服务器推送是HTTP/2协议的一个特性，它允许web服务器在浏览器请求这些文件之前先发制人地将文件推送到浏览器，因为浏览器很快就会需要请求这些文件。
因此，当服务器接收到对文件的请求时，它将发送该文件以及配置为与触发server Push的文件一起发送的一个或多个附加文件。这消除了后续请求的往返时间，并使资源立即可供浏览器使用。
Server Push是一个重要的性能特性，您可能想尝试一下。然而，需要注意的一件重要事情是，不要对每个请求都积极地推送文件。浏览器可能已经为您提供了资源的缓存副本，并且必须有空间让浏览器使用该缓存。咄咄逼人地推送太多不需要的资源可能会浪费用户在计量连接上的带宽。
如果你想尝试一下，这篇文章详细解释了如何为NGINX设置Server Push。这篇关于css技巧的文章帮助你设置一个缓存感知的服务器推送设置。这篇博文有很多关于使用Server Push的建议和见解。对于WordPress站点，同样的Easy Speedup插件提供了这个Server Push功能。
8. HSTS预加载主机
HSTS，即HTTP严格传输安全，是一种强制HTTPS的方法，以确保如果用户使用普通的旧HTTP请求页面，入侵者没有机会更改请求或响应。
HSTS Preload是一个由b谷歌Chrome团队维护的列表，用于创建一个为整个域及其子域背书HTTPS的网站目录。这个域名列表被大多数主要的浏览器供应商使用，包括Chrome、Firefox、Opera、Safari、Edge和IE。如果一个网站在HSTS预加载网站列表中，浏览器总是与它建立安全连接。即使用户试图通过未加密的HTTP打开这样的网站，浏览器也会在列表中查找该网站，并将请求更改为HTTPS。
正如HSTS Preload网站上提到的，这种技术有几个要求，但提供了改进的安全性。然而，安全性并不是唯一的好处。如果一个网站有几个旧的反向链接，在这个列表中可以节省用户从HTTP到HTTPS的不必要的重定向。只要您能够满足其需求，HSTS的安全性和性能优势就证明了使用它是合理的。
9. 使用不可变缓存
‘ Cache-Control ’是一个HTTP头，告诉浏览器文件可以在浏览器中存储多长时间。对于用户特定的动态内容，比如HTML页面，这个头用来告诉浏览器永远不要缓存这个文件。但是对于像图像、CSS和JS这样的静态内容，这个标题成为节省带宽的一个最重要的来源，可以让同一用户重复访问。
然而，没有一个单一的缓存控制配置适合所有的静态资产。有些静态资产变化很大，而有些则根本不变化。例如，如果一个名为jquery-3.4.1. js的资源。最小，js存在于您的网站上，你肯定你永远不会编辑这个文件，你需要一些方法告诉浏览器，这个文件永远不会改变。
幸运的是，有了新的‘ immutable ’指令，你现在有一种方法告诉浏览器完全相同。如果浏览器看到一个资源的‘ cache-control: immutable ’头集，这告诉浏览器该文件永远不会改变，浏览器不应该尝试用条件‘ If- modified - since ’请求来验证新鲜度文件。
这节省了往返时间，并使缓存的资产无需重新验证即可使用。但是，您需要确保这个头文件没有用于大部分保持不变，但可能每年进行一次或两次编辑的文件，因为在这种情况下，如果没有适当的缓存失效，编辑可能无法到达某些用户。最适合这个头指令的是版本号作为URL的一部分添加的开源库，用户上传的具有唯一id或名称的图像，以及每次更改后都获得唯一URL的CSS和JS包。
10. 利用主机整合
主机整合是PageCDN引入的一种方法，通过消除传统的和附带的域名分片开销来加快客户端网站的速度。你可以很容易地在自己的网站上使用这种方法。通过这种方法，PageCDN只是利用了HTTP/2协议的多路复用功能，但采用了一种创新的方式。
主机整合是域分片技术的对立面。它依赖于HTTP/2来并行交付所请求的资源，并通过单个主机（或域）代理所有外部资源，以避免不必要的DNS查找和连接成本。这种节省的连接和DNS查找开销可以加快移动和桌面用户的网站速度。
PageCDN自动化了主机整合，并列出了最大化使用此方法的几种方法。我们可以通过使用相同的原则在任何网站上实现相同的行为。
避免太多的开源cdn。如果您的站点从几个不同的CDN加载多个开源库，请尝试从一个CDN加载所有这些库。
下载并自托管谷歌字体。对于WordPress网站，OMGF插件只需点击几下就可以完成这项工作。
抛弃旧的域分片技术，从单个主机加载所有资产，而不是为并行内容交付创建分片。让HTTP/2为您执行并行化。
如果您的网站使用来自多个主机的静态内容，请考虑通过单个主机代理所有内容。
11. 避免使用CSS精灵
“CSS精灵”是一种将多个图像组合成一个大图像并使用CSS在网页的不同位置显示适当像素的技术。几年前，这是一种非常普遍的技术。
缺点是这会使整个页面结构变得复杂且不那么灵活。此外，即使只需要使用一个箭头，也需要加载大图，这增加了页面的整体重量。通过精灵添加另一个图标是很耗时的，因为你必须首先修改图像，并确保它没有使用任何在网站其他地方使用过的像素。这可能会导致网站设计中的几个错误。类似地，要更改显示大图中图标的HTML元素的大小，就需要调整大图上图标的大小，并重新定位图像上出现在该图标之后的所有图标。
这很复杂，而且几乎没有任何好处，因为HTTP/2可以为您做几乎相同的工作。HTTP/2可以在同一连接上复用多个请求和响应。不使用CSS精灵的另一个好处是，只有页面绝对需要的图像或图标才能加载到页面上。浏览器甚至可以把折叠图标放在优先级前面，把它们放在折叠图片后面，进一步加快页面加载速度。
所以，如果你正在使用“CSS精灵”为你的小图像，最好让他们自由加载，让浏览器决定如何优先考虑他们的请求，以及一次请求哪一个。
12. 经常更新
WordPress 5.5将很快发布，并将增加对图像的本地延迟加载的支持。所以，依靠插件来使用这个功能的网站现在将有一个内置在WordPress核心中的原生延迟加载解决方案。
延迟加载是一项重要的性能优化，在这种情况下，数百万个网站只需点击一下就可以将WordPress更新到下一个版本。
定期更新CMS、插件、主题、工具、服务器软件、语言运行库，甚至操作系统，会带来明显的性能改进。例如，每个新PHP版本的发布都带来了相当大的性能改进，而且这种趋势似乎在可预见的将来会继续下去，因为PHP 8将附带一个新的JIT编译器。Node.js的情况也是如此，它受益于V8 JavaScript引擎的每个新版本所带来的新的速度和内存优化。
这同样适用于服务器软件，如NGINX或Apache。服务器开发人员目前正致力于HTTP的下一个主要更新，名为HTTP/3。HTTP/3承诺使互联网连接更快、更可靠、更安全。一旦您最喜欢的服务器发布此功能，请务必应用此更新。
早期版本软件的性能通常没有得到很好的优化，因为在这个阶段，速度通常不是首选。但随着产品的成熟，开发人员可能会开始投入更多的精力，使其更快地适应更多的用户，并与其他选择更好地竞争。因此，当每个软件的新版本可用时，更新以避免错误、利用安全修复程序并使堆栈更快是一种很好的做法。
结论
虽然PageSpeed工具在建议可能的性能缺陷方面做得非常好，但它留下了一些优化，可以用来最大限度地利用可用的工具和技术。我已经尝试涵盖我所知道的所有此类优化。我还介绍了一些您可能需要知道的其他事情。所有这些都将帮助您的网站在竞争中保持领先地位。