Skip to main content
Help Center
The GoDaddy Community will undergo maintenance starting on Wednesday, August 4th at 3pm PST / 6pm EST. Learn more
  • GoDaddy Community
  • GoDaddy Pro Discussions
  • GoDaddy Pro Discussions

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Andy
    Community Manager

    Recap: Using Core Web Vitals (Expand 2021)

    Welcome to the recap thread for “Using Core Web Vitals to Build a Quality User Experience” with Salvatore Denaro and Katherine Rudik from Google. Salvatore is a Web Ecosystem Consultant, and Katherine leads Strategic Web Partner development efforts.

     

    Join the follow-up discussion by leaving a question or comment below.

     

     

    What are Core Web Vitals?

    Users have performance expectations when they visit your website.

    • Users look for predictable interaction, useful content, and instant feedback.
    • Website developers see distinct elements: floating nav, dynamic banners, carousel ads, sticky footer, etc.

     

    Site developers try to give users a great experience while reaching business goals.

    • Loading: Is it happening?
    • Interactivity: Is it responsive?
    • Visual Stability: Is it delightful?

     

    Core Web Vitals can help quantify the user experience of your site.

    • Loading: Largest Contentful Paint
    • Interactivity: First Input Delay
    • Visual Stability: Cumulative Layout Shift

     

    Core Web Vitals are essential metrics for delivering a great user experience.

     

    Loading: Largest Contentful Paint (LCP)

    • Good: Under 2.5 seconds
    • Needs Improvement: Between 2.5 – 4.0 seconds
    • Poor: More than 4.0 seconds

     

    Interactivity: First Input Delay (FID)

    • Good: Under 100ms
    • Needs Improvement: Between 100 – 300ms
    • Poor: More than 300ms

     

    Visual Stability: Cumulative Layout Shift (CLS)

    • Good: Under 0.1
    • Needs Improvement: Between 0.1 – 0.25
    • Poor: More than 0.25

     

    Largest Contentful Paint (LCP) measures loading performance render time of the largest content element (image or block of text) visible within the viewport.

     

    What causes poor LCP?

    • Slow server response time
    • Render-blocking JavaScript and CSS
    • Slow resource load times
    • Client-side rendering

     

    First Input Delay (FID) measures interactivity, the time from when a user first interacts with the page, until the time when the browser can respond.

     

    What causes poor FID?

    • Long tasks
    • Long JavaScript execution time
    • Large JavaScript bundles
    • Render-blocking JavaScript

     

    Cumulative Layout Shift (CLS) measures visual stability; the sum of all unexpected layout shifts occurring throughout the lifespan of the page.

     

    What causes poor CLS?

    • Images without dimensions
    • Ads, embeds, iframes without dimensions
    • Dynamically injected content
    • Web fonts causing FOIT/FOUT

     

    Why not FCP, TTFB, and other metrics?

    • First Contentful Paint
    • Time to First Byte
    • Time to Interactive
    • Speed Index

     

    You can still use them!

     

    Improving your Core Web Vitals

     

    Avoid:

    1. Sending pixels that will not be displayed
    2. Sending bytes that will not be executed
    3. Sending content the user does not request

     

    Consider:

    1. Use native Lazy Loud with polyfill fallback to 3P Lazy Loading
    2. Sync JavaScript to be a bug
    3. Use PageSpeed Insights and other performance tools for auditing advice

     

    Image Advice

    • Make them smaller; choose smaller dimensions, or compress using optimizers like Squoosh.app
    • Use responsible images
    • Prefer native Lazy Loading to 3P
    • Use formats like AVIF

     

    Lazy Loading

    • Lazy Loading shortens the length of the critical rendering path, reducing page load times
    • Has native support in WordPress core as of WordPress 5.5
    • Can use JavaScript to supply a polyfill/third-party fallback

     

    JavaScript and CSS advice

    • Less is more; don’t include everything on all pages
    • Load them later; use async & defer
    • Do you need that 41k jQuery bundle for 20 lines of code?
    • Separate and inline critical CSS

     

    You don’t get unlimited powers with 3P JavaScript libraries

    • These libraries are not “free”
    • Be aware of the trade-offs
    • Prefer async

     

    Three important takeaways:

    1. Insert new content carefully
    2. Give instant feedback
    3. Match visuals to reality

     

    Measuring User Experience

     

    Numbers are not magic. They require context. Consider a three-legged stool:

    1. RUM data
    2. Lab data
    3. Best practices

     

    Include Core Web Vitals alongside your favorite tools:

    • PageSpeed Insights
    • Chrome UX Report
    • Search Console
    • Chrome DevTools
    • Lighthouse
    • Web Vitals Extension

     

    Getting started with Core Web Vitals:

    1. Use Search Console’s new Core Web Vitals report to identify pages that need improvement
    2. Diagnose issues on these pages with PageSpeed Insights web app or API
    3. Optimize locally with Lighthouse and Chrome DevTools for guidance on what to fix
    4. Use web.dev/measure to see a prioritized set of recommendations
    5. Use Lighthouse CI on pull requests to avoid regressions in Core Web Vitals before you deploy
    6. Try the new CrUX Dashboard and API to monitor CWV performance over last 28 days

     

    Tools to measure Core Web Vitals

     

    There are two methods to measure performance data:

    1. Lab data
    2. Field data (also called Real User Monitoring or RUM)

     

    Lab data is collected in a controlled testing environment

    • Helpful for debugging performance issues
    • Deep, end-to-end visibility into UX
    • Reproducible testing and debugging environment
    • Might not capture real-world bottlenecks
    • Cannot correlate against real-world page KPIs

     

    Field data or RUM measures real-world experience with site visitors

    • Captures true, real-world user experience
    • Correlation with business KPIs
    • Restricted set of metrics
    • Limited debugging capabilities

     

    Measure Core Web Vitals as both Lab and Field data

    • Largest Contentful Paint (LCP) in Lab and Field
    • First Input Delay (FID) in Field
    • Cumulative Layout Shift (CLS) in Lab and Field

     

    Debunking common myths about performance

    1. User experience can be captured with a single metric
    2. User experience can be captured with a single “representative user”
    3. My website loads fast for me, so it should load fast for my users

     

    PageSpeed Insights helps you understand how real-world Chrome users experience your site

    • Provides both Field and Lab data
    • Use the web app or API to diagnose lab and field issues on a page
    • Lab data from Lighthouse
    • Field data from Chrome User Experience Report
    • Recommends optimization opportunities based on industry trends, guidelines

     

    Lighthouse helps you audit a site against modern performance best practices

    • Personalized advice on improving performance, accessibility, PWA, SEO, and more
    • Measure Core Web Vitals, get actionable guidance on what to fix
    • Replaces some Field metrics with similar Lab metrics, e.g. FID by TBT
    • Run Lighthouse in Chrome DevTools to audit pages that need authentication
    • Run from a web UI and in PageSpeed Insights without installing anything
    • Run Lighthouse from the command line to automate runs via shell scripts

     

    Chrome User Experience Report

    • Public dataset of real user experience data on millions of sites
    • Core Web Vitals report in Search Console highlights data from CrUX

     

    Chrome DevTools

    • offers guidance on debugging and deep diving into performance
    • Performance panel has a new Experience section to help detect unexpected layout shifts

     

    Web Vitals extension for Chrome

    • Measures Core Web Vitals in real-time for desktop Google Chrome

     

    web-vitals.js library

    • Measure all Web Vitals metrics on real users
    • Accurately matches how they’re measured by Chrome and reported to Google tools

     

    Download: Google Site Kit for WordPress

    • Official Google plugin for WordPress
    • SiteKit is a one-stop solution to deploy, manage, and get insights from essential tools
    • Includes PageSpeed Insights, Google Analytics, Search Console, and AdSense
    • Consolidates key metrics and insights into a simple dashboard within the WordPress admin
    • You can view page-level details from the WordPress admin bar
    • You can restrict data access using WordPress user roles and permissions

     

    Manage all your projects, clients, sites, and products with the Hub from GoDaddy Pro. Learn more and sign up for free.

     

     

    Senior Community Manager, GoDaddy
    Need help with your GoDaddy.com account? Get 24/7 support at x.co/247support
    Find inspiration on the GoDaddy Blog
    Smash that Like button on GoDaddy's YouTube channel
    Follow @GoDaddy on Twitter, Instagram and LinkedIn
    0 REPLIES 0