CINXE.COM
Economic Times quest for fixing INP | web.dev
<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/case-studies/economic-times-inp"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/case-studies/economic-times-inp" /><link rel="alternate" hreflang="x-default" href="https://web.dev/case-studies/economic-times-inp" /><link rel="alternate" hreflang="ar" href="https://web.dev/case-studies/economic-times-inp?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/case-studies/economic-times-inp?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/case-studies/economic-times-inp?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/case-studies/economic-times-inp?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/case-studies/economic-times-inp?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/case-studies/economic-times-inp?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/case-studies/economic-times-inp?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/case-studies/economic-times-inp?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/case-studies/economic-times-inp?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/case-studies/economic-times-inp?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/case-studies/economic-times-inp?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/case-studies/economic-times-inp?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/case-studies/economic-times-inp?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/case-studies/economic-times-inp?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/case-studies/economic-times-inp?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/case-studies/economic-times-inp?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/case-studies/economic-times-inp?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/case-studies/economic-times-inp?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/case-studies/economic-times-inp?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/case-studies/economic-times-inp?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/case-studies/economic-times-inp" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/case-studies/economic-times-inp?hl=vi" /><title>Economic Times quest for fixing INP | web.dev</title> <meta property="og:title" content="Economic Times quest for fixing INP | web.dev"><meta name="description" content="Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews."> <meta property="og:description" content="Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews."><meta property="og:url" content="https://web.dev/case-studies/economic-times-inp"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="case-study" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip > Resources </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" 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-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Economic Times quest for fixing INP </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>Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews.</p> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Barun Kumar" src="https://web.dev/images/authors/barunkumar.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Barun Kumar </span> <div class="wd-author__links"> <a href="https://github.com/kumar-barun" aria-label="Barun Kumar on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://www.linkedin.com/in/https://www.linkedin.com/in/kumarbarun89/" aria-label="Barun Kumar on LinkedIn" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 200 200"> <title>LinkedIn</title> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Daya Ram Yadav" src="https://web.dev/images/authors/daya.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Daya Ram Yadav </span> <div class="wd-author__links"> <a href="https://www.linkedin.com/in/https://www.linkedin.com/in/daya-yadav-41731a1a/" aria-label="Daya Ram Yadav on LinkedIn" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 200 200"> <title>LinkedIn</title> <path d="M185.2 0H14.8C6.6 0 0 6.4 0 14.3v171.3c0 7.9 6.6 14.3 14.8 14.3h170.4c8.1 0 14.8-6.4 14.8-14.3V14.3C199.9 6.4 193.3 0 185.2 0zM60.6 167.3H30.4V77.1h30.2v90.2zM45.5 64.8h-.2c-10.1 0-16.7-6.9-16.7-15.6 0-8.8 6.7-15.6 17.1-15.6 10.3 0 16.7 6.7 16.9 15.6 0 8.6-6.5 15.6-17.1 15.6zm124 102.5h-30.2V119c0-12.1-4.4-20.4-15.3-20.4-8.4 0-13.3 5.6-15.5 11-.8 1.9-1 4.6-1 7.3v50.4H77.3s.4-81.8 0-90.3h30.2v12.8c4-6.1 11.2-14.9 27.2-14.9 19.9 0 34.8 12.9 34.8 40.6v51.8zm-62.2-77.1c0-.1.1-.2.2-.3v.3h-.2z" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Saurabh Rajpal" src="https://web.dev/images/authors/saurabhrajpal.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Saurabh Rajpal </span> <div class="wd-author__links"> <a href="https://twitter.com/imsaurabhrajpal" aria-label="Saurabh Rajpal on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> </div> </div> </div> </div></p> <p><a href="/articles/inp">Interaction to Next Paint (INP)</a> is a metric that assesses a website's responsiveness to user input. Good responsiveness means that a page is quick to respond to user interactions. The lower a page's INP is, the better it is able to respond to user interactions.</p> <figure> <picture> <source srcset="https://web.dev/static/articles/inp/image/inp-desktop-v2.svg" media="(min-width: 640px)" width="800" height="200"> <img src="/static/articles/inp/image/inp-mobile-v2.svg" alt="Good INP values are 200 milliseconds or less, poor values are greater than 500 milliseconds, and anything in between needs improvement." width="640" height="480"> </picture> </figure> <h2 id="the_fuzzy_beginning" data-text="The fuzzy beginning" tabindex="-1">The fuzzy beginning</h2> <p>When Google initially introduced INP as an experimental metric with the potential to evolve into one of the Core Web Vitals metrics, the Economic Times team took up the challenge to fix it before it graduates into one, since providing a world class user experience is crucial to our core business values.</p> <p>INP has been one of the most difficult metrics to solve thus far. In the beginning, it was unclear on how to measure INP effectively. What made it more difficult was the lack of community support—including most Real User Monitoring (RUM) providers not supporting it yet. However, we had Google RUM tools like <a href="https://developer.chrome.com/docs/crux/about">Chrome User Experience Report (CrUX)</a>, the <a href="https://github.com/GoogleChrome/web-vitals"><code translate="no" dir="ltr">web-vitals</code> JavaScript library</a>, and others supporting it, which gave us a sense of where we stood while we were evaluating the path ahead. Our INP was close to 1,000 milliseconds at the origin level when we started.</p> <p>One thing that emerged while fixing INP in <a href="/articles/find-slow-interactions-in-the-field">the field</a> was that one of the lab metrics to target could be <a href="/articles/tbt">Total Blocking Time (TBT)</a>. TBT was already well documented and supported by the community. Despite already meeting the thresholds for Core Web Vitals, however, we weren't doing as well on the TBT front, as it was over 3 seconds when we began. </p> <h2 id="what_is_tbt_and_what_steps_did_we_take_to_improve_it" data-text="What is TBT, and what steps did we take to improve it?" tabindex="-1">What is TBT, and what steps did we take to improve it?</h2> <p>TBT is a lab metric that measures the responsiveness of a web page to user input during page load. Any task that takes more than 50 milliseconds to execute is considered a long task, and the time after the 50 millisecond threshold is known as the <strong>blocking time</strong>.</p> <p>TBT is calculated by taking the sum of the blocking time of all long tasks during page load. For example, if there are two long tasks during load, the blocking time is determined as follows:</p> <ul> <li>Task A takes 80 milliseconds (30 milliseconds more than 50 milliseconds).</li> <li>Task B takes 100 milliseconds (50 milliseconds more than 50 milliseconds).</li> </ul> <p>The page's TBT will be: 80 milliseconds (30 + 50). The lower the TBT, the better, and TBT also <a href="https://almanac.httparchive.org/en/2022/performance#inp-and-tbt">correlates well with INP</a>.</p> <p>Here’s a quick lab comparison of our TBT before and after taking steps to improve it:</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a.png" alt="A composite image of long tasks during startup as shown in the performance panel of Chrome DevTools, and a report of page metrics. The main thread is blocked during page load for 3,260 milliseconds." width="800" height="502" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-f7ec3934a2a4a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> The main thread during startup before optimizing TBT. The TBT is 3,260 milliseconds. </figcaption> </figure> <figure> <img src="/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729.png" alt="A composite image of long tasks during startup as shown in the performance panel of Chrome DevTools, and a report of page metrics. The main thread is blocked during page load for 120 milliseconds." width="800" height="701" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-composite-image-long-t-6e22c16464729_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> The main thread during startup after optimizing TBT. The TBT is 120 milliseconds. </figcaption> </figure> <h3 id="minimize_main_thread_work" data-text="Minimize main thread work" tabindex="-1">Minimize main thread work</h3> <p>The browser’s main thread handles everything from parsing HTML, building the DOM, to parsing CSS and applying styles, as well as evaluating and executing JavaScript. The main thread also handles user interactions—that is, click, tap, and keypresses. If the main thread is occupied with doing other work, it may not respond to user inputs efficiently, and may lead to a janky user experience.</p> <p>This was the most difficult task for us, since we have our own algorithms to detect user identity for serving ads based on subscription status and third party scripts for A/B testing, analytics, and more.</p> <p>We took small steps at first, such as de-prioritizing loading of less critical business assets. Second, we used <a href="https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback"><code translate="no" dir="ltr">requestIdleCallback</code></a> for non-critical work, which can help to reduce TBT.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'requestIdleCallback'</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">in</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">this</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestIdleCallbackId</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">requestIdleCallback</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">fetchMarketsData</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">bind</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-k">this</span><span class="devsite-syntax-p">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-nx">timeout</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">3000</span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">else</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">fetchMarketsData</span><span class="devsite-syntax-p">();</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Fallback in case requestIdleCallback is not supported</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>Specifying a timeout is recommended when using <code translate="no" dir="ltr">requestIdleCallback</code>, since it makes sure that if the given time is elapsed and the callback is not already been called, it executes the callback immediately after the timeout.</p> <h3 id="minimize_script_evaluation_time" data-text="Minimize script evaluation time" tabindex="-1">Minimize script evaluation time</h3> <p>We also lazy loaded third party libraries using <a href="https://loadable-components.com/">Loadable components</a>. We also removed unused JavaScript and CSS by profiling the page with the <a href="https://developer.chrome.com/docs/devtools/coverage">coverage tool</a> in Chrome DevTools. It helped us to identify areas where <a href="https://webpack.js.org/guides/tree-shaking">tree shaking</a> was needed to ship less code during page load, and therefore reduce the initial bundle size of the application.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6.png" alt="A screenshot of the coverage tool in Chrome DevTools. Here, the tool displays unused portions of JavaScript and CSS files during page load." width="800" height="100" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-coverag-d292288b0d4e6_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="reduce_dom_size" data-text="Reduce DOM size" tabindex="-1">Reduce DOM size</h3> <p>Per Lighthouse, large DOM sizes increase memory usage, causes longer <a href="/articles/reduce-the-scope-and-complexity-of-style-calculations">style recalculations</a>, and produces costly <a href="https://developers.google.com/speed/docs/insights/browser-reflow">layout reflows</a>.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768.png" alt="A screenshot of the DOM size audit in Lighthouse. The number of DOM elements reported is 2,706 elements." width="712" height="86" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-dom-siz-5ae84c7581768_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <p>We reduced the number of DOM nodes in two ways:</p> <ul> <li>First, we rendered our menu items at the user’s request (on click). It decreased the DOM size by around 1,200 nodes.</li> <li>Second, we lazy loaded less important widgets.</li> </ul> <p>Because of all these efforts, we reduced TBT significantly, and our INP was reduced accordingly by almost 50%:</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4.png" alt="A screenshot of the INP audit in CrUX. The INP for the page is 539 milliseconds, which exceeds the 'poor' threshold." width="574" height="216" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2faf213b950a4_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <p>At this point, we nearly ran out of easy wins to further reduce TBT (and INP by proxy), but we knew we had a lot of room for improvement. This is when we decided to upgrade our custom-built UI boilerplate to the latest version of React along with <a href="https://nextjs.org/">Next.js</a> to make better use of <a href="https://react.dev/reference/react">hooks</a> to avoid unnecessary re-rendering of components.</p> <p>Due to more frequent updates and comparatively lesser traffic as compared to the other portions of the website, we began to migrate our <a href="https://economictimes.indiatimes.com/topic/home">topic pages</a> to Next.js. We also used <a href="https://partytown.builder.io/">PartyTown</a> for offloading additional heavy main thread work to web workers, along with techniques like <code translate="no" dir="ltr">requestIdleCallBack</code> for deferring non-critical tasks.</p> <h2 id="how_has_improving_inp_helped_the_economic_times" data-text="How has improving INP helped The Economic Times?" tabindex="-1">How has improving INP helped The Economic Times?</h2> <h3 id="current_tbt_and_inp_on_origin" data-text="Current TBT and INP on origin" tabindex="-1">Current TBT and INP on origin</h3> <p>At the time of publishing this post, the TBT for our origin was 120 milliseconds, down from 3,260 milliseconds when we began our optimization efforts. Similarly, the INP for our origin was 257 milliseconds after our optimization efforts, down from over 1,000 milliseconds.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c.png" alt="A screenshot of the INP audit in CrUX. The INP for the page is 257 milliseconds, which is within the 'needs improvement' thresholds." width="582" height="218" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-the-inp-aud-2cea28af9782c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="inp_crux_trend" data-text="INP CrUX trend" tabindex="-1">INP CrUX trend</h3> <p>The traffic received on topic pages represents a significantly smaller portion of overall traffic. Hence, it was an ideal place for experimentation. The CrUX results along with the business outcomes were very encouraging, and led us to expand our efforts across the entire website to reap further benefits.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2.png" alt="A screenshot of INP distributions as visualized in CrUX over a period of four months, starting in July 2022 and ending in October 2022. Values within the 'poor' and 'needs improvement' thresholds declined somewhat, while the values within the 'good' threshold increased." width="800" height="190" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-inp-distrib-44656d248acd2_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="akamai_mpulse_tbt_analysis" data-text="Akamai mPulse TBT Analysis" tabindex="-1">Akamai mPulse TBT Analysis</h3> <p>We use <a href="https://www.akamai.com/products/mpulse-real-user-monitoring">Akamai mPulse</a> as our RUM solution, which measures TBT in the field. We observed a consistent decrease in TBT, clearly mapping to the outcomes of our efforts to reduce INP. As can be seen in the screenshot below, TBT values eventually dropped from approximately 5 seconds in to around 200 milliseconds in the field.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b.png" alt="A screenshot of a chart in Akamai mPulse, showing a decline in TBT over the course of roughly a month." width="800" height="118" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-a-chart-ak-a1f0ba83edd4b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h2 id="business_outcome" data-text="Business outcome" tabindex="-1">Business outcome</h2> <p>Overall, our efforts to bring down TBT by 30 times, along with migrating to Next.js helped us reduce INP nearly by 4 times, which eventually led to a <strong>50% decrease in bounce rate and 43% uplift in pageviews</strong> on topic pages.</p> <figure> <img src="/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332.png" alt="A screenshot of Google Analytics comparing pageviews versus bounce rate. Because of the optimizations made to INP on The Economic Times website, a 50% decrease in bounce rate and a 43% increase in pageviews was realized." width="800" height="288" srcset="https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_36.png 36w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_48.png 48w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_72.png 72w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_96.png 96w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_480.png 480w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_720.png 720w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_856.png 856w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_960.png 960w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_1440.png 1440w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_1920.png 1920w,https://web.dev/static/case-studies/economic-times-inp/image/a-screenshot-google-anal-5a13666518332_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h2 id="conclusion" data-text="Conclusion" tabindex="-1">Conclusion</h2> <p>To summarize, INP extensively helped to determine runtime performance issues on parts of the Economic Times website. It has proven to be one of the most effective metrics to positively impact business outcomes. Due to the very encouraging numbers we've observed as the result of this effort, we are motivated to scale our optimization efforts to other areas of our website and reap additional benefits.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2023-05-10 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 2023-05-10 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "case-study", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="YSvBnRQC0NGGsrkCnfUFJnNbzY4Xth"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Search__enable_ai_eligibility_checks","Search__enable_dynamic_content_confidential_banner","OnSwitch__enable","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_view_transitions","Profiles__enable_awarding_url","MiscFeatureFlags__enable_project_variables","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_variable_operator","Cloud__enable_legacy_calculator_redirect","Profiles__enable_recognition_badges","Profiles__enable_release_notes_notifications","Profiles__enable_developer_profiles_callout","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_shell","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloud_dlp_service","Experiments__reqs_query_experiments","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_public_developer_profiles","Search__enable_page_map","Search__enable_suggestions_from_borg","Cloud__enable_free_trial_server_call","MiscFeatureFlags__developers_footer_dark_image","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__emergency_css","MiscFeatureFlags__developers_footer_image","EngEduTelemetry__enable_engedu_telemetry","Concierge__enable_pushui","Cloud__enable_llm_concierge_chat","Analytics__enable_clearcut_logging","Profiles__enable_profile_collections","Profiles__enable_join_program_group_endpoint","Cloud__enable_cloud_facet_chat","Profiles__enable_page_saving","Cloud__enable_cloudx_ping","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_complete_playlist_endpoint","CloudShell__cloud_shell_button","BookNav__enable_tenant_cache_key","Profiles__enable_completequiz_endpoint","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_stripe_subscription_management","Profiles__enable_completecodelab_endpoint"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>