Zach’s ugly mug (his face)

Zach Leatherman

Back to the Facepile, Featherweight Edition

January 26, 2022

A short three years ago, I wrote about The Crushing Weight of the Facepile: how the image weight of the webmention avatar images were proving to be prohibitvely large.

At that time, I decided the best solution was to lazy load all of the Webmention Avatars. I used IntersectionObserver to do this because loading="lazy" wasn’t supported anywhere. It still isn’t on Safari 😬. I went further and threw the Webmention Likes into a closed <details> element so they wouldn’t load until the collapsible was expanded.

Historically, I would have solved this problem by processing and optimizing these images at build-time. But at this scale of image count, the build-time costs seemed prohibitive! I don’t think this is a priority to be fixed upstream, either.

But I finally have a new method. A better method. And it doesn’t incur any more build-time penalties either. This is a small experiment with an On-demand request-time image processing service powered entirely by Eleventy Image, which may potentially result in a new Eleventy API Service.

Before:

<img src="/web/img/webmention-avatar-default.svg" data-src="https://webmention.io/avatar/pbs.twimg.com/cab6e1447b539bc1d7eaf6e260288f220792168c7be20e38ee6504517cde999d.jpg" alt="A Person’s Name" width="48" height="48">

Not pictured: the IntersectionObserver JavaScript to swap data-src to src.

Some page-weight stats from my last blog post:

  • Above the fold: ×7 images, 8.1 kB
  • Full page scroll: ×64 images, 370 kB
  • After showing Likes: ×286 images, 2.5 MB 😬
    • Note: I used to hide the Likes in a details element by default.
    • The ×286 image count likely includes some duplicates due to HTTP 301 redirects.

After

<img src="https://v1.image.11ty.dev/https%3A%2F%2Fwebmention.io%2Favatar%2Fpbs.twimg.com%2Fa4b4ceb1e1566f3e65d866ac64d8d7c1d615f927ebd0c31a7395b8fe5d2be852.jpg/jpeg/72/" alt="A Person’s Name" width="48" height="48" loading="lazy" decoding="async">

Some stats from my last blog post:

  • Above the fold: ×7 images, 9.1 kB
  • Full page scroll (with Likes shown by default): ×145 images, 258 kB

Total Savings:

  • Standard page scroll shows more images: from ×64 to now ×145.
  • But Standard page scroll image weight was reduced from 370 kB to 258 kB: 30.3% decrease
  • Worst case image weight (with Likes shown) reduced from 2.5 MB to 258 kB: 89.6% decrease

Takeaway:

Build-time image processing is great for super-critical images that you want to package up with your build, but Request-time image optimizations are amazing for images loaded from third parties or via user generated content. We’ll see how this experiment continues but I think you’ll probably see it on the official Eleventy API Services documentation soon.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Migrating my 16+ year old web site to Netlify in a few short days
Next
Trailing Slashes on URLs: Contentious or Settled?

20 Likes

Eric Wallace𝕕𝔾𝕣𝕒𝕞𝕞𝕒𝕥𝕚𝕜𝕠Luke Bonaccorsi 🏳️‍🌈Тихий БесThord D. Hedengren⚡️ArpitTanner DolbyThomas SteineroletsJohn MeyerhoferJan HoekBrooke Chalmers 🏳️‍⚧️Ajit PanigrahiMatthias OttjackanildashMalte UblDave RupertRyan BarrettMarty McGuire

1 Bookmark

IndieWeb Avatar for https://chrisburnell.com/bookmark/back-to-the-facepile-featherweight-edition/
3 Comments
  1. Zach Leatherman

    @zachleat

    Awesome!

  2. Nicolas Hoizey

    @nhoizey

    Great job! 👍 I'm using Cloudinary here, so avatars are already requested only once and weight between 300 and 2000 bytes.

  3. Nicolas Hoizey

    @nhoizey

    Why did the number of loaded images decrease from 286 to 145? 🤔 Also, it means webmention.io could optimize images, for everyone to benefit, instead of all of us optimizing on our (multiple) ends… 😅

    Social Card Image Preview

    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)