Web vitals are vitals - Aymen Loukil
2 likes•1,888 views
The document discusses Google's Core Web Vitals metrics for measuring website performance. It covers the three metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. For each metric, it explains what the metric measures, how to measure it using lab and field tools, and provides optimizations to improve the metric such as reducing page size, prioritizing critical resources, and specifying element sizes. It also addresses frequently asked questions about the metrics and their impact on SEO and user experience. The overall message is that optimizing the Core Web Vitals will improve users' experience of a website which is important for both users and SEO.
![Lisbon SEO Meetup @LoukilAymen
What’s your current LCP? [With Google Lighthouse]](https://image.slidesharecdn.com/webvitalsarevitals-lisbonseomeetup-210316201330/85/Web-vitals-are-vitals-Aymen-Loukil-21-320.jpg)
![Lisbon SEO Meetup @LoukilAymen
What’s your current LCP? [With DevTools Performance]](https://image.slidesharecdn.com/webvitalsarevitals-lisbonseomeetup-210316201330/85/Web-vitals-are-vitals-Aymen-Loukil-22-320.jpg)
Web vitals are vitals - Aymen Loukil
- 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