Hi <<First Name>>,
It's spring in my part of the world, which might be why spring cleaning is on my mind – both at home and in the world of web performance.
In our world of increasingly complex web pages and increasingly complex online lives, sometimes it's easy to forget that the first line of defence is to choose less. Doing less, consuming less, building less. Decluttering – virtually and IRL – is the easiest way to create more space and more time.
You'll find this less-is-more theme running throughout many of the pieces in this newsletter, such as:
- The real cost of "just one line" of code
- How deep is your DOM?
- How to reduce your font load
- The majority of people now use ad blockers
- How Pinterest uses performance budgets to manage regressions
- Optimizing INP for a React app
- How to reclaim your brain from tech
In this issue, I hope you don't just find handy tips and tools for making your sites faster. I hope you find inspiration to pause and consider how you can make your sites – and perhaps other areas of your world – simpler. And along the way, reclaim your precious attention and time.
Until next month,
Tammy
m: @tammy
t: @tameverts
|
|
|
How deep is your DOM?
If you use Lighthouse to measure your site’s performance, you may have seen the "Avoid excessive DOM size" warning. Maxi Ferreira runs some experiments to test the question: How does DOM depth affect rendering performance? (Spoiler alert: "DOM size and DOM depth have a bigger impact on a site’s performance than I originally thought, especially when combined with expensive style recalculations.")
|
|
|
Web Performance Guide
I'm very excited to announce our brand-new Web Performance Guide! If you're new to performance (or you know people who are) – or if you just want a refresher – our amazing team of performance experts has created a set of resources covering everything you need to know to get started.
The guide includes:
- How performance affects your business
- Understanding and optimizing Core Web Vitals
- Optimization techniques, including best practices for performance budgets, as well as techniques for optimizing images, JavaScript, CSS, SPAs, third-party scripts, and more
- Interpreting metrics and charts
|
|
|
Majority of Americans now use ad blockers
|
|
|
How to use variable fonts to reduce your font load
Fonts are one of the most important components of any website, but they’re often overlooked when optimizing page load time. When the CKEditor website team implemented variable fonts and font subsetting, the transfer load for fonts on a per visitor basis dropped by 71% to just 26kB. Łukasz Datkowski provides a detailed walkthrough of how they did it, so you can try this on your own site. |
|
|
Detecting web performance regressions at Pinterest
It's not a coincidence that Pinterest provides an enviably fast user experience. Their performance engineering team was an early pioneer of custom metrics (such as Pinner Wait Time) and performance budgets – using these strategies to fight regressions and stay fast. In part 1 of this 3-part series, Michelle Vu provides an overview of the performance program at Pinterest.
|
|
|
"Just" one line = just one lie
From Jim Nielsen:
"It's just one line of code" is a pitch you hear all the time. It might also be the biggest lie we tell ourselves — and one another. But "just one line" is a facade. It comes with hundreds, thousands, even millions of lines of code. You don't know how many and it's not usually disclosed.
The next time you hear "it's just one line" pause for a moment. Just one line for who? You the developer to write? Future you (or your teammates) to debug and maintain? Or the end-user to download, parse, and execute?
|
|
|
Optimizing INP for a React app (and performance learnings)
For the past six months, TK Kinoshita has focused on optimizing Interaction to Next Paint (INP). This extremely thorough post includes:
- An overview of INP
- How TK debugs performance bottlenecks
- Solutions and optimizations
- A list of performance learnings accumulated along the way
|
|
|
How to reclaim your brain from tech
We all overuse technology. So are you interested in conducting a little science experiment on yourself? This article – excerpted from the book Attention Hijacked: Using Mindfulness to Reclaim Your Brain From Tech by Erica B. Marcus – offers some compelling reasons (and tips) to train your brain to use technology more mindfully.
Need more evidence? Inês Machado breaks down cognitive load and its impact on our mental health.
|
|
|
Performance Hero: Estela Franco!
Continuing our series of Performance Heroes, this month we celebrate Estela Franco! Estela is a passionate web performance and technical SEO specialist with more than ten years of contributing to our community. She loves to talk and share about web performance optimization, technical SEO, JavaScript, and Jamstack whenever she can.
|
|
|
|
