Hi <<First Name>>,
It's been a month since Interaction to Next Paint replaced First Input Delay as a Core Web Vital, and I've just about recovered. If you were following along on social media, you already know that INP was pretty much all anyone could talk about.
Now that the buzz has died down a bit, it feels like a good time to revisit the myriad other aspects of web performance we should also be paying attention to. This newsletter includes:
- Industry page speed benchmarks
- A deep dive into the performance inequality gap
- An updated guide to performance budgets
- Controversial opinions about which image format is most performant
- Common problems with cookie consent managers (and how to fix them)
- More!
Until next month,
Tammy
@tameverts
|
|
|
Page Speed Benchmarks:
The fastest and slowest US news sites
With so much going on in the news these days, many of us are glued to our devices trying to stay caught up. Looking at a recent snapshot of Largest Contentful Paint (LCP) times for leading US news sites, you can see the struggle to deliver a fast experience to users on mobile devices.
The fastest home page – the LA Times – had an LCP time of just over 3 seconds, which is slower than Google's recommended threshold of 2 seconds. But the majority of home pages fared much worse, with LCP times between 10 and 29 seconds.
What's slowing down most pages? The usual suspects:
- Complexity, with up to 500 requests competing for CPU time!
- Slow or blocking third-party JavaScript
- Blocking CSS
Page Speed Benchmarks is a public-facing, interactive set of dashboards. We test and rank industry-leading websites based on how fast their pages appear to load from a user’s perspective. It's a handy tool for benchmarking your own site, as well as digging down to see how the fastest and slowest pages in the dashboards are built.
|
|
|
The Performance Inequality Gap, 2024
"Frontend's hangover from the JavaScript party is gonna suck."
That's the conclusion to Alex Russell's 2024 edition of his annual data-intense analysis of the current global state of the union for browser, network, and device usage – and how it affects performance. As Alex states:
"We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it wasn't and wouldn't be. The circa-2013 narrative asserted that:
- CPUs would keep getting faster (just like they always had).
- Networks would get better, or at least not get worse.
- Organisations had all learned the lessons of Google and Facebook's adventures in Ajax.
"It was all bullsh!t, and many of us spotted it a mile away. The problem is now visible and demands a solution, but the answers will be largely social, not technical. User-centered values must contest the airtime previously taken by failed trickle-down DX mantras. Only when the dominant story changes will better architectures and tools win."
|
|
|
April 24 is JS Naked Day!
Speaking of JavaScript, page bloat, and performance... consider joining in on the inaugural JS Naked Day on April 24! The purpose of this day is to highlight – in a lighthearted way – that the web should be able to work without JavaScript. There are a couple of ways you can join the fun:
- Remove all JavaScript on your site for the day
- Try surfing the web with JavaScript disabled
Add your participating site to js-naked-day.org by sending a pull request. If you're sharing your experiences on social, tag your posts with #JSNakedDay.
|
|
|
A Complete Guide to Performance Budgets
The best time to set up performance budgets was years ago. The next best time is today. If you're not using budgets to fight page speed regressions, you're missing a vital tool in your performance/UX toolkit.
Every year I revisit the topic of performance budgets. Here's my updated guide, which includes:
- What are performance budgets?
- Why are they a crucial tool in fighting page speed regressions?
- Best metrics to track
- How to determine (and update) thresholds
- Pro tips
|
|
|
Continuous performance
with guardrails and breadcrumbs
Not 100% sold on the necessity of performance budgets? This must-read post from Tim Kadlec is filled with high-level wisdom and ground-level best practices.
"Putting up the appropriate guardrails to protect ourselves from regressions – then pairing that with a trail of breadcrumbs so that we can dive in and quickly identify what the source is when a regression occurs – are essential steps to ensure that when we make our sites fast, they stay that way."
|
|
|
Image optimization: The neverending saga
I love controversial hot takes on image optimization, and there's been a recent spate of new techniques and formats.
- Jpegli is a new open-source JPEG coding library – introduced by Google – that is designed to be faster, more efficient, and more visually pleasing than traditional JPEG.
- JPEG XL is a new-generation image format with fast encoding speed and improved compression. Depending on who you talk to, it's superior to old-school formats like WebP and AVIF: "WebP is almost always the wrong choice. AVIF is too slow."
- But let's not be hasty... AVIF has fans who still believe it's the future of web images.
Regardless of what camp you're in, the big takeaway is this: Even though it's 2024, keep optimizing your images.
|
|
|
How to optimize CLS on Shopify sites
Cumulative Layout Shift (CLS) is a metric that helps you understand how much, and how often, visual elements on your pages shift. The higher your CLS score, the more unstable and "janky" your pages feel for your users. Sia Karamalegos covers some of the most common CLS issues she's observed across Shopify sites and provides a wealth of tips and resources for fixing them and improving your CLS score.
|
|
|
Five common ways consent managers hurt web performance (and how to fix them)
Cookie consents are everywhere these days, and they're a huge source of performance pain. Cliff Crocker covers some of the most common issues, along with solutions.
|
|
|
|
