WordPress 主题 Gravatar 头像优化加速与本地缓存

WordPress 主题 Gravatar 头像在未进行优化的状态下,其 img 加载形式如下:
<img alt="" src="http://1.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=50&d=mm&r=g" srcset="http://1.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=100&d=mm&r=g 2x" class="avatar avatar-50 photo" width="50" height="50">
以上的 img Gravtar 头像加载地址为:
http://1.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=50&d=mm&r=g

存在的问题

在为进行优化时存在以下问题:
1、头像地址请求方式为Http,在启用了HTTPS的网站上会被标记为不安全;
2、此服务器在国内加载速度慢,当加载头像过多时,会严重拖慢网站的加载速度,影响用户体验。

解决办法

为了解决以上问题,我们进行如下的两种优化方式:
1、利用正则表达式替换头像加载地址;
2、将头像进行本地缓存,加快速度;

代码一

分析头像加载地址,将原先的头像加载地址中的http://1.gravatar.com/avatar/替换为https://cn.gravatar.com/avatar/;
代码如下:

/**
 * Gravatar 加载服务器更换
 *
 * @author 智慧宫
 * @link http://lerm.net
 */
function lerm_replace_avatar($avatar) {
    $regexp ='/https?.*?\/avatar\//i';//
    $replacement ='https://cn.gravatar.com/avatar/';
    $avatar = preg_replace($regexp, $replacement , $avatar);
    return $avatar;  
}
add_filter('get_avatar', 'lerm_replace_avatar');

利用以上的这段代码利用正则表达式替换的 WordPress 主题 Gravatar 加载路径,可以明显加快头像加载速度,优化后的 img 标签如下:
<img alt="" src="https://cn.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=50&d=mm&r=g" srcset="https://cn.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=100&d=mm&r=g 2x" class="avatar avatar-50 photo" width="50" height="50">

代码二

上面的代码通过替换头像加载服务器来提高网站的加载速度,还有一种办法办法是将Gravatar 头像缓存在头题文件夹中,当用户第一次访问时将头像进行缓存,在第二次访问时,头像就会从主题文件夹下的缓存目录加载,这样大大提高了网站的加载速度,代码如下:

/**
 * Gravatar 头像本地缓存
 *
 * @author 智慧宫
 * @link http://lerm.net
 */
function lerm_avatar_cache( $avatar ){
    $tmp  = strpos( $avatar, 'http' );
    $g    = substr( $avatar, $tmp, strpos( $avatar, '\'', $tmp ) - $tmp );
    $tmp  = strpos( $g, 'avatar/' ) + 7;
    $f    = substr( $g, $tmp, strpos( $g, '?', $tmp ) - $tmp );//匹配图片名称
    $e    = get_template_directory() . '/assets/avatar/' . $f . '.png';//图片缓存路径
    $t    = 604800; //缓存天数
    if( !is_file( $e ) || ( time() - filemtime( $e ) ) > $t ) copy( htmlspecialchars_decode( $g ), $e );
    else $avatar = strtr( $avatar, array( $g => get_template_directory_uri() . '/assets/avatar/' . $f . '.png' ) );
    if( filesize( $e ) < 500 ) copy( get_template_directory()  . '/assets/avatar/default.png', $e );
    return $avatar;
}
add_filter('get_avatar', 'lerm_avatar_cache' );

注意:1、首先必须在主题文件夹下新建头像缓存目录,请注意与以上代码的12行,14行,15行路径一致,可自行设置;2、缓存天数预设为7天,单位为秒,可自行修改。
以上函数运行后,img 标签如下:
<img alt="" src="http://你的网址.com/wp-content/themes/lerm/assets/avatar/dcec4df2cb72af5b22f8142eb5cf6c41.png" srcset="https://cn.gravatar.com/avatar/dcec4df2cb72af5b22f8142eb5cf6c41?s=100&d=mm&r=g 2x" class="avatar avatar-50 photo" width="50" height="50">

需要注意的问题

以上这两段代码可以同时添加到主题跟目录下的functions.php文件里面,也可以单独使用,智慧宫将以上两段代码一起使用。

发表评论

  1. 夜枫 回复

    如今Gravatar不墙了,之前因为被墙才缓存,现在加个https的就可以了~速度嗖嗖的~

    1. 智慧宫 回复

      就是,原来的没有https 全站实现https的时候就会受影响。

  2. LERM 回复

    非常有用,我觉得可以和七牛这样的CDN连起来用