Speed Index | Lighthouse | Chrome for Developers

<!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="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><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/chrome/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/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/speed-index?hl=vi" /><title>Speed Index  |  Lighthouse  |  Chrome for Developers</title> <meta property="og:title" content="Speed Index  |  Lighthouse  |  Chrome for Developers"><meta name="description" content="Learn about Lighthouse&#39;s Speed Index metric and how to optimize it."> <meta property="og:description" content="Learn about Lighthouse&#39;s Speed Index metric and how to optimize it."><meta property="og:url" content="https://developer.chrome.com/docs/lighthouse/performance/speed-index"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2019-05-02", "headline": "Speed Index" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Lighthouse", "item": "https://developer.chrome.com/docs/lighthouse" },{ "@type": "ListItem", "position": 3, "name": "Speed Index", "item": "https://developer.chrome.com/docs/lighthouse/performance/speed-index" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-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="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </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://developer.chrome.com/case-studies" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" track-metadata-eventdetail="https://developer.chrome.com/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 class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Lighthouse" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/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="nl" >Nederlands</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://developer.chrome.com/docs/lighthouse" 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="Lighthouse" > Lighthouse </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://developer.chrome.com/docs/lighthouse" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - lighthouse" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Lighthouse" track-name="lighthouse" > Lighthouse </a> </tab> <tab > <a href="https://developer.chrome.com/docs/lighthouse/overview" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse/overview" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get started" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get started" track-name="get started" > Get started </a> </tab> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/lighthouse/performance/performance-scoring" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse/performance/performance-scoring" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - performance audit" track-metadata-module="primary nav" aria-label="Performance audit, selected" data-category="Site-Wide Custom Events" data-label="Tab: Performance audit" track-name="performance audit" > Performance audit </a> </tab> <tab > <a href="https://developer.chrome.com/docs/lighthouse/accessibility/scoring" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse/accessibility/scoring" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - accessibility audit" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility audit" track-name="accessibility audit" > Accessibility audit </a> </tab> <tab > <a href="https://developer.chrome.com/docs/lighthouse/best-practices/doctype" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse/best-practices/doctype" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - best practices audit" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Best Practices audit" track-name="best practices audit" > Best Practices audit </a> </tab> <tab > <a href="https://developer.chrome.com/docs/lighthouse/seo/meta-description" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse/seo/meta-description" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - seo audit" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: SEO audit" track-name="seo audit" > SEO audit </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <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="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </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="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </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="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <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: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Lighthouse" track-name="lighthouse" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse/overview" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Get started" track-name="get started" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get started" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get started </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse/performance/performance-scoring" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Performance audit" track-name="performance audit" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance audit" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Performance audit </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse/accessibility/scoring" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessibility audit" track-name="accessibility audit" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility audit" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility audit </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse/best-practices/doctype" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Best Practices audit" track-name="best practices audit" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Best Practices audit" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Best Practices audit </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse/seo/meta-description" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: SEO audit" track-name="seo audit" data-category="Site-Wide Custom Events" data-label="Responsive Tab: SEO audit" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > SEO audit </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </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>Performance audit</span> </div></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/performance-scoring" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/performance-scoring" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/performance-scoring" ><span class="devsite-nav-text" tooltip>Scoring</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>Metrics</span> </div></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/first-contentful-paint" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/first-contentful-paint" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/first-contentful-paint" ><span class="devsite-nav-text" tooltip>First Contentful Paint</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/speed-index" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/speed-index" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/speed-index" ><span class="devsite-nav-text" tooltip>Speed Index</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/lighthouse-total-blocking-time" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/lighthouse-total-blocking-time" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/lighthouse-total-blocking-time" ><span class="devsite-nav-text" tooltip>Total Blocking Time</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/lighthouse-largest-contentful-paint" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/lighthouse-largest-contentful-paint" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/lighthouse-largest-contentful-paint" ><span class="devsite-nav-text" tooltip>Largest Contentful Paint</span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://web.dev/cls/" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://web.dev/cls/" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://web.dev/cls/" ><span class="devsite-nav-text" tooltip>Cumulative Layout Shift</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></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>Opportunities</span> </div></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/render-blocking-resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/render-blocking-resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/render-blocking-resources" ><span class="devsite-nav-text" tooltip>Eliminate render-blocking resources</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-responsive-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-responsive-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-responsive-images" ><span class="devsite-nav-text" tooltip>Properly size images</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/offscreen-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/offscreen-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/offscreen-images" ><span class="devsite-nav-text" tooltip>Defer offscreen images</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/unminified-css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/unminified-css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/unminified-css" ><span class="devsite-nav-text" tooltip>Minify CSS</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/unminified-javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/unminified-javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/unminified-javascript" ><span class="devsite-nav-text" tooltip>Minify JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/unused-css-rules" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/unused-css-rules" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/unused-css-rules" ><span class="devsite-nav-text" tooltip>Remove unused CSS</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-optimized-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-optimized-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-optimized-images" ><span class="devsite-nav-text" tooltip>Efficiently encode images</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-webp-images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-webp-images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-webp-images" ><span class="devsite-nav-text" tooltip>Serve images in modern formats</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-text-compression" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-text-compression" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-text-compression" ><span class="devsite-nav-text" tooltip>Enable text compression</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-rel-preconnect" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-rel-preconnect" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-rel-preconnect" ><span class="devsite-nav-text" tooltip>Preconnect to required origins</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/server-response-time" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/server-response-time" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/server-response-time" ><span class="devsite-nav-text" tooltip>Reduce server response times</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/redirects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/redirects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/redirects" ><span class="devsite-nav-text" tooltip>Avoid multiple page redirects</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-rel-preload" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-rel-preload" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-rel-preload" ><span class="devsite-nav-text" tooltip>Preload key requests</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/efficient-animated-content" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/efficient-animated-content" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/efficient-animated-content" ><span class="devsite-nav-text" tooltip>Use video formats for animated content</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/third-party-summary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/third-party-summary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/third-party-summary" ><span class="devsite-nav-text" tooltip>Reduce the impact of third-party code</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/non-composited-animations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/non-composited-animations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/non-composited-animations" ><span class="devsite-nav-text" tooltip>Avoid non-composited animations</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/third-party-facades" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/third-party-facades" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/third-party-facades" ><span class="devsite-nav-text" tooltip>Lazy load third-party resources with facades</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>Diagnostics</span> </div></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/total-byte-weight" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/total-byte-weight" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/total-byte-weight" ><span class="devsite-nav-text" tooltip>Avoid enormous network payloads</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/uses-long-cache-ttl" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/uses-long-cache-ttl" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/uses-long-cache-ttl" ><span class="devsite-nav-text" tooltip>Serve static assets with an efficient cache policy</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/dom-size" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/dom-size" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/dom-size" ><span class="devsite-nav-text" tooltip>Avoid an excessive DOM size</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/critical-request-chains" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/critical-request-chains" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/critical-request-chains" ><span class="devsite-nav-text" tooltip>Avoid chaining critical requests</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/user-timings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/user-timings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/user-timings" ><span class="devsite-nav-text" tooltip>User Timing marks and measures</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/bootup-time" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/bootup-time" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/bootup-time" ><span class="devsite-nav-text" tooltip>Reduce JavaScript execution time</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/mainthread-work-breakdown" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/mainthread-work-breakdown" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/mainthread-work-breakdown" ><span class="devsite-nav-text" tooltip>Minimize main thread work</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/font-display" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/font-display" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/font-display" ><span class="devsite-nav-text" tooltip>Ensure text remains visible during webfont load</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/resource-summary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/resource-summary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/resource-summary" ><span class="devsite-nav-text" tooltip>Keep request counts low and transfer sizes small</span></a></li> <li class="devsite-nav-item"><a href="/docs/lighthouse/performance/bf-cache" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/bf-cache" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/bf-cache" ><span class="devsite-nav-text" tooltip>Ensure the page can be restored from the back/forward cache</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>Retired Metrics</span> </div></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/lighthouse/performance/interactive" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/interactive" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/interactive" ><span class="devsite-nav-text" tooltip>Time to Interactive</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/lighthouse/performance/first-meaningful-paint" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/first-meaningful-paint" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/first-meaningful-paint" ><span class="devsite-nav-text" tooltip>First Meaningful Paint</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/lighthouse/performance/first-cpu-idle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/first-cpu-idle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/first-cpu-idle" ><span class="devsite-nav-text" tooltip>First CPU Idle</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/docs/lighthouse/performance/lighthouse-max-potential-fid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/lighthouse/performance/lighthouse-max-potential-fid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/lighthouse/performance/lighthouse-max-potential-fid" ><span class="devsite-nav-text" tooltip>Max Potential First Input Delay</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></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>Resources</span> </div></li> <li class="devsite-nav-item devsite-nav-external"><a href="https://web.dev/learn/performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://web.dev/learn/performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://web.dev/learn/performance" ><span class="devsite-nav-text" tooltip>Learn Performance</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> </ul> <ul class="devsite-nav-list" menu="Docs" 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 > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/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="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/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="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/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"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" 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="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </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://developer.chrome.com/" 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://developer.chrome.com/docs" 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="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/lighthouse" 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="Lighthouse" > Lighthouse </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/lighthouse/performance/performance-scoring" 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="" > Performance audit </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Speed Index </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>Speed Index is one of five metrics tracked in the <strong>Performance</strong> section of the Lighthouse report. Each metric captures some aspect of page load speed.</p> <p>Lighthouse displays Speed Index in seconds:</p> <figure> <img src="/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256.png" alt="A screenshot of the Lighthouse Speed Index audit" width="800" height="592" srcset="https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_36.png 36w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_48.png 48w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_72.png 72w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_96.png 96w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_480.png 480w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_720.png 720w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_856.png 856w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_960.png 960w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_1440.png 1440w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_1920.png 1920w,https://developer.chrome.com/static/docs/lighthouse/performance/speed-index/image/a-screenshot-the-lightho-a99ab3a38d256_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h2 id="what_speed_index_measures" data-text="What Speed Index measures" tabindex="-1">What Speed Index measures</h2> <p>Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the <a href="https://github.com/paulirish/speedline">Speedline Node.js module</a> to generate the Speed Index score.</p> <aside class="note"><b>Note:</b> Speedline is based on the same principles as the <a href="https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md">original speed index introduced by WebpageTest.org</a>.</aside> <h2 id="how_lighthouse_determines_your_speed_index_score" data-text="How Lighthouse determines your Speed Index score" tabindex="-1">How Lighthouse determines your Speed Index score</h2> <p>Your Speed Index score is a comparison of your page's speed index and the speed indices of real websites, based on <a href="/docs/lighthouse/performance/performance-scoring#metric-scores">data from the HTTP Archive</a>.</p> <p>This table shows how to interpret your mobile Speed Index score:</p> <div class="table-wrapper"> <table> <thead> <tr> <th>Speed Index<br>(in seconds)</th> <th>Color-coding</th> </tr> </thead> <tbody> <tr> <td>0–3.4</td> <td>Green (fast)</td> </tr> <tr> <td>3.4–5.8</td> <td>Orange (moderate)</td> </tr> <tr> <td>Over 5.8</td> <td>Red (slow)</td> </tr> </tbody> </table> </div> <aside class="note"><b>Note:</b> See the <a href="/docs/lighthouse/performance/performance-scoring">Lighthouse performance scoring</a> post to learn how your page's overall performance score is calculated.</aside> <h2 id="how_to_improve_your_speed_index_score" data-text="How to improve your Speed Index score" tabindex="-1">How to improve your Speed Index score</h2> <p>While anything you do to improve page load speed will improve your Speed Index score, addressing any issues discovered by these Diagnostic audits should have a particularly big impact:</p> <ul> <li><a href="/docs/lighthouse/performance/mainthread-work-breakdown">Minimize main thread work</a></li> <li><a href="/docs/lighthouse/performance/bootup-time">Reduce JavaScript execution time</a></li> <li><a href="/docs/lighthouse/performance/font-display">Ensure text remains visible during webfont load</a></li> </ul> <h2 id="how_to_improve_your_overall_performance_score" data-text="How to improve your overall Performance score" tabindex="-1">How to improve your overall Performance score</h2> <p>Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.</p> <p>Use the <strong>Opportunities</strong> section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that <a href="/docs/lighthouse/performance/render-blocking-resources">eliminating render-blocking resources</a> will yield the biggest improvement:</p> <figure> <img src="/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png" alt="Lighthouse: Opportunities section" width="800" height="418"> </figure> <p>See the <a href="/docs/lighthouse/performance">Performance audits landing page</a> to learn how to address the opportunities identified in your Lighthouse report.</p> <h2 id="resources" data-text="Resources" tabindex="-1">Resources</h2> <ul> <li><a href="https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/metrics/speed-index.js">Source code for <strong>Speed Index</strong> audit</a></li> <li><a href="/docs/lighthouse/performance/performance-scoring">Lighthouse Scoring Guide</a></li> <li><a href="https://github.com/paulirish/speedline">Speedline</a></li> <li><a href="https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/metrics/SpeedIndex.md">WebPagetest Speed Index</a></li> </ul> </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 2019-05-02 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 2019-05-02 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 "> <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=1400036&template=1897236" 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:1400036&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://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > 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 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/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="nl" >Nederlands</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-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Lighthouse", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="K/+Kek0RM+3aNWVrrVzZzONamKj65/"> (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/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/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","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Search__enable_page_map","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__emergency_css","Cloud__enable_cloud_dlp_service","CloudShell__cloud_shell_button","OnSwitch__enable","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_explain_this_code","Profiles__require_profile_eligibility_for_signin","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_project_variables","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_legacy_calculator_redirect","Profiles__enable_public_developer_profiles","Profiles__enable_developer_profiles_callout","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloudx_ping","BookNav__enable_tenant_cache_key","Cloud__enable_cloud_facet_chat","Search__enable_dynamic_content_confidential_banner","Profiles__enable_recognition_badges","DevPro__enable_developer_subscriptions","Search__enable_ai_eligibility_checks","Profiles__enable_dashboard_curated_recommendations","Search__enable_suggestions_from_borg","Analytics__enable_clearcut_logging","Cloud__enable_cloud_shell","Profiles__enable_profile_collections","Concierge__enable_pushui","Experiments__reqs_query_experiments","Cloud__enable_free_trial_server_call","Profiles__enable_page_saving","Cloud__enable_llm_concierge_chat","Profiles__enable_awarding_url","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_variable_operator","TpcFeatures__enable_required_headers","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloudx_experiment_ids","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__developers_footer_dark_image"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-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,[69,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-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Speed Index | Lighthouse | Chrome for Developers