网站需要快速保持竞争力,并提供良好的用户体验,以保持每个访问者的高浏览量,降低跳出率或购物车放弃率,以及提高搜索引擎排名.

您可能已经阅读了很多文章,专注于使网站更快,哪些WordPress插件可能会有所帮助,哪些可能不会,以及很多类似的提示提高您的网站速度. 您可能还在移动和桌面设备上获得了100/100的分页速度分数。

但重要的问题是,100/100分页速度分数是否足够? 它是否意味着绝对最大性能? 以下是Google的Gary Illyes最近所说的:

Google's Gary Illyes tweet on pagespeed

这篇文章将解释为什么100分与分页速度工具可能是不够的。 如果你是一个性能爱好者,你会发现几个有趣的优化技术适用于您的网站。 如果您不是,下面建议的这些优化可能会帮助您在网站性能方面领先于竞争对手。 我们先从分页速度工具的介绍开始。

什么是Google 分页速度? 以及它是如何工作的

谷歌网页速度洞察测量网页在移动和桌面上的性能,并提供可操作的指导,说明如何提高网站的速度。 然后,该工具将移动和桌面网站分别按0到100的分数进行排名,其中100意味着性能评分的标准得到了很好的满足。

标准包括第一contentful paint,最大contentful paint,速度指数,总阻塞时间,交互时间和累积布局移位。

到处都有很多文章可以帮助您了解更多关于如何最好地理解分页速度工具的工作,以及如何使用该工具提供的指导并将其实际应用于您的网站。

然而,既然你在这里,我假设你已经过了这一点,并准备了解更多关于你可以采取的下一步,使你的网站更快。

分页速度工具不会引导您获得绝对最大性能吗?

非也。.

我还需要担心性能吗?

是的.

分页速度工具很好,总是让您的网站更快,但这并不意味着100分数意味着没有什么可做的。 在大多数情况下,您仍然有机会通过页面权重和页面加载时间节省大量时间。

因此,让我们来看看使用分页速度工具获得100/100分数后可以完成的额外步骤。

1. 使用竞争对手的浏览器缓存

如果您的竞争对手的关键字排名略高于您,那么用户可能会在点击您的关键字之前访问其网站(如果有的话)。 但是,如果用户一直在另一个站点上,则可以通过检查站点的源代码来重用访问者的浏览器缓存,以查看它是否使用任何公共CDN,如果是,则用于哪个库。

如果您都使用相同的库(ies),例如jQuery3.2.1,则可以从竞争对手使用的相同公共CDN加载它。

正如您可能猜到的那样,这个技巧很少起作用,并且在某些情况下,如果访问者首先访问您的网站,然后访问您的竞争对手,则可能会为您的竞争对手带来

虽然这个技巧不太可能对你的竞争对手起作用,但这通常可能会起作用。 从公共CDN加载所有开源资源可帮助您重用用户过去任何时间访问的第三方网站的浏览器缓存中的公共资源。

一些免费的WordPress插件,如轻松加速和Commonsp帮助自动链接到公共CDN上托管的开源主题,插件和库。 这样的插件使得大规模重用其他网站的浏览器缓存成为可能和容易,而不需要太多的努力。

这种方法可能不适用于某些访问者,但可能适用于其他访问者。 好处是这可以减少页面加载时间,即使是第一次访问者. 额外的好处是这些开源资产从CDN交付,无需任何带宽费用。

2. 合并文件,但要小心

css和javascript minification via wp-rocket example

一些性能测试工具可能会建议您将多个CSS和JavaScript文件合并为一个文件以提高速度。这在很久以前是真的,但现在时间已经改变了。

在这个流行的博客文章写在谷歌Chrome V8博客题为"2019年JavaScript的成本',Addy Osmani提供了一些关于改进JavaScript下载时间的指导。 他建议将JavaScript捆绑包保持较小,如果捆绑包大小超过50-100kb,则将其拆分为较小的捆绑包。 他还指出了一个一般的经验法则,即如果脚本大于1KB,请避免内联它。

Youtube video thumbnail

总体而言,将较小的文件捆绑到一个或多个捆绑包中是不值得的,因为它不再提高页面加载速度—它恰恰相反,并影响移动设备上的速度。 这是因为,通过HTTP/2多路复用,多个请求和响应可以在同一时间飞行,减少了额外请求的开销。

那么,您的网站代码是否需要任何重构才能再次以旧方式做事? 您可能需要考虑禁用在WordPress网站上启用此功能的插件。 这将减少插件膨胀,并将加快您的网站。

但是,这并不意味着将整个JavaScript代码库拆分为许多较小的文件不会伤害您。 您需要仔细测试您的用例。

3. 在图像格式之间切换

图像贡献了页面加载的很大一部分。 所以,他们需要比普通的更多的考虑图像优化技术常用的。

如果您的网站使用图像,并且我确信它确实如此,您可能需要了解哪种图像格式适合您的需求。 一些图像格式更适合矢量,而其他图像格式则最适合照片。

img-semblog

上面的图表可以帮助您选择正确的格式为了你的形象需要。 JPEG支持照片的有损压缩,而SVG是一种基于文本的格式,可以即时压缩,在大多数情况下,可以将文件大小减小到小于PNG的大小。

另一个考虑因素是新的图像格式。

分页速度建议"以下一代格式提供图像"。 唯一被广泛支持的下一代格式WebP由只有77%的浏览器没有Safari浏览器的支持。 因此,WebP被不超过4%的图像在网络上。

因此,使用WebP作为主要图像格式仍然是一个大问题。 但WebP格式提供了如此巨大的文件大小减少,使其成为性能优化的一个非常有吸引力的选择。 而且,大多数情况下,根据图像的兼容性向浏览器提供图像是一个很好的选择。

这听起来可能很复杂,但事实并非如此。有一些解决方案可以自动执行这种动态图像转换。 一旦你准备好在你的网站上使用WebP,你有多个选择:

  • 您可以使用Easy Speedup WordPress插件,使用基于云的图像优化和转换服务这同样适用于WordPress和非WordPress网站,并提供浏览器可以支持的最佳图像格式。 还有一个PHP库可为非WordPress网站自动完成这项工作,而不增加存储使用。 该库非常擅长做这项工作,对于我的一个客户,我已经看到它将PNG图像转换并优化为WebP和将其尺寸缩小原始图像的95%. 这并不总是发生,但有时确实如此。 您的里程可能会有所不同。
  • 用于现场优化和转换,WebP快递将图像转换为WebP,并为服务器上的每个图像维护多个副本,以将正确的图像传递到正确的浏览器。 缺点是它会使文件系统膨胀,增加备份大小,并使迁移变得困难。 由于转换和优化图像是一项昂贵的任务,它们还会给主机带来负担。

将图像转换为WebP是有回报的。 节省是巨大的,在大多数情况下,整体页面大小减少到一半甚至更少。

旁注:在苹果的2020年6月22日,WWDC主题演讲,他们指出,他们有添加WebP图像支持这是第一次在Safari中。

还有更多。

另一个重要的事情是密切关注一个令人兴奋的即将到来的图像格式JPEG XL.它正处于标准化的最后阶段,可能很快就会敲定并开始看到一些浏览器支持。 它是基于谷歌的PIKCloudinary的FUIF图像格式研究。 JPEG XL的格式设置如下两个设计要求这使它成为未来网络的图像格式:

  1. 高品质:在合理的比特率下视觉无损;
  2. 解码速度:多线程解码应该能够在大图像上达到400百万像素/秒左右。

JPEG XL预计将图像大小减少到原始大小的1/3,而不会损失质量。 这将是一个通用的格式,以支持摄影和无摄影图像有效。 因此,那些想要使您的网站在未来更快的人可能需要关注JPEG XL浏览器支持。 对早期行动者的优势是显着的。

4. 区分动态压缩和静态压缩

这可能加快你的网站大时间用最少的努力,可能是我要建议的最简单的技术。 让我解释一下。

网站通常使用一段代码从web到。htaccess或NGINX配置文件为所有可压缩资源启用Gzip或Brotli压缩。 这有效,但为更多优化留下了空间。 网页可以额外节省超过50KB因为更好Brotli压缩. 想学习诀窍吗? 这很简单。 区分动态压缩和静态压缩。

您的web服务器主机的可压缩内容可以分为两种类型,动态和静态。 动态内容是动态生成的,不能预先压缩. HTML页面就是一个例子。 静态内容,如CSS和JS,在一段时间内保持不变。

你可以预压缩这些资源并配置您的服务器为那些预先压缩的文件提供服务。 预压缩允许您使用更高的压缩级别,如Brotli:11,这对于即时压缩来说通常太慢。 如果每次文件更改时预压缩资源对您来说都很困难,您也可以使用像PageCDN这样的第三方服务无缝地为您执行此操作。

5. 减少DNS查找时间

DNS查找时间是将域名解析为其IP地址所花费的时间。 然后使用此IP地址查找服务器在Internet上的位置。

当用户访问页面时,浏览器执行的第一个高延迟任务是域名的DNS查找。 除非浏览器从DNS查询中获取IP地址,否则无法继续连接到服务器并发出HTTP请求。

理想情况下,减少DNS查找时间应该是时间到第一个字节优化策略的一部分,但似乎分页速度工具没有考虑它,因为在许多情况下,网站管理员不可能在这方面进 结果,大量的网站管理员不打扰他们的DNS提供商的性能。

DNS Lookup Time graph

有几种方法可以减少单个用户的DNS查找时间:

  1. 通过使用快速DNS提供商。 如上图所示,DNS基准测试服务DNSPerf.com,一些服务提供的全球平均延迟小于30ms,足以使DNS查找过程难以察觉。
  2. 通过使用更高的TTL缓存DNS响应。 DNS递归解析器可以在全球范围内将这些响应缓存到最终用户附近,并且可以显着减少他们所服务的所有用户的DNS查找时间。

6. 利用浏览器缓存字体

由于插件或主题在您的网站上使用的Google字体,您可能会获得95或98分数而不是100,您可能会认为您可以做的事情并不多,以提高这方面的分数;这个问题有

Google fonts CSS的有效期仅为1天。 这是一个功能而不是一个错误,因为这允许Google字体团队更快地将更改传播给最终用户。 但是,问题是分页速度工具希望您将30days缓存与静态资源一起使用。

如果你有兴趣解决这个浏览器缓存问题,你首先需要通过一个优秀的和详细的字体自托管与第三方托管的比较.

一种解决方案是使用为您下载字体和CSS的工具. 您只需要选择系列,并且您的向后兼容性首选项和可下载文件已准备就绪,您可以在项目内的目录中提取并使用HTML中的CSS来提供字体。 如果你使用WordPress,OMGF插件有没有完全为你做这一切。

您还可以使用简易字体这是一个谷歌字体克隆,但添加了一些CSS实用程序类,使使用字体更容易,并促进快速原型。 幸运的是,这个CDN托管库还修复了浏览器缓存问题。

7. 使用HTTP/2服务器推送

服务器推送是HTTP/2协议的一个特性,它允许web服务器在请求这些文件之前先发制人地将文件推送到浏览器,因为浏览器很快就需要请求这些文件。

因此,当服务器收到对文件的请求时,它将发送此文件以及配置为与触发服务器推送的文件一起发送的一个或多个附加文件。 这消除了后续请求的往返时间,并使资源立即可供浏览器使用。

HTTP/2 Server Push chart

服务器推送是一个很大的性能特性,你也许想试试. 但是,需要注意的一件重要事情是不要在每个请求上积极推送文件。 浏览器可能已经为您提供了资源的缓存副本,并且浏览器必须有空间使用该缓存。 积极地推送太多不需要的资源可能会浪费用户可能在计量连接上的带宽。

如果你想尝试这个,这篇文章详细解释了如何为NGINX设置服务器推送. 这篇关于CSS技巧的文章有帮助设置缓存感知服务器推送设置. 这篇博客文章有很多建议和见解在使用服务器推送。 对于WordPress网站,相同的Easy Speedup插件提供此服务器推送功能。

8. Hsts预加载主机

Preload Your Host chart

HSTS,或HTTP严格传输安全,是一种强制HTTPS的方法,以确保入侵者在用户使用普通的旧HTTP请求页面时没有机会更改请求或响应。

HSTS预载是由Google Chrome团队维护的列表,用于创建此类网站的目录,这些网站为整个域及其子域支持HTTPS。 这个域名列表被大多数主要的浏览器供应商使用,包括Chrome、火狐、Opera、Safari、Edge和IE。 如果一个网站在这个HSTS预加载的网站列表中,浏览器总是与它建立一个安全的连接。 即使用户试图通过未加密的HTTP打开这样的网站,浏览器也会在列表中查找该网站,并将请求更改为HTTPS。

这种技术有几个要求,如HSTS预加载网站所述,但提供了改进的安全性。但是,安全性并不是唯一的好处。如果一个网站有几个旧的反向链接,那么在这个列表中有一个网站可以节省用户从http到HTTPS的不必要的重定向。 HSTS的安全性和性能优势证明了它的使用,前提是您可以满足其要求。

9. 使用不可变缓存

'Cache-Control'是一个HTTP标头,它告诉浏览器文件可以在浏览器中存储多长时间。 对于特定于用户的动态内容(如HTML页面),此标头用于告诉浏览器永远不要缓存此文件。 但是对于像图像,CSS和JS这样的静态内容,这个标题成为一个最重要的显着带宽节省的单一来源,为同一用户的重复访问。

但是,没有适合所有静态资产的单一缓存控制配置。 一些静态资产会发生很大变化,而另一些则根本不会发生变化。 例如,如果一个名为jquery-3.4.1的资源。min,js存在于您的网站上,并且您确信您永远不会编辑此文件,您需要某种方法来告诉浏览器此文件永远不会更改。

幸运的是,随着新的"不可变"指令,你现在有办法告诉浏览器完全相同。 如果浏览器看到'cache-control:immutable'资产的标头集,这告诉浏览器该文件永远不会更改,并且浏览器不应尝试使用条件'If-Modified-Since'请求验证新鲜度文件。

节省往返时间并使缓存的资产可供使用而无需重新验证。 但是,您需要确保此标头未与大多数保持不变但可能每年进行一次或两次编辑的文件一起使用,因为在这种情况下,如果没有适当的缓存无效,编辑可能 最适合此标题指令的是开源库,其版本号作为URL的一部分添加,用户上传的具有唯一id或名称的图像,以及每次更改后获得唯一URL的CSS和JS捆绑包。

10. 利用主机整合

主机整合是PageCDN引入的一种方法,通过删除传统和附带的域分片开销来加速其客户端的网站。 您可以轻松地将此方法用于您自己的网站。 通过这种方法,PageCDN只是利用HTTP/2协议的多路复用功能,但以创新的方式进行。

主机合并与域分片技术相反。 它依赖于HTTP/2来并行传递请求的资源,并通过单个主机(或域)代理所有外部资源,以避免不必要的DNS查找和连接成本。 这节省了连接和DNS查找开销可以加速移动和桌面用户的网站.

PageCDN自动进行主机整合和列出几种方法它最大限度地利用了这种方法。 我们可以通过使用相同的原理在任何网站上实现相同的行为。

  1. 避免过多的开源Cdn。 如果您的站点从多个不同的Cdn加载多个开源库,请尝试从单个CDN加载所有这些库。
  2. 下载并自行托管Google字体。 对于WordPress网站,OMGF插件只需点击几下就能为你完成这项工作。
  3. 离开旧的域分片技术支持并从单个主机加载所有资产,而不是为并行内容交付创建分片。 让HTTP/2为您做并行化。
  4. 如果您的网站使用来自多个主机的静态内容,请考虑通过单个主机代理所有内容。

11. 避免CSS精灵

"CSS精灵"是一种将多个图像组合成一个大图像的技术,并使用CSS在网页上的不同位置显示适当的像素。 几年前,这曾经是一种非常常见的技术。

缺点是,这使得整体页面结构复杂且不太灵活。 此外,即使只需要从中使用箭头,也需要加载大图像,从而增加页面的整体重量。 通过精灵添加另一个图标非常耗时,因为您必须首先修改图像,并确保它不使用网站上其他地方使用的任何像素。 这可能会导致网站设计中的几个错误。 同样,更改显示大图像图标的一个HTML元素的大小将需要您调整大图像上的图标大小,并重新定位图像上出现在该图标之后的所有图标。

这很复杂,几乎没有任何好处,因为HTTP/2可以为您做几乎相同的工作。 HTTP/2可以在同一个连接上复用多个请求和响应。 不使用CSS精灵的另一个好处是,只有这样的图像或图标加载在页面上,这对于页面来说是绝对必要的。 浏览器甚至可以优先考虑折叠图标上方,并将它们留在折叠图像下方以供以后使用,进一步加快页面加载速度。

所以,如果你正在为你的小图像使用"CSS精灵",最好让它们自由加载,让浏览器决定如何优先处理它们的请求,以及一次请求哪一个。

12. 经常更新

WordPress5.5即将发布,并将添加支持原生延迟加载的图像。 因此,依赖插件使用此功能的网站现在将有一个内置于WordPress核心的本机延迟加载解决方案。

延迟加载是一项重要的性能优化,在这种情况下,只需点击一下即可将WordPress更新到下一个版本,即可为数百万个网站提供。

定期更新CMS,插件,主题,工具,服务器软件,语言运行时甚至操作系统都会带来明显的性能改进。 例如,一个新的PHP版本的每一个版本都带来了显着的性能改进,这种趋势似乎在可预见的未来继续与PHP8在地平线上这将附带一个新的JIT编译器. Node也是如此。从每个新版本的V8JavaScript引擎中带来的新速度和内存优化中受益的js。

这同样适用于NGINX或Apache等服务器软件。 服务器开发人员目前正在研究名为HTTP/3的http的下一个主要更新。 HTTP/3承诺使互联网连接更快,更可靠,更安全。 请务必在您最喜欢的服务器发布此功能后应用此更新。

早期版本软件的性能通常不是很好的优化,因为在这个阶段,速度通常不是第一优先。 但随着产品的成熟,开发人员可能会开始投入更多的精力来使其更快地适应更多的用户,并与替代选项更好地竞争。 因此,随着每个软件的新版本可用,更新以避免错误,利用安全修复并使堆栈更快是一个很好的做法。

结论

虽然分页速度工具在建议可能的性能陷阱方面做得非常好,但它留下了一些优化,可用于最大限度地利用可用的工具和技术。 我试图涵盖我所知道的所有这些优化。 我还介绍了一些你可能需要知道的其他事情。 所有这些都将帮助您保持您的网站领先于您的竞争对手。

雷切尔 汉德利
Rachel是一名资深内容作家,在内容营销和SEO方面拥有12年以上的经验。她曾在代理机构工作,为各种品牌制定和执行内容战略,并在内部推动SaaS初创公司的有机增长。