Playing with the Speculation Rules API in the Console
This new API enables client-side prerendering, improving performance for users who are likely to visit a new page.
Tag Archive for
Performance
Understanding Interaction to Next Paint (INP)
As of March 12th 2023, Interaction to Next Paint (INP) replaces First Input Delay (FID) as a Core Web Vital metric. FID and INP are measuring the same situation in the browser: how clunky does it feel when a user interacts with an element on the page? The good news for the web—and its users—is […]
Capo.js: A five minute web performance boost
You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your <head> in order. It’s based on some research by Harry Roberts that shows how something seemingly insignificant as the elements in […]
Real-World Usage of content-visibility
Jeremey Keith uses the little-used CSS property content-visibility to improve the performance on a fairly heavy page. It works a treat. I did a before-and-after check with pagespeed insights on the page for Out On The Ocean. The “style and layout” part of the main thread work went down considerably. Total blocking time went from more than 600 […]
Why do reflows negatively affect performance?
Layout recalculations, or “reflows”, happen when we change a layout-related property, such as an element’s width, height, or margin. Reflows can happen accidentally or on purpose. For instance, you might want to have a feature that switches from a grid view to a list view. In that case, triggering a reflow is essential for […]
Million.js 3.0
Million.js caught my eye a few months back because of the big claim it makes: Make React 70% faster. I ended up listening to a podcast with the creator, and the meat of it is: it removes the need for “diffing” the virtual DOM that React uses when re-rendering to find what needs to change, which […]