Zach’s ugly mug (his face) Zach Leatherman

The Crushing Weight of the Facepile

June 10, 2019

Update: Read the newest update to this approach: Back to the Facepile, Featherweight Addition.

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.

1 REPLY
  1. Jeremy Swinnen

    Jeremy Swinnen @jereswinnen

    TOTAlLy GOnNa STeAL THiS foR MY BLOg 😉#

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.


< Newer
Spicy fonts and static sites 🌶️—JS Party #79
Older >
Week Notes №2 ending 7 June 2019

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

11 Reposts

@remRussell HeimlichRhy MooreIndieWeb Avatar for https://remysharp.comAdactio LinksIndieWeb Avatar for http://anna.borsaendeks.comIndieWeb Avatar for https://melanie-richards.comВеб-стандартыNicolas HoizeyAmber WilsonIndieWeb Avatar for https://petersmith.org

26 Likes

вкαя∂εℓℓKyle HallDan DenneyAndy DaviesJohn MeyerhoferAaron PetersPelle WessmanBen SevenRussell HuqMike AparicioHaDoukenam I jacky? or am I jacky's dog? lol 📟🇭🇹✊🏾Nicolas KaenAmelia Bellamy-RoydsEric PortisTatiana MacHolger BartelRhy MooreKeith ClarkNickSøren BirkemeyerroyciferBrett EvansDave RupertTatiana MacMichael Scharnagl

1 Bookmark

IndieWeb Avatar for https://adactio.com
25 Comments
  1. Zach Leatherman

    Ha! My mom tells me that all my posts are cool

  2. nystudio107

    How are you doing the Twitter likes / etc. with the facepile to begin with? It appears that you're indirectly using webmentions.io?

  3. Zach Leatherman

    Yeah—I wrote a little about it here: zachleat.com/web/snarky/

  4. Philipp

    Should I webmentions?

  5. Zach Leatherman

    I think they are ace, yes—but I have had a social hole on my website ever since I deprioritized and eventually removed disqus

  6. Nicolas Hoizey

    I had the same issue with 119 webmentions on nicolas-hoizey.com/2015/02/viewpo…, and tried multiple solutions already, but I think yours might be the best yet, I'll have to try it, thanks!

  7. Nicolas Hoizey

    Don’t you think we could move the saveData test outside the observer, to test only once per page load?

  8. Zach Leatherman

    I thought about that, yeah. But I wanted it to work if the user opted in to Save-Data after page load but before scrolling down. An incredibly small detail 🤷‍♂️

  9. Luke Bonaccorsi 🏳️‍🌈

    I just snooped the repos, the avatar-local-cache stuff is pretty neat! I'm already resizing stuff on the LeedsJS website, but doing the deciding between formats is pretty nice! Eleventy Open Collective Zach Leatherman Zach Leatherman

  10. Zach Leatherman

    hey no peeking! 😎 Luke Bonaccorsi 🏳️‍🌈 Eleventy Open Collective

  11. Luke Bonaccorsi 🏳️‍🌈

    🕵️ Eleventy Open Collective Zach Leatherman Zach Leatherman

  12. Jeremie Carlson

    Possible SEO impact?

  13. Zach Leatherman

    of not loading the images?

  14. Jeremie Carlson

    Ah probably lack of context on my part. I thought you were hiding the webmentions by default and I had a thought that those links would be good for SEO and wondered what the impact might be

  15. André Jaenisch

    So lazy loading all instead of pagination?

  16. вкαя∂εℓℓ

    facepile facepalm 🤦‍♀️

  17. Thomas Steiner

    I read this and immediately checked my Web mentions code. Past me actually was smart enough to stick `loading="lazy"` on the avatars (self high five); I had just missed the fallbacks. Fixed in github.com/tomayac/blogcc…. Thanks for sharing these stories (both Zach and Bri… Truncated

  18. Zach Leatherman

    Excellent!

  19. Paul Kinlan

    Damn til about details element and intersection observer.

  20. Darek Kay

    Almost two years after Zach's post, loading="lazy" has now good browser support (73%). Best trade-off between effort (adding a single attribute) and gain. Bonus: no JS required.

  21. Amber Wilson

    True, although I think I'm more up for the default hiding of the images until the person decides they wanna see them 🙂

  22. fluffy 💜 ✪▾̫✪

    Oh dang I should add this to webmention.js (especially the save data pref)

  23. Max Böck

    did something similar on my site - show just 5 lazyloaded avatars and reveal the rest only when requested 👍

  24. Atila 🧉

    yeah, I think that's the best approach. I removed mine for now because UI just got waaay too cluttered (and useless, tbh). But it's in my backlog to do something like that too!

  25. Max Böck

    yeah not sure what the DSGVO says about this. Technically I'm getting them from webmention.io, which does the caching of twitter avatars on their end... I do have some text in my privacy policy about it though. No idea if it holds up in court. 😅 mxb.dev/privacy/

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)