Web Vitals meetup for Lisbon SEO meetup

1. Lisbon SEO Meetup @LoukilAymen
Web Vitals are vitals

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

3. Lisbon SEO Meetup @LoukilAymen

4. Lisbon SEO Meetup @LoukilAymen
37% of
shipped
JavaScript is
unused!

5. Lisbon SEO Meetup @LoukilAymen
The web is
suffering

6. Lisbon SEO Meetup @LoukilAymen
So your
users/business
too..

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

12. Lisbon SEO Meetup @LoukilAymen
But...

13. Lisbon SEO Meetup @LoukilAymen

14. Lisbon SEO Meetup @LoukilAymen
There are more than 5246 metrics !

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

20. Lisbon SEO Meetup @LoukilAymen
How to optimize LCP

21. Lisbon SEO Meetup @LoukilAymen
What’s your current LCP? [With Google Lighthouse]

22. Lisbon SEO Meetup @LoukilAymen
What’s your current LCP? [With DevTools Performance]

23. Lisbon SEO Meetup @LoukilAymen
A GDPR consent banner as LCP!?

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

31. Lisbon SEO Meetup @LoukilAymen
Long tasks, chase em all!

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.

34. Lisbon SEO Meetup @LoukilAymen
Shifting elements

35. Lisbon SEO Meetup @LoukilAymen
Shifting elements

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

37. Lisbon SEO Meetup @LoukilAymen

38. Lisbon SEO Meetup @LoukilAymen
How to proceed?

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

41. Lisbon SEO Meetup @LoukilAymen
#CWV Frequently Asked Questions

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