Zach’s ugly mug (his face)

Zach Leatherman

The Crushing Weight of the Facepile

June 10, 2019

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.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Spicy fonts and static sites 🌶️—JS Party Episode #79
Next
Render Snarky Comments in Comic Sans

2 Retweets

Rhy MooreRussell Heimlich
25 Likes
Kyle HallDan DenneyAndy DaviesJohn MeyerhoferAaron PetersBen SevenPelle WessmanRussell 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
  1. Jeremy Keith

    Jeremy Keith https://adactio.com/ #

    The Crushing Weight of the Facepile—zachleat.com June 16th, 2019 Using IntersectionObserver to lazy load images—very handy for webmention avatars.

15 Replies
  1. André Jaenisch

    André Jaenisch @AndreJaenisch #

    so lAZy lOADiNG alL INStEAd of pAGinatioN?

  2. Jeremie Carlson

    Jeremie Carlson @JeremieCarlson #

    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

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    of not loading the images?

  4. Jeremie Carlson

    Jeremie Carlson @JeremieCarlson #

    Possible SEO impact?

  5. Luke Bonaccorsi 🏳️‍🌈

    Luke Bonaccorsi 🏳️‍🌈 @CodeFoodPixels #

    🕵️ Eleventy Open Collective Zach Leatherman Zach Leatherman

  6. Zach Leatherman

    Zach Leatherman @zachleat #

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

  7. Luke Bonaccorsi 🏳️‍🌈

    Luke Bonaccorsi 🏳️‍🌈 @CodeFoodPixels #

    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

  8. Zach Leatherman

    Zach Leatherman @zachleat #

    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. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

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

  10. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

    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!

  11. Zach Leatherman

    Zach Leatherman @zachleat #

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

  12. Philipp

    Philipp @kleinfreund #

    Should I webmentions?

  13. Zach Leatherman

    Zach Leatherman @zachleat #

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

  14. nystudio107

    nystudio107 @nystudio107 #

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

  15. Zach Leatherman

    Zach Leatherman @zachleat #

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

    7 Mentions
    1. Nicolas Hoizey

      Nicolas Hoizey @nhoizey #

      @zachleat reading zachleat.com/web/facepile/#… , I wonder why you "cut the mustard" with both `typeof IntersectionObserver` and `"forEach" in NodeList.prototype` as it seems all browsers supporting the former also support the later. caniuse.com/#feat=intersec… developer.mozilla… Truncated

    2. Веб-стандарты

      Веб-стандарты @webstandards_ru #

      Крах под тяжестью лиц. Зак Лезерман оптимизирует загрузку аватарок комментаторов с внешнего сервиса в своём блоге — zachleat.com/web/facepile/

    3. admin http://anna.borsaendeks.com/author/admin/ #

    4. melanie-richards.com #

    5. Adactio Links

      Adactio Links @adactioLinks #

      thE CRUShiNG WEigHt oF tHe fACepilE—ZAChLEAT.COM ZaChlEat.coM/WEb/faCePile/

    6. remysharp.com #

      Running a routing performance check on my blog I noticed that in the list of domains being accessed included facebook.com. Except, I don't have anything to do with Facebook on my blog and I certainly don't want to be adding to their tracking. I was rather pissed that my blog cont… Truncated

    7. Noice. In particular: "I also added a little check to skip the load if the Save-Data user preference was enabled." - @zachleat zachleat.com/web/facepile/ I've been wary of this potential problem, but my posts aren't cool enough…