I was cruising my own web site with DevTools open (as one does) and browsed to my latest blog post only to be slapped in the face with a 3.7MB web site. My web site (on a blog post page without content images) is normally about 400KB. What happened??

Astute readers of blog post titles may already be ahead of me here—the more successful the blog post got on social media, the more webmentions it got, and the cluster of avatars below the post (the facepile, as it is known) grew and grew.

What should I do? #

1. My first instinct was to make the images intrinsically smaller. Solve the problem at the root! Some of them came back from webmention.io’s avatar cache as 256×256—one was 135KB 😱. I filed an issue upstream for this. But I needed to solve this problem immediately, locally.
2. Use Cloudinary or imgix or Netlify Image transformations or some other free-for-now or free-metered or fully paid service to resize these automatically. I started down this road and decided it was a little much for a personal site.
3. “Zach, you’re just being vain—simply cap the list and only show a few of these images maximum.” I mean, yeah, I guess. But I also like investing in showcasing webmentions fairly prominently on my site because I’m trying to be an advocate for IndieWeb.
4. Use loading="lazy" to lazy load these images. I was already doing this but browser support is non-existent, currently.
5. Take control of it myself and use IntersectionObserver to lazy load them only when they come into view. IntersectionObserver browser support is pretty good now. I decided to go with this low hanging fruit for now (at least as a short term solution).

Enter IntersectionObserver #

HTML #

<img src="/web/img/webmention-avatar-default.svg" data-src="https://webmention.io/avatar/…" alt="Author name" class="webmentions__face">

JavaScript #

if( typeof IntersectionObserver !== "undefined" && "forEach" in NodeList.prototype ) {
	var observer = new IntersectionObserver(function(changes) {
		if ("connection" in navigator && navigator.connection.saveData === true) {
			return;
		}

		changes.forEach(function(change) {
			if(change.isIntersecting) {
				change.target.setAttribute("src", change.target.getAttribute("data-src"));
				observer.unobserve(change.target);
			}
		});
	});

	document.querySelectorAll("img[data-src]").forEach(function(img) {
		observer.observe(img);
	});
}

This means that if JavaScript hasn’t loaded yet or failed somewhere, these avatars would stick with the default image I’ve specified—I’m okay with that.

I also added a little check to skip the load if the Save-Data user preference was enabled.

Bonus: Details #

The other great thing about using IntersectionObserver is that if the images aren’t visible they aren’t loaded. For example, I hide Replies and Mentions inside of closed <details> elements.

If <details> is supported by the browser, the avatar images will only load on demand when the user expands <details> to show the content! I love it. And if <details> is not supported the avatars are lazy loaded just like any other content.