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

    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    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



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



    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
    • 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 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 account? Get 24/7 support at
    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