Most WordPress themes show user Gravatars in the comment threads. It’s a way of showing an image with the user, as associated by the email address used. It’s a nice touch, and almost an expected design pattern these days.
Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren’t always particularly tiny files. Yeesh.
Let’s lazy load them.
The Concept
Lazy loading is the idea that you don’t even request the image at all (no HTTP request) unless the image is visible. Meaning that, through JavaScript, we’ve determined the image is visible.
Lazy loading means not loading those two images that are outside the browser window, until they become inside the browser window.
In order to stop those HTTP requests for not-yet-seen images, we need to get our hands directly on the markup. If there is an in the HTML, there is essentially no way to stop the browser from downloading that image as soon as it possibly can, seen or unseen. So, we need to remove that src, and put it back when we’re ready.
Woah, There
It’s worth a pause here because we’ve entered some murky territory.
By removing the src of these images, and only ever putting it back with JavaScript, we’ve decided that we’re willing to ship slightly invalid HTML and rely 100% on a script downloading and executing for these images to ever be seen.
I’m OK with that. Mostly because gravatars are just an enhancement anyway. It ain’t no big deal if they never show up. I’m not a hardliner most JavaScript debates, but this seems like a particularly clear case where we can lean on JavaScript without worry.
Altering the HTML
This is the change we’d be making:
Although a missing src on the is technically invalid HTML. It almost certainly doesn’t really matter in that it won’t affect how anything works. If the invalid HTML bugs, you could always toss a super minimal blank GIF data URL in there, like:
Using width and height attributes is probably a good idea too, to maintain layout and avoid reflow if and when the images to load.
Altering the HTML… in WordPress
But how do you change the HTML that WordPress spits out as part of a comment thread? Comments are slightly unusual in WordPress in that WordPress core gives you the HTML, it isn’t part of your theme like most of the other HTML is.
Likely, in your `comments.php` file, you’ll see this function:
Which spits out a pile of
That callback is the name of a function we can toss in our `functions.php` file. Here’s an example of that function, which must return a
function csstricks_comment($comment, $args, $depth) {
$GLOBALS[comment] = $comment; ?>
160)); ?>> ?>
The API is as simple as can be. After bundled up the lib with the rest of the libs I’m using, I just call:
$(.lazyload-gravatar).Lazy();
Look how nicely it works!
That’s an awful lot of saved HTTP requests and awful good for performance.
Makes you wish web standards and browsers would get together on this and make it a native feature.