7. Lisbon SEO Meetup @LoukilAymen
Stress increases by 50% when websites are slower
2010 behavioural analysis study
8. Lisbon SEO Meetup @LoukilAymen
Alpha waves depressed by half
Un-throttled website EEG Throttled website EEG
9. Lisbon SEO Meetup @LoukilAymen
Low performance can
seriously undermine
brand health,
reputation and value
10. Lisbon SEO Meetup @LoukilAymen
Read more on simonhearne.com/2021/web-stress/
11. Lisbon SEO Meetup @LoukilAymen
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
15. Lisbon SEO Meetup @LoukilAymen
Google tries to make things simpler..
16. Lisbon SEO Meetup @LoukilAymen
Benefits of this simplification
● Unified target metrics
● Unified guidance
● Same basis of evaluation
● A basic representation of a user experience
17. Lisbon SEO Meetup @LoukilAymen
How to measure Web Vitals
Lab tools Field tools
18. Lisbon SEO Meetup @LoukilAymen
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
19. Lisbon SEO Meetup @LoukilAymen
Largest Contentful Paint
“Supposed” to measure, when the largest
element (most important) is displayed.
#Loading
24. Lisbon SEO Meetup @LoukilAymen
Master your LCP element for each page type/template
25. Lisbon SEO Meetup @LoukilAymen
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
26. Lisbon SEO Meetup @LoukilAymen
First Input Delay
Measures the delay, user is facing when
interacts with the web page
#Interactivity
27. Lisbon SEO Meetup @LoukilAymen
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!
28. Lisbon SEO Meetup @LoukilAymen
image credit Chenay Tsai, Demian Renzulli
First Input Delay
29. Lisbon SEO Meetup @LoukilAymen
Since it needs interaction
to be measured,
it is a field-only metric.
30. Lisbon SEO Meetup @LoukilAymen
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
32. Lisbon SEO Meetup @LoukilAymen
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
33. Lisbon SEO Meetup @LoukilAymen
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.
36. Lisbon SEO Meetup @LoukilAymen
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
39. Lisbon SEO Meetup @LoukilAymen
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!
40. Lisbon SEO Meetup @LoukilAymen
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
42. Lisbon SEO Meetup @LoukilAymen
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!
43. Lisbon SEO Meetup @LoukilAymen
Sites aren’t going to disappear because they are slow
My opinion: Unless your website is really really slow..
44. Lisbon SEO Meetup @LoukilAymen
What’s the weighting of each metric?
https://googlechrome.github.io/lighthouse/scorecalc/
45. Lisbon SEO Meetup @LoukilAymen
Metrics will evolve
CLS needs improvement and will have more
weight
46. Lisbon SEO Meetup @LoukilAymen
What is the easiest metric to pass?
Only 1% of mobile sessions
have poor FID.
From top 1k websites, CRuX data
47. Lisbon SEO Meetup @LoukilAymen
And the most tricky?
CLS is problematic. Only 40%
of sessions have good one!
From top 1k websites, CRuX data
48. Lisbon SEO Meetup @LoukilAymen
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)
49. Lisbon SEO Meetup @LoukilAymen
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
50. Lisbon SEO Meetup @LoukilAymen
Web Performance Recipes
A weekly #webperf newsletter
My upcoming book
Subscribe here:
https://webperformance.recipes/
51. Lisbon SEO Meetup @LoukilAymen
Thank you!
@LoukilAymen
https://www.aymen-loukil.com