Speed up WordPress Gravatar Delivery with a CDN

Images often times account for the largest part of a website. Website maintainers may include an abundance of images in a single post and may not be aware of image optimization techniques, or that they are loading images from various third party sources. Whatever the reason, it's important to do all you can to accelerate the load time of these images so that users aren't left waiting longer than they should.

That's why in this post, we're going to show you how you can use a CDN to further accelerate the delivery of Gravatar images.

What is Gravatar?

Gravatar stands for "globally recognized avatar" and is widely used among popular CRMs and web applications. Essentially, it allows users to associate a particular profile picture to an email address. Therefore, when someone uses their email address to create an account somewhere that supports Gravatar, their profile picture will be automatically displayed.

Gravatar is heavily integrated into the WordPress ecosystem and has actually been owned by Automattic (founders of WordPress.com) since 2007.

Gravatar is a convenient tool as it allows you to define a single profile picture for a particular email address without having to define a picture for every account you create somewhere. However, in certain situations, this can be a drain on performance.

For instance, if you're using the native commenting system in WordPress and have a post that attracts a lot of comments, that could mean that your site will need to load all of those profile pictures from a third party (secure.gravatar.com). In order to minimize the load times required to display each and every commenter's profile picture, we can make use of a content delivery network to cache and accelerate those images globally.

How to accelerate Gravatar images with a CDN

The process of offloading gravatar images to a CDN is rather simple. For the example below we assume you're using the Cache Enabler caching plugin and Nginx.

1. Navigate to the Cache Enabler Settings page and disable pre-compression.

2. Open your Nginx configuration file and add sub_filter in the relevant location block. Replace /blog with the directory for which you are using Gravatars and replace cdn.example.com with your Zone URL or custom CDN URL.

   location /blog {
       sub_filter 'https://secure.gravatar.com/avatar/' 'https://cdn.example.com/avatar/';
       sub_filter_once off;
       ...
   }
   

3. While still in the configuration file, add the proxy location for the redirected avatars.

   location /avatar {
       proxy_pass https://secure.gravatar.com$request_uri;
   }
   

4. Save your changes and reload Nginx.

Now, navigate to a page on your site that uses Gravatars, check the HTML and you should see the CDN URL being used instead of secure.gravatar.com.

Comparing speed tests

To compare the difference in load times between loading Gravatar images directly from Gravatar's servers and from KeyCDN we ran a few tests. The page we used to test with was our Cache Enabler knowledge base article, which contains a large number of comments. In fact, 48 of the 90 requests for that post are for Gravatar images only.

To compare speeds, we first ran the page through a speed test tool without the CDN enabled for Gravatar images. All other static assets were loaded from the CDN. The speed tests were performed in three locations: New York, Frankfurt, and Singapore. We ran each test 3 times and then took the average load time. The results were as follows:

With avatars loaded from Gravatar

Next we performed the exact same tests, this time with the CDN enabled throughout the site. Meaning all static assets, as well as all Gravatar images, were delivered via the CDN.

With avatars loaded from KeyCDN

As we can see, the total page load times in each case were faster when the Gravatar images were loading from KeyCDN. In fact, taking all three tests locations into account, the performance improvements with a CDN, on average, were 261 ms. Having a CDN load your site's Gravatar images not only improves load times thanks to caching and multiple edge servers but it also helps in reducing the number of DNS lookups required to fully load the page.

Summary

Gravatar is a popular service that makes it extremely easy to associate a profile picture with an email address. However, for posts which rely heavily on Gravatar images to display the profile picture of the commenter, it can negatively affect performance. That's why using a content delivery network to accelerate the delivery of your Gravatar images is beneficial. With a few simple steps, you can start accelerating your site's Gravatar images, making for a better user experience for your visitors.