💨 Reducing blocking time on Wikipedia
Nicholas Ray from Wikimedia wrote a fantastic case-study about how they reduced the Total Blocking Time on Wikipedia by 300ms (~50%). Wikimedia’s performance team has a long history of great work, so a 50% reduction is particularly impressive.
A common approach you see cited in posts like this is to find ways to break up long running tasks, but even better is to eliminate them altogether which is what they were able to do.
The improvements boiled down to:
- Removing JavaScript that was effectively calling the same method twice, resulting in ~200ms reduction.
- Switching to event delegation for initializing their media viewing component, resulting in ~100ms reduction.
The cumulative result was ~300ms improvement as tested in their synthetic data on a Moto G(5) phone.
While they don’t mention it in the post, it looks like their real-user data around Long Tasks confirms the improvement. (Did you know they have an amazing Grafana dashboard of performance metrics that is publicly accessible?)
The chart below compares the total duration of all Long Tasks (green) with the prior week (in yellow). I marked roughly where the two deploys occur, and you can see the comparison is very favorable.
I would have loved to have seen the impact this might have had on Interaction to Next Paint, but I couldn’t find any charts in their Grafana so I’m not sure they’re measuring it yet.
Regardless, this is great work, as per their usual.
⌛️ jQuery still going strong
In case you saw the jQuery reference in that Wikipedia post and thought "come on now that’s gotta be a mistake", jQuery is still holding very strong, 17 years after its original release.
A lot of that is the tail and torso of the web, to be fair. But it’s still a nice reminder to not always chase after the new and shiny technologies. There’s value in boring technology.
📏 Digging into the new Pending Beacon API
Nic Jansma’s post, Beaconing in Practice, is one I’ve probably re-read 30 times since he first published it. It’s an impressively thorough look at when and how to beacon back performance data, rooted in practical, real-world experience.
Nic’s back at it, but now the new (still experimental) Pending Beacon API, intended to greatly simplify the process of reliably beaconing back data.
There’s plenty of data here to compare using the new API with using sendBeacon and XMLHTTPRequest. Like Nic, I’m a bit surprised to see the reliability of the Pending Beacon API appear to be a bit worse (particularly on mobile).
It will be interesting to see if that gap closes as the API evolves and gets closer to being production-ready.