Balancing user experience and performance in a web page

Published by marco on

This video is just under 30 minutes and provides a lot of useful tips about how to optimize web pages. It’s almost a year old, but a lot of the optimizations are good to know, even though they won’t apply to most pages out there. It’s good to know how the browser works and which heuristics it uses to determine what can be optimized. Knowing these things helps you avoid accidentally formulating your web pages in ways that slow things down unnecessarily. You’ll be less likely to suffer under load.

Optimizing INP: A deep dive by Chrome for Developers (YouTube)

The author goes through several optimizations.

He starts by showing how to turn on the “mid-tier mobile” testing mode, which uses fast 3G and slows the CPU down 4x. This makes it easier to spot problems on a developer-class desktop/laptop.
He then shows how to set up and use the profiler, zooming in and out of the extremely rich data recorded for every interaction.
He discovers and removes a polyfill that’s no longer needed. It turns out that that version of polyfill was broken and always active—regardless of whether the feature was supported natively.
Another fix was to remove the background blur when making an element inert (MDN) because it was engaging the GPU and causing a much longer paint when the browser had to animate the drop-shadow moving across the blurred element.
Another fix involved simply moving an interaction away from the initial event handler by executing it in a timer instead. He used a dead-simple debouncing technique to ensure that only the most recent task would be executed.
Another fix was to remove complex logic for avoiding setting the display property on a DOM element. The solution there is to simply let the browser do its thing; it’s much more optimized than you think. The code that was trying to avoid touching the DOM was much slower than actually setting a DOM property.
Another fix was to defer and chunk appending results as well as setting styling for found terms by using async.