CINXE.COM
Learn Performance | 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/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/learn/performance"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/learn/performance" /><link rel="alternate" hreflang="x-default" href="https://web.dev/learn/performance" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/learn/performance" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/learn/performance" /><title>Learn Performance | web.dev</title> <meta property="og:title" content="Learn Performance | web.dev"><meta name="description" content="This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance."> <meta property="og:description" content="This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance."><meta property="og:url" content="https://web.dev/learn/performance"><meta property="og:image" content="https://web.dev/learn/performance/card.png"> <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="playlist" theme="web-theme" type="playlist" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner" data-nosnippet> <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/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/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 devsite-active "> <a href="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" aria-label="Resources, selected" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Resources" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></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-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/learn" 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="" > Resources </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/learn/privacy" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/privacy" track-type="nav" track-metadata-position="nav - privacy" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" > Privacy </a> </tab> <tab > <a href="https://web.dev/learn/accessibility" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/accessibility" track-type="nav" track-metadata-position="nav - accessibility" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" > Accessibility </a> </tab> <tab > <a href="https://web.dev/learn/html" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/html" track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/learn/images" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/images" track-type="nav" track-metadata-position="nav - images" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" > Images </a> </tab> <tab > <a href="https://web.dev/learn/design" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/design" track-type="nav" track-metadata-position="nav - responsive design" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" > Responsive Design </a> </tab> <tab > <a href="https://web.dev/learn/forms" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/forms" track-type="nav" track-metadata-position="nav - forms" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" > Forms </a> </tab> <tab > <a href="https://web.dev/learn/pwa" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/pwa" track-type="nav" track-metadata-position="nav - pwa" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" > PWA </a> </tab> <tab > <a href="https://web.dev/learn/css" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/css" track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/learn/performance" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/performance" track-type="nav" track-metadata-position="nav - performance" track-metadata-module="primary nav" aria-label="Performance, selected" data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" > Performance </a> </tab> <tab > <a href="https://web.dev/learn/testing" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/testing" track-type="nav" track-metadata-position="nav - testing" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" > Testing </a> </tab> <tab > <a href="https://web.dev/learn/javascript" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/javascript" track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> </nav> </devsite-tabs> </div> </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/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Resources" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Resources </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: 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> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/learn/privacy" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/images" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Images" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Images </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/design" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsive Design" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsive Design </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/forms" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Forms" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Forms </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/pwa" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" data-category="Site-Wide Custom Events" data-label="Responsive Tab: PWA" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PWA </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Performance </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/testing" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Testing </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn" 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="" > Resources </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn/performance" 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="" > Performance </a> </li> </ul> </div> <div class="devsite-actions" data-nosnippet><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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <devsite-playlist> <div class="devsite-playlist--header"> <div class="devsite-playlist--inner"> <div class="devsite-playlist--header-details"> <div class="devsite-playlist--header-details-info"> <h1 class="devsite-playlist-title">Learn Performance</h1> <div class="devsite-playlist-details"></div> <p> This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance.<br> <a class="button devsite-playlist-return-button gc-analytics-event" data-category="devsite-playlist: go back button" hidden> Go back </a> </p> <div class="devsite-playlist-summary"> <div> </div> <div class="devsite-playlist-summary-details"> </div> <div> </div> </div> </div> <div class="devsite-playlist--header-badge-info"> </div> </div> </div> </div> <div class="devsite-playlist--sections"> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/welcome" path="https://web.dev/learn/performance/welcome" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Welcome to Learn Performance! </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/welcome" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/welcome"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/why-speed-matters" path="https://web.dev/learn/performance/why-speed-matters" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Why speed matters </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Before you can get started with learning performance, you first have to understand its role in the user experience, and how it can result in better outcomes for users. This course starts off with a brief introduction into these topics, giving vital context as to why it's important to learn performance. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/why-speed-matters" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/why-speed-matters"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/general-html-performance" path="https://web.dev/learn/performance/general-html-performance" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> General HTML performance considerations </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Every website starts with a request for an HTML document, that request has a big role to play in how fast your website loads. This module covers important concepts such as HTML caching, parser blocking, render blocking, and more, so you can ensure the first request for your website's HTML is off on the right foot. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/general-html-performance" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/general-html-performance"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/understanding-the-critical-path" path="https://web.dev/learn/performance/understanding-the-critical-path" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Understanding the critical path </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> The critical rendering path is a concept in web performance that deals with how quickly the initial rendering of a page appears in the browser. This module goes into the theory behind the critical rendering path, covering concepts such as render-blocking and parser-blocking resources, and how they play a key role in how quickly a page appears in the browser. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/understanding-the-critical-path" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/understanding-the-critical-path"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/optimize-resource-loading" path="https://web.dev/learn/performance/optimize-resource-loading" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Optimize resource loading </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> As a page loads, many resources are referenced within its HTML that provide a page with its appearance and layout through CSS, as well as its interactivity through JavaScript. In this module, a number of important concepts related to these resources and how they affect a page's load time are covered. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/optimize-resource-loading" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/optimize-resource-loading"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/resource-hints" path="https://web.dev/learn/performance/resource-hints" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Assist the browser with resource hints </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Resource hints are a collection of features available in HTML that can assist the browser in loading resources earlier and possibly even with higher resource priority. In this module, a few resource hints that can help your pages load even faster are covered. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/resource-hints" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/resource-hints"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/image-performance" path="https://web.dev/learn/performance/image-performance" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Image performance </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Images represent a large portion of the data transferred on many web pages today. This module covers how to optimize images, as well as serve them efficiently so that you minimize wasted bytes, regardless of the user's device. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/image-performance" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/image-performance"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/video-performance" path="https://web.dev/learn/performance/video-performance" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Video performance </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Video is a media type used often on web pages鈥攂ut knowing how to serve them efficiently is one aspect of performance you shouldn't overlook. This module covers some key techniques for embedding videos in such a way that your website stays fast, as well adjacent performance considerations that can arise with their use. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/video-performance" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/video-performance"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/optimize-web-fonts" path="https://web.dev/learn/performance/optimize-web-fonts" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Optimize web fonts </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Web fonts are a commonly used resource on the web鈥攁nd rightfully so鈥攁s they add to the design of a website in ways that other resources can't. Even so, web fonts still have a performance cost. In this module, a number of performance considerations and techniques around web fonts are explored. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/optimize-web-fonts" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/optimize-web-fonts"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/code-split-javascript" path="https://web.dev/learn/performance/code-split-javascript" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Code-split JavaScript </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Some resources are not crucial to a web page's initial load. JavaScript is one such resource that can be deferred until the time of need through a technique known as code splitting. By doing so, you can improve performance by lowering bandwidth and CPU contention鈥攁 critical consideration for improving both initial page load speed and input responsiveness during startup. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/code-split-javascript" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/code-split-javascript"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/lazy-load-images-and-iframe-elements" path="https://web.dev/learn/performance/lazy-load-images-and-iframe-elements" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Lazy load images and iframe elements </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Images and iframe elements can consume significant bandwidth and CPU processing time. However, not all images and iframe elements need to be loaded during the initial page load, and can be deferred to a later time in which the user is likeliest to see them. This technique is known as _lazy loading_. In this module, lazy loading images and iframe elements is explained so you can get your pages to load faster and only consume bandwidth and processing time only when needed. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/lazy-load-images-and-iframe-elements" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/lazy-load-images-and-iframe-elements"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/prefetching-prerendering-precaching" path="https://web.dev/learn/performance/prefetching-prerendering-precaching" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> Prefetching, prerendering, and service worker precaching </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> While much of performance deals with what you can do to optimize and eliminate unnecessary resources, it may seem a bit paradoxical to suggest that some resources should be loaded before they're needed. However, there are some cases in which it _might_ be appropriate to load certain resources ahead of time. In this module, this aspect of performance is explored, as prefetching, prerendering, and service worker precaching are discussed. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/prefetching-prerendering-precaching" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/prefetching-prerendering-precaching"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/web-worker-overview" path="https://web.dev/learn/performance/web-worker-overview" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> An overview of web workers </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Much of what the user sees in the browser occurs on a single thread known as the _main thread_. However, there are opportunities where you can start up new threads to do computationally expensive work so that the main thread can accommodate important user-facing tasks. The API that does this is known as the Web Worker API, and in this module, the basics of it are covered. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/web-worker-overview" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/web-worker-overview"> Read article </a> </div> </div> </div> <div class="devsite-playlist--section" type="article" id="article-https://web.dev/learn/performance/web-worker-demo" path="https://web.dev/learn/performance/web-worker-demo" > <div class="devsite-playlist--inner"> <div class="devsite-playlist--item-top"> <div class="devsite-playlist--item-top-index"> <span class="num"></span> <i class="material-icons" aria-hidden="true">check_circle</i> <devsite-spinner size="30" single-color="#aecbfa"></devsite-spinner> </div> <div class="devsite-playlist--item-top-title"> <h2> A concrete web worker use case </h2> </div> <div class="devsite-playlist--item-top-controls"> <button class="toggle gc-analytics-event" data-category="devsite-playlist: toggle button"> <i class="material-icons arrow--down" aria-label="Show more details.">keyboard_arrow_down</i> <i class="material-icons arrow--up" aria-label="Show fewer details.">keyboard_arrow_up</i> </button> </div> </div> <div class="devsite-playlist--item--meta"> <i class="material-icons" aria-hidden="true">subject</i> Article </div> <div class="devsite-playlist--item--content"> <p> Now that you have a basic understanding of web workers and their capabilities and limitations, it's time to take a look at a concrete use case for a web worker. In this demo, a web worker is used to fetch a JPEG file, extract its metadata, and send it back to the main thread so the user can see it in the browser. </p> </div> <div class="devsite-playlist--item--actions"> <a href="https://web.dev/learn/performance/web-worker-demo" target="_blank" class="button button-primary button-returnto playlist-article gc-analytics-event" data-category="devsite-playlist: read article button" data-label="path: https://web.dev/learn/performance/web-worker-demo"> Read article </a> </div> </div> </div> </div> <div class="devsite-playlist--footer"> <devsite-thumb-rating position="main" disable-categories></devsite-thumb-rating> </div> </devsite-playlist> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> </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": "playlist", "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="OB4SOuEEoUOEgTs3NuJUVrdiYcQ1mp"> (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/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["MiscFeatureFlags__enable_firebase_utm","Concierge__enable_actions_menu","MiscFeatureFlags__developers_footer_image","Concierge__enable_pushui","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_facet_chat","Profiles__enable_stripe_subscription_management","Search__enable_dynamic_content_confidential_banner","Search__enable_ai_eligibility_checks","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_complete_playlist_endpoint","Profiles__enable_page_saving","Profiles__enable_join_program_group_endpoint","MiscFeatureFlags__enable_framebox_badge_methods","MiscFeatureFlags__enable_variable_operator","DevPro__enable_cloud_innovators_plus","Profiles__enable_dashboard_curated_recommendations","CloudShell__cloud_shell_button","DevPro__enable_developer_subscriptions","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_completequiz_endpoint","MiscFeatureFlags__enable_variable_operator_index_yaml","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloudx_experiment_ids","Profiles__enable_recognition_badges","Profiles__enable_profile_collections","Profiles__enable_awarding_url","Analytics__enable_clearcut_logging","MiscFeatureFlags__emergency_css","Search__enable_page_map","Search__enable_suggestions_from_borg","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_dlp_service","Profiles__enable_release_notes_notifications","Cloud__enable_legacy_calculator_redirect","Experiments__reqs_query_experiments","DevPro__enable_enterprise","DevPro__enable_code_assist","DevPro__enable_vertex_credit_card","Cloud__enable_llm_concierge_chat","DevPro__enable_firebase_workspaces_card","Profiles__enable_completecodelab_endpoint","DevPro__enable_google_one_card","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_shell","Profiles__require_profile_eligibility_for_signin","OnSwitch__enable","DevPro__enable_devpro_offers","BookNav__enable_tenant_cache_key","MiscFeatureFlags__gdp_dashboard_reskin_enabled","TpcFeatures__enable_unmirrored_page_left_nav","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_public_developer_profiles","Profiles__enable_purchase_prompts","Cloud__enable_free_trial_server_call","Cloud__enable_cloudx_ping"],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,null,"https://developerscontentinsights-pa.googleapis.com","AIzaSyC11xEGtFhkmSh_iF6l_itbxnFz2GrIBOg","AIzaSyAXJ10nRF73mmdSDINgkCNX5bbd2KPcWm8"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>