用 WebP Cloud Services 来提升 Gravatar 头像加载速度

This article is also available in English, at Improving Gravatar Avatar Loading Speed with WebP Cloud Services.

对于一些典型的博客系统比如 Wordpress 而言，用户的头像默认是通过 Gravatar 来显示的，评论者在评论时只需要输入自己的邮箱，即可显示在 Gravatar 上设置的头像。

这么做有好处也有坏处，好处就是由于大量的网站框架都默认支持 Gravatar ，对于访客而言体验就非常好，因为在各个网站上都可以看到自己的头像，而不需要每个网站都单独设置，坏处的话分为两种：

• Gravatar 在中国大陆地区不可用，以 Nova Kwok 的头像为例，地址是 https://www.gravatar.com/avatar/09eba3a443a7ea91cf818f6b27607d66 这个地址我们在 Greatfire 上可以看到在中国大陆地区无法显示。由于中国大陆也有大量的显示头像的需求，如果继续用默认的头像地址就会导致访客在访问页面的时候去请求了一个打不开的网址，影响访问速度不说，头像还无法显示。

• Gravatar 对于头像的存储策略是 MD5 了用户的邮箱地址作为后缀，比如上文中的 09eba3a443a7ea91cf818f6b27607d66 ，但是文件内容和用户上传的文件是一致的，这样就会导致一个问题——有些人的头像非常的大，对于访客而言加载起来就会比较慢了，在 Pagespeed Insight 上我们也可以看到类似的案例，造成评分的下降

我们的测试报告如下：

这个时候可以使用我们 WebP Cloud Services 的其中一个服务—— Public Service 来解决上面的问题，Public Service 提供 Gravatar 和 GitHub Avatar 的反向代理，并具有以下特性：

• 解决中国大陆用户没法访问 Gravatar 的问题
• 输出这些图片时提供了 WebP 转换，可以在几乎不改变画质的情况下大幅缩小图片体积，加快整体站点加载速度

且这个是公共服务，完全免费，目前有大量用户在使用，包括但不限于 CNX Software，Indienova 等。

使用方法

对于非 Wordpress 的网站，只需要把 Gravatar 头像地址中 https://www.gravatar.com/avatar/ 的部分换成 https://gravatar.webp.se/avatar/ 即可。

对于 Wordpress 而言，可以这么在网站后台的主题编辑器中的 functions.php 文件中加入以下行：

function use_webp_public_service($avatar) {
	$avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "secure.gravatar.com", $avatar);
    $avatar = str_replace("<https://secure.gravatar.com>", "<https://gravatar.webp.se>", $avatar);
	return $avatar;
}
add_filter('get_avatar', 'use_webp_public_service');

这样，Wordpress 就会在页面上使用这个服务来输出图片了。通过观测网络请求我们可以发现 Gravatar 头像的图片体积被大幅减小了，网页的加载速度也得以加快：

且由于 https://gravatar.webp.se 域名在中国大陆也可以访问，替换后也不会出现显示不了头像的问题了，更加详细的使用教程可以参考 https://docs.webp.se/public-services/gravatar/。

以上便是本次的 Gravatar 加速分享，在后续的文章中我们会分享如何用我们的另一个——WebP Cloud 来动态为网站上所有图片进行优化，进一步提升访问速度，如果你希望提前了解更多关于 WebP Cloud 的内容的话，欢迎来我们的文档站 https://docs.webp.se/webp-cloud/ 看看。