Skip to content

WordPress-修复阻止网页渲染的CSS和JavaScript

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

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

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

1.使用Async Javascript Plugin插件

应用商店可直接搜索安装。
gn_async_javascript_plugin_wordpress
安装完毕启用,然后在左侧设置--Async JavasSript插件设置。在设置菜单里点击启用
gn_async_javascript_plugin_wordpress_1

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

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

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

异步加载JS(Javascript)

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

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

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

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

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

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

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

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

排除插件中的脚本

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

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

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

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

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

2.使用W3 TOTAL CACHE插件

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

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

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

去除阻止网页渲染的JS

插件安装完成后打开性能--常规设置,在里面找到Minify部分。勾选Enabled并选择Manual模式:
gn_wordpress_w3_total_cache_01
保存设置后,进入浏览器控制台Performance>Minify,然后查找JS部分。

给Before </ head> 和 After设置选择使用defer设置。
gn_wordpress_w3_total_cache_02
然后向下找到JS管理JS file management部分,选择你正在使用的主题,单机下面的添加脚本按钮Add a Script
gn_wordpress_w3_total_cache_03
想要准确找到JS脚本地址,可以使用谷歌的网页检测工具Google PageSpeed Insights。然后运行网站分析,等待出来结果时找到需要修复的部分,查看如何修复,这里面会显示脚本的地址。直接把脚本地址添加进去即可。

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

去除组织渲染的CSS

找到插件的CSS文件管理CSS file management部分,选择正在使用的主题
gn_wordpress_w3_total_cache_04
然后就是重复跟上面JS文件一样的排查优化过程,完成后记得保存。然后清除本地缓存访问看看,再使用在线测速工具看看。

来源:https://www.cheshirex.com/1794.html

Published inwordpress

Be First to Comment

    发表评论

    电子邮件地址不会被公开。