Web performance experts, would love to see a performance breakdown of this web site: https://indieweb.social/@yvg/114550400917431252
Zach Leatherman 2525 replies 1414 likes99 reposts Original on Mastodon25 replies
-
@cthos I don’t have time to write this blog post 😅
@tylersticka @zachleat @yvg TIL that I haven’t been getting notifications from Mastodon. Sorry I missed this. Did someone look at it?
@grigs @tylersticka @yvg https://bsky.app/profile/infrequently.org/post/3lpvdgm42jk2n was part of it, yeah!
@grigs @tylersticka @yvg some other great replies on this thread if you go up to the original post too
@zachleat I'll leave the JS to someone else and just take the hero image; sizes=100vw is bad esp. on desktop; the img never gets above 690px wide, but is often serving the largest 3840w image (5.56x). Good news though: that image is actually only 1000 pixels wide. In fact, 5/8 of the urls in the srcset are only 1000 pixels wide. This is sloppy and has bad caching impacts, but arguably two wrongs make a right; that's better than serving a 5.5x image! (con't)
@zachleat Similarly, while the URL says "fm=webp", I actually get a JPG. Maybe their image backend is smarter than their HTML author, and JPEG is actually a better choice for this image, but I doubt it. It's extremely high quality, especially for a black and white image: almost 3 bits/pixel. Here's a 1 bit-per-pixel AVIF which looks really good to my eye: https://o.img.rodeo/image/fetch/q_auto:best,f_avif/https://cdn.openai.com/sam-and-jony/portrait.jpg?w=3840&q=90&fm=webp (con't)
@zachleat Lastly, loading=lazy on the LCP-responsible img is a no good, very bad, shot-in-the-foot. But they're also fading the image in late which makes for a more cinematic-reveal-type-feel, which gives it a reason to come in late? idk. At least there's no layout shift.
@eeeps the fruit is very low hanging!!
@zachleat Not sure I qualify as a "web performance expert", but I have two thumbs and a WPT acct and...um...wow:
https://www.webpagetest.org/video/compare.php?tests=250523_BiDc3Y_JJ0-r:1-c:0
3MB of JS (11.4 unzipped), almost all of which is critical path. What could go wrong?
@slightlyoff it’s not good but maybe it was vibe coded
@zachleat "Dear AI, how can I display 3K of text, one image, and a below-the-fold video in the slowest, least reliable way that maximally pads my resume?"
@slightlyoff @zachleat *downloading 100,000 modules...*
@zachleat Oh. My. God.
If the JS doesn't load, you can't see the ~2.8KB (1.4KB gzipped) of text *at all*.
The animations reliably jank on scroll...which takes doing when your're actually using CSS transitions (which they are!). How do you pull it off? Animate every section independently with what looks like custom intersection observer nonsense. It's intensely lame. You can scroll halfway down the page, hit "reload", and have most text fail to display because it doesn't animate in.
Friends, this is *wild*. Of *course* there's a Markdown engine and LaTeX formatting system in here. How could you build a React + Tailwind-based website without them in 2025?
But the single largest JS file is a binary encoding of IP ranges to countries, to the tune of 338K on the wire (1.3MB unzipped), *AND IT PULLS IN A TRANSPILED NODE BUFFER IMPLEMENTATION*:
Zach, is CSS-in-JS the fast way to load fonts? I want to learn from industry luminaries.
@slightlyoff @zachleat I look forward to Jony Ive's reign as head of product design at OpenAI.
@slightlyoff @zachleat Nerdsniping Alex is almost as easy as fixing the perf on this page.
@zachleat "it's a ... quite remarkable engineering achievement"
What maybe you all don’t know is that it is designed purposefully as artists like Jony do. You must understand the brilliance in flaws. It’s post wabi sabi web design. The flaws are now the point.
The page is a masterful homage to AI. The slowness and bloat is in browser performance art commenting on the speed and resource waste of LLMs. It’s executional oddities and fragility a brillant callback to AI answer quality.
Pure genius. 👨🍳💋👏
