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>

参考链接

• https://www.aimeesign.com/articles/css-js-loading-lazy-method-website-performance-optimization/