Skip to content

Fastest retail sites + how to make LCP faster, optimize Long Tasks & speed up async snippets

Nov 1, 2022

SpeedCurve

Hello there!

It's been two weeks since I returned home from performance.now() and I'm still buzzing. It was so wonderful to catch up with old friends and meet new ones. (Pictured here with a few members of our beloved SpeedCurve family: Andy Davies, Cliff Crocker, Steve Souders, and Melanie Hubert.) If you missed out on the conference, or if you want to revisit your favourite talks, slides and videos are being uploaded daily.

Just because the conference season is over doesn't mean we're ready to go into hibernation. In this month's newsletter we have a new leader in our US retail page speed benchmarks, some super-helpful how-tos, and a pair of must-read personal case studies.

Until next time, I hope you stay safe, happy, and well.

Tammy (@tameverts)

B&H leads US retail sites in mobile performance

With holiday shopping swinging into gear, it's interesting to note which retail sites are delivering a fast experience, especially to mobile shoppers. In our current US Retail Page Speed Benchmarks, B&H took the top spot, with a Largest Contentful Paint (LCP) time of 3.9 seconds for slower mobile devices.

What helped them with this impressive LCP: moving the hero image to the top of the page. If you drill down into their test details and look at their waterfall chart, you can see that the main image is the first request called directly after the HTML.

Making websites faster: A potted history of my 10 years in web performance

Stuart McMillan (@mcmillanstu) has been making websites fast for more than ten years. He recently rounded up a tonne of insights he's gathered over the years:

Firstly, I wanted to share a bit of background as to why I am interested in web performance – establish my bona fides, so to speak. Secondly, I wanted to show that it is possible to create really fast user experiences. There is no magic involved, it just takes commitment over a period of time. My third objective is a wider point... We have allowed websites to get overly complex, not to the benefit of the user experience, but to its detriment.

From development to real users: How to create a web performance story

This is a must-read post by Vinicius Dallacqua (@WebTwitr) on the Spotify Engineering blog. I especially love the focus on real user experiences and metrics. Vinicius breaks down how to build a compelling performance story into three easy(ish) stages:

  1. Get to know your lab (synthetic) data
  2. Get to know your users
  3. Identify what to measure

How to load your LCP image faster

Want to load your hero image sooner, AKA improve your Largest Contentful Paint (LCP) time? Try to boost its priority – a practice now used in production by performance leaders like eBay, Etsy, and Yahoo.

Learn more in this article by Leena Sohoni (@leena_sohoni), Addy Osmani (@addyosmani), and Pat Meenan (@patmeenan).

How to optimize Long Tasks

The number and duration of Long Tasks on a page can hurt your users' experience – and even your business metrics. As a solution, perhaps you've been told "don't block the main thread" and "break up your Long Tasks".

But what does it mean to actually do those things? And what kind of results can you expect? Jeremy Wagner (@malchata) explains.

How to speed up async snippets

Harry Roberts (@csswizardry) has helped some of the world's biggest brands make their sites faster. As a consultant he's found that the majority of developers he encounters don't fully understand how async snippets work.

Harry explains what async snippets do, when and why to use them, and how to speed them up.

Page labels: Why they're important and how to use them

There are so many benefits to labeling your pages in both your synthetic and real user monitoring (RUM) tools. Page labels give you the ability to:

  • Compare and benchmark similar pages across different sites
  • Create more meaningful performance budgets in RUM
  • Correlate RUM data with synthetic diagnostics in the same charts (e.g., for Core Web Vitals that are measurable in synthetic and RUM)
  • Prioritize performance optimizations according to their projected impact on real users

We recently released some exciting new capabilities for labeling your RUM pages. Cliff Crocker (@cliffcrocker) explains why page labels are important and shows you how easy it is to apply labels to your pages.

Catching Up With Web Performance: Annie Sullivan

Catching Up With Web Performance is a new podcast series from Tanner Hodges (@atannerhodges), and I definitely recommend checking it out. I loved Tanner's recent interview with Google engineer Annie Sullivan (@anniesullie), who is one of our main Core Web Vitals oracles.

ICYMI