WordPress 建站速度优化之Autoptimize

最近迷上了https://pagespeed.web.dev/跑分，跑分高意味着是优质网页，有更高的搜索引擎展示机会。因为加了Google Adsense的原因，原来这个主题得分不高，桌面端分数50-60分，特别是手机端只有30-40分。还是要好好优化以下网站，wordpress里面有很多优化软件，若wprocket、WP-Optimize、LiteSpeed Cache、W3 Total Cache等等，应该说都不错，只是高级功能需要收费。这些软件基本我都使用过，总体感觉最适合我的还是Autoptimize，简单且和其他软件配合较好。

看了很多中文Autoptimize的教程，这些教程基本都是你抄我我抄你，或者直接翻译一篇国外的文章，千篇一律。按它们的设置可以说优化效果比较少，白瞎了一款好软件。

Autoptimize通过优化HTML代码、合并或内联CSS代码、延迟JS代码，减少tcp连接等，优化网页，使网页更快的展现在访客面前，和 WP Super Cache 插件一起使用效果更好。使用后本站现在现在桌面端跑分90以上，手机端也有70分以上。除了使用这个对adsense的优化也是能获得高分的重要原因之一，以后再做介绍。

使用前可以在官网https://cn.wordpress.org/plugins/autoptimize/ 看看使用说明及答疑。

下面介绍本网站怎么处理的

一、JavaScript 选项

优化 JavaScript 代码(Optimize JavaScript Code)这里是优化JS的总开关，我们选择打开，后面又有两个互斥选项，聚合js(Aggregate JS-files)和延迟js(Do not aggregate but defer)。

一般来说你的Nginx超文本传输协议用的http/1.1建议选择聚合js；如果用的http/2，建议选择延迟js。现在2023年，自己用vps建站Nginx的一般都配置http/2协议，一些虚拟主机商可能用的还是老旧http/1.1协议。

http/2支持多路复用，即使是多个js文件也能同时下载，你聚合了js反而延长了下载时间。延迟js也就是异步加载js，避免js阻塞导致首屏展示缓慢，渲染阻塞这也是pagespeed评分的最重要因素之一。

内联js也延迟(Also defer inline JS)看情况要不要勾选，一般选上没有什么问题，如果选上网页异常则应该取消。

从 Autoptimize 中排除脚本(Exclude scripts from Autoptimize)：交互的js脚本一般被异步没有什么反作用，但是有些js脚本不应该被异步执行，如本例中的enlighterjs.min.js，它被异步后，网页已经渲染出来的，再执行js已经没有什么意义了。不同的js脚本用英文,分割。有的wordpress主题异步js后导致网页异常，则可能应该排除jquery和wp-content和wp-includes下面的一些静态js：

,/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js,(?:/wp-content/|/wp-includes/)(.*

二、CSS 选项

css也是影响网页速度的重要原因，尤其是一些css会阻塞首屏渲染。首屏渲染(First Contentful Paint)就是打开网页后无任何互动操作如滚动点击等展现出的网页界面。

基于前述http/2的原因，这里同样不选择聚合css文件(Aggregate CSS-files)，因为意义不大。

选择 消除渲染阻塞 CSS(Eliminate render-blocking CSS)。打开网页地址，浏览器会基于完整的css文件渲染网页，由于完整的css文件大且可能有很多特效，打开网页看起来就会比较慢，消除渲染阻塞 CSS就是为了解决这个问题而出的。

要消除渲染阻塞 CSS，我们需要关键CSS(CriticalCSS )，也就是用最少的css展示首屏内容，使用户觉得快。等用户交互操作如滚动屏幕再用完整的css展示。这也是基本上所有Wordpress优化软件提供的收费项目。Autoptimize提供了手动提交关键css，自动生成关键css才是收费的，这也是其他优化软件不具备的优势。

打开 Critical CSS选项卡，这里提供了手动或自动关键css。我们需要为不同的界面准备不同的关键css，因为主页、列表页、文章页等等各不相同。点击 Add New Rule增加手动规则。规则类型可以选择路径或条件标签（主页、列表页、作者页等）。然后填入关键css。

那么问题来了，关键css怎么生成呢。我们可以用下面这个网站或谷歌搜索CriticalCSS 。

https://jonassebastianohlsson.com/criticalpathcssgenerator/

先填入你的网站地址，第二步再填入你的完整css，第三步点击生成关键css。

对于主页、列表页、文章页分别填入不同的URL，完整css填入一次无需再动，这样我们就生成了不同类型的关键CSS文件。

如果你做了上述操作后，不要忘了在消除渲染阻塞 CSS下面框里输入下面的，让你的关键css生效。

above the fold CSS

三、HTML 选项及杂项选项

这些就根据情况选择了，一般都全部选上。

四、Images选项卡

延迟加载图像，图像延迟加载将延迟不可见图像的加载，以允许浏览器首先以最佳方式加载“首屏”页面的所有资源。这个选项看情况选择，可以让一些不可见的图像延迟加载，我这里选上就和主题有冲突，网页会随机性的不能渲染部分图像。Autoptimize官方论坛上也有很多人有这个问题。

五、关键css及其他Extra

关键css在上面已经介绍了，其他(Extra)这里面根据情况选择即可。

预连接到第三方域（高级用户）Preconnect to 3rd party domains，添加您希望浏览器预连接到的第三方域，以逗号分隔。确保包含正确的协议（HTTP 或 HTTPS）。网页里有需要第三方网站的资源的话，可以在此填入网站地址，预先连接。如图片CDN的域名。

预加载特定请求（高级用户）Preload specific requests，以逗号分隔的列表，包含要预加载资源的完整 URL。有需要预先加载的资源再这里写，如优先度较高的js脚本等提前加载而不是异步加载。

异步 Javascript 文件（高级用户）Async Javascript-files，应加载标志的本地或第三方 JS 文件的逗号分隔列表async。对于一些第三方脚本本来没有异步的，但我们需要异步的可以在此填写。

最后

完成优化后可以跑个分看看，看看情况有没有改观。对得分影响较大的是Total Blocking Time也就是总阻塞时间和First Contentful Paint首屏绘制。这都是首屏由于CSS、JS阻塞不能立即展示造成的，如果自动adsense广告的话影响更大，因为adsense虽然异步了，但是由于要自动展示广告会阻塞页面绘制，得分自然不会高到哪里。用Cloudflare的话建议将Rocket Loader™关闭，不然可能有反作用。

还有个性能测试网站https://www.webpagetest.org/也不错，还能用动画展示渲染过程，就是每月有次数限制。