正文

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

教程总目录:WordPress终极优化指南

在页面顶部的JS(JavaScript)和CSS未下载执行前会阻止网页的渲染过程。

这个影响比较大,好些网站打开后一直转圈,然后等了几秒后一下好了就是这个原因。在网页调用的js等文件没有下载并且执行之前,网页一直是等待渲染状态。

特别是一些挂着广告联盟JS广告的网站,他们的JS源站不是一定靠谱的,我见到了好些因为广告阻塞了网页加载过程。

面对此问题一般是采用异步加载+延时加载的方式。

1.使用Async Javascript Plugin插件

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

应用商店可直接搜索安装。

安装完毕启用,然后在左侧设置–Async JavasSript插件设置。在设置菜单里点击启用。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

下面是插件的详细使用说明:

快速设置:一次延时加载所有脚本

以下设置可以一键延时所有脚本。建议先使用Apple Defer(jQery Excluded)进行测试,因为许多脚本依赖jQuery,如果jQuery没有加载的话 其他脚本也会加载失败。

理想的设置是jQuery保持异步加载,然后其他脚本延时加载

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

异步加载JS(Javascript)

在下方设置JS是延时加载还是异步加载,具体使用哪个根据你的实际网页情况来决定。建议使用默认的Defer。

如果你的网页有很多JS的话,就不适合使用延时了,应该考虑进行异步加载Async。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

jQuery设置

jQuery建议选择异步加载Async。因为其他很多脚本都依赖于jQuery。但是一些网站jQuery采用异步加载可能会出现问题,这时候我们将jQuery从优化项中排除即可。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

通过上面3个设置,就可以控制需要同步加载、异步加载、延时加载的脚本了。如果上面的简单设置没有效果的话,还可以手动输入脚本名称优化其加载过程。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

如何寻找需要优化的脚本?

有时候脚本的加载方式优化会导致一些问题,我们可以选择其中比较重要的脚本进行优化操作。

首先是找出所有网站加载的脚本,然后使用测速工具,比如浏览器的F12控制台、Pingdom网页测速等等。

然后在测速结果上筛选出来所有js文件,点击可以查看js的详细信息。

排除插件中的脚本

使用下方设置,可以在优化中排除插件中的脚本,避免受到优化过程的影响。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

排除主题中的脚本

使用下方设置,可以排除所有主题目录下的脚本,避免受优化过程影响。

请注意,很多影响速度的脚本,恰恰是主题中所调用的脚本,一些开发者的水平不够,开发时候并没有考虑全面。所以请谨慎思考后再优化。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

在wordprss中加载脚本的推荐方法是使用wp_enqueue_script函数。但是因为一些原因,一些主题和插件会绕过此而加载脚本。如果你安装了这类主题或者插件,就可以在下方设置中显示他们加载的脚本,并且可以对其进行优化。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

设置完成后,记得点击保存按钮,保存更改。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

 

除了以上的插件我们还可以使用其插件来优化脚本的加载。

2.使用W3 TOTAL CACHE插件

W3 TOTAL CACHE是一个全面的,一体化的WordPress缓存和优化解决方案

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

对于没有经验的人来说,缓存会将一些文件存储在访客的浏览器下,这样后续的访问过程就可以减少许多加载过程。

除了缓存之外W3 Total Cache还可以优化我们网页中阻止网页渲染的JS和CSS。

去除阻止网页渲染的JS

插件安装完成后打开性能–常规设置,在里面找到Minify部分。勾选Enabled并选择Manual模式:

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

保存设置后,进入浏览器控制台Performance>Minify,然后查找JS部分。

给Before </ head> 和 After <body>设置选择使用“defer”设置。

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

然后向下找到JS管理JS file management部分,选择你正在使用的主题,单机下面的添加脚本按钮Add a Script

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

想要准确找到JS脚本地址,可以使用谷歌的网页检测工具Google PageSpeed Insights。然后运行网站分析,等待出来结果时找到需要修复的部分,查看如何修复,这里面会显示脚本的地址。直接把脚本地址添加进去即可。

添加时后面的Template和Embed Location设置不要动。然后保存即可。

去除组织渲染的CSS

找到插件的CSS文件管理CSS file management部分,选择正在使用的主题

WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScriptWordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

然后就是重复跟上面JS文件一样的排查优化过程,完成后记得保存。然后清除本地缓存访问看看,再使用在线测速工具看看。