$30 off During Our Annual Pro Sale. View Details »

Advanced Core Web Vitals & User Experience Mast...

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

Manuel Madeddu

October 02, 2024
Tweet

More Decks by Manuel Madeddu

Other Decks in Marketing & SEO

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 5 Introduction Ice breakers questions: How much do you

    know about Web Performance & Core Web Vitals?
  5. @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?
  6. @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
  7. @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
  8. @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.
  9. @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%
  10. @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.
  11. @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?
  12. @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.
  13. @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
  14. @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.
  15. @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.
  16. @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.
  17. @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
  18. @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.
  19. @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.
  20. @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.
  21. @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.
  22. @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.
  23. @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.
  24. @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
  25. @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
  26. @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
  27. @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/
  28. @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
  29. @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
  30. @manu_madeddu 47 3. Advanced Optimization Techniques for CWV Custom Scripts

    - Ongoing Tracking Google Sheets + Lighthouse API
  31. @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
  32. @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
  33. @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
  34. @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
  35. @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
  36. @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
  37. @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
  38. @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!
  39. @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
  40. @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
  41. @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
  42. @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
  43. @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
  44. @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
  45. @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.
  46. @manu_madeddu 74 7. Takeaways 2. Performance Metrics Directly Affect Rankings

    Ignoring them can lead to drops in search rankings & traffic.
  47. @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.