Advanced Core Web Vitals & User Experience Masterclass

Brighton SEO - Oct 2024
--
Unlock the secrets to optimizing your website's performance in this 90-minute masterclass.

Dive deep into advanced strategies for improving Core Web Vitals, enhancing site speed, and elevating user experience. Learn how to analyse, measure, and implement critical changes to ensure your site meets the highest performance standards.

Ideal for web developers, digital marketers, and UX professionals aiming to boost their site's speed and user satisfaction.

https://brightonseo.com/people/manuel-massimo-madeddu

Transcript

1. @manu_madeddu 1 Advanced Core Web Vitals & User Experience Masterclass Manuel Madeddu PERFORMICS @manu_madeddu https://speakerdeck.com/manuelmadeddu
2. @manu_madeddu 2 @JoJoeRugs Agenda: 1. Introduction to Core Web Vitals 2. Beyond Basics: Deep Dive into Web Vitals Metrics 3. Measuring and Monitoring Core Web Vitals 4. Advanced Optimization Techniques for CWV 5. Workshop: hands-on CWV Analysis 6. Future of Core Web Vitals and UX 7. Takeaways
3. @manu_madeddu 3 Introduction But Before…A Bit About Me: • Father of 2 lovely boys • AD @ Performics • Studied Robotics (Mechatronics) • 14yrs Experience as Marketing Specialist • SEO + AI & Automation Tool: https://faceswapper.ai/
4. @manu_madeddu 4 Introduction Some brands I’ve been working on
5. @manu_madeddu 5 Introduction Ice breakers questions: How much do you know about Web Performance & Core Web Vitals?
6. @manu_madeddu 6 Introduction A) Above 50 B) Any Score Above 30 C) 90 or Above Ice breakers questions: 1. What’s considered an optimal Performance Score in Google PageSpeed Insights to provide a good user experience?
7. @manu_madeddu 7 Introduction Ice breakers questions: 1. What’s considered an optimal Performance Score in Google PageSpeed Insights to provide a good user experience? A) Above 50 B) Any Score Above 30 C) 90 or Above
8. @manu_madeddu 8 Introduction Ice breakers questions: 2. Which website holds the record for consistently scoring 100/100 on Google PageSpeed Insights? A) Amazon B) Google.com C) Wikipedia
9. @manu_madeddu 9 Introduction Ice breakers questions: 2. Which website holds the record for consistently scoring 100/100 on Google PageSpeed Insights? A) Amazon B) Google.com C) Wikipedia d) No site consistently scores 100/100. And why it’s important to not over-obsess but correctly choose the metrics to benchmark against.
10. @manu_madeddu 10 Introduction Ice breakers questions: 3. What percentage of users will abandon a page if it takes more than 3 seconds to load? A) 10% B) 53% C) 25%
11. @manu_madeddu 11 A) 10% Introduction Ref: Google’s “The Need for Mobile Speed” Study, 2017 B) 53% C) 25% Ice breakers questions: 3. What percentage of users will abandon a page if it takes more than 3 seconds to load? c) 53% of visits are abandoned if a mobile site takes more than 3s to load. And why it’s important to optimise speed performance.
12. @manu_madeddu 12 Introduction A) The digital version of a personal trainer to keep your site fast and in shape B) A bunch of numbers and letters you’ll pretend to understand in front of your boss C) The latest challenge in “How to impress Google” Ice breakers questions: 4. What are Core Web Vitals?
13. @manu_madeddu 13 Introduction A) The digital version of a personal trainer’s rules B) A bunch of numbers and letters you’ll pretend to understand in front of your boss C) The latest challenge in “How to impress Google” Ice breakers questions: 4. What are Core Web Vitals? A) Measuring against CWV helps to keep your site fast and in shape.
14. @manu_madeddu 14 1. Introduction to Core Web Vitals @manu_madeddu
15. @manu_madeddu 15 1. Introduction to Core Web Vitals Slow sites impact negatively on brand perception and cost money Slow websites : • cost more money to users • impact on user engagement High-performance websites results in: • better user experience, • high return visits, • low bounce rates, • higher conversions & engagement Ref: Google’s “The Need for Mobile Speed” Study
16. @manu_madeddu 16 1. Introduction to Core Web Vitals Core Web Vitals are key quality signals for search engines Performance metrics are now ranking signals. 2016 Mar 2021 Jun 2021 Google began the process of mobile-first indexing in 2016, but finalised in March 2021. Google's Page Experience Update Core Web Vitals became key metrics for evaluating the user experience.
17. @manu_madeddu 17 1. Introduction to Core Web Vitals Other Benefits Include Higher ROI & Less Environmental Impact • Improving page speed improves PPC quality score • Better indexability/crawlability for search engines • Less environmental impact.
18. @manu_madeddu 18 1. Introduction to Core Web Vitals Every published website and browsed page emits CO2 and consumes energy. With an increased amount of published websites (+3 every second), numbers are out of control.
19. @manu_madeddu 19 1. Introduction to Core Web Vitals How can we measure all that?
20. @manu_madeddu 20 1. Introduction to Core Web Vitals • Web Vitals is Google's guidance for essential quality signals to enhance user experience. • Core Web Vitals are specific metrics within Web Vitals that reflect key aspects of user experience. • The current set focuses on three aspects of the user experience: loading, interactivity, visual stability. Now replaced by INP. Ref.: https://web.dev/articles/vitals
21. @manu_madeddu 21 1. Introduction to Core Web Vitals Ref.: https://web.dev/articles/vitals Interaction to Next Paint (INP) replaced FID as a Core Web Vital metric on 12th March 2024.
22. @manu_madeddu 22 2. Beyond Basics: Deep Dive into Web Vitals Metrics @manu_madeddu
23. @manu_madeddu 23 2. Beyond Basics: Deep Dive into Web Vitals Metrics Understanding Largest Contentful Paint (LCP) The time taken for the main piece of above-fold content to be rendered in the viewport. • It measures visual loading performance • Impacts user satisfaction, as delays can increase bounce rates.
24. @manu_madeddu 24 2. Beyond Basics: Deep Dive into Web Vitals Metrics Understanding Input to Next Pain (INP) (Interactivity) INP measures the time between user interactions (like clicks or taps) and when the next visual update appears on the screen. • It captures how responsive a webpage feels to the user. • Unlike FID, INP observes all user interactions.
25. @manu_madeddu 25 2. Beyond Basics: Deep Dive into Web Vitals Metrics Understanding Input to Next Pain (INP) The CLS measures the visual stability or “shift” of the page’s contents throughout the load cycle. • It ensures that users have a smooth visual experience, preventing frustration from sudden jumps or movements in content.
26. @manu_madeddu 26 Introduction Field Data vs Lab Data:
27. @manu_madeddu 27 Introduction Field Data vs Lab Data: What is the main difference between field data and lab data? A) Field data is always collected in open air. B) Lab data is collected in controlled environments. C) Lab data is always collected indoors.
28. @manu_madeddu 28 Introduction Field Data vs Lab Data: What is the main difference between field data and lab data? A) Field data is always collected in open air. B) Lab data is collected in controlled environments. C) Lab data is always collected indoors.
29. @manu_madeddu 29 2. Beyond Basics: Deep Dive into Web Vitals Metrics Understanding Field and Lab Data Field data is collected from real-world user experiences. It reflects actual user interactions across various devices, network conditions, and environments. This data is often aggregated from tools like Google Chrome User Experience Report (CrUX) and Google Analytics. Lab data is collected in a controlled environment using tools like Lighthouse, PageSpeed Insights, WebPageTest.org. It simulates page loading and interaction under predefined conditions, providing reproducible results. VS FIELD DATA LAB DATA
30. @manu_madeddu 30 2. Beyond Basics: Deep Dive into Web Vitals Metrics Tool: https://pagespeed.web.dev/ Understanding Field and Lab Data Essential for understanding real user experiences. Average of 28 days collated performance data. FIELD DATA
31. @manu_madeddu 31 2. Beyond Basics: Deep Dive into Web Vitals Metrics Tool: https://pagespeed.web.dev/ Understanding Field and Lab Data Overall score as 75th percentile of collated data. FIELD DATA
32. @manu_madeddu 32 2. Beyond Basics: Deep Dive into Web Vitals Metrics Understanding Field and Lab Data Valuable for controlled testing and debugging. LAB DATA Testing Conditions Tool: https://pagespeed.web.dev/
33. @manu_madeddu 33 Introduction Be Ready!
34. @manu_madeddu 34 3. Measuring & Monitoring Core Web Vitals @manu_madeddu
35. @manu_madeddu 35 3. Advanced Optimization Techniques for CWV Tool: https://pagespeed.web.dev/ Using PageSpeed Insights
36. @manu_madeddu 36 3. Advanced Optimization Techniques for CWV Using DevTools
37. @manu_madeddu 38 3. Advanced Optimization Techniques for CWV Using Google Search Console
38. @manu_madeddu 39 3. Advanced Optimization Techniques for CWV Tool: https://webpagetest.org Using WebPageTest.org
39. @manu_madeddu 40 3. Advanced Optimization Techniques for CWV Tool: https://www.webpagetest.org/result/240922_AiDc0E_4GB/ Understanding the Waterfall Document Complete START RENDER
40. @manu_madeddu 41 3. Advanced Optimization Techniques for CWV Tool: https://www.webpagetest.org/result/240922_AiDc0E_4GB/ Understanding the Waterfall
41. @manu_madeddu 42 3. Advanced Optimization Techniques for CWV Tool: https://developer.chrome.com/docs/crux/dashboard CrUx Report In LookerStudio
42. @manu_madeddu 43 3. Advanced Optimization Techniques for CWV Tool: https://yellowlab.tools YellowLab.Tools
43. @manu_madeddu 44 3. Advanced Optimization Techniques for CWV Tool: https://www.experte.com/pagespeed experte.com/pagespeed
44. @manu_madeddu 45 3. Advanced Optimization Techniques for CWV Setting up real-time monitoring • Google Search Console • CrUX Dashboard (Integrated) • Custom Scripts - Ongoing Tracking Google Sheets + Lighthouse API • Custom Scripts – Debugging and Auditing at Scale: WPT API
45. @manu_madeddu 46 3. Advanced Optimization Techniques for CWV Creating a continuous improvement cycle Agree Prioritised URLs to Track Initial Auditing Ongoing monitoring Implementation of agreed prioritised actions Performance review Action Prioritisation Alerts Setup DEVELOPMENT MONITORING
46. @manu_madeddu 47 3. Advanced Optimization Techniques for CWV Custom Scripts - Ongoing Tracking Google Sheets + Lighthouse API
47. @manu_madeddu 48 3. Advanced Optimization Techniques for CWV Custom Scripts – Debugging and Auditing at Scale: WPT API
48. @manu_madeddu 49 4. Advanced Optimization Techniques for CWV @manu_madeddu
49. @manu_madeddu 50 Leverage Browser Caching Impact: • speed up repeat visits to the site by storing assets • the user does not need to re-load all assets upon returning to the site. Resource Caching https://cdn.cookielaw.org/scripttemplates/6.12.0/assets/otPcCenter.js on No max-age or expires https://cdn.cookielaw.org/consent/3f6936fe-3bf6-45fc-bb03- 834e523bab1a/3f6936fe-3bf6-45fc-bb03-834e523bab1a.json 3.6 hours https://www.clarity.ms/eus-f/s/0.6.34/clarity.js 24.0 hours https://bat.bing.com/p/action/22018452.js 60 seconds https://www.dwin1.com/1846.js 1.7 minutes https://tags.tiqcdn.com/utag/vodafone/uk-enterprise- main/prod/utag.js?callback=resolveDynamicVisitorAttributes 5.0 minutes https://vodafoneuk.digital.nuance.com/tagserver/postToServer.min.js ?siteID=10006330&codeVersion=1656586684028 60.0 minutes https://cdn.decibelinsight.net/i/13684/78813/di.js 1.5 hours Performance Impact Implementation Effort Medium Easy Impacts: LCP
50. @manu_madeddu 51 Assets with 3xx and 4xx Status Codes Impact: • Redirecting assets increases the time taken to load the page, especially if these assets are critical for rendering. All lines in yellow show assets with a 3xx redirect Impacts: FCP Performance Impact Implementation Effort Medium Medium
51. @manu_madeddu 52 4. Measuring & Monitoring Core Web Vitals Optimise Images • Compress your images before uploading them. • Adjust your Media settings/enable autocompression. • Convert and use next-gen formats (webp) • Ensure below the fold images are lazyloaded (lazy=“loading“) Performance Impact Implementation Effort High High
52. @manu_madeddu 53 4. Measuring & Monitoring Core Web Vitals Fonts optimisation: preload and font-face:swap Recommendation 1. Add a Preload attribute to load custom fonts instantly. <link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin> 2. Add font-display:swap to custom fonts to show text sooner: • If you’re self-hosting your own web fonts, @font-face { font-display: swap; font-family: 'PT Sans’; …} • If you’re using Google’s Web Fonts: <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 3. Remove all not required fonts. Performance Impact Implementation Effort Low Low
53. @manu_madeddu 54 4. Measuring & Monitoring Core Web Vitals Preconnect/prefetch tracking scripts, defer the others Impact • When files block the main thread, users are unable to interact with the page content. Recommendation 1. Defer or use fetchpriority=“low” for requests that are not critical 2. For specific tracking script, you can use preconnect: <link rel="preconnect" href="https://example.com"> 3. For tag manager, use preload + prefetch: <link href="https://www.googletagmanager.com/gtag/js?id=myappid" rel="preload" as="script"> <link rel="dns-prefetch" href="https://www.googletagmanager.com/" > Performance Impact Implementation Effort Medium Medium
54. @manu_madeddu 55 Deferring or Using Async for Render Blocking Resources Impact: • Webpage components will propagate faster • Fewer instances where nothing is happening on the screen. Recommendations: • Inline critical CSS • Defer non-critical JavaScript and CSS files to the bottom of the page. • Implement async tags for JavaScript files that have not been deferred. SYNCHORONOUS LOADING ASYNCHORONOUS LOADING Performance Impact Implementation Effort High High
55. @manu_madeddu 56 4. Measuring & Monitoring Core Web Vitals Organise Requests Priority 1. Add a preload call in the <head> for critical requests or adding an async for lower priority ones: <link rel="preload" href=“/script.js” as script> <script src=“script.js” async></script> 2. Defer low priority scripts that can be loaded after the parsing of the page: <script src=“script.js” defer></script> 3. Use fetchpriority=“high” for higher priority scripts, fetchpriority=“low” for low priority scripts. Performance Impact Implementation Effort Medium High
56. @manu_madeddu 57 5. Workshop: hands-on CWV Analysis @manu_madeddu
57. @manu_madeddu 58 6. Workshop Perform a brief web performance analysis https://drive.google.com/drive/u/0/folders/1HjVAmyJY5x167QzLIlKYYRGn_A3lErCL Time to have fun!
58. @manu_madeddu 59 6. Workshop
59. @manu_madeddu 60 6. Workshop Slide 1 : PageSpeed Performance Score/Page Weight vs Competitors 1. Use https://www.experte.com/pagespeed bulk test 2. Add 4 URLs: 1 main website and 2 competitors 3. Run the tool 4. Export the Excel and Use the Google Sheets in the shared folder, tab 1 to copy/paste data and generate the graph for the slide 5. Update slide 1 of the presentation
60. @manu_madeddu 61 6. Workshop
61. @manu_madeddu 62 6. Workshop Slide 2 : Sustainability Impact 1. Use https://www.websitecarbon.com/ 2. Use your main website URL 3. Run the tool 4. Update Slide 2 with the relevant data
62. @manu_madeddu 63 6. Workshop
63. @manu_madeddu 64 6. Workshop Slide 3 : Core Web Vitals Comparison 1. Use the core web vital results previously exported https://www.experte.com/pagespe ed 2. Use the 2nd tab of the Shared Google Sheet to get the updated table and graphs for slide 3 3. Update the table on slide 4 with identifies opportunities
64. @manu_madeddu 65 6. Workshop
65. @manu_madeddu 66 6. Workshop Slide 4 : Opportunities 1. Use Page speed insights or Webpage test to identify opportunities to improve the worst performing metric from previous comparison • https://www.webpagetest.org/ • https://pagespeed.web.dev 2. Update slide 4 with data and short takeaways
66. @manu_madeddu 67 6. Workshop
67. @manu_madeddu 68 6. Workshop It’s your turn to shine! manumamade@gmail.com
68. @manu_madeddu 69 6. Future of Core Web Vitals & UX @manu_madeddu
69. @manu_madeddu 70 6. Future of Core Web Vitals & UX • Google’s Core Web Vitals introduced a baseline for evaluating user experience. • New metrics may focus on: - task completion time, - user interaction predictability, - AI-driven customization of the user experience. • The focus will shift from simply measuring page load to tracking user satisfaction as they navigate and interact with complex web apps. What’s Next in the Evolution of Web Performance Metrics Page Load User Satisfaction Customised Navigation Customised Content AI Chat
70. @manu_madeddu 71 6. Future of Core Web Vitals & UX To stay ahead, web developers should: • adopt progressive web app (PWA) standards • optimize for next-gen performance (e.g., HTTP/3, image formats like webp, AVIF) • proactively monitor user experience Preparing for Upcoming Changes & Google’s Future Algorithm Updates
71. @manu_madeddu 72 7. Takeaways @manu_madeddu
72. @manu_madeddu 73 7. Takeaways 1. Web Vitals Are Crucial for User Experience A positive user experience translates into: • higher engagement, • lower bounce rates, • better SEO performance.
73. @manu_madeddu 74 7. Takeaways 2. Performance Metrics Directly Affect Rankings Ignoring them can lead to drops in search rankings & traffic.
74. @manu_madeddu 75 7. Takeaways 3. Continuous Monitoring is Key • Performance is an ongoing process. • Proactively monitor user experience. • Regularly optimize & ensure your site performs well in real-world conditions.
75. @manu_madeddu 76 THANK YOU! https://speakerdeck.com/manuelmadeddu