Optimising for Core Web Vitals on SPAs

There is nothing like a day at the spa.

And then you open your eyes and you realize you need to optimize your single page application for Core Web Vitals.

Though they seem to have a unified many departments under one roof and for one cause, that is Web Performance, it has left many questions unanswered.

Here to tackle these very questions is Web Performance consultant, Simon Hearn.

In his presentation, which is entitled 'Optimizing Core Web Vitals for SPAs'.

Welcome to Lazy Load Simon Hearn.

Optimising Core Web Vitals for SPAs

Simon Hearne

Web Performance Consultant

Hi Simon! I was wondering if you could help with...

Screenshot of report that reads "Core Web Vitals Assessment: Failed Computed from the Core Web Vitals metrics over the latest 28-day collection period."

Don't panic!

Core Web Vitals are your friend, not your foe

In this talk:

  • What the Core Web Vitals are
  • Why they matter (to you and Google)
  • Why SPAs are special
  • How to improve and monitor progress

Core Web Vitals?

Core Web Vitals?

Not just that Google thing

CWVs are proxies of User Experience

Photo of a vital signs monitor in hospital

Largest Contentful Paint
How fast it feels
Cumulative Layout Shift
How jumpy it is
First Input Delay
How interactive it feels

Intermission: Field vs. Lab

Photo of a person in lab coat and gloves holding a test tube

πŸ§ͺ Lab

Controlled tests of a single page / interaction

🌍 Field

Real data from real users on the web

Distributions & Percentiles

  • CWV measured in the field, where data is noisy
  • We use summary metrics to make sense of the noise
  • 75th percentile - ΒΌ experiences are worse, ΒΎ better

Screenshot of a dashboard showing Largest Contentful Paint results for amazon.con on all devices globally

Results will differ between tools

  • Google Analytics + web-vitals.js 🌍
  • Pagespeed Insights 🌍πŸ§ͺ
  • Search Console 🌍
  • Real User Monitoring 🌍
  • WebPageTest πŸ§ͺ

Who uses what?

  • Search Console for SEO folks
  • CrUX & RUM for product
  • PSI & WebPageTest for engineers

Google only cares about field metrics 🌍!

Why Core Web Vitals Matter

Search ❀️ CWV ❀️ Speed

Google G logo above the text. The heart emoji appear to beat.

SEO impact of Core Web Vitals

SEO is a πŸ₯• to create better UX

Don't expect massive ranking boosts

CWV are not pass / fail!

If max ranking boost == 1, this page will get ~0.7

Screenshot of Core Web Vitals assessment, showing assessment of failed

SEO impact of Core Web Vitals

A brief history of #WebPerf

Photo of an alarm clock

  • 2010 - Navigation Timing API
  • 2017 - Paint Timing API
  • 2019 - ALL THE APIS (in Chrome)
    • LargestContentfulPaint API
    • LayoutInstability API
    • EventTiming API

Web vitals are the best performance metrics we've ever had

And they're collected from users around the world for free!

CWV & SPAs

Photo from above of two coffee cups, one filled with milk and sat on a layer of black coffee beans. The other is filled with black coffee and is sat on a white surface. The

SPAs break a lot of stuff

SPAs break performance APIs

SPAs break performance APIs

One load event per session, one FCP, one LCP...

LCP is only measured on the first page load

CLS is measured throughout the whole session

CLS is measured throughout the whole session

This breaks page-level attribution 😱

FID is only measured on the first page load

In summary...

SPA websites are penalised by ignoring mid-session navigations

except CLS - where the worst 1-5s window is captured

Optimising CWVs on SPAs

Largest Contentful Paint

Screenshot of the WebPageTest waterfall for a SPA. Simon describes key points of this chart.

Let's remove preloads

Screenshot of PerformanceProxy settings, showing 'Remove Preload Scripts' selected.

perfproxy.com

Screenshot of WebPageTest waterfall for the page showing render-blocking removed, LCP less than 3s, and other key points Simon describes

HTML Size Analyser

Screenshot of DebugBear HTML Size Analyser tool showing there is 280kB of inline CSS and 160kB of inline JS

Where we got to (3G)

Screenshot of filmstrip loading of a page, showing a muchfaster loading after simple changes.

LCP top tips

  • SSR all landing pages
  • Defer / reduce / remove expensive JS
  • Increase hero element priority
  • Only preload critical assets
  • No cross-origin requests in critical path
  • Reduce HTML size (<50kB compressed)

Image LCP?

  • Ensure <img src=""> in HTML source
  • Ensure loading attribute is not "lazy"
  • Try fetchpriority="high" attribute
  • Keep hero images <100kB
  • Use modern formats (AVIF > WEBP > JPEG > PNG > GIF)

Consent LCP?

WebPageTest.org

WebPageTest filmstrip view with LCP highlights enabled

Consent LCP?

  • Work with CMP to improve render time
  • Break text into separate paragraphs!

Cumulative Layout Shift

CLS can come from anywhere!

  • On page load (easy)
  • On scroll (medium)
  • On (slow) interactions (tricky)

Remember that CLS attribution is broken in Search Console

CLS top tips

  • Ensure all images have size attributes (or aspect-ratio)
  • Preload critical web fonts
  • Use transforms instead of top etc.
  • Pre-allocate space for dynamic elements
  • Record profiles of key interactions

Screenshot shows a layout shift

First Input Delay

Your FID should be green!

Screenshot from Web Almanac shows FID performance by device. FID is green for 100% of desktop landing pages and 90% on mobile

Web Almanac 2021

FID top tips

  • Focus on Total Blocking Time
  • Break tasks into small chunks
  • Consider PartyTown?

Bonus: Interaction to Next Paint (INP)

INP may replace FID

web.dev/inp/

Video shows the same animation side by side of a stylised hand tapping a colour selector in a mobile page. On the left the tap instantly changes a shirt colorfrom red to green. On the right thiscolor change takes a second or two.

INP top tips

  • Provide visual feedback to user input
  • Don't attach blocking JS on input events

In summary

s
  • CWVs are great performance metrics
  • CrUX data is free RUM!
  • SEO impact is low
  • Optimising CWV improves UX

Links & Tools

Thank you πŸ™

@SimonHearne simonhearne.com

Photo of two pairs of feet and near them a sign embedded in the pavement "passion lead us here".