WordPress – 网站性能优化,延迟加载css和js文件
当访客使用浏览器打开我们的网站时,我们的网站由于功能需要会加载很多的css和js文件,如果这些资源的加载方式不合适,那么会导致用户打开网站的速度变慢,当用户在3秒内没有正常的打开你的网站,那么会造成网站出现较高的跳出率。除了选择好的服务器和网络线路之外,合理的加载网站的css和js文件也是影响网站速度和性能的重要因素。
我们在WordPress中可以通过:
- 延迟加载非必要的css
- 延迟或者异步加载js
这两种手段来加快网站的速度,下面就介绍如何在WordPress中实现延迟或者异步加载js文件。
1 延迟加载非必要的css
延迟加载非必要的css文件可以使用WordPress的style_loader_tag
钩子来实现,在主题的function.php中加入以下代码,
/**
* 延迟加载css
*/
add_filter('style_loader_tag', function ($html, $handle, $href, $media) {
if(!is_admin()){
#不延迟加载的css列表 (login.min,style...修改为你不想延迟加载的文件名)
#$styles_to_exclude = array('erphpdown.css');
$styles_to_exclude = array();
foreach($styles_to_exclude as $exclude_style){
if(true == strpos($html, $exclude_style)) return $html;
}
$html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">' . '<link rel="stylesheet" href="' . $href . '" id="' . $handle . '" media="print" onload="this.media=\'all\'">' . '<noscript>' . $html . '</noscript>';
}
return $html;
}, 10, 4);
使用上述方法除了可以作用于网站已有的的css文件之外,也同样作用于我们后期添加的新的css文件。
使用上述代码之后css的加载代码变成了:
<link rel="preload" href="#" as="style" id="#" media="#" onload="this.onload=null;this.rel='stylesheet'">
<link href="#" id="#" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="#" id="#" media="#"></noscript>
link rel="preload" as="style"
表示异步请求css,但仅支持 Chrome, Safari, Edge 等浏览器,添加第二个link
是因为 Firefox 不支持 preload 属性,如果浏览器支持 preload 特性,它将只使用第一行代码,如果它不支持 preload,那么它将获取具有print媒体属性的CSS 文件并异步加载它。
onload
属性表示在完成时加载css。
noscript
标签表示当浏览器不支持javascript,仍然可以加载css,防止使用老的浏览器的用户看到没有css的网页。
2 延迟或者异步加载js
延迟或者异步加载js主要是通过为js文件增加async
和defer
这两个属性来实现的,目前所有的主流的浏览器均已支持。
下面是async
和defer
属性的作用:
- async:即异步加载脚本,浏览器在继续解析 HTML 文档的同时异步下载脚本。当脚本完成下载时,即开始执行脚本,同时阻止 HTML 解析。
- defer:即延迟加载脚本,浏览器在继续解析 HTML 文档的同时异步下载脚本。在 HTML 解析完成之前,脚本不会执行。
在WordPress中我们可以通过script_loader_tag
为网站中的js增加async
和defer
属性,在主题的function.php中加入以下代码,
/**
* 延迟或者异步加载js
*/
add_filter('script_loader_tag', function ($tag) {
#defer属性:即延迟加载脚本,浏览器在继续解析 HTML 文档的同时异步下载脚本。在 HTML 解析完成之前,脚本不会执行
#async属性:异步加载脚本,浏览器在继续解析 HTML 文档的同时异步下载脚本。当脚本完成下载时,即开始执行脚本,同时阻止 HTML 解析
#添加 defer 属性的 js 列表,自行修改为你的 js 文件名
$scripts_to_defer = array(
'katex.min.js',
'emojify.min.js',
'clipboard.min.js',
'prism-core.min.js',
'prism-autoloader.min.js',
'prism-toolbar.min.js',
'prism-line-numbers.min.js',
'prism-show-language.min.js',
'prism-copy-to-clipboard.min.js',
'frontstyle.min.js',
'resizeEnd.js',
'ajax-comment.js',
'baidushare.js',
'plugins.min.js',
'wow.min.js',
);
#添加 async 属性的 js 列表,自行修改为你自己的 js 文件名
$scripts_to_async = array(
'bootstrap.min.js',
'jquery-migrate.min.js',
'suxingme.js',
'lazyload.min.js',
'erphpdown.js',
);
foreach($scripts_to_defer as $defer_script){
if(true == strpos($tag, $defer_script)) return str_replace(' src', ' defer src', $tag);
}
foreach($scripts_to_async as $async_script){
if(true == strpos($tag, $async_script)) return str_replace(' src', ' async src', $tag);
}
return $tag;
}, 10);
修改后的js引入语句如下
<script type="text/javascript" async="" src="https://www.stubbornhuang.com/wp-content/themes/Grace8.2CrackedVersion/js/lazyload.min.js?ver=Grace8" id="lazyload-js"></script>
<script type="text/javascript" defer="" src="https://www.stubbornhuang.com/wp-content/themes/Grace8.2CrackedVersion/js/plugins.min.js?ver=Grace8" id="plugins-js"></script>
参考链接
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:WordPress – 网站性能优化,延迟加载css和js文件
原文链接:https://www.stubbornhuang.com/2725/
发布于:2023年07月14日 9:27:28
修改于:2023年07月14日 9:27:28
当前分类随机文章推荐
- WordPress - 修复Markdown编辑器插件WP-Editor.md在插入php代码块后代码中的$符号无法正常显示的问题 阅读1462次,点赞0次
- WordPress - get_footer函数,加载主题底部页脚footer模板 阅读1092次,点赞0次
- WordPress - 非管理员登录后台直接重定向到指定页面 阅读1138次,点赞0次
- WordPress - 利用Revolvermaps在首页实时显示访客3D地球 阅读3634次,点赞1次
- WordPress - 在用户注册页面显示自定义提示信息 阅读1822次,点赞0次
- WordPress - 插件OSS Upload与WP Editor.md/WP Githuber MD插件冲突,导致katex公式不正确显示的问题 阅读3449次,点赞0次
- WordPress - 插件WP Editor.md 在网站更换为https后无法正确加载 阅读4325次,点赞0次
- WordPress - 添加网页三角网粒子背景 Canvas-nest.js 阅读3785次,点赞0次
- WordPress - $Post WP_Post对象的属性 阅读2854次,点赞0次
- WordPress - 在文章被复制时弹出弹窗提示转载注明原创 阅读3433次,点赞2次
全站随机文章推荐
- 资源分享 – Fluid Simulation for Computer Graphics, Second Edition英文高清PDF下载 阅读4522次,点赞0次
- TensorRT - Using an engine plan file across different models of devices is not recommended and is likely to affect performance or even cause errors 阅读589次,点赞0次
- 资源分享 - 3D游戏与计算机图形学中的数学方法 第3版 , Mathematics for 3D Game Programming and Computer Graphics, Third Edition 中文版PDF下载 阅读1942次,点赞0次
- WordPress - 在浏览器的console输出信息 阅读4231次,点赞0次
- TensorRT - Windows下TensorRT下载与配置 阅读2016次,点赞0次
- 书籍翻译 – Fundamentals of Computer Graphics, Fourth Edition,第2章 Miscellaneous Math中文翻译 阅读3308次,点赞19次
- 工具软件推荐 - 好用的免费电子书格式转换器Neat Converter 阅读1205次,点赞0次
- 资源分享 - GPU Gems 1 - Programming Techniques, Tips and Tricks for Real-Time Graphics英文高清PDF下载 阅读3823次,点赞0次
- 书籍翻译 – Fundamentals of Computer Graphics, Fourth Edition,第12章 Data Structures for Graphics中文翻译 阅读1652次,点赞4次
- 资源分享 - ShaderX3 - Advanced Rendering with DirectX and OpenGL 英文高清PDF下载 阅读2576次,点赞0次
评论
169