WordPress优化–合并CSS和JS文件

2024年12月26日教程大全Autoptimize,Rocket,wordpress,WordPress优化,WP Rocket

教程总目录:WordPress速度优化菜鸟实用版

合并CSS和JS文件有很多种方式,常规的页面缓存插件如 WP-Rocket 等插件都自带此功能。也有一些独立的插件比如 Autoptimize

合并资源使用那个插件都行,下面说下在资源合并的过程需要注意的问题。

本站使用的是 WP Rocket 插件,不过 WP-Rocket 这个插件开发者通常有自己的想法。不一定会按照您的操作生效。

所以这里就以 Autoptimize 插件为例说一下。

关于为什么压缩合并这些文件可以查看文章:WordPress优化–网站速度的检测与原因判断

本文目录

  • 1. 开启CSS和JS文件合并
  • 2. 确认需要优化的资源

开启CSS和JS文件合并

不同插件的开启方式都大同小异,基本都包括了压缩、合并以及排除部分资源的功能。

一般建议开启压缩、合并、和异步加载。

 

合并前

合并后

可以看到页面降低了5个资源请求数。

确认需要优化的资源

这是最重要的一步,也是我们需要反复调整的一步操作。我们需要不断的尝试来确认那些内容你可以合并、移除、延迟加载。

首先我们开启的默认合并选项,然后在浏览器进入F12开发者选项测试一下,并检查页面加载是否异常。

如果页面有异常,比如渲染出错,CSS未正确加载等情况,我们可以查看对应页面的代码,看使用的那些资源,然后在合并选项页面做排除。

默认 Autoptimize 是排除了下列资源的合并压缩优化:

JS:, wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.min.js

CSS:, admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/

我们将要排除的资源在默认的后面加上地址就可以了,中间使用英文逗号隔开。

 

这里哪些资源需要排除很难写,我手上找不到可以作为案例讲的网站。

而且不同网站的情况也不一样,一些主题作者写的不规范,需要一点一点的测试排查。

 

很多优化插件里都说HTTP/2的时代无需做资源合并,这里给大家说一下,目前开启资源压缩合并依然是可以有效提升我们的网页加载速度。而且是您能够切身感受到的速度提升。

可以查看这个博主做的测试:HTTP2.0还需要做请求合并吗

发表评论

Create a stunning AI website today!