Reduce DNS+TCP time by Caching Gravatar at CDN

by

CAUTION

This is May, 2022. Gravatar server is already very fast. Second, WordPress does lazy load for images. So, it won’t practically improve UX. Third, when someone picture is updated, CDN may continue to serve cached image while Gravatar typically set max-age of 5 minutes only. So I feel it’s not worth the efforts goes into the process.

The default commenting system of WordPress uses Gravatar services to display the profile picture of the comment author.

There are three advantages of Caching Gravatar images and serving from CDN

  1. HTTP/2 allows parallel downloading, so it is better to reduce the unnecessary DNS lookup and TCP timing that goes in the extra domain (secure.gravatar.com).
  2. By default, it caches images only for 300 seconds in a browser that we can increase.
  3. Concerning GDPR, we can limit the collection of log information by sending the BunnyCDN IP address to the Gravatar server instead of the actual visitor’s IP. 👏

Prerequisite

  • A pull zone with a custom hostname – www.example.com for HTML Caching. 🔥
  • Or, a Pull Zone with traditional cdn.example.com static content caching

To achieve this, first we need to create few edge rules then make search replace in Document.

Step 1. Set custom Request Header

host gravatar
  • Create an Edge rule
  • Action: Set Request Header
  • Header name: host
  • Header value: secure.gravatar.com
  • Condition Matching: Match Any
  • Conditions: IF Request URL: Match Any: https://www.example.com/avatar/*

Step 2. Override origin to secure.gravatar.com

gravatar change origin url

Step 3. Enforce CDN Caching

override cache gravatar
  • Create another Edge rule
  • Action: Override Cache Time
  • Cache time in seconds: 31536000
  • Condition Matching: Match Any
  • Conditions: If Request URL: Match Any: https://www.example.com/avatar/*

Step 4. Enable Browser Caching for Gravatar

gravatar browser cache
  • Create another Edge rule
  • Action: Set Response Header
  • Header name: Cache-Control
  • Header Value: max-age=31536000
  • Condition Matching: Match Any
  • Conditions: If Request URL: Match Any: https://www.example.com/avatar/*

Step 5. Serve Images from CDN hostname

  • Take a backup before proceeding.
  • Install and Activate ‘Real Time Find and Replace‘ WordPress Plugin to make on-the-fly changes in the HTML document.
  • Go to Tools and menu setup this plugin.
  • Find: https://secure.gravatar.com
  • Replace: https://www.example.com
search replace gravatar url

That’s all. Now all your Gravatar images will appear from www.example.com address.

Want more awesome content like this?

Any question? Please ask at Gulshan Forum.

Leave a Comment