Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web vitals are vitals - Aymen Loukil

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 51 Ad
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement
Advertisement

Web vitals are vitals - Aymen Loukil

  1. 1. Lisbon SEO Meetup @LoukilAymen Web Vitals are vitals
  2. 2. Lisbon SEO Meetup @LoukilAymen Aymen Loukil International SEO Consultant #TechnicalSEO #webperf https://www.aymen-loukil.com @LoukilAymen
  3. 3. Lisbon SEO Meetup @LoukilAymen
  4. 4. Lisbon SEO Meetup @LoukilAymen 37% of shipped JavaScript is unused!
  5. 5. Lisbon SEO Meetup @LoukilAymen The web is suffering
  6. 6. Lisbon SEO Meetup @LoukilAymen So your users/business too..
  7. 7. Lisbon SEO Meetup @LoukilAymen Stress increases by 50% when websites are slower 2010 behavioural analysis study
  8. 8. Lisbon SEO Meetup @LoukilAymen Alpha waves depressed by half Un-throttled website EEG Throttled website EEG
  9. 9. Lisbon SEO Meetup @LoukilAymen Low performance can seriously undermine brand health, reputation and value
  10. 10. Lisbon SEO Meetup @LoukilAymen Read more on simonhearne.com/2021/web-stress/
  11. 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. 12. Lisbon SEO Meetup @LoukilAymen But...
  13. 13. Lisbon SEO Meetup @LoukilAymen
  14. 14. Lisbon SEO Meetup @LoukilAymen There are more than 5246 metrics !
  15. 15. Lisbon SEO Meetup @LoukilAymen Google tries to make things simpler..
  16. 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. 17. Lisbon SEO Meetup @LoukilAymen How to measure Web Vitals Lab tools Field tools
  18. 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. 19. Lisbon SEO Meetup @LoukilAymen Largest Contentful Paint “Supposed” to measure, when the largest element (most important) is displayed. #Loading
  20. 20. Lisbon SEO Meetup @LoukilAymen How to optimize LCP
  21. 21. Lisbon SEO Meetup @LoukilAymen What’s your current LCP? [With Google Lighthouse]
  22. 22. Lisbon SEO Meetup @LoukilAymen What’s your current LCP? [With DevTools Performance]
  23. 23. Lisbon SEO Meetup @LoukilAymen A GDPR consent banner as LCP!?
  24. 24. Lisbon SEO Meetup @LoukilAymen Master your LCP element for each page type/template
  25. 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. 26. Lisbon SEO Meetup @LoukilAymen First Input Delay Measures the delay, user is facing when interacts with the web page #Interactivity
  27. 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. 28. Lisbon SEO Meetup @LoukilAymen image credit Chenay Tsai, Demian Renzulli First Input Delay
  29. 29. Lisbon SEO Meetup @LoukilAymen Since it needs interaction to be measured, it is a field-only metric.
  30. 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. 31. Lisbon SEO Meetup @LoukilAymen Long tasks, chase em all!
  32. 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. 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. 34. Lisbon SEO Meetup @LoukilAymen Shifting elements
  35. 35. Lisbon SEO Meetup @LoukilAymen Shifting elements
  36. 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. 37. Lisbon SEO Meetup @LoukilAymen
  38. 38. Lisbon SEO Meetup @LoukilAymen How to proceed?
  39. 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. 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. 41. Lisbon SEO Meetup @LoukilAymen #CWV Frequently Asked Questions
  42. 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. 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. 44. Lisbon SEO Meetup @LoukilAymen What’s the weighting of each metric? https://googlechrome.github.io/lighthouse/scorecalc/
  45. 45. Lisbon SEO Meetup @LoukilAymen Metrics will evolve CLS needs improvement and will have more weight
  46. 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. 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. 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. 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. 50. Lisbon SEO Meetup @LoukilAymen Web Performance Recipes A weekly #webperf newsletter My upcoming book Subscribe here: https://webperformance.recipes/
  51. 51. Lisbon SEO Meetup @LoukilAymen Thank you! @LoukilAymen https://www.aymen-loukil.com

×