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

作者 : King 本文共2044个字,预计阅读时间需要6分钟 发布时间: 2024-10-4 共18人阅读

CSS阻塞渲染JS阻塞渲染WordPress优化修复阻止网页渲染的CSS和JavaScript

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

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

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

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

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

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

1.使用Async Javascript Plugin插件

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

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

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

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

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

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

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

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

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

异步加载JS(Javascript)

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

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

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

jQuery设置

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

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

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

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

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

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

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

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

排除插件中的脚本

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

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

排除主题中的脚本

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

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

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

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

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

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

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

 

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

2.使用W3 TOTAL CACHE插件

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

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

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

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

去除阻止网页渲染的JS

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

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

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

给Before 和 After 设置选择使用“defer”设置。

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

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

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

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

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

去除组织渲染的CSS

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

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

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

下载仅供下载体验和测试学习,不得商用和正当使用。

[ppwp passwords=”zhishitu.cn”]

下载体验

应版权要求,禁止分享,敬请谅解,有问题务必找客服哈。

如何获取解压密码

有问题找客服哈,并领取学习福利!

[/ppwp]

点击下载

小鱼网是一个美好的开源学习社区,学习编程,学习WordPress,下载WordPress插件主题,
小鱼网 » WordPress终极优化指南–修复阻止网页渲染的CSS和JavaScript

常见问题FAQ

发表回复

分享最优质的学习资料

立即查看 了解详情