网页性能优化笔记

优化工具：https://gtmetrix.com/，根据建议进行修改。

以“http://www.amate.cn/xiaoxue/563.html”为例，测出来网页大小为2.26M，加载时间为5.2S，请求64次。

pagespeed优化建议

• 图片无损压缩
  • 目前已经利用七牛云的图片样式功能，将jpg转成webp格式，大幅度降低图片尺寸。(!加参数)
• 提供缩放图像
  • 目前已经利用七牛云的图片处理功能，自动生成合适尺寸的webp缩略图。(?加参数)
• 设置浏览器缓存
  • 在根目录.htaccess文件中添加以下代码

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/x-font-woff "access plus 1 month"
    ExpiresByType font/woff "access plus 1 month"
    ExpiresByType font/woff2 "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
    </IfModule>
    # END WordPress

• 延迟解析js
  • 在function.php文件添加以下代码，实现自动添加defer

    /*延迟解析js，防止后台编辑器tinymce报错*/
    function js_defer_attr($tag){
        # 不添加异步加载属性的例外列表（修改js文件名为你的网站js文件名）
        $scripts_to_exclude = array('jquery.js', 'vendor', 'tinymce');
        foreach($scripts_to_exclude as $exclude_script){
            if(true == strpos($tag, $exclude_script ) )
            return $tag;
        }
        # 添加异步加载属性到其余js文件
        return str_replace( ' src', ' defer="defer" src', $tag );
    }
    add_filter( 'script_loader_tag', 'js_defer_attr', 10 );

测出来网页大小为1.07M，加载时间7.2S，请求63次。

主要还是网页变小了，从2.26M→1.07M。

YSlow优化建议

• 配置ETags
  • 在根目录.htaccess文件添加以下代码

    FileETag INode MTime Size

    #加在<IfModule mod_rewrite.c>外面

遗留问题

• 在线充值页面头像不显示
  • 意外收获，将JavaScript延迟加载（排除jquery），头像可以正常显示
• 默认头像始终从cn.gravatar.com加载
  • 替换成镜像域名

    //avatar头像加速
    function replace_gravatar($avatar) {
        $avatar = str_replace(array("//gravatar.com/", "//secure.gravatar.com/", "//www.gravatar.com/", "//0.gravatar.com/", "//1.gravatar.com/", "//2.gravatar.com/", "//cn.gravatar.com/"), "//sdn.geekzu.org/", $avatar);
        return $avatar;
    }
    add_filter( 'get_avatar', 'replace_gravatar' );