前言

我们在做wordpress速度优化时总可以发现很多插件都提供了css/js合并功能。那么我们真的需要启用这个功能吗？

正文

合并css/js是过去提高Web性能的合理建议（对于HTTP/1.1上的站点） ，如果你的站点使用的是HTTP/2 ，现在就不那么相关了。

当我们将css/js合并为一个或几个文件中，对网站的性能是有益的，

Http/1.1协议原理

因为http/1.1协议的连接数量有限。

当浏览器需要从源服务器获取页面资产时， TCP链接 是为了方便请求和资源的网络传输而开放的。

考虑外部CSS/JS文件，渲染块本质上——它们会阻止页面渲染或阻止其他资源下载。

虽然现代浏览器在处理它们的方式上相当聪明，但它们仍然会带来一个问题，特别是如果你有 多重 CSS/JS文件，因为有更多的机会发生渲染阻塞。WordPress （或任何其他CMS ）也会使情况更糟，因为大多数插件都会添加额外的CSS/JS文件。

使用HTTP/1.1，浏览器可以重复使用 相同的TCP连接 通过Keep Alives按顺序发送多个请求；但是，浏览器通常会打开多个TCP连接，以便向服务器发送更多请求（检索更多页面资产）。

这将导致HTTP/1.1上网站的请求下载速度更快，但需要更多的服务器资源，因为过多的请求可能会使服务器过载。

在建立这些额外连接时，也可能会产生额外的网络成本，和加载时间。

所有这些都意味着 减少HTTP/1.1页面的页面请求总数 在Web性能的背景下是有益的。所有结合CSS/JS文件可以减少页面请求的数量，进而减少到服务器的往返次数，以便更快地检索其他资源。

合并css/js文件的缺点

1.可能产生非常大的文件


大多数网页通常有几个CSS和JS文件。将所有样式表或脚本组合成一个单独的文件可能会产生一个非常大的CSS/JS文件。

即使组合文件被压缩以加快网络传输速度，浏览器也必须在渲染页面之前下载、解析和执行文件——每个单独的步骤本身都可能很慢，而且组合起来可能会显著降低页面的速度。

我们经常看到带有组合CSS/JS文件的页面，这些文件远远超过 2 MB 在 未压缩的 大小。这对浏览器来说是一项巨大的任务，尤其是在中端移动设备等低功耗硬件上。


 2.页面感知性能可能会受到影响

逐步加载的网站通常被认为比最初空白一段时间，然后一次加载所有内容的网站更快。

这是因为逐步加载网站会给你的用户提供视觉反馈，你的页面正在运行中。访问者还可以在页面逐步加载时尽早开始消费内容。

如前所述，CSS/JS被认为是渲染阻塞——除非指定，否则浏览器将首先下载、解析和执行此文件，然后再执行页面代码的其余部分。

在浏览器可以渲染任何内容之前，需要首先处理组合的CSS/JS文件，这可能会阻止页面组件的任何早期渲染。

如果CSS/JS文件是单独的（即，不合并） ，浏览器可能有机会单独处理它们，并在处理它们后立即开始渲染，而不是单个长阻塞事件。

这样，访问者也可以尽早开始看到页面上的内容，让他们放心，你的页面正在运行中

3.CSS/JS组合可能会破坏你的网站

CSS/JS文件在分开时很好，但在组合成单个文件时，它们可能不会很好地发挥。即使东西在视觉上看起来很好，一些引擎盖下的功能可能已经坏了，你可能要到很久以后才会发现。例如，按钮在页面上不起作用，或页面元素消失，或滑块无法按设计工作，等等。

无论使用哪个插件来组合CSS/JS文件，我的建议是 始终广泛测试你的网站 以确保站点功能不会被破坏。如果你发现组合某些CSS/JS文件破坏了站点功能，则需要从组合中排除相关文件

我应该合并我的网站上的CSS/JS文件吗？

什么时候合适合并CSS/JS文件

  • 您的网站使用HTTP/1.1
  • 你有一个简单的网站，没有太多脚本

什么时候不合并CSS/JS文件

  • 你的网站使用HTTP/2
  • 你有一个复杂/大型的网站（即，它使用大量脚本和/或样式表）

结尾

CSS/JS组合是一个速度优化方法，早在HTTP/1.1时代就有意义了，但随着HTTP/2的出现，它不再那么重要了。所以建议不使用css/js文件合并。

更多的wordpress优化教程

使用Redis缓存优化wordpress速度：https://opau.cn/archives/59.html

wordpress动静分离教程：https://opau.cn/archives/169.html