Core Web Vitals workflows with Google tools | Articles

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/vitals-tools"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/articles/vitals-tools" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/vitals-tools" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/vitals-tools?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/vitals-tools?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/vitals-tools?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/vitals-tools?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/vitals-tools?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/vitals-tools?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/vitals-tools?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/vitals-tools?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/vitals-tools?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/vitals-tools?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/vitals-tools?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/vitals-tools?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/vitals-tools?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/vitals-tools?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/vitals-tools?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/vitals-tools?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/vitals-tools?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/vitals-tools?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/vitals-tools?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/vitals-tools?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/vitals-tools" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/vitals-tools" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/vitals-tools?hl=vi" /><title>Core Web Vitals workflows with Google tools  |  Articles  |  web.dev</title> <meta property="og:title" content="Core Web Vitals workflows with Google tools  |  Articles  |  web.dev"><meta name="description" content="With the growing importance of Core Web Vitals, site owners and developers increasingly focus on performance and key user experiences. Google provides many tools to help evaluate, optimize, and monitor pages, but users are often confused by the different sources of data and how to use them effectively. This guide proposes a workflow combining several tools and clarifies where and how they make sense along the development process."> <meta property="og:description" content="With the growing importance of Core Web Vitals, site owners and developers increasingly focus on performance and key user experiences. Google provides many tools to help evaluate, optimize, and monitor pages, but users are often confused by the different sources of data and how to use them effectively. This guide proposes a workflow combining several tools and clarifies where and how they make sense along the development process."><meta property="og:url" content="https://web.dev/articles/vitals-tools"><meta property="og:image" content="https://web.dev/static/articles/vitals-tools/image/thumbnail.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2024-10-17", "headline": "Core Web Vitals workflows with Google tools" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Core Web Vitals workflows with Google tools", "item": "https://web.dev/articles/vitals-tools" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" aria-label="Explore, selected" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Articles" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/explore" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Collections </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/explore/learn-core-web-vitals" track-metadata-eventdetail="https://web.dev/explore/learn-core-web-vitals" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - core web vitals" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" > Core Web Vitals </a> </tab> <tab > <a href="https://web.dev/explore/metrics" track-metadata-eventdetail="https://web.dev/explore/metrics" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - metrics" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" > Metrics </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/explore/fast" track-metadata-eventdetail="https://web.dev/explore/fast" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - fast load times" track-metadata-module="primary nav" aria-label="Fast load times, selected" data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" > Fast load times </a> </tab> <tab > <a href="https://web.dev/explore/ai" track-metadata-eventdetail="https://web.dev/explore/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab > <a href="https://web.dev/explore/how-to-optimize-inp" track-metadata-eventdetail="https://web.dev/explore/how-to-optimize-inp" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - optimize interaction to next paint (inp)" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" > Optimize Interaction to Next Paint (INP) </a> </tab> <tab > <a href="https://web.dev/explore/progressive-web-apps" track-metadata-eventdetail="https://web.dev/explore/progressive-web-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - progressive web apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" > Progressive Web Apps </a> </tab> <tab > <a href="https://web.dev/accessibility" track-metadata-eventdetail="https://web.dev/accessibility" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - accessible to all" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" > Accessible to all </a> </tab> <tab > <a href="https://web.dev/explore/reliable" track-metadata-eventdetail="https://web.dev/explore/reliable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - network reliability" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" > Network reliability </a> </tab> <tab > <a href="https://web.dev/explore/secure" track-metadata-eventdetail="https://web.dev/explore/secure" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - safe and secure" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" > Safe and secure </a> </tab> <tab > <a href="https://web.dev/explore/discoverable" track-metadata-eventdetail="https://web.dev/explore/discoverable" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - easily discoverable" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" > Easily discoverable </a> </tab> <tab > <a href="https://web.dev/explore/payments" track-metadata-eventdetail="https://web.dev/explore/payments" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - web payments" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" > Web Payments </a> </tab> <tab > <a href="https://web.dev/explore/media" track-metadata-eventdetail="https://web.dev/explore/media" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - media" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" > Media </a> </tab> <tab > <a href="https://web.dev/explore/devices" track-metadata-eventdetail="https://web.dev/explore/devices" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - devices" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" > Devices </a> </tab> <tab > <a href="https://web.dev/explore/animations" track-metadata-eventdetail="https://web.dev/explore/animations" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - animations" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" > Animations </a> </tab> <tab > <a href="https://web.dev/explore/identity" track-metadata-eventdetail="https://web.dev/explore/identity" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - identity" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" > Identity </a> </tab> <tab > <a href="https://web.dev/explore/webassembly" track-metadata-eventdetail="https://web.dev/explore/webassembly" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - webassembly" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" > WebAssembly </a> </tab> <tab > <a href="https://web.dev/explore/test-automation" track-metadata-eventdetail="https://web.dev/explore/test-automation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - test automation" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" > Test automation </a> </tab> <tab > <a href="https://web.dev/explore/react" track-metadata-eventdetail="https://web.dev/explore/react" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - react" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" > React </a> </tab> <tab > <a href="https://web.dev/explore/angular" track-metadata-eventdetail="https://web.dev/explore/angular" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - angular" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" > Angular </a> </tab> <tab > <a href="https://web.dev/explore/mini-apps" track-metadata-eventdetail="https://web.dev/explore/mini-apps" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - mini apps" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" > Mini apps </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/explore/learn-core-web-vitals" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Core Web Vitals" track-name="core web vitals" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Core Web Vitals" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Core Web Vitals </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/metrics" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Metrics" track-name="metrics" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Metrics" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Metrics </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/fast" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Fast load times" track-name="fast load times" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fast load times" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Fast load times </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/how-to-optimize-inp" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Optimize Interaction to Next Paint (INP)" track-name="optimize interaction to next paint (inp)" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Optimize Interaction to Next Paint (INP)" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Optimize Interaction to Next Paint (INP) </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/progressive-web-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Progressive Web Apps" track-name="progressive web apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Progressive Web Apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Progressive Web Apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessible to all" track-name="accessible to all" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessible to all" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessible to all </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/reliable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Network reliability" track-name="network reliability" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Network reliability" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Network reliability </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/secure" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Safe and secure" track-name="safe and secure" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Safe and secure" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Safe and secure </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/discoverable" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Easily discoverable" track-name="easily discoverable" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Easily discoverable" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Easily discoverable </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/payments" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Web Payments" track-name="web payments" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Payments" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Payments </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/media" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Media" track-name="media" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Media </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/devices" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Devices" track-name="devices" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Devices" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Devices </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/animations" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Animations" track-name="animations" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Animations" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Animations </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/identity" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Identity" track-name="identity" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/webassembly" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: WebAssembly" track-name="webassembly" data-category="Site-Wide Custom Events" data-label="Responsive Tab: WebAssembly" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WebAssembly </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/test-automation" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Test automation" track-name="test automation" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test automation" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test automation </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/react" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: React" track-name="react" data-category="Site-Wide Custom Events" data-label="Responsive Tab: React" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > React </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/angular" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Angular" track-name="angular" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Angular" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Angular </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore/mini-apps" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Mini apps" track-name="mini apps" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mini apps" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mini apps </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Introduction</span> </div></li> <li class="devsite-nav-item"><a href="/articles/why-speed-matters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/why-speed-matters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/why-speed-matters" ><span class="devsite-nav-text" tooltip>Why does speed matter?</span></a></li> <li class="devsite-nav-item"><a href="/articles/what-is-speed" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/what-is-speed" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/what-is-speed" ><span class="devsite-nav-text" tooltip>What is speed?</span></a></li> <li class="devsite-nav-item"><a href="/articles/how-to-measure-speed" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/how-to-measure-speed" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/how-to-measure-speed" ><span class="devsite-nav-text" tooltip>How to measure speed?</span></a></li> <li class="devsite-nav-item"><a href="/articles/how-to-stay-fast" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/how-to-stay-fast" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/how-to-stay-fast" ><span class="devsite-nav-text" tooltip>How to stay fast?</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Core Web Vitals</span> </div></li> <li class="devsite-nav-item"><a href="/articles/vitals" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/vitals" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/vitals" ><span class="devsite-nav-text" tooltip>Web Vitals</span></a></li> <li class="devsite-nav-item"><a href="/articles/user-centric-performance-metrics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/user-centric-performance-metrics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/user-centric-performance-metrics" ><span class="devsite-nav-text" tooltip>User-centric performance metrics</span></a></li> <li class="devsite-nav-item"><a href="/articles/defining-core-web-vitals-thresholds" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/defining-core-web-vitals-thresholds" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/defining-core-web-vitals-thresholds" ><span class="devsite-nav-text" tooltip>Defining the Core Web Vitals metrics thresholds</span></a></li> <li class="devsite-nav-item"><a href="/articles/lcp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/lcp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/lcp" ><span class="devsite-nav-text" tooltip>Largest Contentful Paint (LCP)</span></a></li> <li class="devsite-nav-item"><a href="/articles/cls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/cls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/cls" ><span class="devsite-nav-text" tooltip>Cumulative Layout Shift (CLS)</span></a></li> <li class="devsite-nav-item"><a href="/articles/inp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/inp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/inp" ><span class="devsite-nav-text" tooltip>Interaction to Next Paint (INP)</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-lcp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-lcp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-lcp" ><span class="devsite-nav-text" tooltip>Optimize Largest Contentful Paint</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-cls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-cls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-cls" ><span class="devsite-nav-text" tooltip>Optimize Cumulative Layout Shift</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-inp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-inp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-inp" ><span class="devsite-nav-text" tooltip>Optimize Interaction to Next Paint</span></a></li> <li class="devsite-nav-item"><a href="/articles/top-cwv" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/top-cwv" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/top-cwv" ><span class="devsite-nav-text" tooltip>The most effective ways to improve Core Web Vitals</span></a></li> <li class="devsite-nav-item"><a href="/articles/vitals-tools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/vitals-tools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/vitals-tools" ><span class="devsite-nav-text" tooltip>Core Web Vitals workflows with Google tools</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-cwv-business" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-cwv-business" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-cwv-business" ><span class="devsite-nav-text" tooltip>Optimizing Core Web Vitals for business decision makers</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Measure performance in the field</span> </div></li> <li class="devsite-nav-item"><a href="/articles/chrome-ux-report" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/chrome-ux-report" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/chrome-ux-report" ><span class="devsite-nav-text" tooltip>Using the Chrome UX Report to look at performance in the field</span></a></li> <li class="devsite-nav-item"><a href="/articles/lab-and-field-data-differences" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/lab-and-field-data-differences" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/lab-and-field-data-differences" ><span class="devsite-nav-text" tooltip>Why lab and field data can be different (and what to do about it)</span></a></li> <li class="devsite-nav-item"><a href="/articles/crux-and-rum-differences" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/crux-and-rum-differences" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/crux-and-rum-differences" ><span class="devsite-nav-text" tooltip>Why is CrUX data different from my RUM data?</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize your resource delivery</span> </div></li> <li class="devsite-nav-item"><a href="/articles/optimize-ttfb" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-ttfb" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-ttfb" ><span class="devsite-nav-text" tooltip>Optimize Time to First Byte</span></a></li> <li class="devsite-nav-item"><a href="/articles/content-delivery-networks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/content-delivery-networks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/content-delivery-networks" ><span class="devsite-nav-text" tooltip>Content delivery networks (CDNs)</span></a></li> <li class="devsite-nav-item"><a href="/articles/prioritize-resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/prioritize-resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/prioritize-resources" ><span class="devsite-nav-text" tooltip>Prioritize resources</span></a></li> <li class="devsite-nav-item"><a href="/articles/preload-critical-assets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/preload-critical-assets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/preload-critical-assets" ><span class="devsite-nav-text" tooltip>Preload critical assets to improve loading speed</span></a></li> <li class="devsite-nav-item"><a href="/articles/preconnect-and-dns-prefetch" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/preconnect-and-dns-prefetch" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/preconnect-and-dns-prefetch" ><span class="devsite-nav-text" tooltip>Establish network connections early to improve perceived page speed</span></a></li> <li class="devsite-nav-item"><a href="/articles/link-prefetch" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/link-prefetch" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/link-prefetch" ><span class="devsite-nav-text" tooltip>Prefetch resources to speed up future navigations</span></a></li> <li class="devsite-nav-item"><a href="/articles/fast-playback-with-preload" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fast-playback-with-preload" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fast-playback-with-preload" ><span class="devsite-nav-text" tooltip>Fast playback with audio and video preload</span></a></li> <li class="devsite-nav-item"><a href="/articles/adaptive-serving-based-on-network-quality" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/adaptive-serving-based-on-network-quality" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/adaptive-serving-based-on-network-quality" ><span class="devsite-nav-text" tooltip>Adaptive serving based on network quality</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize your images</span> </div></li> <li class="devsite-nav-item"><a href="/articles/choose-the-right-image-format" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/choose-the-right-image-format" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/choose-the-right-image-format" ><span class="devsite-nav-text" tooltip>Choose the right image format</span></a></li> <li class="devsite-nav-item"><a href="/articles/compress-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/compress-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/compress-images" ><span class="devsite-nav-text" tooltip>Choose the correct level of compression</span></a></li> <li class="devsite-nav-item"><a href="/articles/use-imagemin-to-compress-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/use-imagemin-to-compress-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/use-imagemin-to-compress-images" ><span class="devsite-nav-text" tooltip>Use Imagemin to compress images</span></a></li> <li class="devsite-nav-item"><a href="/articles/replace-gifs-with-videos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/replace-gifs-with-videos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/replace-gifs-with-videos" ><span class="devsite-nav-text" tooltip>Replace animated GIFs with video for faster page loads</span></a></li> <li class="devsite-nav-item"><a href="/articles/serve-responsive-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/serve-responsive-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/serve-responsive-images" ><span class="devsite-nav-text" tooltip>Serve responsive images</span></a></li> <li class="devsite-nav-item"><a href="/articles/serve-images-with-correct-dimensions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/serve-images-with-correct-dimensions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/serve-images-with-correct-dimensions" ><span class="devsite-nav-text" tooltip>Serve images with correct dimensions</span></a></li> <li class="devsite-nav-item"><a href="/articles/serve-images-webp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/serve-images-webp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/serve-images-webp" ><span class="devsite-nav-text" tooltip>Use WebP images</span></a></li> <li class="devsite-nav-item"><a href="/articles/image-cdns" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/image-cdns" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/image-cdns" ><span class="devsite-nav-text" tooltip>Use image CDNs to optimize images</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Lazy-load images and video</span> </div></li> <li class="devsite-nav-item"><a href="/articles/browser-level-image-lazy-loading" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/browser-level-image-lazy-loading" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/browser-level-image-lazy-loading" ><span class="devsite-nav-text" tooltip>Browser-level image lazy loading for the web</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize web fonts</span> </div></li> <li class="devsite-nav-item"><a href="/articles/font-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/font-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/font-best-practices" ><span class="devsite-nav-text" tooltip>Best practices for fonts</span></a></li> <li class="devsite-nav-item"><a href="/articles/avoid-invisible-text" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/avoid-invisible-text" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/avoid-invisible-text" ><span class="devsite-nav-text" tooltip>Avoid invisible text during font loading</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-webfont-loading" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-webfont-loading" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-webfont-loading" ><span class="devsite-nav-text" tooltip>Optimize web font loading and rendering</span></a></li> <li class="devsite-nav-item"><a href="/articles/reduce-webfont-size" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/reduce-webfont-size" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/reduce-webfont-size" ><span class="devsite-nav-text" tooltip>Reduce web font size</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize your CSS</span> </div></li> <li class="devsite-nav-item"><a href="/articles/defer-non-critical-css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/defer-non-critical-css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/defer-non-critical-css" ><span class="devsite-nav-text" tooltip>Defer non-critical CSS</span></a></li> <li class="devsite-nav-item"><a href="/articles/minify-css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/minify-css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/minify-css" ><span class="devsite-nav-text" tooltip>Minify CSS</span></a></li> <li class="devsite-nav-item"><a href="/articles/extract-critical-css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/extract-critical-css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/extract-critical-css" ><span class="devsite-nav-text" tooltip>Extract critical CSS</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-css-background-images-with-media-queries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-css-background-images-with-media-queries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-css-background-images-with-media-queries" ><span class="devsite-nav-text" tooltip>Optimize CSS background images with media queries</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize your third-party resources</span> </div></li> <li class="devsite-nav-item"><a href="/articles/third-party-javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/third-party-javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/third-party-javascript" ><span class="devsite-nav-text" tooltip>Third-party JavaScript performance</span></a></li> <li class="devsite-nav-item"><a href="/articles/identify-slow-third-party-javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/identify-slow-third-party-javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/identify-slow-third-party-javascript" ><span class="devsite-nav-text" tooltip>Identify slow third-party JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/articles/efficiently-load-third-party-javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/efficiently-load-third-party-javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/efficiently-load-third-party-javascript" ><span class="devsite-nav-text" tooltip>Efficiently load third-party JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/articles/tag-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/tag-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/tag-best-practices" ><span class="devsite-nav-text" tooltip>Best practices for tags and tag managers</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Optimize your JavaScript</span> </div></li> <li class="devsite-nav-item"><a href="/articles/optimize-long-tasks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-long-tasks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-long-tasks" ><span class="devsite-nav-text" tooltip>Optimize long tasks</span></a></li> <li class="devsite-nav-item"><a href="/articles/optimize-inp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/optimize-inp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/optimize-inp" ><span class="devsite-nav-text" tooltip>Optimize Interaction to Next Paint</span></a></li> <li class="devsite-nav-item"><a href="/articles/apply-instant-loading-with-prpl" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/apply-instant-loading-with-prpl" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/apply-instant-loading-with-prpl" ><span class="devsite-nav-text" tooltip>Apply instant loading with the PRPL pattern</span></a></li> <li class="devsite-nav-item"><a href="/articles/reduce-javascript-payloads-with-code-splitting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/reduce-javascript-payloads-with-code-splitting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/reduce-javascript-payloads-with-code-splitting" ><span class="devsite-nav-text" tooltip>Reduce JavaScript payloads with code splitting</span></a></li> <li class="devsite-nav-item"><a href="/articles/remove-unused-code" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/remove-unused-code" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/remove-unused-code" ><span class="devsite-nav-text" tooltip>Remove unused code</span></a></li> <li class="devsite-nav-item"><a href="/articles/reduce-network-payloads-using-text-compression" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/reduce-network-payloads-using-text-compression" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/reduce-network-payloads-using-text-compression" ><span class="devsite-nav-text" tooltip>Minify and compress network payloads</span></a></li> <li class="devsite-nav-item"><a href="/articles/serve-modern-code-to-modern-browsers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/serve-modern-code-to-modern-browsers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/serve-modern-code-to-modern-browsers" ><span class="devsite-nav-text" tooltip>Serve modern code to modern browsers for faster page loads</span></a></li> <li class="devsite-nav-item"><a href="/articles/publish-modern-javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/publish-modern-javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/publish-modern-javascript" ><span class="devsite-nav-text" tooltip>Publish, ship, and install modern JavaScript for faster applications</span></a></li> <li class="devsite-nav-item"><a href="/articles/commonjs-larger-bundles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/commonjs-larger-bundles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/commonjs-larger-bundles" ><span class="devsite-nav-text" tooltip>How CommonJS is making your bundles larger</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Build a performance culture</span> </div></li> <li class="devsite-nav-item"><a href="/articles/value-of-speed" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/value-of-speed" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/value-of-speed" ><span class="devsite-nav-text" tooltip>The value of speed</span></a></li> <li class="devsite-nav-item"><a href="/articles/how-can-performance-improve-conversion" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/how-can-performance-improve-conversion" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/how-can-performance-improve-conversion" ><span class="devsite-nav-text" tooltip>How can performance improve conversion?</span></a></li> <li class="devsite-nav-item"><a href="/articles/what-should-you-measure-to-improve-performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/what-should-you-measure-to-improve-performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/what-should-you-measure-to-improve-performance" ><span class="devsite-nav-text" tooltip>What should you measure to improve performance?</span></a></li> <li class="devsite-nav-item"><a href="/articles/fixing-website-speed-cross-functionally" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/fixing-website-speed-cross-functionally" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/fixing-website-speed-cross-functionally" ><span class="devsite-nav-text" tooltip>Fixing website speed cross-functionally</span></a></li> <li class="devsite-nav-item"><a href="/articles/site-speed-and-business-metrics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/site-speed-and-business-metrics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/site-speed-and-business-metrics" ><span class="devsite-nav-text" tooltip>Relating site speed and business metrics</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Set performance budgets</span> </div></li> <li class="devsite-nav-item"><a href="/articles/performance-budgets-101" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/performance-budgets-101" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/performance-budgets-101" ><span class="devsite-nav-text" tooltip>Performance budgets 101</span></a></li> <li class="devsite-nav-item"><a href="/articles/your-first-performance-budget" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/your-first-performance-budget" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/your-first-performance-budget" ><span class="devsite-nav-text" tooltip>Your first performance budget</span></a></li> <li class="devsite-nav-item"><a href="/articles/incorporate-performance-budgets-into-your-build-tools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/incorporate-performance-budgets-into-your-build-tools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/incorporate-performance-budgets-into-your-build-tools" ><span class="devsite-nav-text" tooltip>Incorporate performance budgets into your build process</span></a></li> <li class="devsite-nav-item"><a href="/articles/use-lighthouse-for-performance-budgets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/use-lighthouse-for-performance-budgets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/use-lighthouse-for-performance-budgets" ><span class="devsite-nav-text" tooltip>Use Lighthouse for performance budgets</span></a></li> <li class="devsite-nav-item"><a href="/articles/using-bundlesize-with-travis-ci" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/using-bundlesize-with-travis-ci" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/using-bundlesize-with-travis-ci" ><span class="devsite-nav-text" tooltip>Using bundlesize with Travis CI</span></a></li> <li class="devsite-nav-item"><a href="/articles/using-lighthouse-bot-to-set-a-performance-budget" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/using-lighthouse-bot-to-set-a-performance-budget" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/using-lighthouse-bot-to-set-a-performance-budget" ><span class="devsite-nav-text" tooltip>Using Lighthouse Bot to set a performance budget</span></a></li> <li class="devsite-nav-item"><a href="/articles/lighthouse-ci" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /articles/lighthouse-ci" track-type="bookNav" track-name="click" track-metadata-eventdetail="/articles/lighthouse-ci" ><span class="devsite-nav-text" tooltip>Performance monitoring with Lighthouse CI</span></a></li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Articles" > Articles </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/explore" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="" > Explore </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/explore/fast" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Fast load times </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Core Web Vitals workflows with Google tools </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Combine Google tools to audit, improve and monitor your website effectively.</p> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Barry Pollard" src="https://web.dev/images/authors/tunetheweb.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Barry Pollard </span> <div class="wd-author__links"> <a href="https://twitter.com/tunetheweb" aria-label="Barry Pollard on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/tunetheweb" aria-label="Barry Pollard on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://webperf.social/@tunetheweb" aria-label="Barry Pollard on Mastodon" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"> <title>Mastodon</title> <path fill="currentColor" d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z" style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"></path> </svg></a> <a href="https://www.tunetheweb.com" aria-label="Barry Pollard's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Addy Osmani" src="https://web.dev/images/authors/addyosmani.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Addy Osmani </span> <div class="wd-author__links"> <a href="https://twitter.com/addyosmani" aria-label="Addy Osmani on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/addyosmani" aria-label="Addy Osmani on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Antoine Bisch" src="https://web.dev/images/authors/antoinebisch.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Antoine Bisch </span> <div class="wd-author__links"> <a href="https://twitter.com/AntoineBisch" aria-label="Antoine Bisch on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/antoinebisch" aria-label="Antoine Bisch on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://www.linkedin.com/in/https://www.linkedin.com/in/antoinebisch/" aria-label="Antoine Bisch on LinkedIn" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 200 200"> <title>LinkedIn</title> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Elizabeth Sweeny" src="https://web.dev/images/authors/egsweeny.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Elizabeth Sweeny </span> <div class="wd-author__links"> <a href="https://twitter.com/egsweeny" aria-label="Elizabeth Sweeny on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/egsweeny" aria-label="Elizabeth Sweeny on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Garima Mimani" src="https://web.dev/images/authors/gmimani.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Garima Mimani </span> <div class="wd-author__links"> <a href="https://github.com/garimamimani" aria-label="Garima Mimani on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@garimamimani" aria-label="Garima Mimani on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> </div> </div> </div> </div></p> <p> <p class="wd-pubdates" style="font-size: 90%; border-bottom: 1px solid var(--devsite-ref-palette--grey200);color: var(--devsite-ref-palette--blue-grey700);"> Published: May 28, 2020 </p> </p> <p><a href="/articles/vitals">Core Web Vitals</a> are a set of metrics that assess the user experience on criteria such as load performance, responsiveness to user input, and layout stability.</p> <p>A workflow for improving Core Web Vitals for your website will be explored in this guide, but where that workflow begins depends on whether you're collecting your own field data. Where it ends may depend on which of Google's tools you'll find useful in diagnosing and fixing user experience problems.</p> <h2 id="best-measured-in-the-field" data-text="Core Web Vitals are best measured in the field" tabindex="-1">Core Web Vitals are best measured in the field</h2> <p>Core Web Vitals are specifically designed to measure how users experience your website—they are <a href="/articles/user-centric-performance-metrics">user centric metrics</a>. Lab-based tools such as Lighthouse are diagnostic tools to highlight potential performance problems and best practices. Lab-based tools are run under certain, predefined conditions and may not reflect the real-life Core Web Vitals measurements your users experience.</p> <aside class="key-term"> <a href="/articles/lab-and-field-data-differences#lab_data"><strong>Lab data</strong></a> describes how <em>hypothetical</em> users <em>may</em> experience your website. <a href="/articles/lab-and-field-data-differences#field_data"><strong>Field data</strong></a> describes how <em>real</em> users <em>actually</em> experienced your website. Field data is also known as Real User Monitoring (RUM), and is typically collected by monitoring real user experiences using JavaScript on the pages they load, and reporting various metrics to an analytics solution. </aside> <p>For example, Lighthouse is a lab-based tool that runs tests with simulated throttling in a simulated desktop or mobile environment. While such simulations of slower network and device conditions are helpful when trying to diagnose performance problems, <a href="/articles/lab-and-field-data-differences">they're just a single slice</a> of the large variety in network conditions and device capabilities, and so may not reflect what users on your sites are experiening.</p> <p>Lab-based tools like Lighthouse also typically do a "cold load" of a web page as a totally new visitor. This is often the slowest load, but in real life, visitors may have some assets cached if they have visited before, or when they are browsing around the site. New visitors, and tools, also may experience the site differently with cookie banners or other content present to them.</p> <p>In short, while lab-based tools can give an indication of potential performance problems and help you debug and iterate, they may not represent how many of your visitors actually experience your website. Use field data for measuring real-world performance, and lab-based tools like Lighthouse for diagnostics of how to improve it. See also the <a href="#when_to_use_lighthouse">When to use Lighthouse</a> section.</p> <p>Google measures Core Web Vitals through the <a href="https://developer.chrome.com/docs/crux">Chrome User Experience Report (CrUX)</a>. This is a public dataset collected from real Chrome users. It is the backbone of many Google and third-party tools which report a site's Core Web Vitals.</p> <p>CrUX has its limitations, though. It can often tell you <em>when</em> there is a problem, but often has insufficient data to tell you <em>why</em>.</p> <h3 id="collect-own-field-data" data-text="Collect your own field data if possible" tabindex="-1">Collect your own field data if possible</h3> <p>The best dataset for improving website performance in the field is the one <em>you</em> build. That starts with collecting field data from your website's visitors. How you do this depends on the size of your organization, and whether you want to pay for <a href="https://en.wikipedia.org/wiki/Real_user_monitoring#RUM_software">a third-party solution</a> or create your own.</p> <p>Paid solutions will almost certainly measure Core Web Vitals (and other performance metrics) and usually provide a variety of tools to dig into the resulting data. In large organizations with significant resources, this may be the preferred method.</p> <p>However, you may not be part of a large organization—or even one with the means to afford a third-party solution. In these cases, Google's <a href="https://github.com/GoogleChrome/web-vitals"><code translate="no" dir="ltr">web-vitals</code> library</a> will help you gather <em>all</em> Web Vitals. However, you'll be responsible for how that data is reported, stored, and analyzed.</p> <aside class="note"> If you're building your own metrics collection and reporting system, this <a href="/articles/vitals-field-measurement-best-practices">guide of best practices</a> is worth a read to avoid common pitfalls. </aside> <p>If you're already using Google Analytics, but you haven't started collecting your own field data, there may be an opportunity for you to use the <code translate="no" dir="ltr">web-vitals</code> library to <a href="/articles/debug-performance-in-the-field#usage_with_the_web_vitals_javascript_library">send Web Vitals collected in the field to Google Analytics</a> and use the <a href="/articles/vitals-ga4">BigQuery exports of GA4</a> to report on the data.</p> <h2 id="googles-tools" data-text="Understand Google's tools" tabindex="-1">Understand Google's tools</h2> <p>Regardless of whether you're collecting your own field data, there are several Google tools that may be useful in analyzing Core Web Vitals. Before establishing a workflow, a high-level overview of each tool can help you to understand which tools may—or may not—be best for you.</p> <aside class="note"> As you continue, understand that it's not necessary for you to use <em>all</em> of the tools in this guide—only those that you believe will help you in improving your website's Core Web Vitals. </aside> <h3 id="crux" data-text="Chrome User Experience Report (CrUX)" tabindex="-1">Chrome User Experience Report (CrUX)</h3> <p>As mentioned previously, CrUX is a public dataset of field data gathered from <a href="https://developer.chrome.com/docs/crux/methodology/#user_eligibility">a segment of real Google Chrome users</a> from millions of websites. It includes Core Web Vital metrics and other metrics for websites with sufficient traffic.</p> <p>CrUX is available as a monthly <a href="https://developer.chrome.com/docs/crux/bigquery">BigQuery dataset</a> at the origin level, or as a <a href="https://developer.chrome.com/docs/crux/api">daily API</a> at the URL or origin-level, provided a URL or origin has enough samples in the CrUX dataset. The BigQuery data is also viewable in the <a href="https://developer.chrome.com/docs/crux/dashboard">CrUX Dashboard</a> allowing sites to review historical trends for their site.</p> <h4 id="when_to_use_crux" data-text="When to use CrUX" tabindex="-1">When to use CrUX</h4> <p>Even if you gather your own field data, CrUX is still useful. Though CrUX represents a subset of Chrome users, it's helpful to compare your website's field data to see how it aligns with its CrUX data. There are advantages and disadvantages to each, which <a href="/articles/crux-and-rum-differences">can result in differences</a>. If you don't gather <em>any</em> field data for your website, CrUX is especially valuable to provide a high-level overview—provided your website is represented in its dataset.</p> <p>You can use CrUX directly, or using another tool (including those mentioned below). Using the CrUX dataset directly, either using BigQuery or the API, is useful to expose data that is not shown in other tools—for example country-level data is often not available on other tools, or to view the <a href="https://developer.chrome.com/docs/crux/methodology/metrics">additional metrics in CrUX</a> which again are often not surfaced in other tooling.</p> <h4 id="when_not_to_use_crux" data-text="When not to use CrUX" tabindex="-1">When <em>not</em> to use CrUX</h4> <p>CrUX only represents Chrome users, and even then, <a href="https://developer.chrome.com/docs/crux/methodology/#user_eligibility">only a subset of Chrome users</a>. A full RUM solution can include more experiences across Chrome and other browsers where they support the Web Vital metrics.</p> <p>Websites that don't receive enough traffic are not represented in the CrUX dataset. If this is the case for you, you'll need to gather your own field data to understand how your website performs in the field, as CrUX won't be an option. Alternatively, you will need to depend on lab data, but with the limitations that it may not be representative as described previously.</p> <p>Since the data CrUX provides is a rolling average over the previous 28 days, it's not an ideal tool during development, as it will take a fair amount of time for improvements to be reflected in the CrUX dataset.</p> <p>Finally, as a public dataset, CrUX is limited to how much information it can make available, and how this data can be queried. Capturing your own RUM data lets you gather more details (for example, <a href="/articles/debug-performance-in-the-field#lcp">the LCP element</a>), and segment the data more to identify problems. Do logged in users experience better or worse Core Web Vitals than logged out users? Do users with a slow LCP have a particular LCP element? Which interactions are causing high FID and INP values?</p> <h3 id="pagespeed-insights" data-text="PageSpeed Insights (PSI)" tabindex="-1">PageSpeed Insights (PSI)</h3> <p><a href="https://pagespeed.web.dev/">PSI</a> is a tool that reports field data from CrUX <em>and</em> lab from Lighthouse for a given page. See those individual sections for more details.</p> <h4 id="when_to_use_psi" data-text="When to use PSI" tabindex="-1">When to use PSI</h4> <p>PSI is great for assessing CrUX performance at the page level or origin-level, for both mobile and desktop users. It's a good choice for an initial overview of Core Web Vitals for a page or site. It also lets you view Core Web Vitals data for other sites like competitors.</p> <p>PSI also provides Lighthouse data, which gives useful recommendations to improve your Core Web Vitals—if the metrics align. Where these don't align, Lighthouse recommendations may be less relevant.</p> <p>Since Lighthouse is run from the server, it can form a more consistent baseline than running Lighthouse from DevTools.</p> <h4 id="when_not_to_use_psi" data-text="When not to use PSI" tabindex="-1">When <em>not</em> to use PSI</h4> <p>PSI is only available for public URLs. It cannot be used on development sites that are not publicly accessible.</p> <p>CrUX data is only available when sites meet certain <a href="https://developer.chrome.com/docs/crux/methodology/#eligibility">eligibility criteria</a>, including site popularity thresholds. PSI is less useful when CrUX data is not available for a page or origin as it can only show the Lighthouse lab data in these cases.</p> <p>Similarly, if you only have origin-level CrUX data rather than the specific URL being tested, then this also limits its usefulness of correlating the origin-level field data to the page-level lab diagnostics. Having the origin-level field data is still very useful information to have as a summary of the site's performance and the Lighthouse audits may help, but extra caution should be used in this case.</p> <p>Finally, where page-level data is available in CrUX, but differs from the Lighthouse lab data, recommendations from Lighthouse may be of limited value. This can happen particularly for <a href="/articles/optimize-cls#identifying_post_load_cls_issues">post-load CLS issues</a>, and for interactivity Core Web Vitals (FID and INP) where lab-based audits are less useful.</p> <h3 id="search-console" data-text="Search Console" tabindex="-1">Search Console</h3> <p><a href="https://search.google.com/search-console/about">Search Console</a> measures your site's search traffic and performance, <a href="https://support.google.com/webmasters/answer/9205520">including Core Web Vitals</a>. It is only available to site owners who have <a href="https://support.google.com/webmasters/answer/34592">confirmed their ownership of the site</a>.</p> <p>A valuable feature of Search Console is that it groups similar pages (for example, pages that use the same template) into a single group assessment. Search Console also includes a Core Web Vitals report based on field data from CrUX.</p> <h4 id="when_to_use_search_console" data-text="When to use Search Console" tabindex="-1">When to use Search Console</h4> <p>Search Console is well-suited for both developers and those in non-developer roles to assess both search and page performance in ways other Google tools don't. Its presentation of CrUX data and grouping of pages by similarity offers novel insight into how performance improvements impact entire categories of pages.</p> <h4 id="when_not_to_use_search_console" data-text="When not to use Search Console" tabindex="-1">When <em>not</em> to use Search Console</h4> <p>Search Console may not be a fit for projects that use different third-party tools which group pages by similarity, or if a website isn't represented in the CrUX dataset.</p> <p>Page grouping can also be somewhat confusing when the example pages in a group have different characteristics than the rest of the group—for example, if the group fails particular Core Web Vitals overall, but the example pages all seem to pass the same Core Web Vitals. This can happen when a group contains a long tail or seldomly visited pages that may be slower to load, as they're less likely to be cached. When there are sufficient volumes of these pages in the long tail, they can influence the group's overall pass rate.</p> <h3 id="lighthouse" data-text="Lighthouse" tabindex="-1">Lighthouse</h3> <p><a href="https://developer.chrome.com/docs/lighthouse/overview">Lighthouse</a> is a lab tool that provides specific opportunities for improving page performance. <a href="/articles/lighthouse-user-flows">Lighthouse user flows</a> also allow developers to script interaction flows for performance testing beyond page load.</p> <aside class="note"> Because Lighthouse is a lab tool, and <a href="/articles/inp">Interaction to Next Paint (INP)</a> is a field metric, it reports <a href="/articles/tbt">Total Blocking Time</a> instead. </aside> <p><a href="https://github.com/GoogleChrome/lighthouse-ci">Lighthouse-CI</a> is a related tool that runs Lighthouse during project builds and deploys to assist with performance regression testing. It presents a Lighthouse report along with pull requests, and tracks performance metrics over time.</p> <h4 id="when_to_use_lighthouse" data-text="When to use Lighthouse" tabindex="-1">When to use Lighthouse</h4> <p>Lighthouse is excellent for finding performance improvement opportunities during development in both local and staging environments. Lighthouse CI is similarly useful in the build and deploy phases to staging and production environments, where performance regression testing is needed to preserve good user experiences.</p> <aside class="caution"> Don't rely solely on Lighthouse CI during production deployments, as you may miss performance regressions that you'd otherwise catch in local and staging environments during development with Lighthouse. </aside> <h4 id="when_not_to_use_lighthouse" data-text="When not to use Lighthouse" tabindex="-1">When <em>not</em> to use Lighthouse</h4> <p>Lighthouse (or Lighthouse CI) <strong>is <em>not</em> a substitute for field data</strong>. Lighthouse is primarily a diagnostic tool listing potential issues and best practices from a predefined page load. The recommendations it surfaces may not always match the performance experienced by your users.</p> <aside class="key-point"> <strong>Always concentrate on field Core Web Vitals over Lighthouse metrics and scores</strong>. In particular, the Performance Score of Lighthouse is a broad measure of that lab test and <a href="https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/">often does not correlate</a> with field Core Web Vitals. </aside> <p>While Lighthouse can be used to diagnose production sites through tools like PageSpeed Insights, Lighthouse would ideally be used in development and continuous integration environments to address performance issues before they reach production.</p> <h3 id="perf-panel" data-text="The Performance panel in Chrome DevTools" tabindex="-1">The Performance panel in Chrome DevTools</h3> <p><a href="https://developer.chrome.com/docs/devtools">Chrome DevTools</a> is a collection of in-browser development tools, including the <a href="https://developer.chrome.com/docs/devtools/#performance">Performance panel</a>. The Performance panel is a lab tool that consists of two "modes":</p> <p>When the Performance panel is first opened a Live Metrics screen provides current Core Web Vitals metric, with the ability to import field data from CrUX. It is useful as a "live" view of performance as you interact with the page to attempt to uncover performance issues—particularly for post-load issues you might see with the CLS and INP metrics.</p> <p>Secondly, the Performance panel allows developers to capture a profile (or trace) of all page activity during page load or a recorded time period. This view offers deep insight into everything it observes across dimensions such as network, rendering, painting, and scripting activity, as well as a page's Core Web Vitals.</p> <h4 id="when_to_use_the_performance_panel" data-text="When to use the Performance panel" tabindex="-1">When to use the Performance panel</h4> <p>The Performance panel should be used by developers to gain deep insight into a particular page performance.</p> <p>The live metrics view can be used to quickly understand the current performance characteristics of the page, and also spot potential problems as the page is interacted with.</p> <p>The trace view is particularly useful to debug responsiveness issues affecting INP. Once a poorly responding interaction is identified and repeatable, the Performance panel can provide a wealth of data as to what is going on in the browser to help understand the issue, from main thread blocking, to JavaScript call stacks, to rendering work.</p> <h4 id="when_not_to_use_the_performance_panel" data-text="When not to use the Performance panel" tabindex="-1">When <em>not</em> to use the Performance panel</h4> <p>The Performance panel is a developer tool that primarily provides lab data—though with some context from CrUX. It's not a substitute for field data.</p> <p>The trace view contains a lot of debugging information, but because of that, it can be difficult to understand for novice developers or those in non-developer roles. However the live metrics view that the panel opens with, addresses this by providing an easier to use interface for those not requiring the full detail.</p> <h2 id="three-step-workflow" data-text="A three step workflow for ensuring your website's Core Web Vitals stay healthy" tabindex="-1">A three step workflow for ensuring your website's Core Web Vitals stay healthy</h2> <p>When working to improve the user experience, it's best to think of the process as a continuous cycle. For improving Core Web Vitals and other performance metrics, one approach could be:</p> <ol> <li>Evaluate website health and identify pain points.</li> <li>Debug and optimize.</li> <li>Monitor with continuous integration tools to catch and prevent regressions.</li> </ol> <figure> <img src="/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039.png" alt="The three step process, rendered as a continuous cycle. The first step reads 'Evaluate website health and identify paint points', the second 'Debug and optimize', and the third 'Monitor and continuous development'." width="800" height="465" srcset="https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_36.png 36w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_48.png 48w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_72.png 72w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_96.png 96w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_480.png 480w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_720.png 720w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_856.png 856w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_960.png 960w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/a-diagram-a-three-step-p-ffbb521f18039_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Three step workflow</figcaption> </figure> <h3 id="evaluate" data-text="Step 1: Evaluate website health and identify opportunities for improvement" tabindex="-1">Step 1: Evaluate website health and identify opportunities for improvement</h3> <p>It is best to start with field data to evaluate website health.</p> <ol> <li>Use <a href="https://pagespeed.web.dev/">PageSpeed Insights</a> to view overall Core Web Vitals experience metrics on the origin, and specific information on an individual URL.</li> <li><a href="https://search.google.com/search-console/about">Search Console</a> can be useful to identify pages which need improvement where its page grouping feature works well for your site.</li> <li>If you have RUM data, then that is often the best option to be able to identify particular pages or traffic segments with issues.</li> </ol> <p>Whether you analyze field data you collect yourself or CrUX data, this first step is vital. If you're not gathering field data, CrUX data may be enough to guide you—again, provided your website is represented in the dataset.</p> <h4 id="analyze-with-psi" data-text="Analyze site performance with PageSpeed Insights" tabindex="-1">Analyze site performance with PageSpeed Insights</h4> <figure> <img src="/static/articles/vitals-tools/image/psi-crux.png" alt="How PageSpeed Insights portrays CrUX data for a URL's Core Web Vitals. Each of the Core Web Vitals is displayed separately, while grouping each Core Web Vital in the 'Good', 'Needs Improvement', and 'Poor' thresholds for the last 28 days." width="800" height="477" srcset="https://web.dev/static/articles/vitals-tools/image/psi-crux_36.png 36w,https://web.dev/static/articles/vitals-tools/image/psi-crux_48.png 48w,https://web.dev/static/articles/vitals-tools/image/psi-crux_72.png 72w,https://web.dev/static/articles/vitals-tools/image/psi-crux_96.png 96w,https://web.dev/static/articles/vitals-tools/image/psi-crux_480.png 480w,https://web.dev/static/articles/vitals-tools/image/psi-crux_720.png 720w,https://web.dev/static/articles/vitals-tools/image/psi-crux_856.png 856w,https://web.dev/static/articles/vitals-tools/image/psi-crux_960.png 960w,https://web.dev/static/articles/vitals-tools/image/psi-crux_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/psi-crux_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/psi-crux_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Analyze site performance with PageSpeed Insights</figcaption> </figure> <p>PageSpeed Insights displays the CrUX data covering the last 28 days of user experience data at the 75th percentile. This means that if 75% of user experiences meet the <a href="/articles/defining-core-web-vitals-thresholds">threshold set for a given metric</a>, then the experience is considered "good".</p> <p>If you have a specific page in mind to look at the performance of, then use that. For an overall view of a site when you first start optimizing, you may want to start with the home page, as it is typically one of the most popular pages on many sites.</p> <p>Concentrate on the <strong>what your real users are experiencing</strong> section of PSI initially. You will see up to four views of the data: mobile and desktop for the URL entered and the whole origin. Compare these and see how they differ. Mobile is typically less performant than desktop since it is a more resource-constrained device operating under potentially less stable network conditions. If the URL and origin data are significantly different, then try to understand why: home pages are often the first pages visited (that is, a landing page) so can be slower than the origin users take the full brunt of an unprimed browser cache. Subsequent pages will likely load faster, as any shared assets will be cached, bringing down the aggregate origin-level data.</p> <p>PSI also shows all three Core Web Vitals (LCP, CLS, and INP) plus the diagnostic TTFB and FCP metrics. Are any of the Core Web Vitals failing, and by how much? This will indicate where to concentrate your efforts.</p> <p>Understand the relationships between these numbers—particularly for LCP. If LCP is slow, as it is in this example, then look at TTFB and FCP which are both milestones to that metric. In this example we have a 1.8 second TTFB, which is going to make it very tough to meet the 2.5 second recommended threshold for good LCP. This suggests either a slow backend (server issues or a lack of CDN), slower networks, or redirects delaying the first HTML bytes. Look at the <a href="/articles/optimize-ttfb">Optimize TTFB guide</a> for more information. FCP takes another second on top of that, which again may be indicative of slower networks. LCP is not long after FCP in this example suggesting the LCP resource is well optimized once the page itself loads.</p> <p>For CLS, look at the CrUX CLS and the Lighthouse CLS scores to see if this is a load CLS issue (which Lighthouse will catch and advise on), or a post-load CLS issue that Lighthouse won't catch. More for information <a href="/articles/optimize-cls#understanding_where_your_shifts_are_coming_from">see the Optimize CLS guide</a>.</p> <p>For responsiveness, look at the INP scores. Look at the TBT audits in Lighthouse to see if a lot of JavaScript processing is happening during the initial page load, which is likely to impact INP. INP can be a tricky metric to improve, so consult the <a href="/articles/optimize-inp">Optimize INP guide</a> for more information.</p> <h4 id="identify-search-console" data-text="Identify poorly performing pages in Search Console" tabindex="-1">Identify poorly performing pages in Search Console</h4> <figure> <img src="/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f.png" alt="Core Web Vitals report in Search Console. The report is broken down into Desktop and Mobile categories, with line graphs detailing the distribution of pages with Core Web Vitals in the 'Good', 'Needs Improvement', and 'Poor' categories over time." width="800" height="639" srcset="https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_36.png 36w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_48.png 48w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_72.png 72w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_96.png 96w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_480.png 480w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_720.png 720w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_856.png 856w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_960.png 960w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-core-web-7b003f1fa24f_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Identify poorly performing pages in Search Console</figcaption> </figure> <p>While PSI is useful when you have a specific URL you want to test or the site as a whole, Search Console can help target your efforts to particular types of pages. This is particularly useful if many pages share common themes or technologies and Search Console can successfully identify these.</p> <p>The <a href="https://support.google.com/webmasters/answer/9205520">Core Web Vitals report in Search Console</a> shows the big picture of your website's performance, but you can still drill down into specific pages that need attention. With Search Console, you can also:</p> <ul> <li>Identify individual page groups that need improvement, and those that provide a good user experience.</li> <li>Get granular data on performance by URL grouped by status, metric, and groups of similar web pages (such as product detail pages on an ecommerce website).</li> <li>Get detailed reports that bucket URLs in each user experience quality category for both mobile and desktop.</li> </ul> <aside class="caution"> The data in Search Console is different from what's shown in the PageSpeed Insights origin view or the CrUX Dashboard. This is because Search Console organizes information by URL, whereas PageSpeed Insights origin view and CrUX Dashboard organizes data by origin. If you have few poorly performing URLs, but those URLs receive a large portion of overall traffic, Search Console will only show a few poorly performing URLs while CrUX Dashboard will show a high percentage of poor user experiences. </aside> <p>Once you have some specific pages to look at, you can use PSI as explained previously to gather further understanding of the issues for those pages.</p> <h3 id="debug" data-text="Step 2: Debug and optimize" tabindex="-1">Step 2: Debug and optimize</h3> <p>In step 1, you should have identified pages which require performance improvements, and also which of the Core Web Vitals metrics you want to improve. You can use the Google tooling to get further information to understand the root cause to identify the issue.</p> <ol> <li>Run a <a href="#lighthouse">Lighthouse</a> audit to get page-level guidance</li> <li>Use the <a href="#perf-panel">Performance panel</a> live metrics view to analyze Core Web Vitals in real time.</li> <li>Use the Performance panel tracing to debug performance issues and test code changes.</li> </ol> <p>For more detailed guidance, see these guides:</p> <ul> <li><a href="/articles/optimize-lcp">Optimizing LCP</a></li> <li><a href="/articles/optimize-cls">Optimizing CLS</a></li> <li><a href="/articles/optimize-inp">Optimizing INP</a></li> </ul> <h4 id="opportunities-lighthouse" data-text="Uncover opportunities with Lighthouse" tabindex="-1">Uncover opportunities with Lighthouse</h4> <p>PageSpeed Insights runs Lighthouse for you, but for local development it is also possible to run Lighthouse from Chrome DevTools, which is useful to validate fixes locally.</p> <figure> <img src="/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739.png" alt="Lighthouse report within Chrome DevTools. The report breaks down scores across five categories, with the report focused on the 'Performance' category, with results at the bottom of the report window." width="800" height="526" srcset="https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_36.png 36w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_48.png 48w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_72.png 72w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_96.png 96w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_480.png 480w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_720.png 720w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_856.png 856w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_960.png 960w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/a-screenshot-a-lighthous-f5cd888d7b739_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Lighthouse report</figcaption> </figure> <p>A key point is to validate that the Lighthouse audit replicates the issues you are trying to solve (for example, slow LCP, or CLS issues). Out of the box, Lighthouse only assesses the user experience during page load. Since it's a lab tool, it also excludes INP in favor of TBT.</p> <aside class="caution"> By default, Lighthouse simulates a mid-tier mobile device on a throttled slow 4G connection. This may find issues that wouldn't ordinarily appear on high-speed devices and fast internet connections. This simulated throttling may not be representative of the variety of user experiences among your website's user base at the 75th percentile. However, these metrics are an indicator of where performance problems exist, and may translate into better performance overall in the field if the problems Lighthouse finds are addressed. </aside> <p>When the Lighthouse metrics suggest a similar problem as the one you are trying to solve, the wealth of information in its audits can help identify issues and suggest solutions.</p> <p>You can filter the audits to just the Core Web Vitals you are interested in to focus on fixes for issues related to a specific metric:</p> <figure> <img src="/static/articles/vitals-tools/image/lighthouse-filter.png" alt="Lighthouse filter options for key metrics" width="700" height="100" srcset="https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_36.png 36w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_48.png 48w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_72.png 72w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_96.png 96w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_480.png 480w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_720.png 720w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_856.png 856w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_960.png 960w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/lighthouse-filter_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Lighthouse filter options</figcaption> </figure> <p>For INP, use the TBT audits to identify issues that can potentially affect those metrics, but be aware that without interactions, Lighthouse is limited in how much it can diagnose.</p> <h4 id="analyze-real-time" data-text="Analyze in real time with the Chrome DevTools live metrics screen" tabindex="-1">Analyze in real time with the Chrome DevTools live metrics screen</h4> <p>The Chrome DevTools live metrics screen in the Performance panel shows Core Web Vitals in real time during page load <em>and</em> while browsing a page. Because of this, it can capture INP as well as layout shifts that occur after load. It is also possible to see more detailed information on each metric:</p> <figure> <img src="/static/articles/vitals-tools/image/performance-panel-live-metrics.png" alt="Live metrics view in Chrome DevTools Performance panel" width="800" height="528" srcset="https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_36.png 36w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_48.png 48w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_72.png 72w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_96.png 96w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_480.png 480w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_720.png 720w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_856.png 856w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_960.png 960w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/performance-panel-live-metrics_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Live metrics view in Chrome DevTools Performance panel</figcaption> </figure> <p>While this view gives a lot of helpful information to help identify performance issues, for even more information you can drill down with a trace.</p> <h4 id="drilldown-with-perf-panel" data-text="Drill down with the Performance panel" tabindex="-1">Drill down with the Performance panel</h4> <p>The Performance panel in Chrome DevTools lets you record a profile (or trace) of all page behavior during a recorded period of time.</p> <figure> <img src="/static/articles/vitals-tools/image/devtools-perf-trace.png" alt="Chrome DevTools Performance Panel trace showing flame chart with a long task highlighted" width="800" height="466" srcset="https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_36.png 36w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_48.png 48w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_72.png 72w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_96.png 96w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_480.png 480w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_720.png 720w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_856.png 856w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_960.png 960w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/devtools-perf-trace_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Chrome DevTools Performance Panel trace</figcaption> </figure> <p>Key timings—such as LCP, for example—are shown in the Timings track. Click these for more details.</p> <p>The <strong>Layout Shifts</strong> track highlights layout shifts and clicking on these provides more details about the elements that shifted for debugging CLS.</p> <p>Long Tasks (that can lead to INP issues) are also highlighted with red triangles.</p> <p>These features—as well as information in other parts of the <a href="https://developer.chrome.com/docs/devtools/#performance">Performance panel</a>—can help you determine whether fixes are having any effect on a page's Core Web Vitals.</p> <h4 id="debug-in-field" data-text="Debug Core Web Vitals in the field" tabindex="-1">Debug Core Web Vitals in the field</h4> <p>Lab tools can't always identify the cause of all Core Web Vitals issues affecting your users. This is one reason why it's so important to collect your own field data, as it takes factors into account that lab data cannot.</p> <p>See <a href="/articles/debug-performance-in-the-field">debug performance in the field</a> for more information.</p> <h3 id="monitor-changes" data-text="Step 3: Monitor for changes" tabindex="-1">Step 3: Monitor for changes</h3> <figure> <img src="/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471.png" alt="A collection of icons for Google tools. From left to right, the icons represent 'CrUX on BigQuery', 'CrUX API', 'PSI API', 'web-vitals.js', with 'Lighthouse CI' at the far right." width="800" height="185" srcset="https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_36.png 36w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_48.png 48w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_72.png 72w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_96.png 96w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_480.png 480w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_720.png 720w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_856.png 856w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_960.png 960w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/a-collection-icons-goog-f791c36c6f471_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>Google's tools for monitoring changes</figcaption> </figure> <p>Once you have fixed any issues, you want to ensure they have the required effect and that new issues don't disrupt your Core Web Vitals. This requires monitoring for performance issues as part of developer workflow to prevent performance issues being released to production, and monitoring the field data regularly to ensure this is the case.</p> <aside class="note"> <a href="https://youtu.be/YJGCZCaIZkQ?t=112">Research by Google</a> has shown that most performance improvements tend to regress within six months. A website needs continuous monitoring in both the lab <em>and</em> the field to identify worsening trends in Core Web Vitals and other performance metrics to avoid regressions. </aside> <h4 id="monitor-regressions" data-text="Monitor for performance requisitions in Continuous Integration (CI) environments" tabindex="-1">Monitor for performance requisitions in Continuous Integration (CI) environments</h4> <p><a href="https://github.com/GoogleChrome/lighthouse-ci">Lighthouse-CI</a> lets you automatically run Lighthouse audits on code commits to prevent performance regressions entering code. This can check performance timings (which <a href="https://developers.google.com/web/tools/lighthouse/variability">are subject to variability</a>), or for just <a href="https://developer.chrome.com/docs/lighthouse/performance">the performance audits</a>, as a linting tool to prevent bad practices in the code.</p> <h4 id="trends" data-text="View website health trends with field data" tabindex="-1">View website health trends with field data</h4> <p>While you should aim to catch and fix all performance issues before they make it to production, monitoring your field data using RUM is essential to find any that slip through. There are many commercial RUM products available that can help with this. The <a href="https://github.com/GoogleChrome/web-vitals"><code translate="no" dir="ltr">web-vitals</code></a> JavaScript library can automate a website's field data collection, and optionally use this data to power custom dashboards and alerting systems.</p> <p>For sites without a RUM solution, you can <a href="https://developer.chrome.com/docs/crux/dashboard">use the CrUX Dashboard</a> as a basic trend analysis of field data. It reports the following for sites in CrUX:</p> <ul> <li><strong>Site overview</strong>, which segments Core Web Vitals into desktop and mobile device types.</li> <li><strong>Historical trend by metric type</strong>, which is a distribution of metrics over time for each available monthly release of CrUX report data.</li> <li><strong>User demographics</strong>, which illustrates the distribution of page views across an entire origin for users in each demographic including device and <a href="https://developer.mozilla.org/docs/Glossary/Effective_connection_type">effective connection</a> types.</li> </ul> <figure> <img src="/static/articles/vitals-tools/image/crux-dashboard.png" alt="The CrUX Dashboard breaks down LCP, INP, and CLS into desktop and mobile categories, with each category showing the distribution of values that lie within 'Good', 'Needs Improvement' and 'Poor' thresholds for the previous month." width="800" height="1012" srcset="https://web.dev/static/articles/vitals-tools/image/crux-dashboard_36.png 36w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_48.png 48w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_72.png 72w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_96.png 96w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_480.png 480w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_720.png 720w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_856.png 856w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_960.png 960w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_1440.png 1440w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_1920.png 1920w,https://web.dev/static/articles/vitals-tools/image/crux-dashboard_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption>CrUX Dashboard</figcaption> </figure> <p>The CrUX Dashboard is based on the <a href="https://developer.chrome.com/blog/chrome-ux-report-bigquery">CrUX BigQuery dataset</a>, which is updated once a month. This can be a good reminder to regularly check in on your Core Web Vitals.</p> <aside class="note"> Even if your website is represented in CrUX, you should still collect your own field data, since CrUX doesn't include <em>all</em> users of Chrome or even other browsers—but it's certainly a good place to start in the absence of any field data. </aside> <h2 id="conclusion" data-text="Conclusion" tabindex="-1">Conclusion</h2> <p>Ensuring fast and delightful user experiences requires a performance-first mindset and adoption of a workflow to ensure progress. With the right tools and processes to audit, debug, and monitor, building great user experiences and staying within the thresholds defined for good Core Web Vitals is within your reach.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-10-17 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-17 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Df3fWUNUIFOp9aOyiG9JG6Bz0dFgOD"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_public_developer_profiles","Search__enable_ai_eligibility_checks","Profiles__enable_developer_profiles_callout","CloudShell__cloud_shell_button","Cloud__enable_cloud_shell","Cloud__enable_legacy_calculator_redirect","Experiments__reqs_query_experiments","DevPro__enable_developer_subscriptions","OnSwitch__enable","MiscFeatureFlags__enable_view_transitions","Profiles__enable_profile_collections","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__developers_footer_dark_image","Profiles__enable_release_notes_notifications","TpcFeatures__enable_required_headers","Cloud__enable_cloud_dlp_service","Profiles__enable_completecodelab_endpoint","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_dashboard_curated_recommendations","Profiles__require_profile_eligibility_for_signin","Concierge__enable_pushui","Profiles__enable_page_saving","Profiles__enable_complete_playlist_endpoint","Cloud__enable_free_trial_server_call","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_image","Profiles__enable_awarding_url","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_cloudx_experiment_ids","Analytics__enable_clearcut_logging","MiscFeatureFlags__emergency_css","Profiles__enable_recognition_badges","Cloud__enable_cloud_facet_chat","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_explain_this_code","Search__enable_suggestions_from_borg","BookNav__enable_tenant_cache_key","Cloud__enable_llm_concierge_chat","Search__enable_page_map"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Core Web Vitals workflows with Google tools | Articles | web.dev