Web vitals are vitals - Aymen Loukil

Lisbon SEO Meetup @LoukilAymen
Web Vitals are vitals

Aymen Loukil
International SEO Consultant
#TechnicalSEO #webperf
https://www.aymen-loukil.com
@LoukilAymen

37% of
shipped
JavaScript is
unused!

The web is
suffering

So your
users/business
too..

Stress increases by 50% when websites are slower
2010 behavioural analysis study

Alpha waves depressed by half
Un-throttled website EEG Throttled website EEG

Low performance can
seriously undermine
brand health,
reputation and value

Read more on simonhearne.com/2021/web-stress/

We must all work to improve the Web experience
developers Product
Owners
Marketing Designers SEOs Webmasters Site owners
Hosting and
cloud
providers
Web
browsers
Smartphones
brands
Legal experts CEOs Frameworks
builders
Search
engines
Ads networks Internet
providers
QA analysts Grandma Governments NGOs Web
consortiums

But...

There are more than 5246 metrics !

Google tries to make things simpler..

Benefits of this simplification
● Unified target metrics
● Unified guidance
● Same basis of evaluation
● A basic representation of a user experience

How to measure Web Vitals
Lab tools Field tools

How to measure Web Vitals
Lab tools Field tools
Good for debugging and measuring
performance on controlled
environments.
But don’t reflect what real users are
facing in real life.
Excellent to capture real-life user
experience.
Should confirm/deny the trend seen
on lab tools.
But is not suitable for debugging
performance issues

Largest Contentful Paint
“Supposed” to measure, when the largest
element (most important) is displayed.
#Loading

How to optimize LCP

What’s your current LCP? [With Google Lighthouse]

What’s your current LCP? [With DevTools Performance]

A GDPR consent banner as LCP!?

Master your LCP element for each page type/template

Optimize LCP
● Optimize Time To First Byte (server response time)
○ Slow server = slow everything
● Reduce transfer size of resources
○ Delete is not used!
○ Compress
○ Minify
○ Srcset for images
● Prioritize of the LCP element resources
○ Image? preload it
○ Font? preload it
○ Need CSS? Inline the critical part

First Input Delay
Measures the delay, user is facing when
interacts with the web page
#Interactivity

First Input Delay
It is measured for these interactions:
● Text fields (forms)
● Checkboxes / radio buttons
● Select dropdowns
● Links (a href)
● Interactions behind event listener
=> 99% of what a user want first to do on a
page!

image credit Chenay Tsai, Demian Renzulli
First Input Delay

Since it needs interaction
to be measured,
it is a field-only metric.

Interactivity in the lab Interactivity in the field
TBT FID
Total Blocking Time First Input Delay
GOOD POOR
300 ms
The sum of the extra times of all the long tasks
(>50 ms on the main thread)
The delay user got when interacting with the
page
2 metrics for interactivity

Long tasks, chase em all!

Optimize TBT/FID
● Remove unused JavaScript code
○ unused libraries
○ replace with native code
○ Split your code per page type
○ Send smaller chunks
● Defer non critical JavaScript code
○ Load the needed code at the needed time
● Release the main thread
○ Refactor long tasks into smaller ones
○ Delegate code to a Service Worker
● Be careful of 3rd-parties

Cumulative Layout Shift
Assesses the visual stability of the web page
during loading.
Elements are loaded asynchronously, those
who arrive late move the previous ones.

Shifting elements

Reduce CLS
● Specify the sizes of elements
○ Images
○ Videos
○ Embeds/iframes
○ Ads and banners
● Reserve required space for elements
○ Check CSS aspect-ratio property
● Don’t dynamically inject content without user interaction
● Prefer transform for animations
● Make sure your fonts are loading fast
○ Preload + font-display:optional

How to proceed?

Web Vitals optimization workflow
Audit in lab / field
Identify issues
per page type
List optimizations
per page type
Implement & test
in lab
Write atomic and
clear User Stories
Go live
See the impact in
the field
Repeat and
iterate!

How to Web Vitals optimization workflow
Audit in lab / field
Identify issues
per page type
List optimizations
per page type
Implement & test
in lab
Write atomic and
clear User Stories
Go live
See the impact in
the field
Repeat and
iterate!
Tools: Lighthouse, WPT, PSI,
DevTools, Search Console report
Lighthouse CI Dashboard:
g.co/chromeuxdash
One optimization at a
time!
Incremental
improvements

#CWV Frequently Asked Questions

Core Web Vitals SEO impact ?
● Tiny impact
● Will evolve and become more
important over time
My opinion: it depends on where you
are going from!

Sites aren’t going to disappear because they are slow
My opinion: Unless your website is really really slow..

What’s the weighting of each metric?
https://googlechrome.github.io/lighthouse/scorecalc/

Metrics will evolve
CLS needs improvement and will have more
weight

What is the easiest metric to pass?
Only 1% of mobile sessions
have poor FID.
From top 1k websites, CRuX data

And the most tricky?
CLS is problematic. Only 40%
of sessions have good one!
From top 1k websites, CRuX data

What about the scope of tracked pages?
Everything except non public domaines:
- Behind login pages!
- Noindex(ed) pages!
- Robotted pages!
=> Another proof that Web VItals are mainly for the user experience and they go
beyond the SEO scope
TIP: Pay attention to your URL structure (logged/non-logged)

Final thoughts
● Web Vitals are user-centric metrics
● What’s good for users, good for SEO
● It is just the beginning of an exciting #webperf journey
● Don’t panic, iterate small wins for the long run
● A good UX is vital for healthy business

Web Performance Recipes
A weekly #webperf newsletter
My upcoming book
Subscribe here:
https://webperformance.recipes/

Thank you!
@LoukilAymen
https://www.aymen-loukil.com

Web vitals are vitals - Aymen Loukil

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web vitals are vitals - Aymen Loukil

Similar to Web vitals are vitals - Aymen Loukil (20)

More from Aymen Loukil

More from Aymen Loukil (15)

Recently uploaded

Recently uploaded (20)

Web vitals are vitals - Aymen Loukil