Devcron Platform
DashboardHome
  • Welcome
  • Platform News
    • Recents
      • Devcron Sites Are Now More Accessible
      • This Global Colors Feature Cuts Color Picks by 80% and Ups Scalability
      • Jump Start Your Site Membership by Actively Inviting Members
  • Overview
    • Platform Overview
    • Dashboard and Account
      • Dashboard Overview
      • Site Overview
      • Account Setting
      • Site Comments
      • Statistics and Analytics
  • Professional Website Builder
    • Getting Started
      • Editor Overview
      • Launching Your Site Checklist
      • Row Editor
      • Global Design
      • Global Colors
      • Responsive Tablet
      • Customize Background
      • Edit by Device
      • Switch Views
      • Sidebar Layout for Desktop
      • Global Text
      • Image Picker
      • Manage and Import Content
      • Add Sections
      • Arrange Content
      • Copy and Paste
      • Quick Access
      • Show Hidden Elements
      • Keyboard Shortcuts
      • System Requirements
    • Publishing Site
      • Go Live, Publish, and Set Up Your Domain
      • Purchase a Custom Domain
      • Configure Alternate Domains
      • Unpublish a Site
    • Pages and Popups
      • Pages and Popups
      • Configure a Multi-Language Site
      • Add a Navigation Folder
      • Change Home Page
      • Password Protected Pages
      • Publish a Single Page
    • Membership (New)
      • Add Membership Pages
      • Membership Plans
      • Bulk Invite Members to Membership Sites
    • Header and Footer
      • Headers
      • Header and Expandable Menu
      • Shrinking Headers
      • Footer
    • Content
      • Local Business Schema
      • Image Terms and Licensing
      • Image Size Guidelines
      • Image Editor
      • Add Premium Images (Shutterstock Images)
      • Video Backgrounds
      • Use the Color Picker
    • Connected Data and Dynamic Pages
      • Connected Data
      • Dynamic Pages
      • Collections
      • Internal Collections
      • Airtable Collections
      • Google Sheets Collections
      • External Collections
      • Create Dynamic Pages
      • Connect Your Dynamic Page Widgets
      • Add Lists to Display Dynamic Pages
    • Flex Editor
      • Flex Overview
      • Flex Breakpoints
      • Flex Design Panel
      • Add and Edit Flex Sections
      • Create Overlapping Elements in Flex
      • Flex Alignment and Spacing
    • Personalization Rules
      • Personalization Rules
    • Blog
      • About Blogs
      • Updating an Old Blog to the New Blog Platform
      • Blog Settings
      • Add and Edit Blog Posts
      • Manage Post Settings
      • Import Blog Posts from RSS Feeds
    • Custom Code
      • Custom Code Guidelines
      • Using HTML and Custom Code
      • How Can I Troubleshoot Custom Code?
      • Developer Mode
      • Google Analytics Integration
    • Site Settings
      • Site Settings
      • Site Icons
      • Backup Sites
      • Add SSL or HTTPS
      • Load Site in an iframe
      • Header HTML
      • Set a Default Site Language
      • Facebook Tracking Pixels
      • How to Add Schema Markup to Your Site
      • URL Redirects
      • Privacy Settings
      • Site SEO Settings
      • Introduction to SEO
      • Examples of SEO Keywords and Descriptions
      • IndexNow
      • Fonts Library
      • Security Measures
      • General Data Protection Regulation (GDPR) Compliance Information and Resources
      • The California Consumer Privacy Act of 2018 (CCPA) Compliance Information and Resources
      • Introduction to Core Web Vitals
      • Optimize Your Site for Core Web Vitals
      • Core Web Vitals FAQs
      • Lighthouse and Core Web Vitals Comparison
      • Progressive Web App (PWA)
      • Google Tag Manager Tracking
    • Edit On Mobile
      • Edit On the Go
      • Site Stats on Mobile
      • Use the Dashboard on Mobile
      • Edit Image Widgets on Mobile
      • Edit Image Slider and Photo Gallery Widgets on Mobile
      • Edit Click-to-Call and Click-to-Email on Mobile
      • Select and Add Images on Mobile
      • Link Picker
      • Backup, Publish, Re-publish, and Unpublish on Mobile
      • Edit Sites on a Tablet
  • Widgets
    • Widget Overview
      • Add Widgets
      • Edit Widgets
      • Widget Design
      • Outer and Inner Spacing
      • Inline Editing
      • Add Animations
      • Blog Widgets
    • Basic Widgets
      • Text Editor
      • Title Widgets
      • Button Widget
      • Floating Buttons
      • Breadcrumbs Widget
      • Icon Widgets
      • Table Widget
      • Navigation and Sub-Navigation Links
      • Anchor Tags and Links
      • Text & Image Widget
      • List Widget
      • Accordion Widget
      • Tabs Widget
      • Countdown Widget
      • Copyright Widget
      • Spacer Widget
      • Upload a File
    • Media Widgets
      • Image Widget
      • Photo Gallery Widget
      • Image Slider Widget
      • Video Widget
      • Troubleshooting Video Widget
      • Lottie Animation Widgets
      • Before & After Widget
      • Shape Widgets
      • Audio Widgets
    • Business Widgets
      • Contact Forms
      • Configure a GDPR-Friendly Contact Form
      • Contact Form Responses
      • Contact Form Integrations
      • Contact Form Troubleshooting
      • Zoom Widget
      • Map Widget
      • Google Calendar Widget
      • Click To Call
      • Click to Email
      • Business Hours
      • Multi Location Widget
      • Yelp Reviews
      • Online Scheduling
      • OpenTable Reservation Buttons
      • Restaurant Menus
      • Coupons
      • PayPal Button
    • Social Widgets
      • Instagram Feed
      • Reconnect Instagram Feed
      • Social Icons
      • WhatsApp Widgets
      • Social Share Widgets
      • Twitter Feeds
      • Facebook Feeds
      • Facebook Like Button
      • Facebook Comments
      • Disqus Comments
      • RSS Feeds
Powered by GitBook
On this page
  • CLS
  • FID
  • LCP
  • INP
  • TTFB
  • How to Measure Core Web Vitals

Was this helpful?

  1. Professional Website Builder
  2. Site Settings

Introduction to Core Web Vitals

Google’s Web Vitals are experience metrics that measure how well a site is performing and how good of a user experience it provides. In June 2021, Google plans to release an improvement to their user experience metrics called Core Web Vitals that focus on loading speed, interactivity, and visual stability. These Core Web Vitals are: Cumulative Layout Shift (CLS), First Input Delay (FID), Largest Contentful Paint (LCP), Interaction To Next Paint (INP), and Time to First Byte (TTFB).

Core Web Vitals are important because they are a common set of metrics and benchmarks that are used across many Google services and have a direct impact on search rankings. By measuring and optimizing your site for Core Web Vitals you also improve the overall user experience of your site.

CLS

CLS measures the visual stability of the content on a page by counting the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift happens when an element changes from its starting position due to resources loading later in a page's lifecycle and pushing content below it down the page. For example, a user is online shopping and right as they try to click the add to cart button an ad loads above the button and pushes it down. This layout shift causes the user to accidentally click the ad instead of the add to cart button. A low CLS can help ensure your users have a positive experience on your site and can quickly accomplish what they came to do.

FID

FID measures the delay in interactivity and responsiveness. This is the time from when the user interacts with your content by clicking a link, tapping a button, or pressing a key to when the browser processes that interaction. FID only counts the delay, not the time it takes to process the event or how long it takes the UI to update. A delay typically happens because the browser is busy loading the rest of the page content and cannot respond to the user’s interaction yet. A short FID can help increase the chance that the user remains on the page and interacts with your content. Currently, most websites perform well on FID measurement.

Note

Zooming and scrolling are not measured for FID.

LCP

LCP measures the time it takes for the largest visible element on the page to load relative to when the page first started loading. As different elements load, the LCP can change. The browser stops measuring LCP when the user begins interacting with the page, since interactions typically change what is visible to the user. A fast load speed can reassure the user that the page is useful because they are able to quickly begin viewing content.

Elements that can be the LCP:

  • <img>

  • <image> inside an <svg>

  • <video>

  • Element with a background image loaded using the url() function instead of a CSS gradient

  • Block-level elements that contain text nodes or other inline-level text elements children

Note

As Google expands their Core Web Vitals, they have indicated <svg> and <video> might be included as elements used to measure LCP in the future.

INP

INP refers to how the page responds to specific user interactions that are programmed into the overall INP metric measured by Google Chrome’s lab data and field data. INP is designed to provide a representation of the overall interaction delay of a page. It does this by working from a sample of the single longest interactions that happen when a user visits the page. For example, if a page has less than 50 total interactions, INP takes into consideration the interaction that has the absolute worst delay. The measurement of INP is a representation of how long a user has to wait in order to interact with the entire page. This is a direct contrast to FID (First Input Delay).

INP is concerned with the following types of interactions:

  • Any mouse click of an interactive element.

  • Any tap of an interactive element on any device that includes a touchscreen.

  • The press of a key on a physical or onscreen keyboard.

Google’s web.dev documentation explains that a good INP value is around 200 milliseconds or less.

Note

INP is still experimental and the guidance it recommends regarding this metric is likely to change.

TTFB

TTFB measures the length of time that it takes for the first byte to be transferred by the server.

TTFB has long been suspected as a driver of significant performance gains, which means that it’s a priority that SEO professionals should be optimizing as part of their SEO process.

How to Measure Core Web Vitals

Both CLS and LCP can be measured in the lab or in the field. FID can only be measured in the field because a real user needs to interact with the content. We strongly recommend you test every page on your website.

The following tools can be used to measure Core Web Vitals:

Field Tools

Lab Tools

Note

Ideal Scores

For a page on your website to be considered passing it needs to achieve all the following metrics at the 75th percentile:

  • CLS. 0.1 layout shift score or less

  • FID. 0.1 seconds or less

  • LCP. 2.5 seconds or less

PreviousThe California Consumer Privacy Act of 2018 (CCPA) Compliance Information and ResourcesNextOptimize Your Site for Core Web Vitals

Last updated 2 years ago

Was this helpful?

When measuring Core Web Vitals you can use lab or field data. Lab data is gathered from tools that simulate a page load and interaction. Field data is gathered from real user’s interaction with your website. We recommend that you use real-world metrics such as Real User Monitoring (RUM) instead of lab tests so that you can optimize your site more accurately. data set can be used to measure your website and is a great choice because it is what Google uses to measure Core Web Vitals.

(Recommended)

To learn more about the differences between Lighthouse and Core Web Vitals, see

Currently, only 20% of websites pass all three metrics. To learn how to optimize your website, see .

Google’s CRuX
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals report)
Web-vitals JavaScript library
Chrome DevTools
Lighthouse
WebPageTest
Lighthouse and Core Web Vitals Comparison.
Optimize Your Site for Core Web Vitals