Last week, AirBnb wrote a thorough article about how they implemented HTTP Streaming in their application (powered by Express.js on the backend and React on the front-end).
They took the single component that had been responsible for rendering the HTML document and broke it into three pieces:
The focus here was that in flushing the head early, they could get the CSS and JS resources fetched much earlier.
It was a non-trivial effort and the article talks about how they dealt with data related issues, loading states and more, but in the end they saw a 100ms improvement in First Contentful Paint (they didn’t specify the test conditions). They also noted that streaming the data in particular also smoothed away delays from expensive backend queries. In the end, they saw a 100ms improvement in First Contentful Paint (they didn’t mention the test environment or percentile).
The idea of flushing the head early is far from new—I know it was a YSlow rule so it’s at least as old as circa-2006—but seeing the same general idea written about in a more modern stack, and with solid detail, was nice.
Still, if the point is to get CSS and JS to be fetched faster, I wonder if the level of effort associated with this technique will fall out of favor when Early Hints gets more support. In theory, that should allow similar improvements without requiring as much work (and without all the trade-offs).
How many people are running ad-blockers when visiting your site? The numbers I’ve seen tossed around vary quite a bit, and honestly, it’s one of those stats that almost varies dramatically depending on the type of site and the demographics of your audience.
Chris Coyier was curious how many people who visited CodePen used blockers, so he took a stab at measuring it by attaching some basic beaconing to the error handler of the scripts on his page.
At first, it looked like it was around 10%, but when they switched to an internal approach that used Redis on the backend, the number landed around 28%. Clever approach, and a good reminder that, frequently, how you measure matters as much as what you measure.
Here’s a fun fact for the day. You know that thing where you talk about something, and then you start seeing it everywhere? Apparently that’s called the Baader-Meinhof phenomenon.
Anyway, I wrote about view transitions a couple of weeks ago and there have been some cool examples since. Chris Coyier built a slick little demo on CodePen, and Dave Rupert added them to his site and wrote about it. Nicolas Hoizey wrote about them as well, with a nice example of using them in a photo gallery.
As I mentioned before, it’s not 100% certain this is the exact method of implementing view transitions that is going to land, but still, I absolutely share Dave’s excitement for the fact that it’s a wonderful example of progressive enhancement (if it doesn’t work, well, you navigate like normal) and that with zero JavaScript, one line of HTML and just a couple of lines of CSS, we can start bringing seamless transitions to the web.