Hello <<First Name>>,
Happy new year! Here at SpeedCurve, we're kicking off 2024 with the exciting announcement that Tim Kadlec has joined our team. He'll be helping us make our tools even better and our customers even happier. More on that below, along with:
- A web performance challenge for 2024
- An excellent primer if you're just getting started with performance
- Surprising new insights about Interaction to Next Paint (INP)
- Inspiring case studies from ADEO, Hotjar, Trendyol, and GOV.UK
Until next time, I hope you stay safe, happy, and well.
Warmly,
Tammy
@tameverts
|
|
|
Welcome to the SpeedCurve team, Tim!
Many of you may already know Tim Kadlec, but for those who don't, Tim has been a tireless champion of web performance and user experience for well over a decade – as a consultant, developer, and product engineer.
In the many years I've known him, Tim has done so many great things for the performance community, including creating WPO Stats (a repository of case studies), writing and co-writing books for O'Reilly and Smashing, and most recently launching perfwork (a job board for performance folks). So you can only guess how thrilled we are to announce that Tim has joined the SpeedCurve team!
|
|
|
A Faster Web in 2024
Rick Viscomi summarizes the state of performance in 2023, why we should care about site speed more than ever, and some good news – last year the web got 6% faster! He concludes with a challenge:
"If we maintain the current rate of change of 6% per year, in 2026 more than half of sites will have good Core Web Vitals on mobile. So here’s my challenge. Let’s continue pushing our sites, our CMSs, our JavaScript frameworks, and our third party dependencies faster. Let’s continue to be advocates for better (if not instant) performance best practices in the web community. Here’s to the next 6% in 2024!"
|
|
|
Getting Started with Web Performance
As Alistair Shepherd points out, web performance is tricky! That's why he's created this helpful primer to get you started (or fill any gaps in your knowledge).
"Let us go through some of the reasoning, jargon, metrics, tools, and some top tips on how you can improve the performance of websites you look after. Whether you’re a practised performance prophet, dipping your toes into the river of load times, or are desperately hoping someone will explain what an FCP is and why Google wants one, let’s all dig into web performance together!"
|
|
|
Case study: How Hotjar optimized perceived performance to improve KPIs
In this excellent case study, Eryk Napierała explains how Hotjar divided their real user monitoring (RUM) traffic into cohorts – with "good", "average" and "bad" performance – for a custom metric that measures how long it took for each visitor to see the 'Sign up' button on a page. They then looked at conversion data for each cohort, and (not surprisingly) found that conversions were higher for the "good" cohort. With that information in hand, they began optimizing with the goal of improving their custom metric time.
Check out the full case study to find out how things went and get lots of practical tips for your own optimization projects.
|
|
|
Mobile INP performance: The elephant in the room
Amazing analysis of Interaction to Next Paint performance from Cliff Crocker. The most surprising finding: INP for mobile has a stronger correlation with business metrics than INP for desktop!
As Cliff explains, only 65% of mobile sites have "good" Interaction to Next Paint. Why? How much can this hurt your business? And how can you fix it before INP dethrones FID as the responsiveness metric in Core Web Vitals in March?
|
|
|
How to find (and fix!) INP interactions on your pages
You can often use the interaction element as a starting point for troubleshooting Interaction to Next Paint. In (yet another) insightful post, Cliff Crocker explains how to do just that, so you can find the troublesome interaction elements on your pages, improve INP, and make your users happy!
|
|
|
Case study: How Trendyol reduced INP by 50%, resulting in a 1% uplift in CTR
Trendyol is one of the top ecommerce platforms in the world, with roughly 30 million customers and 240,000 sellers. To achieve its goal of providing the best possible user experience at scale while maintaining flexibility of content and working with an older version of React, Trendyol focuses on Interaction to Next Paint (INP) as a key metric to improve.
This case study – by Mustafa Birinci, Gilberto Gocchi, and Thierno Thaim – describes Trendyol's journey of improving INP on its product landing page. The result: a 50% reduction of INP and a 1% uplift in search.
|
|
|
Performance audit: Lego.com
My kids and I love LEGO, so every year I spend a lot of time on the LEGO site during the holidays. I thought it would be fun to give the site a quick performance audit. I was surprised to find that, while the site appeared to start rendering quickly, its Largest Contentful Paint (LCP) time was almost 4 seconds (well over Google's recommended threshold of 2.5 seconds). Here's what I learned – including some insights about the site's critical rendering path – along with some lessons you may want to apply to your own pages.
|
|
|
Understanding the critical rendering path
Speaking of LEGO's critical rendering path, Barry Pollard just released this new module in Google's Learn Performance course. Great to see the critical rendering path in the spotlight again!
|
|
|
Case study: How GOV.UK reduced CSS size and improved performance
As the provider of online government services for the entire UK population, GOV.UK takes accessibility very seriously. Part of the team's mandate is to help ensure a fast, performant experience for users accessing GOV.UK on slow devices and connections. In this recent case study, Jon Kirwin and Martin Jones share:
"We recently reduced CSS size and improved performance across GOV.UK pages by moving away from bundling all CSS into a single stylesheet served to all pages to serving smaller stylesheets containing only the necessary styles for each page. There have been reductions of up to 40% in CSS size on some pages, accompanied by incremental improvements in timing metrics across many pages. These improvements could lead to a slightly faster experience for users accessing GOV.UK through older or low end devices or for people on slower connections."
|
|
|
Case study: ADEO experimented with hybrid rendering and improved Largest Contentful Paint
The team at ADEO is passionate about performance and isn't afraid to explore new techniques. In this detailed case study, Thomas Rumas shares not just how they implemented hybrid rendering – which combines server- and client-side rendering – but why. In addition to the potential performance advantages, adopting cutting-edge practices is a great way to attract talented new team members. If this appeals to you, then this case study is a must-read.
|
|
|
|
