Largest Contentful Paint (LCP) | 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/lcp"><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/lcp" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/lcp" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/lcp?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/lcp?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/lcp?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/lcp?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/lcp?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/lcp?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/lcp?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/lcp?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/lcp?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/lcp?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/lcp?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/lcp?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/lcp?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/lcp?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/lcp?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/lcp?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/lcp?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/lcp?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/lcp?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/lcp?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/lcp" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/lcp" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/lcp?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/lcp?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/lcp?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/lcp?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/lcp?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/lcp?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/lcp?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/lcp?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/lcp?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/lcp?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/lcp?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/lcp?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/lcp?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/lcp?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/lcp?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/lcp?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/lcp?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/lcp?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/lcp?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/lcp?hl=vi" /><title>Largest Contentful Paint (LCP)  |  Articles  |  web.dev</title> <meta property="og:title" content="Largest Contentful Paint (LCP)  |  Articles  |  web.dev"><meta name="description" content="This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it"> <meta property="og:description" content="This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it"><meta property="og:url" content="https://web.dev/articles/lcp"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2024-02-19", "headline": "Largest Contentful Paint (LCP)" } </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": "Largest Contentful Paint (LCP)", "item": "https://web.dev/articles/lcp" }] } </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"> Largest Contentful Paint (LCP) </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> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Philip Walton" src="https://web.dev/images/authors/philipwalton.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Philip Walton </span> <div class="wd-author__links"> <a href="https://twitter.com/philwalton" aria-label="Philip Walton 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/philipwalton" aria-label="Philip Walton 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/waltonphilip" aria-label="Philip Walton 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> <a href="https://toot.cafe/@philipwalton" aria-label="Philip Walton 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://philipwalton.com/" aria-label="Philip Walton'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="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></p> <p> <div class="wd-browser-compat"> <p>Browser Support</p> <ul> <li data-support="yes"> <img alt="Chrome: 77." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-10 -10 276 276'%3E%3ClinearGradient id='a' x1='145' x2='34' y1='253' y2='61' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231e8e3e'/%3E%3Cstop offset='1' stop-color='%2334a853'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='111' x2='222' y1='254' y2='62' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fcc934'/%3E%3Cstop offset='1' stop-color='%23fbbc04'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='17' x2='239' y1='80' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d93025'/%3E%3Cstop offset='1' stop-color='%23ea4335'/%3E%3C/linearGradient%3E%3Ccircle cx='128' cy='128' r='64' fill='%23fff'/%3E%3Cpath fill='url(%23a)' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E" > <span aria-hidden="true"> 77 </span> </li> <li data-support="yes"> <img alt="Edge: 79." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 27600 27600'%3E%3ClinearGradient id='A' gradientUnits='userSpaceOnUse'/%3E%3ClinearGradient id='B' x1='6870' x2='24704' y1='18705' y2='18705' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%230c59a4'/%3E%3Cstop offset='1' stop-color='%23114a8b'/%3E%3C/linearGradient%3E%3ClinearGradient id='C' x1='16272' x2='5133' y1='10968' y2='23102' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%231b9de2'/%3E%3Cstop offset='.16' stop-color='%231595df'/%3E%3Cstop offset='.67' stop-color='%230680d7'/%3E%3Cstop offset='1' stop-color='%230078d4'/%3E%3C/linearGradient%3E%3CradialGradient id='D' cx='16720' cy='18747' r='9538' xlink:href='%23A'%3E%3Cstop offset='.72' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.53'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='E' cx='7130' cy='19866' r='14324' gradientTransform='matrix(.14843 -.98892 .79688 .1196 -8759 25542)' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E" > <span aria-hidden="true"> 79 </span> </li> <li data-support="yes"> <img alt="Firefox: 122." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3E%3Cdefs%3E%3CradialGradient id='ff-b' cx='428.5' cy='55.1' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23ffbd4f'/%3E%3Cstop offset='.2' stop-color='%23ffac31'/%3E%3Cstop offset='.3' stop-color='%23ff9d17'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff563b'/%3E%3Cstop offset='.5' stop-color='%23ff3750'/%3E%3Cstop offset='.7' stop-color='%23f5156c'/%3E%3Cstop offset='.8' stop-color='%23eb0878'/%3E%3Cstop offset='.9' stop-color='%23e50080'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-c' cx='245.4' cy='259.9' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%23960e18'/%3E%3Cstop offset='.3' stop-color='%23b11927' stop-opacity='.7'/%3E%3Cstop offset='.4' stop-color='%23db293d' stop-opacity='.3'/%3E%3Cstop offset='.5' stop-color='%23f5334b' stop-opacity='.1'/%3E%3Cstop offset='.5' stop-color='%23ff3750' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-d' cx='305.8' cy='-58.6' r='363' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.3' stop-color='%23ffdc3e'/%3E%3Cstop offset='.5' stop-color='%23ff9d12'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-e' cx='190' cy='390.8' r='238.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%233a8ee6'/%3E%3Cstop offset='.5' stop-color='%235c79f0'/%3E%3Cstop offset='.7' stop-color='%239059ff'/%3E%3Cstop offset='1' stop-color='%23c139e6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-f' cx='252.2' cy='201.3' r='126.5' gradientTransform='matrix(1 0 0 1 -48 31)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E" > <span aria-hidden="true"> 122 </span> </li> <li data-support="no"> <img alt="Safari: not supported." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='195 190 135 135'%3E%3Cdefs%3E%3ClinearGradient id='s-a' x1='132.6' x2='134.4' y1='111.7' y2='-105.3' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23d2d2d2' /%3E%3Cstop offset='.5' stop-color='%23f2f2f2' /%3E%3Cstop offset='1' stop-color='%23fff' /%3E%3C/linearGradient%3E%3ClinearGradient id='s-b' gradientUnits='userSpaceOnUse' /%3E%3ClinearGradient id='s-c' x1='65.4' x2='67.4' y1='115.7' y2='17.1' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23005ad5' /%3E%3Cstop offset='.2' stop-color='%230875f0' /%3E%3Cstop offset='.3' stop-color='%23218cee' /%3E%3Cstop offset='.6' stop-color='%2327a5f3' /%3E%3Cstop offset='.8' stop-color='%2325aaf2' /%3E%3Cstop offset='1' stop-color='%2321aaef' /%3E%3C/linearGradient%3E%3ClinearGradient id='s-d' x1='158.7' x2='176.3' y1='96.7' y2='79.5' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23c72e24' /%3E%3Cstop offset='1' stop-color='%23fd3b2f' /%3E%3C/linearGradient%3E%3CradialGradient id='s-i' cx='-69.9' cy='69.3' r='54' gradientTransform='matrix(.9 -.01 .04 2.72 -9 -120)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E" > <span aria-hidden="true"> x </span> </li> </ul> <p><a href="https://developer.mozilla.org/docs/Web/API/LargestContentfulPaint">Source</a></p> </div> </p> <aside class="note"> <b>Note:</b> Largest Contentful Paint (LCP) is an important, <a href="/articles/vitals#lifecycle">stable</a> Core Web Vital metric for measuring <a href="/articles/user-centric-performance-metrics#types_of_metrics">perceived load speed</a> because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is <a href="/articles/user-centric-performance-metrics#defining_metrics">useful</a>. </aside> <p>Historically, it's been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users. Older metrics like <a href="https://developer.mozilla.org/docs/Web/Events/load">load</a> or <a href="https://developer.mozilla.org/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> don't work well because they don't necessarily correspond to what the user sees on their screen. And newer, user-centric performance metrics like <a href="/articles/fcp">First Contentful Paint (FCP)</a> only capture the very beginning of the loading experience. If a page shows a splash screen or displays a loading indicator, this moment isn't very relevant to the user.</p> <p>In the past, we've recommended performance metrics like <a href="https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint">First Meaningful Paint (FMP)</a> and <a href="https://developer.chrome.com/docs/lighthouse/performance/speed-index">Speed Index (SI)</a> (both available in Lighthouse) to help capture more of the loading experience after the initial paint, but these metrics are complex, hard to explain, and often wrong—meaning they still don't identify when the main content of the page has loaded.</p> <p>Based on discussions in the <a href="https://www.w3.org/webperf/">W3C Web Performance Working Group</a> and research done at Google, we've found that a more accurate way to measure when the main content of a page is loaded is to look at when the largest element is rendered.</p> <h2 id="what-is-lcp" data-text="What is LCP?" tabindex="-1">What is LCP?</h2> <p>LCP reports the render time of the largest <a href="#what-elements-are-considered">image, text block, or video</a> visible in the viewport, relative to when the user first navigated to the page.</p> <aside class="key-point"> <b>Key Point</b>: It is important to note that LCP includes any unload time from the previous page, connection set up time, redirect time, and <a href="/articles/ttfb">Time To First Byte (TTFB)</a> which can be significant when measured in the field and can lead to differences between field and lab measurements. </aside> <h3 id="what-is-a-good-lcp-score" data-text="What is a good LCP score?" tabindex="-1">What is a good LCP score?</h3> <p>To provide a good user experience, sites should strive to have Largest Contentful Paint of <strong>2.5 seconds</strong> or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the <strong>75th percentile</strong> of page loads, segmented across mobile and desktop devices.</p> <figure> <picture> <source srcset="https://web.dev/static/articles/lcp/image/good-lcp-values.svg" media="(min-width: 640px)" width="800" height="200"> <img src="/static/articles/lcp/image/good-lcp-values-are-25-s-28836be83d1aa.svg" alt="Good LCP values are 2.5 seconds or less, poor values are greater than 4.0 seconds, and anything in between needs improvement" width="640" height="480"> </picture> <figcaption class="wd-caption"> A good LCP value is 2.5 seconds or less. </figcaption> </figure> <aside class="note"> <b>Note:</b> To learn more about the research and methodology behind this recommendation, see: <a href="/articles/defining-core-web-vitals-thresholds">Defining the Core Web Vitals metrics thresholds</a>. </aside> <h3 id="what-elements-are-considered" data-text="What elements are considered?" tabindex="-1">What elements are considered?</h3> <p>As currently specified in the <a href="https://wicg.github.io/largest-contentful-paint/">Largest Contentful Paint API</a>, the types of elements considered for Largest Contentful Paint are:</p> <ul> <li><code translate="no" dir="ltr"><img></code> elements (the <a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2023_08_lcp.md">first frame presentation time</a> is used for animated content such as GIFs or animated PNGs)</li> <li><code translate="no" dir="ltr"><image></code> elements inside an <code translate="no" dir="ltr"><svg></code> element</li> <li><code translate="no" dir="ltr"><video></code> elements (the poster image load time or <a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2023_08_lcp.md">first frame presentation time</a> for videos is used—whichever is earlier)</li> <li>An element with a background image loaded using the <a href="https://developer.mozilla.org/docs/Web/CSS/url()"><code translate="no" dir="ltr">url()</code></a> function, (as opposed to a <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS gradient</a>)</li> <li><a href="https://developer.mozilla.org/docs/Web/HTML/Block-level_elements">Block-level</a> elements containing text nodes or other inline-level text element children.</li> </ul> <p>Note that restricting the elements to this limited set was intentional in order to keep things simple in the beginning. Additional elements (like the full <code translate="no" dir="ltr"><svg></code> support) may be added in the future as more research is conducted.</p> <p>As well as only considering some elements, LCP measurements use heuristics to exclude certain elements that users are likely to see as "non-contentful". For Chromium-based browsers, these include:</p> <ul> <li>Elements with an opacity of 0, that are invisible to the user</li> <li>Elements that cover the full viewport, that are likely considered as background rather than content</li> <li>Placeholder images or other images with a low entropy, that likely don't reflect the true content of the page</li> </ul> <p>Browsers are likely to continue to improve these heuristics to ensure we match user expectations of what the largest <em>contentful</em> element is.</p> <p>These "contentful" heuristics may differ from those used by <a href="/articles/fcp">First Contentful Paint (FCP)</a>, which may consider some of these elements, such as placeholder images or full viewport images, even if they are ineligible to be LCP candidates. Despite both using "contentful" in their name, the aim of these metrics is different. FCP measures when <em>any content</em> is painted to screen and LCP when the <em>main content</em> is painted so LCP is intented to be more selective.</p> <h3 id="how-is-element-size-determined" data-text="How is an element's size determined?" tabindex="-1">How is an element's size determined?</h3> <p>The size of the element reported for LCP is typically the size that's visible to the user within the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible <a href="https://developer.mozilla.org/docs/Web/CSS/overflow">overflow</a>, those portions don't count toward the element's size.</p> <p>For image elements that have been resized from their <a href="https://developer.mozilla.org/docs/Glossary/Intrinsic_Size">intrinsic size</a>, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller.</p> <p>For text elements, LCP considers only the smallest rectangle that can contain all text nodes.</p> <p>For all elements, LCP doesn't consider margins, paddings, or borders applied using CSS.</p> <aside class="note"> <b>Note:</b> Determining which text nodes belong to which elements can sometimes be tricky, especially for elements whose children includes inline elements and plain text nodes but also block-level elements. The key point is that every text node belongs to (and only to) its closest block-level ancestor element. In <a href="https://wicg.github.io/element-timing/#set-of-owned-text-nodes">spec terms</a>: each text node belongs to the element that generates its <a href="https://developer.mozilla.org/docs/Web/CSS/Containing_block">containing block</a>. </aside> <h3 id="when-is-lcp-reported" data-text="When is LCP reported?" tabindex="-1">When is LCP reported?</h3> <p>Web pages often load in stages, and as a result, it's possible that the largest element on the page might change.</p> <p>To handle this potential for change, the browser dispatches a <a href="https://developer.mozilla.org/docs/Web/API/PerformanceEntry"><code translate="no" dir="ltr">PerformanceEntry</code></a> of type <code translate="no" dir="ltr">largest-contentful-paint</code> identifying the largest contentful element as soon as the browser has painted the first frame. But then, after rendering subsequent frames, it will dispatch another <a href="https://developer.mozilla.org/docs/Web/API/PerformanceEntry"><code translate="no" dir="ltr">PerformanceEntry</code></a> any time the largest contentful element changes.</p> <p>For example, on a page with text and a hero image the browser may initially just render the text—at which point the browser would dispatch a <code translate="no" dir="ltr">largest-contentful-paint</code> entry whose <code translate="no" dir="ltr">element</code> property would likely reference a <code translate="no" dir="ltr"><p></code> or <code translate="no" dir="ltr"><h1></code>. Later, once the hero image finishes loading, a second <code translate="no" dir="ltr">largest-contentful-paint</code> entry would be dispatched and its <code translate="no" dir="ltr">element</code> property would reference the <code translate="no" dir="ltr"><img></code>.</p> <p>An element can only be considered the largest contentful element after it has rendered and is visible to the user. Images that haven't yet loaded aren't considered "rendered". Neither are text nodes using web fonts during the <a href="https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#The_font_display_timeline">font block period</a>. In such cases, a smaller element might be reported as the largest contentful element, but as soon as the larger element finishes rendering, another <code translate="no" dir="ltr">PerformanceEntry</code> is created.</p> <p>In addition to late-loading images and fonts, a page may add new elements to the DOM as new content becomes available. If any of these new elements is larger than the previous largest contentful element, a new <code translate="no" dir="ltr">PerformanceEntry</code> will also be reported.</p> <p>If the largest contentful element is removed from the viewport, or even from the DOM, it remains the largest contentful element unless a larger element is rendered.</p> <aside class="note"> <b>Note:</b> Prior to Chrome 88, removed elements were not considered as largest contentful elements, and removing the current candidate would trigger a new <code translate="no" dir="ltr">largest-contentful-paint</code> entry to be dispatched. However, due to popular UI patterns such as image carousels that often removed DOM elements, the metric was updated to more accurately reflect what users experience. See the <a href="https://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/2020_11_lcp.md">CHANGELOG</a> for more details. </aside> <p>The browser will stop reporting new entries as soon as the user interacts with the page (via a tap, scroll, or keypress), as user interaction often changes what's visible to the user (which is especially true with scrolling).</p> <p>For analysis purposes, you should only report the most recently dispatched <code translate="no" dir="ltr">PerformanceEntry</code> to your analytics service.</p> <aside class="caution"> <b>Caution:</b> Since users can open pages in a background tab, it's possible that <code translate="no" dir="ltr">largest-contentful-paint</code> entries won't be dispatched until the user focuses the tab, which can be much later than when they first loaded it. Google tools that measure LCP don't report this metric if the page was loaded in the background, as it does not reflect the user-perceived load time. </aside> <h4 id="load-render-time" data-text="Load time versus render time" tabindex="-1">Load time versus render time</h4> <p>For security reasons, the render timestamp of images is not exposed for cross-origin images that lack the <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin"><code translate="no" dir="ltr">Timing-Allow-Origin</code></a> header. Instead, only their load time is exposed (since this is already exposed through many other web APIs).</p> <aside class="note" id="load-time-is-not-download-end"> <b>Note:</b> <em>load time</em> will usually be slightly after the resource download ends (<a href="https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/responseEnd"><code translate="no" dir="ltr">responseEnd</code> in Resource Timing</a>) as it takes time for the browser to process the resource after the download completes, even before it starts to render it. </aside> <p>This can lead to the seemingly impossible situation where LCP is reported by web APIs as earlier than FCP. This is not the case but only appears so due to this security restriction.</p> <p>When possible, it's always recommended to set the <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin"><code translate="no" dir="ltr">Timing-Allow-Origin</code></a> header, so your metrics will be more accurate.</p> <h3 id="how-are-element-layout-size-changes-handled" data-text="How are element layout and size changes handled?" tabindex="-1">How are element layout and size changes handled?</h3> <p>To keep the performance overhead of calculating and dispatching new performance entries low, changes to an element's size or position don't generate new LCP candidates. Only the element's initial size and position in the viewport is considered.</p> <p>This means images that are initially rendered off-screen and then transition on-screen may not be reported. It also means elements initially rendered in the viewport that then get pushed down, out of view will still report their initial, in-viewport size.</p> <h3 id="examples" data-text="Examples" tabindex="-1">Examples</h3> <p>Here are some examples of when the Largest Contentful Paint occurs on a few popular websites:</p> <figure> <img src="/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa.png" alt="Largest Contentful Paint timeline from cnn.com" width="800" height="311" srcset="https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_36.png 36w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_48.png 48w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_72.png 72w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_96.png 96w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_480.png 480w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_720.png 720w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_856.png 856w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_960.png 960w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_1440.png 1440w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_1920.png 1920w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-fc43128e011aa_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> An LCP timeline from cnn.com. </figcaption> </figure> <figure> <img src="/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a.png" alt="Largest Contentful Paint timeline from techcrunch.com" width="800" height="311" srcset="https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_36.png 36w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_48.png 48w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_72.png 72w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_96.png 96w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_480.png 480w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_720.png 720w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_856.png 856w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_960.png 960w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_1440.png 1440w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_1920.png 1920w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-3713e2f14970a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> An LCP timeline from techcrunch.com. </figcaption> </figure> <p>In both of the timelines above, the largest element changes as content loads. In the first example, new content is added to the DOM and that changes what element is the largest. In the second example, the layout changes and content that was previously the largest is removed from the viewport.</p> <p>While it's often the case that late-loading content is larger than content already on the page, that's not necessarily the case. The next two examples show the LCP occurring before the page fully loads.</p> <figure> <img src="/static/articles/lcp/image/largest-contentful-paint-9bc403e812154.png" alt="Largest Contentful Paint timeline from instagram.com" width="800" height="311" srcset="https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_36.png 36w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_48.png 48w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_72.png 72w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_96.png 96w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_480.png 480w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_720.png 720w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_856.png 856w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_960.png 960w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_1440.png 1440w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_1920.png 1920w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-9bc403e812154_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> An LCP timeline from instagram.com. </figcaption> </figure> <figure> <img src="/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7.png" alt="Largest Contentful Paint timeline from google.com" width="800" height="311" srcset="https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_36.png 36w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_48.png 48w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_72.png 72w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_96.png 96w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_480.png 480w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_720.png 720w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_856.png 856w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_960.png 960w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_1440.png 1440w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_1920.png 1920w,https://web.dev/static/articles/lcp/image/largest-contentful-paint-6c5554de0eac7_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> An LCP timeline from google.com. </figcaption> </figure> <p>In the first example, the Instagram logo is loaded relatively early and it remains the largest element even as other content is progressively shown. In the Google Search results page example, the largest element is a paragraph of text that is displayed before any of the images or logo finish loading. Since all the individual images are smaller than this paragraph, it remains the largest element throughout the load process.</p> <aside class="note"> <b>Note:</b> In the first frame of the Instagram timeline, you may notice the camera logo does not have a green box around it. That's because it's an <code translate="no" dir="ltr"><svg></code> element, and <code translate="no" dir="ltr"><svg></code> elements are not considered LCP candidates at this time. The first LCP candidate is the text in the second frame. </aside> <h2 id="how-to-measure-lcp" data-text="How to measure LCP" tabindex="-1">How to measure LCP</h2> <p>LCP can be measured <a href="/articles/user-centric-performance-metrics#in_the_lab">in the lab</a> or <a href="/articles/user-centric-performance-metrics#in_the_field">in the field</a>, and it's available in the following tools:</p> <h3 id="field-tools" data-text="Field tools" tabindex="-1">Field tools</h3> <ul> <li><a href="https://developer.chrome.com/docs/crux">Chrome User Experience Report</a></li> <li><a href="https://pagespeed.web.dev/">PageSpeed Insights</a></li> <li><a href="https://support.google.com/webmasters/answer/9205520">Search Console (Core Web Vitals report)</a></li> <li><a href="https://github.com/GoogleChrome/web-vitals"><code translate="no" dir="ltr">web-vitals</code> JavaScript library</a></li> </ul> <h3 id="lab-tools" data-text="Lab tools" tabindex="-1">Lab tools</h3> <ul> <li><a href="https://developer.chrome.com/docs/devtools">Chrome DevTools</a></li> <li><a href="https://developer.chrome.com/docs/lighthouse/overview">Lighthouse</a></li> <li><a href="https://pagespeed.web.dev/">PageSpeed Insights</a></li> <li><a href="https://webpagetest.org/">WebPageTest</a></li> </ul> <h3 id="measure-in-javascript" data-text="Measure LCP in JavaScript" tabindex="-1">Measure LCP in JavaScript</h3> <p>To measure LCP in JavaScript, you can use the <a href="https://wicg.github.io/largest-contentful-paint/">Largest Contentful Paint API</a>. The following example shows how to create a <a href="https://developer.mozilla.org/docs/Web/API/PerformanceObserver"><code translate="no" dir="ltr">PerformanceObserver</code></a> that listens for <code translate="no" dir="ltr">largest-contentful-paint</code> entries and logs them to the console.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">PerformanceObserver</span><span class="devsite-syntax-p">((</span><span class="devsite-syntax-nx">entryList</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">for</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">entry</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">of</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">entryList</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getEntries</span><span class="devsite-syntax-p">())</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">console</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">log</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'LCP candidate:'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">entry</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">startTime</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">entry</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}).</span><span class="devsite-syntax-nx">observe</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-nx">type</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'largest-contentful-paint'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">buffered</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">true</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <aside class="warning"> <b>Warning:</b> This code shows how to log <code translate="no" dir="ltr">largest-contentful-paint</code> entries to the console, but measuring LCP in JavaScript is more complicated. For details, see <a href="#differences-metric-api">Differences between the Metric and the API</a>. </aside> <p>In the above example, each logged <code translate="no" dir="ltr">largest-contentful-paint</code> entry represents the current LCP candidate. In general, the <code translate="no" dir="ltr">startTime</code> value of the last entry emitted is the LCP value—however, that is not always the case. Not all <code translate="no" dir="ltr">largest-contentful-paint</code> entries are valid for measuring LCP.</p> <p>The following section lists the differences between what the API reports and how the metric is calculated.</p> <h4 id="differences-metric-api" data-text="Differences between the metric and the API" tabindex="-1">Differences between the metric and the API</h4> <ul> <li>The API will dispatch <code translate="no" dir="ltr">largest-contentful-paint</code> entries for pages loaded in a background tab, but those pages should be ignored when calculating LCP.</li> <li>The API will continue to dispatch <code translate="no" dir="ltr">largest-contentful-paint</code> entries after a page has been backgrounded, but those entries should be ignored when calculating LCP (elements may only be considered if the page was in the foreground the entire time).</li> <li>The API does not report <code translate="no" dir="ltr">largest-contentful-paint</code> entries when the page is restored from the <a href="/articles/bfcache#impact_on_core_web_vitals">back/forward cache</a>, but LCP should be measured in these cases since users experience them as distinct page visits.</li> <li>The API does not consider elements within iframes but the metric does as they are part of the user experience of the page. In pages with an LCP within an iframe—for example a poster image on an embedded video—this will <a href="/articles/crux-and-rum-differences#iframes">show as a difference between CrUX and RUM</a>. To properly measure LCP you should consider them. Sub-frames can use the API to report their <code translate="no" dir="ltr">largest-contentful-paint</code> entries to the parent frame for aggregation.</li> <li>The API measures LCP from navigation start, but for <a href="https://developer.chrome.com/docs/web-platform/prerender-pages">prerendered pages</a> LCP should be measured from <a href="https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming/activationStart"><code translate="no" dir="ltr">activationStart</code></a> since that corresponds to the LCP time as experienced by the user.</li> </ul> <p>Rather than memorizing all these subtle differences, developers can use the <a href="https://github.com/GoogleChrome/web-vitals"><code translate="no" dir="ltr">web-vitals</code> JavaScript library</a> to measure LCP, which handles these differences for you (where possible—note the iframe issue is not covered):</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-k">import</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-nx">onLCP</span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kr">from</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'web-vitals'</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-c1">// Measure and log LCP as soon as it's available.</span> <span class="devsite-syntax-nx">onLCP</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">console</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">log</span><span class="devsite-syntax-p">);</span> </code></pre></devsite-code> <p>Refer to <a href="https://github.com/GoogleChrome/web-vitals/blob/main/src/onLCP.ts">the source code for <code translate="no" dir="ltr">onLCP()</code></a> for a complete example of how to measure LCP in JavaScript.</p> <aside class="note"> <b>Note:</b> In some cases (such as cross-origin iframes) it's not possible to measure LCP in JavaScript. See the <a href="https://github.com/GoogleChrome/web-vitals#limitations">limitations</a> section of the <code translate="no" dir="ltr">web-vitals</code> library for details. </aside> <h3 id="what-if-largest-element-isnt-most-important" data-text="What if the largest element isn't the most important?" tabindex="-1">What if the largest element isn't the most important?</h3> <p>In some cases the most important element (or elements) on the page is not the same as the largest element, and developers may be more interested in measuring the render times of these other elements instead. This is possible using the <a href="https://wicg.github.io/element-timing/">Element Timing API</a>, as described in the article on <a href="/articles/custom-metrics#element_timing_api">custom metrics</a>.</p> <h2 id="improve-lcp" data-text="How to improve LCP" tabindex="-1">How to improve LCP</h2> <p>A full guide on <a href="/articles/optimize-lcp">optimizing LCP</a> is available to guide you through the process of identifying LCP timings in the field and using lab data to drill down and optimize them.</p> <h2 id="resources" data-text="Additional resources" tabindex="-1">Additional resources</h2> <ul> <li><a href="https://youtu.be/ctavZT87syI">Lessons learned from performance monitoring in Chrome</a> by <a href="https://anniesullie.com/">Annie Sullivan</a> at <a href="https://perfnow.nl/">performance.now()</a> (2019)</li> </ul> <h2 id="changelog" data-text="Changelog" tabindex="-1">Changelog</h2> <p>Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.</p> <p>To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this <a href="http://bit.ly/chrome-speed-metrics-changelog">Changelog</a>.</p> <p>If you have feedback for these metrics, you can provide it in the <a href="https://groups.google.com/g/web-vitals-feedback">web-vitals-feedback Google group</a>.</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-02-19 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-02-19 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="mutJA3gpZJUfIK4di4l3l+zj7PDGOG"> (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,116,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,["Cloud__enable_llm_concierge_chat","Profiles__require_profile_eligibility_for_signin","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_completecodelab_endpoint","TpcFeatures__enable_mirror_tenant_redirects","Concierge__enable_pushui","Cloud__enable_cloudx_experiment_ids","Profiles__enable_complete_playlist_endpoint","Cloud__enable_cloud_dlp_service","Cloud__enable_free_trial_server_call","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_project_variables","Search__enable_suggestions_from_borg","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_variable_operator","Profiles__enable_release_notes_notifications","Profiles__enable_profile_collections","Profiles__enable_recognition_badges","MiscFeatureFlags__emergency_css","Profiles__enable_awarding_url","TpcFeatures__enable_required_headers","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_shell_fte_user_flow","DevPro__enable_cloud_innovators_plus","OnSwitch__enable","Analytics__enable_clearcut_logging","Profiles__enable_developer_profiles_callout","Search__enable_dynamic_content_confidential_banner","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__developers_footer_image","BookNav__enable_tenant_cache_key","Profiles__enable_page_saving","CloudShell__cloud_shell_button","Search__enable_page_map","Search__enable_ai_eligibility_checks","Profiles__enable_public_developer_profiles","Cloud__enable_cloudx_ping","Experiments__reqs_query_experiments","Cloud__enable_cloud_shell","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_explain_this_code"],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

Largest Contentful Paint (LCP) | Articles | web.dev