Wordpress插件 | 使用Autoptimize优化网站访问速度

最新推荐文章于 2024-10-02 16:26:58 发布

老K推荐

最新推荐文章于 2024-10-02 16:26:58 发布

阅读量3.2k

点赞数

分类专栏： wordpress 文章标签： wordpress插件谷歌插件技巧

本文链接：https://blog.csdn.net/liuxuekai/article/details/52028843

版权

wordpress 专栏收录该内容

47 篇文章

订阅专栏

Autoptimize插件可以让站点在Google PageSpeed Insights测试中获得更高的分数，更高的分数通常代表更快的网站访问速度和更好的用户体验。与之类似的WP Minify Fix和Better WP Minify插件也不错，不过需要付出更多的努力让站点不报javascript错误，用户界面也稍显复杂。

简单的用户界面

Autoptimize的UI设计比较简洁，默认展示给用户的是简单选项，一路点优化就好。如果你的站点代码规范，javascript事件在DOM加载完成后执行，外链js文件的依赖关系正确，css文件没有各种错误，这些简单选项就能让你获得更好的Pagespeed得分。

Autoptimize-options

Eliminate render-blocking JavaScript and CSS in above-the-fold content

这是Pagespeed测试里大部分网站都会被提醒的东西，如果满足了这一条，可以很好的提高分数和实际用户体验。我们的Autoptimize插件正好提供了这一项功能，这是其他minify插件缺失的东西。

点击Show Advanced Settings按钮展开隐藏选项，找到inline and Defer CSS这一项。按照谷歌的说法，你应该在这里输入above-the-fold content的样式.

Above-the-fold content是指用户打开你站点时首先看到的部分。既然用户开始只能看到这一区域，那么其它区域的样式有没有加载就不那么重要了，先把这个区域渲染完，其它样式慢慢加载。

inline-css

现实是这样做确实能提升用户体验，让用户更快的看到你站点开始加载。至于原因，可以这样形象的理解

负责内容的DOM要去见访客，这时Javascript蹦出来说它也要去，让DOM等一下。
而负责样式的CSS必须与Javascript同行。
结果访客只能望穿秋水，等着CSS加载完、Javascript执行完，最后才等到姗姗来迟的DOM。

实际情况比这个要复杂，但简单的说访客要看的就是网页内容（DOM），javascript和css并不是必须的，如果让javascript异步加载，不那么重要的css延迟加载，那看到网页内容的时间就会提前很多，即使网页总的下载时间不变，访客的也会感觉网站好像打开的快了。

可以借用谷歌的一张图来说明这个问题

critical-rendering-path

给script标签添加async或者defer属性，可以eliminate render-blocking JavaScript
将重要的css用style标签在head里输出，用javascript输出原本的link标签，可以eliminate render-blocking CSS

async和defer的区别是执行脚本的时间不同，具体可以看这篇文章的解释。

如果想详细了解这方面的内容，可以搜索有关critical rendering path的内容，推荐谷歌的介绍：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Above-the-fold content的残酷现实

对静态站和不太复杂的动态站来说，这个方法很好。到WordPress这里就郁闷了，并不是每个页面头部都长一个样，不同的设备最先看到的内容也不一样，导致Above-the-fold content的样式很难定义，要是网站样式经常变就更别提多麻烦了。所以这种方法可能不适合非常复杂的站点，但不代表它没有用处。

对我来说，与其考虑Above-the-fold content的样式，不如考虑哪些css是渲染网页所必须的（critical css）。比如每个页面都有的layout、header、footer、menu这些。而WP Caption、 WP Gallery、alighment的样式以及某个模板特有的样式，完全可以延迟加载。带着这个想法开发站点，相信会有所帮助。

如何使用Inline and Defer CSS” Option

简单的说，请使用Critical Path CSS Generator这个工具。
详细的说，请看文章How to Use the Autoptimize “Inline and Defer CSS” Option。

Pagespeed分数和用户体验

得分和用户体验并不能完全划等号，你只需要满足google的要求就能获得好的得分，但现实世界的情况要复杂的多，你要面对很多恼人的问题，比如：

1. 只在某些页面加载的js和css文件

Autoptimize会压缩当前页面里所有的js和css，甚至inline的样式和脚本。当每个页面的状况都不相同时，就会产生很多缓存文件，比如用户访问首页时下载了style-1.css，访问次级页面时因为多了一个尽在该页面加载的css，就要重新下载style-2.css，这两个文件大部分内容是重复的。

用pagespeed测试时两个页面都可以获得相对较好的分数，但实际上用户的浏览器缓存没有发挥应有的作用，这不是一个好的体验。

2. 异步加载脚本导致网站出问题

这是使用minify插件最容易出现的错误，不排除是站点写的有问题，但至少说明不管三七二十一全部合并压缩不是个很好的方法。

幸好Autoptimize不是一刀切的，还提供了一些变通方法。

仔细阅读Autoptimize的FAQ

地址是这里https://wordpress.org/plugins/autoptimize/faq/，插件作者经常辛苦的写了一堆说明却发现用户还在不停的问同样的问题。这个FAQ提供了很多有用的信息，比如

1. 禁止压缩inline javascript

 
        add_filter( 
        'autoptimize_js_include_inline' 
        , 
        'readme_ao_js_include_inline' 
        ,10,1); 
       
        function  
        readme_ao_js_include_inline() { 
       
        return  
        false; 
       
        }

2. 禁止压缩inline css

 
        add_filter( 
        'autoptimize_css_include_inline' 
        , 
        'readme_ao_css_include_inline' 
        ,10,1); 
       
        function  
        readme_ao_css_include_inline() { 
       
        return  
        false; 
       
        }