Optimising for Core Web Vitals on SPAs

Simon Hearne at Lazy Load '22

Transcript
Accessible Slides

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?

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

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

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.