Eighty Avatar Images Under One Blog Post

The post everyone comments on

Many business blogs have one post that took off: a how-to, an answer to a common question, a guide that kept turning up in searches. Over a couple of years it collected eighty comments.

Beside each comment sits a small picture, the commenter's avatar. Most commenters never set one, so the same grey silhouette repeats all the way down the page.

Each of those pictures is fetched separately, from another company's servers, for every visitor who opens the page.

The article appears quickly. The page goes on loading long after.

Where the pictures come from

WordPress shows avatars from Gravatar, a service that matches a commenter's email address to a picture they uploaded there. The page asks Gravatar for each one in turn.

A commenter without a Gravatar still costs a request. The service sends back the default image, but under a different address for each commenter, so the browser cannot reuse the first copy it downloaded.

Eighty comments means eighty requests, even when seventy of them return the same grey silhouette.

None of it happens on the business's own server, so a faster hosting plan does little for this part of the page.

Why small files still cost time

• Each image is a separate request, with its own round trip.
• The outside service needs its own lookup and connection.
• Browsers fetch only a few files from one server at once.
• Phones on mobile networks pay most for every round trip.
• The page counts as loaded only once every image arrives.

The third is why the count matters more than the size. With only a few files fetched at a time from each server, eighty images queue up in batches, and the queue takes far longer than any single file.

What the waiting does

The text is readable early, so the delay is easy to dismiss. But the browser's loading indicator keeps turning, and on a phone that reads as a page still arriving.

Anything set to start once the page has finished loading waits for the last avatar: a newsletter sign-up box, a booking widget, some tracking scripts.

And on a slow connection, the avatars take a share of the bandwidth from anything else still downloading.

Speed tests that report a fully loaded time count every avatar, so the most visited page on the blog can measure as one of the slowest.

Measuring it

WebPageTest, a free testing site, shows each file a page requests as a bar on a timeline, called a waterfall. A long tail of identical small bars from the avatar service is hard to miss.

The browser's own developer tools show the same on the Network tab. Compare the number of requests and the fully loaded time for the popular post with those for a post without comments.

Test with a phone setting as well as a desktop one, since every round trip costs most on a mobile connection.

A worked example

A wood carver makes spoons, bowls and small carved birds in a workshop behind his house, selling them at craft fairs and through his website.

His blog has a post on oiling and caring for wooden spoons and boards that has gathered comments for three years. It is the most visited page on his site, and the way many new customers find him.

Under it sat more than eighty comments and as many avatars, almost all the default silhouette.

On a phone, the article appeared within a few seconds, but the page kept loading well after.

The newsletter box announcing his next craft fairs was set to appear once loading finished, and often showed up after the reader had scrolled past its place.

His developer switched avatars off, split the comments into pages of twenty, and made the sign-up box load with the article. He also folded the most common questions from the comments into the post itself.

Switching avatars off

On a business blog, nobody misses the pictures. Comments are read for what they say, and a column of identical silhouettes adds nothing to them.

WordPress keeps the option under Settings, then Discussion: untick Show Avatars and save. Every avatar request disappears from every post at once.

The comments themselves stay exactly as they were, names and dates included.

Loading them when readers arrive

If the avatars matter, on a community blog where regular commenters recognise each other, they can wait until they are needed.

A small script, often added as a plugin, leaves each avatar as a blank placeholder and fetches the real image only when the reader scrolls near it. Readers who never reach the comments never download them.

Test it on a phone afterwards, since a badly set up version can leave blank squares where the pictures should be.

Fewer comments per page

WordPress can also break comments into pages, with a set number of top-level comments on each and links to the older ones.

That caps the avatars on any one load, and it shortens the page for readers on phones, who otherwise scroll a long way to reach the comment form.

Where comments keep asking the same question, answer it in the post. The article improves and the next round of comments shrinks.

Other outside services under a post

Avatars are rarely the only outside service below an article. Share buttons and embedded comment systems each load their own scripts and images from other companies' servers.

The same test applies to each: whether readers of this blog actually use it. If not, it costs every reader time for nothing.

The counter-case

A post with five comments loads five avatars, which costs very little. The problem grows with the count, so most posts on most business blogs never need attention.

And on a blog built around its community, the faces may be part of the appeal, which is a reason to load them later rather than drop them.

Start with the busiest post. Switch avatars off, or load them when readers get there, and the page stops waiting on eighty little pictures.

The check

1. Find the most commented post on the blog.
2. Run it through WebPageTest on a phone setting.
3. Count the requests to the avatar service.
4. Untick Show Avatars if nobody will miss them.
5. Otherwise load them only on scroll.
6. Break comments into pages of twenty or so.
7. Answer repeated questions in the post itself.

Step four is the one with the biggest effect for the least work. One setting removes every avatar request across the site, and on a business blog nobody notices except the page.

The same quiet cost of files nobody looks at is covered in images hidden on phones but still downloaded.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.