YouTube Embeds are Bananas Heavy and it’s Fixable
Which one makes more sense to use, big and slow or small and fast? Especially with the same appearance and functionality, the youtube-lite component is a no-brainer.
Tag Archive for
Performance
“a new iteration in the pre-loading journey”
Boris Schapira takes a look at the Speculation Rules API that we just had a poke at around here. Boris notes that this idea of prefetching (or prerendering) the next page that a user might visit has quite a history. One of the players in this game, which is still a pretty good choice as […]
Engineering for Slow Internet
Not everybody has smokin’ fast internet. Wait let me try that again. Most people don’t have smokin’ fast internet, especially not all the time. It’s part of the job to make sure our sites aren’t so slow we’re essentially depriving users access. To experience your site with slow internet, under the Network tab of DevTools […]
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.
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 […]