Time to Interactive | 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/interactive"><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/interactive" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/lighthouse/performance/interactive" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/lighthouse/performance/interactive?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/lighthouse/performance/interactive?hl=vi" /><title>Time to Interactive  |  Lighthouse  |  Chrome for Developers</title> <meta property="og:title" content="Time to Interactive  |  Lighthouse  |  Chrome for Developers"><meta name="description" content="Learn about Lighthouse&#39;s Time to Interactive metric and how to measure and optimize it."> <meta property="og:description" content="Learn about Lighthouse&#39;s Time to Interactive metric and how to measure and optimize it."><meta property="og:url" content="https://developer.chrome.com/docs/lighthouse/performance/interactive"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2019-05-02", "headline": "Time to Interactive" } </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": "Time to Interactive", "item": "https://developer.chrome.com/docs/lighthouse/performance/interactive" }] } </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"> Time to Interactive </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 "> <aside class="caution"> <strong>Caution:</strong> <a href="https://web.dev/articles/tti">Time to Interactive (TTI)</a> has proved overly sensitive to outlier network requests and long tasks, resulting in high variability in this metric. TTI was <a href="/blog/lighthouse-10-0#scoring-changes">removed as a metric from Lighthouse 10</a>. Newer, alternative, metrics like <a href="https://web.dev/articles/lcp">Largest Contentful Paint (LCP)</a>, <a href="https://web.dev/articles/tbt">Total Blocking Time (TBT)</a>, and <a href="https://web.dev/articles/inp">Interaction to Next Paint (INP)</a> are usually better metrics to use in place of TTI. </aside> <p>Time to Interactive (TTI) is one of six metrics tracked in the <strong>Performance</strong> section of the Lighthouse report. Each metric captures some aspect of page load speed.</p> <p>Measuring TTI is important because some sites optimize content visibility at the expense of interactivity. This can create a frustrating user experience: the site appears to be ready, but when the user tries to interact with it, nothing happens.</p> <p>Lighthouse displays TTI in seconds:</p> <figure> <img src="/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a.png" alt="A screenshot of the Lighthouse Time to Interactive audit" width="800" height="592" srcset="https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_36.png 36w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_48.png 48w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_72.png 72w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_96.png 96w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_480.png 480w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_720.png 720w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_856.png 856w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_960.png 960w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_1440.png 1440w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_1920.png 1920w,https://developer.chrome.com/static/docs/lighthouse/performance/interactive/image/a-screenshot-the-lightho-94a30d9e0992a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h2 id="what_tti_measures" data-text="What TTI measures" tabindex="-1">What TTI measures</h2> <p>TTI measures how long it takes a page to become <em>fully</em> interactive. A page is considered fully interactive when:</p> <ul> <li>The page displays useful content, which is measured by the <a href="https://web.dev/articles/fcp">First Contentful Paint</a>,</li> <li>Event handlers are registered for most visible page elements, and</li> <li>The page responds to user interactions within 50 milliseconds.</li> </ul> <aside class="note"><b>Note:</b> Both <a href="/docs/lighthouse/performance/first-cpu-idle">First CPU Idle</a> and TTI measure when the page is ready for user input. First CPU Idle occurs when the user can <em>start</em> to interact with the page; TTI occurs when the user is <em>fully</em> able to interact with the page. See Google's <a href="https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit">First Interactive And Consistently Interactive</a> if you're interested in the exact calculation for each metric.</aside> <h2 id="how_lighthouse_determines_your_tti_score" data-text="How Lighthouse determines your TTI score" tabindex="-1">How Lighthouse determines your TTI score</h2> <p>The TTI score is a comparison of your page's TTI and the TTI for real websites, based on <a href="https://httparchive.org/reports/loading-speed#ttci">data from the HTTP Archive</a>. For example, sites performing in the ninety-ninth percentile render TTI in about 2.2 seconds. If your website's TTI is 2.2 seconds, your TTI score is 99.</p> <p>This table shows how to interpret your TTI score:</p> <div class="table-wrapper"> <table> <thead> <tr> <th>TTI metric<br>(in seconds)</th> <th>Color-coding</th> </tr> </thead> <tbody> <tr> <td>0–3.8</td> <td>Green (fast)</td> </tr> <tr> <td>3.9–7.3</td> <td>Orange (moderate)</td> </tr> <tr> <td>Over 7.3</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_tti_score" data-text="How to improve your TTI score" tabindex="-1">How to improve your TTI score</h2> <p>One improvement that can have a particularly big effect on TTI is deferring or removing unnecessary JavaScript work. Look for opportunities to <a href="https://web.dev/articles/fast#optimize_your_javascript">optimize your JavaScript</a>. In particular, consider <a href="https://web.dev/articles/reduce-javascript-payloads-with-code-splitting">reducing JavaScript payloads with code splitting</a> and <a href="https://web.dev/articles/apply-instant-loading-with-prpl">applying the PRPL pattern</a>. <a href="https://web.dev/fast/#optimize-your-third-party-resources">Optimizing third-party JavaScript</a> also yields significant improvements for some sites.</p> <p>These two Diagnostic audits provide additional opportunities to reduce JavaScript work:</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> </ul> <h2 id="tracking_tti_on_real_users_devices" data-text="Tracking TTI on real users' devices" tabindex="-1">Tracking TTI on real users' devices</h2> <p>To learn how to measure when TTI actually occurs on your users' devices, see Google's <a href="https://web.dev/user-centric-performance-metrics/">User-centric Performance Metrics</a> page. The <a href="https://web.dev/user-centric-performance-metrics/">Tracking TTI</a> section describes how to programmatically access TTI data and submit it to Google Analytics.</p> <aside class="note"> <strong>Note:</strong> TTI can be difficult to track in the field. Tracking <a href="https://web.dev/articles/inp">Interaction to Next Paint</a> is recommended in the field. </aside> <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/interactive.js">Source code for <strong>Time to Interactive</strong> audit</a></li> <li><a href="/docs/lighthouse/performance/performance-scoring">Lighthouse Scoring Guide</a></li> <li><a href="https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit">First Interactive And Consistently Interactive</a></li> <li><a href="https://web.dev/articles/optimizing-content-efficiency-javascript-startup-optimization">JavaScript Start-up Optimization</a></li> <li><a href="https://web.dev/articles/reduce-javascript-payloads-with-tree-shaking">Reduce JavaScript Payloads with Tree Shaking</a></li> <li><a href="https://web.dev/fast/#optimize-your-third-party-resources">Optimize third-party resources</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="HwD/z+xRsGlozUdj/6eqjb1zQgvPAL"> (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,["MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloudx_ping","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_completecodelab_endpoint","Experiments__reqs_query_experiments","Profiles__enable_awarding_url","Cloud__enable_legacy_calculator_redirect","CloudShell__cloud_shell_button","MiscFeatureFlags__enable_project_variables","Profiles__enable_developer_profiles_callout","DevPro__enable_developer_subscriptions","Cloud__enable_cloudx_experiment_ids","Search__enable_page_map","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_llm_concierge_chat","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__emergency_css","CloudShell__cloud_code_overflow_menu","Search__enable_ai_eligibility_checks","Profiles__enable_page_saving","MiscFeatureFlags__enable_variable_operator","Search__enable_suggestions_from_borg","TpcFeatures__enable_required_headers","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_view_transitions","OnSwitch__enable","Profiles__enable_recognition_badges","Cloud__enable_cloud_facet_chat","Profiles__enable_release_notes_notifications","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_shell","Analytics__enable_clearcut_logging","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_free_trial_server_call","Profiles__enable_profile_collections","Concierge__enable_pushui","Profiles__enable_public_developer_profiles","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__developers_footer_image","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_dlp_service","BookNav__enable_tenant_cache_key"],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

Time to Interactive | Lighthouse | Chrome for Developers