Web performance

<!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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/performance"><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/performance" /><link rel="alternate" hreflang="x-default" href="https://web.dev/performance" /><link rel="alternate" hreflang="ar" href="https://web.dev/performance?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/performance?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/performance?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/performance?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/performance?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/performance?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/performance?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/performance?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/performance?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/performance?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/performance?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/performance?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/performance?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/performance?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/performance?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/performance?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/performance?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/performance?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/performance?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/performance?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/performance" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/performance" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/performance?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/performance?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/performance?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/performance?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/performance?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/performance?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/performance?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/performance?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/performance?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/performance?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/performance?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/performance?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/performance?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/performance?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/performance?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/performance?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/performance?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/performance?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/performance?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/performance?hl=vi" /><title>Web performance  |  web.dev</title> <meta property="og:title" content="Web performance  |  web.dev"><meta property="og:url" content="https://web.dev/performance"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Web performance" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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 class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" 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/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" 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="web.dev" 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 devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip > Resources </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </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="/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="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" 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="Responsive Tab: CSS" track-type="navMenu" 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="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </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="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" 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="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > <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="web.dev" > web.dev </a> </li> </ul> </div> <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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-hero devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://web.dev/static/performance/image/hero-performance.png" srcset="https://web.dev/static/performance/image/hero-performance_36.png 36w,https://web.dev/static/performance/image/hero-performance_48.png 48w,https://web.dev/static/performance/image/hero-performance_72.png 72w,https://web.dev/static/performance/image/hero-performance_96.png 96w,https://web.dev/static/performance/image/hero-performance_480.png 480w,https://web.dev/static/performance/image/hero-performance_720.png 720w,https://web.dev/static/performance/image/hero-performance_856.png 856w,https://web.dev/static/performance/image/hero-performance_960.png 960w,https://web.dev/static/performance/image/hero-performance_1440.png 1440w,https://web.dev/static/performance/image/hero-performance_1920.png 1920w,https://web.dev/static/performance/image/hero-performance_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="web-performance" data-text="Web performance" class="hide-from-toc no-link" tabindex="0"> Web performance </h3> <div class="devsite-landing-row-item-description-content"> Performance is a key aspect of the user experience. How fast pages load and how quickly they respond to user input can have a significant impact on how users perceive your site, and can make the difference between whether users stay on your website or abandon it. On this page, you'll find a wealth of information on various web performance topics that will help you make your website fast—and keep it fast. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="jump-ahead-on-this-page" data-text="Jump ahead on this page:" class="hide-from-toc no-link" tabindex="0"> Jump ahead on this page: </h3> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#new-to-performance"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> bolt </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="plearn-performancep" data-text="Learn performance" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#new-to-performance"> <p>Learn performance</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> New to performance? We've got you covered with a comprehensive course to help you get started. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#pagespeed-insights"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> speed </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="ppagespeed-insightsp" data-text="PageSpeed Insights" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#pagespeed-insights"> <p>PageSpeed Insights</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Get started with improving performance by measuring it on your website with PageSpeed Insights. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#core-web-vitals"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> monitoring </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pcore-web-vitalsp" data-text="Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#core-web-vitals"> <p>Core Web Vitals</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Get up to speed on the three Core Web Vitals metrics, how they work, and why they're important for good user experiences. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#optimize-core-web-vitals"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> tune </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="poptimize-core-web-vitalsp" data-text="Optimize Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#optimize-core-web-vitals"> <p>Optimize Core Web Vitals</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Once you've learned about Core Web Vitals metrics, these guides can help you to understand how best to optimize them. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#dive-further-into-core-web-vitals"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> book </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pdive-further-into-core-web-vitalsp" data-text="Dive further into Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#dive-further-into-core-web-vitals"> <p>Dive further into Core Web Vitals</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Go even deeper into Core Web Vitals with a collection of guides that explore the metrics in more detail. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#baseline-newly-available-web-performance-features"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pbaseline-newly-available-performance-featuresp" data-text="Baseline Newly available performance features" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#baseline-newly-available-web-performance-features"> <p>Baseline Newly available performance features</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Discover new features for improving performance that are now Baseline Newly available. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#case-studies"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> bar_chart </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pcase-studiesp" data-text="Case studies" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#case-studies"> <p>Case studies</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Read about how companies improved their Core Web Vitals and saw an increase in their business metrics as a result. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/performance#debug-performance-with-chrome-devtools"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pdebug-performance-with-chrome-devtoolsp" data-text="Debug performance with Chrome DevTools" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/performance#debug-performance-with-chrome-devtools"> <p>Debug performance with Chrome DevTools</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how you can use Chrome DevTools to debug performance issues on your website. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/performance"> <picture> <img alt="" src="https://web.dev/static/learn/performance/card.png" srcset="https://web.dev/static/learn/performance/card_36.png 36w,https://web.dev/static/learn/performance/card_48.png 48w,https://web.dev/static/learn/performance/card_72.png 72w,https://web.dev/static/learn/performance/card_96.png 96w,https://web.dev/static/learn/performance/card_480.png 480w,https://web.dev/static/learn/performance/card_720.png 720w,https://web.dev/static/learn/performance/card_856.png 856w,https://web.dev/static/learn/performance/card_960.png 960w,https://web.dev/static/learn/performance/card_1440.png 1440w,https://web.dev/static/learn/performance/card_1920.png 1920w,https://web.dev/static/learn/performance/card_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >COURSE</span> </div> <h3 id="new-to-performance" data-text="New to performance?" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/performance"> New to performance? </a> </h3> <div class="devsite-landing-row-item-description-content"> <p>Web performance is a complex and multi-faceted subject matter area—but it's not impossible to learn! If you're new to performance, our course will help you to hit the ground running by first introducing you to performance basis, allowing you to work your way through more advanced topics. Once you've completed the course, you'll be able to apply what you've learned in no time!</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/performance" class="button " >Learn Performance!</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://pagespeed.web.dev/"> <picture> <img alt="" src="https://web.dev/static/performance/image/psi.svg" srcset="https://web.dev/static/performance/image/psi.svg" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="pagespeed-insights" data-text="PageSpeed Insights" class="hide-from-toc no-link" tabindex="0"> <a href="https://pagespeed.web.dev/"> PageSpeed Insights </a> </h3> <div class="devsite-landing-row-item-description-content"> You can't improve your website's performance without first measuring it. PageSpeed Insights is a tool that measures the performance of your website using important user-centric metrics, and can help you to identify areas where you can improve the performance of your website. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://pagespeed.web.dev/" class="button " >Get started</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="core-web-vitals" data-text="Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> Core Web Vitals </h3> <div class="devsite-landing-row-item-description-content"> <p>The <a href="/articles/vitals">Core Web Vitals metrics</a> are a set of three metrics focused on the user experience. They measure the performance and usability of pages, including perceived load time, visual stability, and responsiveness to user input. If you're new to Core Web Vitals, these guides will familiarize you with how they work, and give you a starting point on how to optimize them.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/lcp"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> image </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="largest-contentful-paint-lcp" data-text="Largest Contentful Paint (LCP)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/lcp"> Largest Contentful Paint (LCP) </a> </h3> <div class="devsite-landing-row-item-description-content"> LCP is a metric that measures the time it takes for the largest piece of content to appear on a page. Pages with low LCP signal to users that your page is loading quickly. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/lcp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/cls"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> web </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="cumulative-layout-shift-cls" data-text="Cumulative Layout Shift (CLS)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/cls"> Cumulative Layout Shift (CLS) </a> </h3> <div class="devsite-landing-row-item-description-content"> CLS is a metric that measures layout stability by observing the page for unexpected changes in the layout. Pages with low CLS signal to users that a page's layout is stable and won't change unexpectedly as they try to interact with it. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/cls" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/inp"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> timer </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="interaction-to-next-paint-inp" data-text="Interaction to Next Paint (INP)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/inp"> Interaction to Next Paint (INP) </a> </h3> <div class="devsite-landing-row-item-description-content"> INP is a metric that measures how responsive a page is to user input. Pages with low INP signal to users that a page responds quickly when they interact with them, making your website feel more reliable and delightful to use. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/inp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-core-web-vitals" data-text="Optimize Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> Optimize Core Web Vitals </h3> <div class="devsite-landing-row-item-description-content"> Each one of the Core Web Vitals metrics can be optimized to improve the user experience. Each of these guides goes in depth to show how you can apply proven techniques to improve the performance and reliability of your website so that users remain more engaged and less likely to leave. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-padding-small devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" background="white" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/articles/optimize-lcp"> <picture> <img alt="" src="https://web.dev/static/articles/optimize-lcp/image/thumbnail.png" srcset="https://web.dev/static/articles/optimize-lcp/image/thumbnail_36.png 36w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_48.png 48w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_72.png 72w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_96.png 96w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_480.png 480w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_720.png 720w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_856.png 856w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_960.png 960w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_1440.png 1440w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_1920.png 1920w,https://web.dev/static/articles/optimize-lcp/image/thumbnail_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-largest-contentful-paint-lcp" data-text="Optimize Largest Contentful Paint (LCP)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/optimize-lcp"> Optimize Largest Contentful Paint (LCP) </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to optimize LCP for your users so that they can see the most important content on your page as quickly as possible. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/optimize-lcp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" background="white" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/articles/optimize-cls"> <picture> <img alt="" src="https://web.dev/static/articles/optimize-cls/image/thumbnail.v2.png" srcset="https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_36.png 36w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_48.png 48w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_72.png 72w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_96.png 96w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_480.png 480w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_720.png 720w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_856.png 856w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_960.png 960w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_1440.png 1440w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_1920.png 1920w,https://web.dev/static/articles/optimize-cls/image/thumbnail.v2_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-cumulative-layout-shift-cls" data-text="Optimize Cumulative Layout Shift (CLS)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/optimize-cls"> Optimize Cumulative Layout Shift (CLS) </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to optimize CLS for your users so that they can expect that your website will remain stable and more usable. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/optimize-cls" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" background="white" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/explore/how-to-optimize-inp"> <picture> <img alt="" src="https://web.dev/static/articles/optimize-inp/image/thumbnail.png" srcset="https://web.dev/static/articles/optimize-inp/image/thumbnail_36.png 36w,https://web.dev/static/articles/optimize-inp/image/thumbnail_48.png 48w,https://web.dev/static/articles/optimize-inp/image/thumbnail_72.png 72w,https://web.dev/static/articles/optimize-inp/image/thumbnail_96.png 96w,https://web.dev/static/articles/optimize-inp/image/thumbnail_480.png 480w,https://web.dev/static/articles/optimize-inp/image/thumbnail_720.png 720w,https://web.dev/static/articles/optimize-inp/image/thumbnail_856.png 856w,https://web.dev/static/articles/optimize-inp/image/thumbnail_960.png 960w,https://web.dev/static/articles/optimize-inp/image/thumbnail_1440.png 1440w,https://web.dev/static/articles/optimize-inp/image/thumbnail_1920.png 1920w,https://web.dev/static/articles/optimize-inp/image/thumbnail_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-interaction-to-next-paint-inp" data-text="Optimize Interaction to Next Paint (INP)" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/explore/how-to-optimize-inp"> Optimize Interaction to Next Paint (INP) </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to optimize INP for your users so that they can expect that your website will respond quickly to interactions. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/explore/how-to-optimize-inp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/explore/learn-core-web-vitals"> <picture> <img alt="" src="https://web.dev/static/explore/learn-core-web-vitals/cover.png" srcset="https://web.dev/static/explore/learn-core-web-vitals/cover_36.png 36w,https://web.dev/static/explore/learn-core-web-vitals/cover_48.png 48w,https://web.dev/static/explore/learn-core-web-vitals/cover_72.png 72w,https://web.dev/static/explore/learn-core-web-vitals/cover_96.png 96w,https://web.dev/static/explore/learn-core-web-vitals/cover_480.png 480w,https://web.dev/static/explore/learn-core-web-vitals/cover_720.png 720w,https://web.dev/static/explore/learn-core-web-vitals/cover_856.png 856w,https://web.dev/static/explore/learn-core-web-vitals/cover_960.png 960w,https://web.dev/static/explore/learn-core-web-vitals/cover_1440.png 1440w,https://web.dev/static/explore/learn-core-web-vitals/cover_1920.png 1920w,https://web.dev/static/explore/learn-core-web-vitals/cover_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="dive-further-into-core-web-vitals" data-text="Dive further into Core Web Vitals" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/explore/learn-core-web-vitals"> Dive further into Core Web Vitals </a> </h3> <div class="devsite-landing-row-item-description-content"> The three Core Web Vitals metrics and how to optimize them are a great start, but there are even more topics around them to absorb. This content collection will help you to understand how to measure them, debug them, as well as some additional best practices for cookie notices, carousels, and other common user interface concerns. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/explore/learn-core-web-vitals" class="button left " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="case-studies" data-text="Case studies" class="hide-from-toc no-link" tabindex="0"> Case studies </h3> <div class="devsite-landing-row-item-description-content"> Improving performance doesn't just improve the user experience, it has the potential to help your business grow. Learn how these companies improved their Core Web Vitals and saw an increase in their business metrics. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-item-centered" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/case-studies/quintoandar-inp"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> speed </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="quintoandar" data-text="QuintoAndar" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/case-studies/quintoandar-inp"> QuintoAndar </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how QuintoAndar increased year-over-year conversions by 36% by improving INP by 80%. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/case-studies/quintoandar-inp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/case-studies/hotstar-inp"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> speed </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="disney-hotstar" data-text="Disney+ Hotstar" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/case-studies/hotstar-inp"> Disney+ Hotstar </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how Disney+ Hotstar increased weekly card views by 100% on living room devices by reducing INP by 61%. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/case-studies/hotstar-inp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/case-studies/pubconsent-inp"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> speed </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pubtech" data-text="PubTech" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/case-studies/pubconsent-inp"> PubTech </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how PubTech's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5% </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/case-studies/pubconsent-inp" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="baseline-newly-available-web-performance-features" data-text="Baseline Newly available web performance features" class="hide-from-toc no-link" tabindex="0"> Baseline Newly available web performance features </h3> <div class="devsite-landing-row-item-description-content"> <p><a href="/baseline">Baseline</a> signals to web developers when web platform features can be safely used in all major browser engines. Here are some web performance-related features that are now Baseline Newly available.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/articles/content-visibility"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="code-translateno-dirltrcontent-visibilitycode" data-text="content-visibility" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/content-visibility"> <code translate="no" dir="ltr">content-visibility</code> </a> </h3> <div class="devsite-landing-row-item-description-content"> The <code translate="no" dir="ltr">content-visibility</code> CSS property became Baseline Newly available in September 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/articles/compress-images-avif"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="avif" data-text="AVIF" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/compress-images-avif"> AVIF </a> </h3> <div class="devsite-landing-row-item-description-content"> The AVIF image format became Baseline Newly available in January 2024. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/articles/modulepreload"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="module-preload" data-text="Module preload" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/modulepreload"> Module preload </a> </h3> <div class="devsite-landing-row-item-description-content"> Module preload became Baseline Newly available in September 2023. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="code-translateno-dirltrserver-timingcode" data-text="Server-Timing" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing"> <code translate="no" dir="ltr">Server-Timing</code> </a> </h3> <div class="devsite-landing-row-item-description-content"> The <code translate="no" dir="ltr">Server-Timing</code> HTTP response header became Baseline Newly available in March 2023. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="debug-performance-with-chrome-devtools" data-text="Debug performance with Chrome DevTools" class="hide-from-toc no-link" tabindex="0"> Debug performance with Chrome DevTools </h3> <div class="devsite-landing-row-item-description-content"> <p><a href="https://developer.chrome.com/docs/devtools">Chrome DevTools</a> is a suite of tools for developers to debug web applications, including tools to help you understand and improve the performance of your web applications.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/network/overview"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> waterfall_chart </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-network-panel" data-text="The Network panel" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/network/overview"> The Network panel </a> </h3> <div class="devsite-landing-row-item-description-content"> The Network panel in DevTools shows you all the resources a page loads, and how long it took to load them. Learn how to use this panel to identify resource load-related performance issues. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/network/overview" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/performance/overview"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> bolt </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-performance-panel" data-text="The Performance panel" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/performance/overview"> The Performance panel </a> </h3> <div class="devsite-landing-row-item-description-content"> The Performance panel in DevTools shows you incredibly detailed information about the performance of a page during a recording session, including activity on the main thread, network activity, and additional tools that can help you to identify and fix performance problems. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/performance/overview" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/devtools/memory"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> memory_alt </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-memory-panel" data-text="The Memory panel" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/devtools/memory"> The Memory panel </a> </h3> <div class="devsite-landing-row-item-description-content"> The Memory panel shows you how much memory is being used by a page's JavaScript. By learning how to use this panel, you can discover and fix memory-related issues caused by a page's JavaScript. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/devtools/memory" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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"]],[],[],[]] </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": "web.dev", "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="1n4Z2whuTUhcrfAS4rfq+ySE+KnLwW"> (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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloudx_experiment_ids","Search__enable_page_map","Search__enable_dynamic_content_confidential_banner","Cloud__enable_legacy_calculator_redirect","Profiles__enable_awarding_url","Search__enable_suggestions_from_borg","TpcFeatures__enable_unmirrored_page_left_nav","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_public_developer_profiles","DevPro__enable_developer_subscriptions","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_explain_this_code","Search__enable_ai_eligibility_checks","Profiles__enable_stripe_subscription_management","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_project_variables","Cloud__enable_free_trial_server_call","Profiles__enable_join_program_group_endpoint","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_shell_fte_user_flow","CloudShell__cloud_shell_button","CloudShell__cloud_code_overflow_menu","Experiments__reqs_query_experiments","BookNav__enable_tenant_cache_key","MiscFeatureFlags__developers_footer_image","Profiles__enable_profile_collections","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_complete_playlist_endpoint","Analytics__enable_clearcut_logging","Cloud__enable_cloudx_ping","Concierge__enable_pushui","Profiles__enable_developer_profiles_callout","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell","Profiles__enable_page_saving","Profiles__enable_recognition_badges","Cloud__enable_cloud_dlp_service","Profiles__enable_release_notes_notifications","MiscFeatureFlags__emergency_css","OnSwitch__enable","Profiles__enable_dashboard_curated_recommendations","DevPro__enable_cloud_innovators_plus","Profiles__enable_completecodelab_endpoint","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_completequiz_endpoint"],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],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Web performance | web.dev