Skip to content

NEW: Which news site is fastest? Also: Optimizing LCP & inspiring case studies!

Jun 21, 2023

Hello <<First Name>>,

Every month, I'm so inspired by the resources and articles in this newsletter, and this month is no exception. As always, I'm so grateful for the people who take time to share their knowledge and experience.

In this edition:
  • How fast are top news sites?
  • How to prioritize performance optimizations
  • Optimizing Largest Contentful Paint
  • Understanding the growing gap between FCP and LCP
  • A review of Glyphhanger, an open-source font optimizer
  • Five tips for boosting React performance
  • Easier synthetic test scripting for complex use cases
  • And a huge roundup of performance case studies!

If you're new to performance (or just need a refresher), I hope you find this newsletter helpful.

Until next time,
m: @tammy
t: @tameverts

How fast are popular news sites?

It's not often that every site in one of our Industry Benchmarks leaderboards delivers optimal performance. I'm excited to share this snapshot of media sites in the UK and the EU, showing that every site delivered a Start Render time of 1.5 seconds or less!

The BBC home page took the top spot with a 0.4 second Start Render time. Drilling down into the page's test details, you can see that it was helped by having a super-speedy backend time (0.09s), no blocking resources, and a relatively short critical rendering path. Well done!

Industry 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.

How to Prioritize Web Performance Optimizations

You’ve read up on web performance, audited your site for ways to improve, and have a list of optimizations longer than your existing backlog. Now what? In her recent talk at We Love Speed, Melissa Ada explains how to estimate impact according to your organization’s goals.

Optimizing Largest Contentful Paint

After you've followed Melissa's prioritization tips, there's a good chance that optimizing LCP will be near the top of your list. Luckily, Harry Roberts has a wealth of hands-on LCP optimization tips to share in his recent WebExpo talk. 

The Growing "Contentful" Gap

If you're measuring both First Contentful Paint and Largest Contentful Paint, this analysis of FCP versus LCP by Tim Kadlec is a must-read. The Google Chrome team recently made some changes to how they define "contentful" for Largest Contentful Paint. As a result, there's an even greater gap between the results you might see when you compare your First Contentful Paint results to your LCP results.

As Tim writes:

The reason why “contentful” has very different meaning in the context of LCP vs FCP is because while the two metrics sound very similar, they’re actually built on two different underlying specifications... Until and unless something happens to align the definition, it will be important for anyone measuring both FCP and LCP to remember that, in this case, contentful in one doesn’t equal contentful in the other, and that may lead to some odd disconnects.

Review: Glyphhanger Font Optimizer

Stefan Judis recently experimented with Glyphhanger, an open-source tool – created by Zach Leatherman, who also created 11ty – for optimizing custom web fonts. Starting with a variable font that initially weighed in at 785kB, Stefan reduced that weight down to 52kB. Impressive! 

Case Studies from Performance Leaders

How do companies like Airbnb, Pinterest, BBC, Zillow, Trivago, and Leroy Merlin speed up their sites, use performance budgets, create a culture of performance, and measure the impact of site speed on their business? We've rounded up our favourite case studies and organized them by topic so you can put your finger on the ones you need. Topics include:

Browse the complete listing.

5 Key Tips to Boost Your ReactJS Performance

Muhib ur Rahman Bakar shares some valuable tips to boost the performance of your ReactJS applications, including:

  • Debounce and throttle user input
  • Lazy loading and code splitting
  • Optimize state and props management

Recipes: Multi-step test scripting made easy!

Writing synthetic test scripting from scratch (not to mention debugging it) is time-consuming. With Recipes – easy-to-use script templates – we want to make your testing easier, so you have more time to do the important work of making your pages faster for your users.

SpeedCurve Recipes let you test complex use cases, such as:

  • User journeys
  • Checkout process
  • Submit login form
  • SPA & AJAX navigation
  • Set cookie

In Case You Missed It...

Copyright © 2023 SpeedCurve Limited, All rights reserved.
Browse the newsletter archive • Unsubscribe from this list