Skip to content

NEW! Largest Contentful Paint tips, the psychology of speed & the fastest news sites

Oct 9, 2023


Hello <<First Name>>,

I'm so happy to share that we recently hit a new milestone for this newsletter – 12,000 subscribers! If you'd like to encourage your team members and fellow performance enthusiasts to sign up, they can do that here

Some highlights in this edition:
  • Real-world tips for improving your Largest Contentful Paint times
  • The psychology of web performance (AKA why we crave fast online experiences)
  • How to solve common performance issues in Shopify themes
  • An inspiring case study from Terra
Whether you're brand-new to performance – or just need a monthly dose of inspiration – I hope you find this newsletter helpful.

Until next time,
Tammy

m: @tammy
t: @tameverts

Der Spiegel leads EU and UK news sites

The latest snapshot from our Media Page Speed Benchmarks shows that 10 out of the 14 sites in the leaderboard deliver Largest Contentful Paint times under Google's recommended 2.5-second threshold. This is great to see!

What helped Der Spiegel take the top spot? Drilling down into their synthetic test details, you can see:

  • Snappy 0.08s backend time
  • Only 15 requests before LCP, all of which are well optimized
  • Minimal blocking requests

Want to benchmark your own site against your competitors? It's easy!

How prefetching helped Terra speed up Largest Contentful Paint and increase ad CTR by 30%

Prefetching is a technique used to speed up page loading by downloading resources – or even entire pages – which are likely to be needed in the near future. This case study from Guilherme Moser de Souza and Thierno Thiam describes how Terra implemented prefetching, which resulted in a 11% ads click-through rate (CTR) increase on mobile, 30% ads CTR on desktop, and 50% reduction in the Largest Contentful Paint (LCP) times.

The Ultimate Low-Quality Image Placeholder Technique

Using a low-quality image placeholder while waiting for your full-resolution Largest Contentful Paint (LCP) element to render can fill a user-experience gap by showing visitors something on the page. However, owing to rules and restrictions with LCP as a spec, it’s unlikely to help your LCP scores. Harry Roberts offers some tips for helping your LQIP meet requirements for consideration as LCP, leading to sub-2.5s scores.

Stop Lazy Loading Product and Hero Images

"You’re better off not implementing lazy loading at all than implementing it incorrectly."

Lazy loading images is a web performance pattern to help prevent the unnecessary download of files that may not be needed. This helps reduce total bytes downloaded. It also frees the browser to better prioritize more important assets needed for initial render. However, as Jason Grigsby points out, not all images should be lazy loaded. Lazy loading product and hero images affects user experience, Core Web Vitals, and SEO. 

How Layout Position Affects Three Big Web Performance Levers

Sia Karamalegos helps Shopify merchants improve their web performance. She sees three common problems related to layout position:

  • Lazy loading images above the fold
  • Asynchronous loading of CSS needed for elements above the fold
  • Not prioritizing the fetch of the the Largest Contentful Paint (LCP) image

Historically, these three issues have been difficult to solve in Shopify themes, so Sia's team has created some new features to help. 

The Psychology of Web Performance

What do the most successful websites and apps have in common? They're all fast. Faster sites have happier users, and those happy users visit longer and spend more. But why is that? Last month at Beyond Tellerrand Berlin, I had the pleasure of giving a talk about one of my favourite topics: the fascinating research into the neuroscience of speed. Watch the full video here.

Long Animations Frame API

With Interaction to Next Paint (INP) poised to become a Core Web Vital in just a few months, the new Long Animation Frames API proposal from the Chrome team is worth learning more about. As explained by Barry Pollard and Noam Rosenthal, the proposal seeks to update the Long Tasks API to provide a better understanding of slow user interface (UI) updates. This can be useful to identify slow animation frames that are likely to affect INP.

Where to Find Us IRL

  • SmashingConf Antwerp (October 9-12) – We're excited to be a sponsor of Smashing's brand-new conference focusing on design and UX! If you see our team member Andy Davies there, be sure to say hi.
  • P99 Conf (October 18-19) – I'll be speaking about performance budget best practices. P99 is free and online, and it features a fantastic speaker lineup, so be sure to get your ticket!
  • PerfNow Amsterdam (November 2-3) – SpeedCurve founder Mark Zeman will be speaking about the intersection of performance and design, and I'll be doing a talk about how to create performance impact in our rapidly changing tech landscape. There's only a handful of tickets left, so get yours while you can!

Copyright © 2023 SpeedCurve Limited, All rights reserved.
Unsubscribe from this list.