Accelerate WordPress Gravatar With the Help of CDN
Blog
/
Reviews
/ Accelerate WordPress Gravatar With the Help of CDN
Images make up for 62% and more of a web-page, and sometimes website creators include a bunch of images into one post without applying optimization techniques, or not being aware that they load pictures from different third-party resources. Whatever the case is, it’s crucial to accelerate loading time of these images so that visitors wouldn’t watch the white screen waiting for your website to appear on it. That’s why today we will learn how to use a CDN so that to speed up the delivery of Gravatar images.
What is Gravatar?
Gravatar is the short for “globally recognized avatar” and is pretty widespread in many popular CRMs, as well as web-applications. Gravatar helps visitors to connect some certain profile picture with an email address. When someone applies his or her email address to create a new account in some platform supporting Gravatar, their profile image will be automatically added up.
Gravatar is integrated into WordPress platform and was owned by Automattic (founders of WordPress.com) for ten years now. This is a handy tool that allows setting one picture for every account you create anywhere. However, in some cases, it can affect performance.
For example, if you deployed a native commenting system in your WordPress site and have an article that has gained many comments, that would mean your website needs to load all of profile pictures from a third party (secure.gravatar.com). To shorten loading times required to show each commenter’s profile image, you can leverage a content delivery network to cache and speed up loading of these images globally.
How to Accelerate loading of Gravatar pictures with a CDN?
You can easily serve Gravatar images with a CDN, using Cache Enabler plugin and Nginx (though it’s not the only option available).
Go to Cache Enabler Settings page and deactivate pre-compression.
Then open Nginx configuration file and put sub_filter in the corresponding location block. Replace /blog with directory for which you deploy Gravatars and replace cdn.example.com with your Zone URL or custom CDN URL.
It will look the following way:
location /blog {
sub_filter 'https://secure.gravatar.com/avatar/' 'https://cdn.example.com/avatar/';
sub_filter_once off;
...
}
Working with the configuration file, you also need to specify the proxy location for the redirected images.
location /avatar {
proxy_pass https://secure.gravatar.com$request_uri;
}
Don’t forget to save the changes and reload Nginx.
After that, you need to go to your website’s page that uses Gravatars and examine the HTML: it should display CDN URL used instead of secure.gravatar.com.
Perform Speed Tests
In order to compare the difference in loading times between fetching pictures from Gravatar servers directly and from your CDN, you can organize some tests. Take a page with multiple comments and many Gravatar images.
First, run this page via a speed test tool without CDN activated for Gravatar pictures. All the other static files need to be loaded from the CDN. Ideally, you need to perform tests in several geographical locations. Perform the same test with CDN enabled through the entire website including Gravatar images. If everything is set up properly, you will notice speed improvement on at least 100-300 ms. Enabling CDN load your website’s Gravatar images you not only improve loading times by caching on edge servers, but also reduce the number of DNS lookups for loading the page.
Bottom Line
Gravatar is a service that eases your tasks by associating profile pictures with user’s email address, but in posts that rely considerably on Gravatar images to show the commenter’s profile photo, this technology can take a negative tool. Therefore, CDN for delivery of Gravatar images can come in handy. It’s an easy and efficient way
Comments