As many of you know I am a big fan of Disqus and using a click to load comments setup. However I also use native WordPress comments on my personal site: brianleejackson.com. I am a stickler when it comes to speed and noticed tons of HTTP requests loading out to gravatar.com. So I decided to come up with a better solution.[alert-note]Using locally hosted gravatars decreased my site load time by over 2 seconds![/alert-note]
Site Using Default WordPress Gravatar Setup
By default with the native WordPress commenting system it pulls a gravatar image for each user’s comment based on their email address. If it can’t find one it uses the default image from gravatar’s server. What this ends up doing is creating a ton of HTTP requests for each image as well as unnecessary redirects. Below is an example from my brianleejackson.com site.
Here is a speed test with the default setup. Make a note of the # of requests, 141.
You can see the ridiculous amount of components it is querying under the DNS lookups for both 1.gravatar.com and 0.gravatar.com domains.
Site Using Locally Hosted Gravatars
So I decided to switch my site to use locally hosted gravatars to minimize all of the redirects and HTTP requests. This also means they would be loading the images from my CDN as well. Here is a speed test after the configuration change.[alert-note]You can see simply by changing to locally hosted gravatar images I decreased by load time from 3.36s to 1.27s and decreased the total number of requests from 141 to 59 as well as the page size![/alert-note]
This wipes out the DNS requests to the gravatar domain completely.
How to Setup Locally Hosted Gravatars
Follow the steps below to setup locally hosted gravatars and shave some seconds off of your load times! Now remember this will disable showing other people’s gravatars. But how important is that to you? Is it worth slowing your site down?
First we are going to install a free WordPress plugin called WP User Avatar.
Once you have the plugin installed in the WordPress dashboard hover over Avatars and click into “Settings.”
In the settings menu click on “Disable Gravatar and use only local avatars.” Then choose a default avatar.
I am not a big fan of the default one from the plugin so I actually uploaded the following image. Feel free to save it from my site and upload it on yours.
I then go into my WordPress profile and choose a custom avatar for my author profile so it will show up when I comment and reply on my blog.
And that’s it! Your site should now run without all those additional queries to gravatar’s servers. And if you have a CDN implemented they will also load quicker!
This plugin solves the gravatar problem by problem by:
- caching gravatars with WordPress cron job
- caching gravatars on comment submission
- maintaining a single copy of the default gravatar instead of downloading it again and again for all the email addresses with no gravatar associtated
Both of the above solutions are great ways to solve this problem. As always feel free to leave your comments below.