Improving Gravatar Avatar Loading Speed with WebP Cloud Services

这篇文章有简体中文版本，在： 用 WebP Cloud Services 来提升 Gravatar 头像加载速度

In general, when we need to analyze the performance of a webpage, we may use a Chrome extension called Lighthouse ( https://developer.chrome.com/docs/lighthouse/overview/ ). If we want to minimize the influence of our own browser and network factors and share the super high (or super low) performance of our webpage with friends, we may use a website hosted by Google called Pagespeed Insight: https://pagespeed.web.dev.

For some typical blogging systems like Wordpress, user avatars are typically displayed using Gravatar. Commenters only need to input their email addresses when commenting to display the avatars set on Gravatar.

There are both advantages and disadvantages to this approach. The advantage is that many website frameworks default to supporting Gravatar, providing a great experience for visitors because they can see their avatars on various websites without the need for separate settings on each site. The disadvantages can be divided into two categories:

• Gravatar is not accessible in mainland China. For example, using Nova Kwok’s avatar as an example, the address is https://www.gravatar.com/avatar/09eba3a443a7ea91cf818f6b27607d66, and we can see on Greatfire that it cannot be displayed in mainland China. Since there is a high demand for displaying avatars in mainland China, continuing to use the default avatar address would result in visitors requesting a webpage that cannot be opened, affecting the loading speed and preventing the avatars from being displayed.

• Gravatar stores avatars by using the MD5 hash of the user’s email address as a suffix, as in the previous example, 09eba3a443a7ea91cf818f6b27607d66. However, the file content is identical to the file uploaded by the user, which leads to a problem—some people’s avatars are very large, causing slower loading times for visitors. We can also see similar cases on Pagespeed Insight, resulting in a decrease in the score. Our test report is as follows:

At this point, you can use one of our services in WebP Cloud Services called Public Service to address the above issues. Public Service acts as a reverse proxy for Gravatar and GitHub Avatar and offers the following features:

• Resolves the problem of Chinese users in mainland China unable to access Gravatar.
• Provides WebP conversion when outputting these images, significantly reducing the image size without compromising image quality, thereby accelerating the overall site loading speed.

Moreover, this service is public and completely free, and it is currently being used by a large number of users, including but not limited to CNX Software and Indienova.

How to use

For non-Wordpress websites, simply replace the https://www.gravatar.com/avatar/ part of the Gravatar avatar URL with https://gravatar.webp.se/avatar/.

For Wordpress, you can add the following lines to the functions.php file in the theme editor of the website backend:

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');

This way, Wordpress will use this service to output images on the webpage. By observing network requests, we can see that the image size of Gravatar avatars has been significantly reduced, and the webpage loading speed has also been increased:

Furthermore, since the domain https://gravatar.webp.se can be accessed in mainland China, there will no longer be issues with avatars not being displayed after the replacement. For more detailed usage tutorials, please refer to https://docs.webp.se/public-services/gravatar/.

That concludes this Gravatar acceleration sharing. In future articles, we will share how to use our other service, WebP Cloud, to dynamically optimize all images on a website, further improving the loading speed. If you would like to learn more about WebP Cloud in advance, please visit our documentation site at https://docs.webp.se/webp-cloud/.