教程相关

WordPress通过简单代码使JS异步加载以加快网页呈现

微信扫一扫,分享到朋友圈

WordPress通过简单代码使JS异步加载以加快网页呈现
收藏 0 0

WordPress是目前最受欢迎的博客程序之一,因此网页呈现速度成为了读者是否愿意阅读的重要因素之一。本文将通过简单的代码来使WordPress加载所需的JS文件异步加载以达到加快呈现网页的目的。

JS异步加载优点

可加快网页呈现速度,给读者对博客留下良好的印象

JS异步加载缺点

大部分主题需要通过JS文件来呈现主题效果,加入JS异步加载后会暂时使主题部分页面效果消失,但JS文件加载完后主题效果依旧存在

JS异步加载代码

[code]add_filter( ‘clean_url’, ‘async_script’,11,1);
function async_script( $url ){
if(strpos($url, ‘.js’) === false){
return $url;
}
return “$url’ async=’async”;
}; [/code]

使用方法

将上述代码粘贴到WordPress后台->外观->编辑->functions.php最后,保存即可生效,记得选好要修改的主题!

效果对比(主题不同效果不同,仅供参考)

开启前:

图中显示DOM加载时间可以看作是从开始加载到呈现页面的时间(这种解释不大准确,希望有大佬能提供更好的解释方法)

开启后:

可以看出启用JS异步加载后页面呈现时间减少了将近一半

启用AMP后开启异步加载的方法

很多网站为了带给用户良好的加载速度会启用AMP以使谷歌直接将其AMP处理后的网页缓存到谷歌服务器,从而达到类似秒开的目的。AMP的核心部件是存放于amppoject服务器的v0.js的文件,该文件会在处理时自动添加async代码以异步加载,然而该JS文件链接会在通过WordPress处理后异常,因此添加判断代码就十分重要了。

只需将 if(strpos($url, '.js') === false){ 修改为 if(strpos($url, '.js') === false or strpos($url, 'ampproject') !== false){ 即可

小总结

本文只是介绍了WordPress前端优化的一种简单方法,还有很多可以进行的优化方式,比如减少CSS文件数,设置静态文件地址等。这里介绍一位优化大神Neo喵,博客地址为 https://blog.nfz.moe 。有兴趣的可以去他那里学习更多的方式。

我还没有学会写个人说明!
上一篇

教程:使用Python实现微信打印机器人

下一篇

通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

类别小工具