Skip to content

CLS visuals, GitHub Action & great #webperf case studies

Nov 1, 2020

Hi there,

I'm in the lucky position of getting to speak with many of our wonderful SpeedCurve users every month. Lately it seems like those conversations inevitably come around to Google's Core Web Vitals. That's why everyone here at SpeedCurve HQ has been putting a lot of thought into making Web Vitals easier and more accessible for you. This includes the recent launch of a couple of new features – as well as some in-house analysis – that we think you're going to find helpful. 

Also in this letter: you can learn how to run SpeedCurve tests as part of your GitHub workflow, read some exciting new performance case studies, and (in case you missed it) learn how to correlate your own business metrics against your performance metrics.

We sincerely love and appreciate your feedback, ideas, and suggestions. Keep them coming! 

Until next time,
Tammy
@tameverts

••••••••••••

Visualizing layout shifts

One of the big challenges with Google's new Cumulative Layout Shift (CLS) metric is understanding which elements actually moved on the page, when they moved, and by how much. 

To help with debugging your CLS scores, we've added a new visualization in our synthetic testing tool that shows each layout shift and how each individual shift adds up to the final cumulative metric. In this post, Mark (@MarkZeman) explains how you can use layout shift visuals to tackle the biggest issues on your pages. 

Cumulative Layout Shift: What it measures, when it works (and doesn't), and how to use it

I've spent a fair bit of time wrapping my head around CLS and looking at a lot of data. Here's my take on these vital (to me) questions:

  • What does CLS mean in terms of user experience?
  • Does it correlate to user engagement or business metrics?
  • Ultimately, how much should we care about CLS?

More good reads about Core Web Vitals...

We're definitely not the only folks thinking about Web Vitals. Here are some great takes from our friends in the #webperf community:

Investigating Time to Interactive (TTI)

New metrics are always compelling, but we still get plenty of questions about longstanding metrics, such as Time to Interactive (TTI). One recurring question is "Why is my TTI so slow?" In this short video, Cliff (@cliffcrocker) explains how TTI is calculated and shows you how to identify what could be delaying your TTI metrics.

Run SpeedCurve tests as part of your GitHub workflow

With the new GitHub Action for SpeedCurve, you can now run tests against pull requests before they're merged. Thanks for this one, Joseph (@Joseph_Wynn)! 

New #webperf case studies

If you haven't discovered it yet, WPOstats.com is a great collection of industry-led case studies that demonstrate the impact of web performance on user experience and business metrics. Here are a few recent submissions that caught my interest:

  • Apropos of all the discussion about Core Web Vitals, a Google study that included millions of page impressions found that when a site meets the recommended thresholds for the Core Web Vitals metrics, users are at least 24% less likely to abandon a page before it finishes loading.
  • SportsShoes.com found that faster-than-average mobile visits were 41% more likely to convert than slower-than-average visits.
  • SnipesUSA.com decreased page load speed by 30% and saw its average conversion rate double to from 1% to 2%.
  • Rossignol.com improved their load time by 1.9 seconds and cut their Speed Index by a factor of 10, contributing to a 94% improvement in conversion rate when compared to the year prior.

Want to create your own case study?

Demonstrating the impact of performance on your business is a great way to get your entire company excited about performance. Here's how to use LUX (our real user monitoring tool) to track your own conversion rates – or any other user/business metrics – and correlate them against your performance metrics.

Building web performance culture at Traveloka 

In this letter, we've touched on case studies, continuous integration, and performance culture, so this seems like a great piece to end with...

In this detail-packed article, Ryan Nixon Salim shares how Traveloka built their own CI tools to not just manage performance, but also build a stronger performance culture. Tons of great tips and food for thought here!