rss-en.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>
        web.dev
    </title>
    <subtitle>
        Let&#39;s build the future of the web.
    </subtitle>
    <link href="https://web.dev/feed.xml" rel="self"/>
    <link href="https://web.dev"/>
    <updated>
        2023-08-04T15:10:17Z
    </updated>
    <id>
        https://web.dev/
    </id>
    <author>
        <name>
            Google Developers
        </name>
    </author>
    <icon>
        https://web.dev/images/social.png
    </icon>
    <logo>
        https://web.dev/images/shared/rss-banner.png
    </logo>
    <entry>
        <title>
            New to the web platform in July
        </title>
        <link href="https://web.dev/web-platform-07-2023/"/>
        <updated>
            2023-07-31T00:00:00Z
        </updated>
        <id>
            https://web.dev/web-platform-07-2023/
        </id>
        <content type="text/html" mode="escaped">
            &lt;h2 id=&quot;stable-browser-releases&quot;&gt;Stable browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#stable-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In July 2023 &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/115&quot; rel=&quot;noopener&quot;&gt;Firefox 115&lt;/a&gt; and &lt;a href=&quot;https://developer.chrome.com/blog/new-in-chrome-115/&quot; rel=&quot;noopener&quot;&gt;Chrome 115&lt;/a&gt; became stable. This post takes a look at what that means for the web platform.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-bad-bg color-state-bad-text&quot;&gt;&lt;p class=&quot;cluster color-state-bad-text&quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Error sign&quot;&gt;   &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Caution&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the &lt;a href=&quot;https://github.com/mdn/browser-compat-data/releases&quot;&gt;browser-compat-data release&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;multiple-values-for-the-css-display-property&quot;&gt;Multiple values for the CSS &lt;code&gt;display&lt;/code&gt; property &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#multiple-values-for-the-css-display-property&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome 115 includes multiple values for the CSS &lt;code&gt;display&lt;/code&gt; property. This means that &lt;code&gt;display: flex&lt;/code&gt; becomes &lt;code&gt;display: block flex&lt;/code&gt; and &lt;code&gt;display: block&lt;/code&gt; becomes &lt;code&gt;display: block flow&lt;/code&gt;. The single values are maintained as legacy keywords, these values are now available in the three major engines.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Firefox 70, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
70
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari 15, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
15
&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;scroll-driven-animations&quot;&gt;Scroll-driven animations &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#scroll-driven-animations&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Also in Chrome 115 are the &lt;code&gt;ScrollTimeline&lt;/code&gt; and &lt;code&gt;ViewTimeline&lt;/code&gt; extensions to the Web Animations specification. These enable &lt;a href=&quot;https://developer.chrome.com/articles/scroll-driven-animations/&quot; rel=&quot;noopener&quot;&gt;scroll-driven animations&lt;/a&gt; via CSS and JavaScript.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;privacy-sandbox-apis&quot;&gt;Privacy Sandbox APIs &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#privacy-sandbox-apis&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The Privacy Sandbox &lt;a href=&quot;https://developer.chrome.com/blog/privacy-sandbox-launch/&quot; rel=&quot;noopener&quot;&gt;relevance and measurement APIs&lt;/a&gt; shipped in Chrome 115. This includes the Topics, Protected Audience, Attribution Reporting, Private Aggregation, Shared Storage, and Fenced Frames APIs.&lt;/p&gt;
&lt;p&gt;To understand more about these APIs check out the &lt;a href=&quot;https://developer.chrome.com/blog/privacy-sandbox-demos/&quot; rel=&quot;noopener&quot;&gt;Privacy Sandbox demos&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id=&quot;the-animation-composition-property&quot;&gt;The &lt;code&gt;animation-composition&lt;/code&gt; property &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#the-animation-composition-property&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 115 supports the CSS &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/animation-composition&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;animation-composition&lt;/code&gt;&lt;/a&gt; property. Making &lt;code&gt;animation-composition&lt;/code&gt; supported in all three major engines. Learn more in the article &lt;a href=&quot;https://developer.chrome.com/articles/css-animation-composition/&quot; rel=&quot;noopener&quot;&gt;Specify how multiple animation effects should composite with animation-composition&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 104, Behind a flag&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;flag&quot; title=&quot;Behind a flag&quot; aria-label=&quot;Behind a flag&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 112, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
112
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari 16, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
16
&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/animation-composition#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;array-methods&quot;&gt;Array methods &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#array-methods&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Also reaching interoperability with Firefox 115 are a set of methods for &lt;code&gt;Array&lt;/code&gt; and &lt;code&gt;TypedArray&lt;/code&gt;.  &lt;code&gt;Array.toReversed()&lt;/code&gt;, &lt;code&gt;Array.toSorted()&lt;/code&gt;, &lt;code&gt;Array.toSpliced()&lt;/code&gt;, &lt;code&gt;Array.with()&lt;/code&gt;, &lt;code&gt;TypedArrays.toReversed()&lt;/code&gt;, &lt;code&gt;TypedArrays.toSorted()&lt;/code&gt;, and &lt;code&gt;TypedArrays.with()&lt;/code&gt; return a new array with elements that have been shallow copied.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 110, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      110
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 110, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
110
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari 16, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
16
&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h2 id=&quot;beta-browser-releases&quot;&gt;Beta browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-07-2023/#beta-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Beta browser versions give you a preview of things that will be in the next stable version of the browser. It&#39;s a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/116&quot; rel=&quot;noopener&quot;&gt;Firefox 116&lt;/a&gt; and &lt;a href=&quot;https://developer.chrome.com/blog/chrome-116-beta/&quot; rel=&quot;noopener&quot;&gt;Chrome 116&lt;/a&gt;. The &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 17&lt;/a&gt;  and &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 16.6&lt;/a&gt; betas are still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.&lt;/p&gt;
&lt;p&gt;Firefox 116 supports the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Audio_Output_Devices_API&quot; rel=&quot;noopener&quot;&gt;Audio Output Devices API&lt;/a&gt; on all platforms except for Android. This API allows web applications to redirect audio output to a permitted Bluetooth headset, speakerphone, or other device, instead of having to use the browser or underlying OS default.&lt;/p&gt;
&lt;p&gt;Chrome 116 includes CSS Motion Path allowing any graphical object to be animated it along a path specified by the developer. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the &lt;code&gt;ray()&lt;/code&gt; function) rather than the standard rectangular coordinates used by the &lt;code&gt;translate()&lt;/code&gt; function, or animating an element along a defined path. This makes it easier to define complex and beautiful 2d spatial transitions. A path can be specified as &lt;code&gt;circle()&lt;/code&gt;, &lt;code&gt;ellipse()&lt;/code&gt;, &lt;code&gt;rect()&lt;/code&gt;, &lt;code&gt;inset()&lt;/code&gt;, &lt;code&gt;xywh()&lt;/code&gt;, &lt;code&gt;polygon()&lt;/code&gt;, &lt;code&gt;ray()&lt;/code&gt; and &lt;code&gt;url()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Also in Chrome 116 is the &lt;a href=&quot;https://developer.chrome.com/docs/web-platform/document-picture-in-picture/&quot; rel=&quot;noopener&quot;&gt;Document Picture-in-Picture API&lt;/a&gt;. This enables an always-on-top window that can be populated with arbitrary HTMLElements. This is an expansion upon the existing HTMLVideoElement API that only allows for an HTMLVideoElement to be put into a Picture-in-Picture (PiP) window.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Photo by &lt;a href=&quot;https://unsplash.com/@ninjason&quot; rel=&quot;noopener&quot;&gt;Jason Leung&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Adapting typography to user preferences with CSS
        </title>
        <link href="https://web.dev/adapting-typography-to-user-preferences-with-css/"/>
        <updated>
            2023-07-27T00:00:00Z
        </updated>
        <id>
            https://web.dev/adapting-typography-to-user-preferences-with-css/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Bringing the user into the design process has been an exciting time for users,
designers and developers. Users can land on your experience and seamlessly begin
consuming content, their preferences richly integrated into the design result.&lt;/p&gt;
&lt;p&gt;This blog post explores using CSS media queries with a variable font to tailor
the reading experience even further. Font grade and weight can be customized
with &lt;code&gt;font-variation-settings&lt;/code&gt;, allowing microtuning given various preferences
and contexts, like a preference for dark mode or high contrast. We can take
these preferences and tailor a variable font for that user experience.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Dark mode gets a slightly reduced gradation.&lt;/li&gt;
&lt;li&gt;High contrast gets a bolder font.&lt;/li&gt;
&lt;li&gt;Low contrast gets a thinner font.&lt;/li&gt;
&lt;/ul&gt;
&lt;figure data-size=&quot;full&quot;&gt;
  &lt;video autoplay=&quot;&quot; controls=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot;&gt;      &lt;source src=&quot;https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/cgGryLwncKVnBUQ8iQOF.mp4&quot; type=&quot;video/mp4&quot; /&gt;    &lt;/video&gt;
  &lt;figcaption&gt;
    &lt;a href=&quot;https://codepen.io/argyleink/pen/mdQrqvj&quot;&gt;https://codepen.io/argyleink/pen/mdQrqvj&lt;/a&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Follow along to understand each portion of the CSS and variable font that enable
this meaningful moment!&lt;/p&gt;
&lt;h2 id=&quot;getting-setup&quot;&gt;Getting setup &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#getting-setup&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To help focus on the CSS and font variation setting values, but also give us
something to read and see, here&#39;s the markup you can use to preview the work:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Variable font weight based on contrast preference&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;br /&gt;  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio&lt;br /&gt;  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo&lt;br /&gt;  labore aliquid ex, dicta corporis.&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Without adding any CSS, the font size is already adaptive to user preferences.
Here&#39;s a video from another demo showing how setting &lt;code&gt;font-size&lt;/code&gt; in pixels will
squash any user preferences, and why you should set your font size in rems:&lt;/p&gt;
&lt;p&gt;&lt;video autoplay=&quot;&quot; controls=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot;&gt;      &lt;source src=&quot;https://storage.googleapis.com/web-dev-uploads/video/vS06HQ1YTsbMKSFTIPl2iogUQP73/8mxSKsYmv6K7zoqDor0F.mp4&quot; type=&quot;video/mp4&quot; /&gt;    &lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Lastly, to center and support the demo, a little CSS:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo.support&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;place-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-5&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;gap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--size-5&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;text-wrap&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; balance&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;img alt=&quot;A screenshot preview of the demo so far, in both dark and light themes.&quot; decoding=&quot;async&quot; height=&quot;327&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/upVZBhu250ETgmczvTeh.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This demo setup lets you begin testing and implementing this neat typography UX
feature.&lt;/p&gt;
&lt;h2 id=&quot;loading-the-roboto-flex-variable-font&quot;&gt;Loading the Roboto Flex variable font &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#loading-the-roboto-flex-variable-font&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The adaptive strategy depends on a variable font with meaningful axes for
customization, specifically you need &lt;code&gt;GRAD&lt;/code&gt; and &lt;code&gt;wght&lt;/code&gt;. The target adaptive user
preferences in this article are for color scheme and contrast, both of which
will tailor these axes to match the user&#39;s desired preference.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; A variable font is not required to achieve this user experience that matches preferences, however, using one achieves the effect without loading multiple weights or versions of a font. See &lt;a href=&quot;https://codepen.io/web-dot-dev/pen/zYMmevQ&quot;&gt;this demo&lt;/a&gt; for an example of this UX without a dependency on a variable font. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;Load the variable font using the &lt;code&gt;@font-face&lt;/code&gt; API of CSS:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@font-face&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Roboto Flex&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string url&quot;&gt;&#39;https://assets.codepen.io/2585/RobotoFlex&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;format&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;truetype&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Next, apply the font to some content. The following CSS applies it to
everything:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo.support&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Roboto Flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;img alt=&quot;A screenshot preview of the demo so far, with the font now in Roboto Flex in both dark and light themes.&quot; decoding=&quot;async&quot; height=&quot;327&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/hfdJqPvkp2v8HvsH7x4o.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;h2 id=&quot;css-custom-properties-and-media-queries-for-the-win&quot;&gt;CSS custom properties and media queries for the win &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#css-custom-properties-and-media-queries-for-the-win&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;With the font loaded, you can query for user preferences and adapt the variable
font settings to match.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; If you need a review on some of these styles, check out the &lt;a href=&quot;https://web.dev/learn/css/&quot;&gt;Learn CSS&lt;/a&gt; module on &lt;a href=&quot;https://web.dev/learn/design/media-queries/&quot;&gt;media queries&lt;/a&gt; or this post on &lt;a href=&quot;https://web.dev/building-a-color-scheme/&quot;&gt;building an adaptive color scheme with custom properties&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;settings-when-theres-no-preferences-default&quot;&gt;Settings when there&#39;s no preferences (default) &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-theres-no-preferences-default&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The following initial styles will be the default styles, or another way to look
at it, the styles for users without any preferences.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 400&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;font-variation-settings&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;wght&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-weight&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;GRAD&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-grade&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h3 id=&quot;settings-when-the-preference-is-for-high-contrast&quot;&gt;Settings when the preference is for high contrast &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-high-contrast&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For users who have indicated a preference for high contrast in their system
settings, increase the &lt;code&gt;--base-weight&lt;/code&gt; value from &lt;code&gt;400&lt;/code&gt; to &lt;code&gt;700&lt;/code&gt;:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; more&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 700&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Now there&#39;s more contrast while reading.&lt;/p&gt;
&lt;h3 id=&quot;settings-when-the-preference-is-for-low-contrast&quot;&gt;Settings when the preference is for low contrast &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-low-contrast&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For users who have indicated a preference for low contrast in their system
settings, decrease the &lt;code&gt;--base-weight&lt;/code&gt; value from &lt;code&gt;400&lt;/code&gt; to &lt;code&gt;200&lt;/code&gt;:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; less&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 200&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Now there&#39;s less contrast while reading.&lt;/p&gt;
&lt;h3 id=&quot;settings-when-the-preference-is-for-dark-mode&quot;&gt;Settings when the preference is for dark mode &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#settings-when-the-preference-is-for-dark-mode&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -25&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Now the perceptual differences of light on dark vs dark on light have been
accounted for.&lt;/p&gt;
&lt;h3 id=&quot;all-together-now&quot;&gt;All together now &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/adapting-typography-to-user-preferences-with-css/#all-together-now&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 400&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;font-variation-settings&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;wght&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-weight&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;GRAD&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-grade&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; more&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 700&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; less&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 200&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -25&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Or, for fun, all together with &lt;a href=&quot;https://developer.chrome.com/articles/css-nesting/&quot; rel=&quot;noopener&quot;&gt;CSS nesting&lt;/a&gt;:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@layer&lt;/span&gt; demo&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 400&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;font-variation-settings&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;wght&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-weight&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token string&quot;&gt;&quot;GRAD&quot;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--base-grade&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; more&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;     &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 700 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-contrast&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; less&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;     &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;--base-weight&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 200 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; dark&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;--base-grade&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; -25 &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;The result is a reading experience that adapts the font to match the user&#39;s
preferences. Full source code is available below in the Codepen.&lt;/p&gt;
&lt;div class=&quot;codepen-embed-wrap&quot; style=&quot;height: 500px; width: 100%&quot;&gt;
&lt;iframe allow=&quot;camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;&quot; loading=&quot;lazy&quot; src=&quot;https://codepen.io/web-dot-dev/embed/rNQZMzo?height=500&amp;theme-id=light&amp;default-tab=result&amp;editable=true&quot; style=&quot;height: 100%; width: 100%; border: 0;&quot; title=&quot;Pen rNQZMzo by web-dot-dev on Codepen&quot;&gt;See the Pen &lt;a href=&quot;https://codepen.io/web-dot-dev/embed/rNQZMzo&quot;&gt;Pen rNQZMzo by web-dot-dev on Codepen&lt;/a&gt;&lt;/iframe&gt;&lt;/div&gt;
        </content>
        <author>
            <name>
                Adam Argyle
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Designing the user experience of passkeys on Google accounts
        </title>
        <link href="https://web.dev/passkey-google-ux/"/>
        <updated>
            2023-07-26T00:00:00Z
        </updated>
        <id>
            https://web.dev/passkey-google-ux/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Passkeys are a simple and &lt;a href=&quot;https://security.googleblog.com/2023/05/so-long-passwords-thanks-for-all-phish.html&quot; rel=&quot;noopener&quot;&gt;secure cross-device authentication
technology&lt;/a&gt;
that enables creating online accounts and signing in to them without entering a
password. To log in to an account, users are simply shown a prompt to to use the
screen lock on their device, such as touching the fingerprint sensor.&lt;/p&gt;
&lt;p&gt;Google has been working with the FIDO Alliance for years, alongside Apple and
Microsoft, to bring passkeys to the world. In 2022 we rolled out platform
support for passkeys so that
&lt;a href=&quot;https://android-developers.googleblog.com/2022/10/bringing-passkeys-to-android-and-chrome.html&quot; rel=&quot;noopener&quot;&gt;Android&lt;/a&gt;
and
&lt;a href=&quot;https://blog.chromium.org/2022/12/introducing-passkeys-in-chrome.html&quot; rel=&quot;noopener&quot;&gt;Chrome&lt;/a&gt;
users can seamlessly sign in to apps and websites across all their devices. In
May 2023, we enabled signing in to &lt;a href=&quot;https://blog.google/technology/safety-security/the-beginning-of-the-end-of-the-password/&quot; rel=&quot;noopener&quot;&gt;Google Accounts with
passkeys&lt;/a&gt;,
bringing the security and convenience of passkeys to our users.&lt;/p&gt;
&lt;p&gt;Google is in a unique position, as we are both working on the infrastructure for
passkeys and are one of the largest services using them. We are rolling out
passkeys for Google Accounts carefully and deliberately, so we can measure the
results and use that feedback to continue to improve the passkey infrastructure
and the Google account experience.&lt;/p&gt;
&lt;h2 id=&quot;transitioning-users-to-passkeys&quot;&gt;Transitioning users to passkeys &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#transitioning-users-to-passkeys&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Passwords have been the standard sign-in method since the advent of personalized
online experiences. How do we introduce the passwordless experience of passkeys?&lt;/p&gt;
&lt;p&gt;Research indicates that when it comes to authentication, users value the
convenience the most. They want a smooth and fast transition to the real
experience, which only comes after signing in.&lt;/p&gt;
&lt;p&gt;Still, the transition to passkeys requires changing muscle memory and users need
to be convinced it&#39;s worth making a switch.&lt;/p&gt;
&lt;p&gt;The user experience of passkeys for &lt;a href=&quot;http://google.com/&quot; rel=&quot;noopener&quot;&gt;Google.com&lt;/a&gt; has been
strategically designed to emphasize two principles at every step of the
authentication process: ease of use and security.&lt;/p&gt;
&lt;h3 id=&quot;leading-with-convenience&quot;&gt;Leading with convenience &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#leading-with-convenience&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;figure&gt;
&lt;img alt=&quot;For most users, this will be the first time they see passkeys&quot; decoding=&quot;async&quot; height=&quot;600&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/UI5EioUkpDiMtUAdARnw.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;For most users, this will be the first time they see passkeys.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The first passkey screen users see is light and easy-to-digest.  The header is
focusing on the user benefit, saying &amp;quot;Simplify your sign in.&amp;quot;&lt;/p&gt;
&lt;p&gt;The body copy explains &amp;quot;With passkeys you can now use your fingerprint, face or
screen lock to verify it&#39;s really you&amp;quot;.&lt;/p&gt;
&lt;p&gt;The illustration is intended to ground the message in the value proposition made
by the page. The large blue primary action invites the user to proceed. &amp;quot;Not
now&amp;quot; is included as a secondary action to allow users to choose whether or not
to opt in at this time, leaving the user in control. And &amp;quot;Learn more&amp;quot; is offered
for the most curious users who would like to understand passkeys better before
proceeding.&lt;/p&gt;
&lt;p&gt;We explored many iterations of the pages used to introduce users to passkeys
during sign in. This included trying content that emphasized the security,
technology, and other aspects of passkeys—yet convenience was really what
resonated most. Google&#39;s content strategy, illustration, and interaction design
demonstrates this core principle for our implementation of passkeys.&lt;/p&gt;
&lt;h3 id=&quot;associating-the-term-passkeys-with-familiar-security-experiences&quot;&gt;Associating the term &amp;quot;passkeys&amp;quot; with familiar security experiences &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#associating-the-term-passkeys-with-familiar-security-experiences&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Passkeys are a new term for most users so we are intentionally gently exposing
the users to the term to build familiarity. Guided by internal research, we are
strategically associating passkeys with security.&lt;/p&gt;
&lt;p&gt;The word &amp;quot;passkey&amp;quot; is included throughout the sign-in flow in the less-prominent
body copy position.  It&#39;s consistently nestled amongst the familiar security
experiences that enable passkey use: fingerprint, face scan, or other device
screen lock.&lt;/p&gt;
&lt;p&gt;Our research has shown that many users associate biometrics with security. While
passkeys don&#39;t require biometrics (a passkey can be used with a device PIN, for
example), we are leaning into the association of passkeys with biometrics to
boost user perception of passkeys&#39; security benefits.&lt;/p&gt;
&lt;p&gt;The additional content behind the &amp;quot;Learn more&amp;quot; has lots of valuable information
for users, including reassurance for users that their sensitive, biometric data
stays on their personal device and is never stored or shared when creating or
using passkeys. We took this approach because most users found the convenience
aspect of passkeys appealing, but only a few took into account the biometric
element during testing.&lt;/p&gt;
&lt;h3 id=&quot;introducing-passkeys-when-its-relevant-to-the-user&quot;&gt;Introducing passkeys when it&#39;s relevant to the user &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#introducing-passkeys-when-its-relevant-to-the-user&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Google&#39;s heuristics carefully determine who will see the introductory screen.
Some of the factors are whether a user has two-step verification enabled and
whether they access that account regularly from the same device.&lt;/p&gt;
&lt;p&gt;Users who are most likely to succeed with passkeys are selected first, and over
time more users will be introduced (though, anyone can get started at
&lt;a href=&quot;http://g.co/passkeys&quot; rel=&quot;noopener&quot;&gt;g.co/passkeys&lt;/a&gt; today).&lt;/p&gt;
&lt;p&gt;Select users are prompted to create a passkey after signing in with a username
and password. There are a few reasons we chose this point in the user journey:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The user has just signed in, they&#39;re aware of their credentials and second
step.&lt;/li&gt;
&lt;li&gt;We are confident that the user is on their device–they just signed in, so it&#39;s
unlikely they walked away or put their device down.&lt;/li&gt;
&lt;li&gt;Statistically, signing in isn&#39;t always successful the first time–so a message
around making it easier next time has tangible value.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;positioning-passkeys-as-an-alternative-to-passwords-and-not-yet-a-replacement&quot;&gt;Positioning passkeys as an alternative to passwords and not yet a replacement &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#positioning-passkeys-as-an-alternative-to-passwords-and-not-yet-a-replacement&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Initial user research shows that many users still want passwords as a backup
sign-in method. And not all users will have the &lt;a href=&quot;https://support.google.com/accounts/answer/13548313?hl=en&amp;amp;sjid=17510595681178318776-NA&quot; rel=&quot;noopener&quot;&gt;technology necessary to adopt
passkeys&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;So while the industry, Google included, is moving towards a &amp;quot;passwordless
future&amp;quot;, Google is intentionally positioning passkeys as a simple and secure
&lt;strong&gt;alternative&lt;/strong&gt; to passwords. Google&#39;s UI focuses on the benefits of passkeys
and avoids language that implies getting rid of passwords.&lt;/p&gt;
&lt;h2 id=&quot;the-creation-moment&quot;&gt;The creation moment &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#the-creation-moment&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When users choose to enroll, they&#39;ll see a browser-specific UI modal that
enables them to create a passkey.&lt;/p&gt;
&lt;p&gt;The passkey itself is shown with the industry-aligned icon and the information
used to create it. This includes the display name (a friendly name for your
passkey, like your user&#39;s real name) and the username (a unique name on your
service–an email address can work great here). When it comes to working with the
passkeys icon, &lt;a href=&quot;https://media.fidoalliance.org/wp-content/uploads/2023/05/FIDO-Alliance-UX-Guidelines-for-Passkey-Creation-and-Sign-ins.pdf&quot; rel=&quot;noopener&quot;&gt;the FIDO alliance recommends using the proven passkeys
icon&lt;/a&gt;–and
encourages making it your own with customizations.&lt;/p&gt;
&lt;p&gt;Passkeys icon is shown consistently across the user journey to create a
familiarity with what the user will see when using or managing the passkey. The
passkey icon is never presented without context or supporting material.&lt;/p&gt;
&lt;figure&gt;
&lt;img alt=&quot;When users create their passkey, they&amp;#x27;ll see this page&quot; decoding=&quot;async&quot; height=&quot;600&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;When users create their passkey, they&#39;ll see this page.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Above, we outlined how the user and the platform work together to create a
passkey. When the user clicks &amp;quot;Continue&amp;quot; they&#39;ll be presented with a unique UI
depending on the platform.&lt;/p&gt;
&lt;p&gt;With that in mind, we learned through internal research that a confirmation
screen once the passkey is created can be very helpful in terms of comprehension
and closure at this step of the process.&lt;/p&gt;
&lt;figure&gt;
&lt;img alt=&quot;Once the passkey has been created, users will see this page&quot; decoding=&quot;async&quot; height=&quot;600&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/sNqODRG8qqaGQc8ygbjO.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;Once the passkey has been created, users will see this page.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The confirmation screen is a deliberate ‘pause&#39; to bookend the journey of
introducing a user to passkeys and going through the process of creating one of
their own. As it is (likely) the first time a user has engaged with passkeys,
this page aims to provide clear closure to the journey. We chose a standalone
page after trying some other tools like smaller notifications, and even a
post-creation email–simply to provide a structured, stable end to end
experience.&lt;/p&gt;
&lt;p&gt;Once the user clicks &amp;quot;Continue&amp;quot; here, they&#39;re brought to their destination.&lt;/p&gt;
&lt;figure&gt;
&lt;img alt=&quot;When users sign in again, they&amp;#x27;ll likely see this page&quot; decoding=&quot;async&quot; height=&quot;600&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/u7ugXsWYbGcylhCWZ21M.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;When users sign in again, they&#39;ll likely see this page.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;signing-in&quot;&gt;Signing in &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#signing-in&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Next time a user tries to sign in, they&#39;ll be greeted with this page. This uses
the same layout, illustration, and primary call to action to evoke the first
‘creation&#39; experience outlined above. Once the user has made a choice to enroll
in passkeys, this page should feel familiar and they will recognize what steps
they need to take to sign in.&lt;/p&gt;
&lt;figure&gt;
&lt;img alt=&quot;The user will use this WebAuthn UI to sign in&quot; decoding=&quot;async&quot; height=&quot;600&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/kPbCZqaBDx5AFTZyi54a.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;The user will use this WebAuthn UI to sign in.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The same principle of familiarity applies here. Intentionally, this uses the
same iconography, illustration, layout and text. The text within the WebAuthn UI
is kept brief, broad, and re-usable–so everyone can use this both for
authentication and reauthentication.&lt;/p&gt;
&lt;h2 id=&quot;passkeys-management&quot;&gt;Passkeys management &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#passkeys-management&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Introducing a whole new page within the Google Account settings pages required
careful consideration to ensure a cohesive, intuitive, and consistent user
experience.&lt;/p&gt;
&lt;p&gt;To achieve this, we analyzed the patterns regarding navigation, content,
hierarchy, structure, and established expectations that existed across the
Google Account.&lt;/p&gt;
&lt;figure&gt;
&lt;img alt=&quot;Passkeys management page in the Google Account&quot; decoding=&quot;async&quot; height=&quot;655&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/YLflGBAPWecgtKJLqCJHSzHqe2J2/C0xuS6j8vd98Y17jckE3.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;Passkeys management page in the Google Account.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h3 id=&quot;describe-passkeys-by-ecosystem&quot;&gt;Describe passkeys by ecosystem &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#describe-passkeys-by-ecosystem&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;To create a high level category system that would be logical to understand we
settled on describing passkeys by
&lt;a href=&quot;https://developers.google.com/identity/passkeys/supported-environments&quot; rel=&quot;noopener&quot;&gt;ecosystem&lt;/a&gt;.
This way, a user could recognize where a passkey was created and where it is
used. Each identity provider (Google, Apple, and Microsoft) has a name for their
ecosystem, so we chose to use those (Google Password Manager, iCloud keychain,
and Windows Hello respectively).&lt;/p&gt;
&lt;p&gt;To support this, we added additional metadata, such as when it was created, when
it was last used, and the specific OS that it was used on. In terms of user
management actions, the API only supports renaming, revoking, and creating.&lt;/p&gt;
&lt;p&gt;Renaming allows users to assign personally meaningful names to passkeys, which
could help particular cohorts of users keep track and understand them more
easily.&lt;/p&gt;
&lt;p&gt;Revoking a passkey doesn&#39;t delete it from the user&#39;s personal credential manager
(like Google Password Manager), but renders it unusable until it is set up
again. That&#39;s why we chose a cross, instead of a trash or delete icon, to
represent the action of revoking a passkey.&lt;/p&gt;
&lt;p&gt;When describing the action of adding a passkey to their account, the phrase
&amp;quot;Create passkey&amp;quot; resonated better with users compared to &amp;quot;Add a passkey.&amp;quot; This
is a subtle language choice to distinguish passkeys from tangible, hardware
security keys (though it should be noted that &lt;a href=&quot;https://support.google.com/accounts/answer/13548313?hl=en&amp;amp;sjid=17510595681178318776-NA&quot; rel=&quot;noopener&quot;&gt;passkeys can be stored on some
hardware security
keys&lt;/a&gt;).&lt;/p&gt;
&lt;h3 id=&quot;providing-additional-content&quot;&gt;Providing additional content &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#providing-additional-content&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Internal research showed that using passkeys is a relatively seamless and
familiar experience. However as with any new technology, there are lingering
questions and concerns that will come up for some users.&lt;/p&gt;
&lt;p&gt;How the technology works behind the screen lock, what makes it more secure, and
the most common &amp;quot;what if&amp;quot; scenarios Google came across in testing are addressed
in &lt;a href=&quot;https://support.google.com/accounts/answer/13548313?hl=en&amp;amp;sjid=17510595681178318776-NA&quot; rel=&quot;noopener&quot;&gt;Google&#39;s passkey Help Center
content&lt;/a&gt;.
Having support content ready with launch of passkeys is critical for an easy
transition for users on any site.&lt;/p&gt;
&lt;h3 id=&quot;falling-back-from-passkeys&quot;&gt;Falling back from passkeys &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#falling-back-from-passkeys&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Reverting to the old system is as simple as clicking &amp;quot;try another way&amp;quot; when a
user is asked to authenticate with a passkey. Additionally, exiting the WebAuthn
UI will start users on a path to try their passkey again, or sign into their
Google Account in traditional ways.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/passkey-google-ux/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We are still in the early days of passkeys, so when designing the user
experience keep a few principles in mind:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Introduce passkeys when it&#39;s relevant to the user.&lt;/li&gt;
&lt;li&gt;Highlight the benefits of passkeys.&lt;/li&gt;
&lt;li&gt;Use opportunities to build familiarity the concept of passkeys.&lt;/li&gt;
&lt;li&gt;Position passkeys as an alternative to passwords and not a replacement.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The choices we made for passkeys for Google Accounts were informed by best
practices and internal research and we&#39;ll continue to evolve the user experience
as we gain new insights from users in the real world.&lt;/p&gt;
        </content>
        <author>
            <name>
                Mitchell Galavan
            </name>
        </author>
        <author>
            <name>
                Court Jacinic
            </name>
        </author>
        <author>
            <name>
                Silvia Convento
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Pyramid or Crab? Find a testing strategy that fits
        </title>
        <link href="https://web.dev/ta-strategies/"/>
        <updated>
            2023-07-26T00:00:00Z
        </updated>
        <id>
            https://web.dev/ta-strategies/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Welcome back! In the &lt;a href=&quot;https://web.dev/ta-types&quot;&gt;last article&lt;/a&gt;, we laid down lots of groundwork about how to approach the different testing types and what they contain, and we clarified the testing type definitions. Remember our little meme image from before? We wondered how all those testing types we learned about could work together.&lt;/p&gt;
&lt;img alt=&quot;A cupboard with two drawers you can open at the same time.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/n3LPuwApNcCRT5S3zaoq.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;So next up, we will learn exactly that. This article will give an introduction on how to combine these testing types into a reasonable strategy that matches your project.&lt;/p&gt;
&lt;p&gt;I want to share some recommendations on which testing strategies might fit your project, depending on its size. Let’s begin with a short overview—an attempt to generalize based on my own experience, so it can naturally deviate from your use case. I hope this is a good starting point:&lt;/p&gt;
&lt;div class=&quot;table-wrapper scrollbar&quot;&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          Application size
        &lt;/th&gt;
        &lt;th&gt;
          Team composition
        &lt;/th&gt;
        &lt;th&gt;
          Reliance on manual testing
        &lt;/th&gt;
        &lt;th&gt;
          Testing strategy
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Small&lt;/td&gt;
        &lt;td&gt;Developers only&lt;/td&gt;
        &lt;td&gt;High&lt;/td&gt;
        &lt;td&gt;Testing Ice Cone&lt;br /&gt;Testing Crab&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Small&lt;/td&gt;
        &lt;td&gt;High&lt;/td&gt;
        &lt;td&gt;Developers &amp; QA engineers&lt;/td&gt;
        &lt;td&gt;Testing Ice Cone&lt;br /&gt;Testing Crab&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Small&lt;/td&gt;
        &lt;td&gt;Developers only&lt;/td&gt;
        &lt;td&gt;Low&lt;/td&gt;
        &lt;td&gt;Test Pyramid&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Large&lt;/td&gt;
        &lt;td&gt;Developers only&lt;/td&gt;
        &lt;td&gt;High&lt;/td&gt;
        &lt;td&gt;Testing Trophy&lt;br /&gt;Testing Diamond&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Large&lt;/td&gt;
        &lt;td&gt;Developers &amp; QA engineers&lt;/td&gt;
        &lt;td&gt;High&lt;/td&gt;
        &lt;td&gt;Testing Trophy&lt;br /&gt;Testing Crab&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Large&lt;/td&gt;
        &lt;td&gt;Developers only&lt;/td&gt;
        &lt;td&gt;Low&lt;/td&gt;
        &lt;td&gt;Testing Trophy&lt;br /&gt;Testing Honeycomb&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;How did I come to the conclusions pictured in this table? What are the testing strategies mentioned? Let’s take a closer look to discover the answers.&lt;/p&gt;
&lt;h2 id=&quot;determine-testing-goals-what-do-we-want-to-achieve-with-these-tests&quot;&gt;Determine testing goals: What do we want to achieve with these tests? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#determine-testing-goals-what-do-we-want-to-achieve-with-these-tests&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Before we can start building a good strategy, we need to find out where we want to go. What is our goal with testing? When do we consider that our application has been sufficiently tested?&lt;/p&gt;
&lt;p&gt;Achieving high test coverage is often viewed as the ultimate goal for developers when it comes to testing. But is it always the best approach? In my opinion, there&#39;s a more critical factor to consider when deciding a testing strategy—serving our users’ needs.&lt;/p&gt;
&lt;p&gt;As well as our role as developers, we all also use many other applications and devices. In this respect, we are the users and rely on all these systems to “just work”—that means we rely on countless developers to do their best to make their applications work. To turn this back around, as developers, we want to live up to this trust. So our first goal—whatever the project size—should always be to ship working software and thus serve our users. This means we must focus on our users&#39; needs, especially in our tests. &lt;a href=&quot;https://kentcdodds.com/about&quot; rel=&quot;noopener&quot;&gt;Kent C. Dodds&lt;/a&gt; sums it up very well in &lt;a href=&quot;https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests&quot; rel=&quot;noopener&quot;&gt;his post&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;
    The more your tests resemble the way your software is used, the more confidence they can give you.
  &lt;/p&gt;
  &lt;cite&gt;
    by Kent C. Dodds
  &lt;/cite&gt;
&lt;/blockquote&gt;
&lt;p&gt;And I think this nails it. He describes it as becoming more confident in our tests. The closer we get to the users via choosing the corresponding testing type, the more confident we can trust our tests to have valid results. Or in other words, the higher up we climb the pyramid, the more confident we get. But wait, what is the pyramid? Don’t worry: we’ll cover this next.&lt;/p&gt;
&lt;h2 id=&quot;determining-test-strategies-how-to-choose-a-testing-strategy&quot;&gt;Determining test strategies: How to choose a testing strategy &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#determining-test-strategies-how-to-choose-a-testing-strategy&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Remember, as a first step, we want to determine which parts of our requirements need to be insured to be fulfilled, and how we want to achieve that. The goal behind that is to find out which types of testing to use, and then, with which granularity of testing we can reach the most confidence while also keeping an efficient cost structure. Many people approach this topic by using metaphors. Let’s take a deeper look at the most common ones, starting with the well-known classic.&lt;/p&gt;
&lt;img alt=&quot;A lot of shapes like pyramid, diamonds, ice cone, honeycombs and a trophy; representing test strategies.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/btUEUtD2bmqNwX2DcH4j.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;h3 id=&quot;the-classic-the-test-pyramid&quot;&gt;The classic: The test pyramid &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#the-classic-the-test-pyramid&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;You will probably encounter the test automation pyramid as your initial metaphor as soon as you look up testing strategies. Mike Cohn introduced this concept in his book &lt;em&gt;Succeeding with Agile&lt;/em&gt;. Later, the concept was expanded upon as the &amp;quot;&lt;a href=&quot;https://martinfowler.com/articles/practical-test-pyramid.html&quot; rel=&quot;noopener&quot;&gt;Practical Test Pyramid&lt;/a&gt;&amp;quot; by Martin Fowler. The visual representation of this pyramid is as follows:&lt;/p&gt;
&lt;img alt=&quot;The test pyramid.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iEtr9phjNjENxQlFfJYv.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;As shown in this drawing, the test pyramid consists of three layers:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Unit&lt;/strong&gt;. You find these tests on the base layer of the pyramid because they are fast execution and simple to maintain. This is due to their isolation and targeting of the most minor units. See this as an example of a typical &lt;a href=&quot;https://github.com/leichteckig/phpmagazin-jest-example/blob/main/product.test.js&quot; rel=&quot;noopener&quot;&gt;unit test&lt;/a&gt; testing a very small product.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Integration&lt;/strong&gt;. This is in the middle of the pyramid, as it is still acceptable when it comes to speed in execution but brings you the confidence of being closer to the user than unit tests can be. An example of an integration type test is an &lt;a href=&quot;https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/api/api-users.spec.ts&quot; rel=&quot;noopener&quot;&gt;API test&lt;/a&gt;; &lt;a href=&quot;https://github.com/leichteckig/nuxt-leichteckig/blob/main/test/components/MediaGrid.spec.js&quot; rel=&quot;noopener&quot;&gt;component tests&lt;/a&gt; can also be considered this type.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;E2E tests&lt;/strong&gt; (also called &lt;strong&gt;UI tests&lt;/strong&gt;). As we have seen, these tests simulate a genuine user and their interaction. These tests need more time to be executed and thus are more expensive—being placed at the top of the pyramid.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;confidence-versus-resources&quot;&gt;Confidence versus resources &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#confidence-versus-resources&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;As briefly covered already, the order of the layers is no coincidence. They show the priorities and the corresponding costs of the layers—thus giving you a clear picture of how many tests you should write from each layer. We have already seen this in the definition of the testing types.&lt;/p&gt;
&lt;p&gt;As E2E tests, for example, are closest to our users, they give us the highest confidence that our application is working as intended. However, due to the complete application stack being present, and the computer simulation of a real user, they are potentially also the most expensive. So the confidence is in direct competition with the resources we need to execute the tests.&lt;/p&gt;
&lt;img alt=&quot;The test pyramid with arrows showing the direction of confidence and resources required for different testing types.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DT57buwCB4uDyJp61Rzb.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The pyramid tries to solve this competition by advising you to focus more on unit tests and strictly prioritize the cases covered by E2E tests: for example, your most crucial user journeys or the most vulnerable to defects. As Martin Fowler emphasizes, the two most essential points in Cohn’s pyramid are as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Write tests with different granularity.&lt;/li&gt;
&lt;li&gt;The more high level you get, the fewer tests you should have.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;pyramid-evolved-adaptations-of-the-test-pyramids&quot;&gt;Pyramid evolved! Adaptations of the test pyramids &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#pyramid-evolved-adaptations-of-the-test-pyramids&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;For some years, discussions have revolved around the pyramid. The pyramid seems to oversimplify testing strategies, leaves out a lot of testing types, and no longer fits all real-world projects. Consequently, it may mislead us. So, has the pyramid fallen out of shape?
To answer this question, let’s take a look at the following &lt;a href=&quot;https://twitter.com/rauchg/status/807626710350839808&quot; rel=&quot;noopener&quot;&gt;quote&lt;/a&gt; from &lt;a href=&quot;https://rauchg.com/about&quot; rel=&quot;noopener&quot;&gt;Guillermo Rauch&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;
    Write tests. Not too many. Mostly integration.
  &lt;/p&gt;
  &lt;cite&gt;
    by Guillermo Rauch
  &lt;/cite&gt;
&lt;/blockquote&gt;
&lt;p&gt;It’s one of the most commonly cited quotes on this subject, so let’s break it down:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Write tests: Not only because it builds trust, but also because it saves time in maintenance.&lt;/li&gt;
&lt;li&gt;Not too many: 100% coverage is not always good, because then your testing is unprioritized and there will be a lot of maintenance.&lt;/li&gt;
&lt;li&gt;Mostly integration: Here again the emphasis is on integration tests: they have the most business value by giving you a daily high confidence level while maintaining a reasonable execution time.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This leads us to overthink the testing pyramid and shift our focus to integration testing. Over the last few years, many adaptations have been raised, so let’s look at the most common ones.&lt;/p&gt;
&lt;h3 id=&quot;test-diamond&quot;&gt;Test diamond &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#test-diamond&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The first adaptation I want to showcase tackles the over-emphasis on unit testing, as seen in the test pyramid. Imagine this situation: you have reached 100% coverage on unit tests. However, in the next refactoring, many of these unit tests will need to be updated, and you might be tempted to skip them. So they erode.&lt;/p&gt;
&lt;p&gt;As a result, and together with the higher priority on integration testing, the following shape may arise:&lt;/p&gt;
&lt;img alt=&quot;The test diamond.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vSFAkoSqbL4p984xf48k.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The shape of the test pyramid has evolved more into a diamond. You can see the three layers from before, but with a different size and—in the case of the unit layer—with a slightly different shape:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Unit: Write unit tests the way we defined them before. However, we’ll consider that they erode, so we’ll prioritize and cover the most critical cases here.&lt;/li&gt;
&lt;li&gt;Integration: The integration tests we know, testing the combination of single units.&lt;/li&gt;
&lt;li&gt;E2E: This layer handles the UI tests similar to the test pyramid. Take care to only write E2E tests for the most critical test cases.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;testing-honeycomb&quot;&gt;Testing honeycomb &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#testing-honeycomb&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;There is another adaptation similar to the test diamond but further specialized for microservices-based software systems. The testing honeycomb is another visual metaphor for the granularity/scope of and amounts of tests to write for a microservices-based software system. It&#39;s an adaptation of the traditional test pyramid specifically for &lt;a href=&quot;https://notes.paulswail.com/public/Testing+microservices&quot; rel=&quot;noopener&quot;&gt;testing microservices&lt;/a&gt;, introduced by &lt;a href=&quot;https://engineering.atspotify.com/2018/01/testing-of-microservices/&quot; rel=&quot;noopener&quot;&gt;Spotify&lt;/a&gt;. Due to their small size, the most considerable complexity in a microservice is not within the service itself, but in how it interacts with others. So a testing strategy for a microservice should primarily focus on integration tests.&lt;/p&gt;
&lt;img alt=&quot;The testing honeycomb.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mrM4QK1kEZgvRvltyiMn.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This way, a shape is formed that reminds us of a honeycomb, thus the name. In it, the following layers are used:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Integrated tests: The article by Spotify uses a quote from &lt;a href=&quot;https://blog.thecodewhisperer.com/permalink/integrated-tests-are-a-scam&quot; rel=&quot;noopener&quot;&gt;J. B. Rainsberger&lt;/a&gt; to define this layer: “A test that will pass or fail based on the correctness of another system.” This means these tests have external dependencies that we need to consider, and vice versa—we could break the tests of other systems. Similar to E2E tests in other metaphors, we should use them carefully for the most essential cases only.&lt;/li&gt;
&lt;li&gt;Integration tests: Similar to other adaptations, we should focus on this layer—containing tests to verify the correctness of our service in a more isolated fashion, but still in combination with other services. That means the tests will include some other systems too: focusing on the interaction points, for example, via API tests.&lt;/li&gt;
&lt;li&gt;Tests on implementation details: These tests can resemble unit tests—this means on parts of the code that are naturally isolated and thus have their own internal complexity.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;If you want to find out more about this testing strategy, I advise you to read the post &lt;a href=&quot;https://martinfowler.com/articles/2021-test-shapes.html&quot; rel=&quot;noopener&quot;&gt;comparing the test pyramid to the honeycomb&lt;/a&gt; by Martin Fowler, alongside the &lt;a href=&quot;https://engineering.atspotify.com/2018/01/testing-of-microservices/&quot; rel=&quot;noopener&quot;&gt;original article from Spotify&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id=&quot;testing-trophy&quot;&gt;Testing trophy &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#testing-trophy&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Alright, we already see a particular focus on integration tests. However, another type we mentioned in the previous article is not testing in theory but is still an important aspect we should consider in a testing strategy. I’m talking about static analysis, which is missing in the test pyramid and in most of the adaptations we have seen until now. There’s one adaptation, though, which takes static analysis into account while maintaining the focus on integration tests. It’s called the testing trophy, originating from the earlier quote by Guillermo Rauch and developed by Kent C. Dodds:&lt;/p&gt;
&lt;img alt=&quot;The testing trophy.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ULNWIc7KY4jVjxPW5CdX.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The testing trophy is a metaphor depicting the granularity of tests in a slightly different way, distributing your tests into the following four testing types:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Static analysis&lt;/strong&gt; plays a vital role in this metaphor. This way, you will catch typos, type errors, and other bugs by merely running the debugging steps already outlined.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Unit tests&lt;/strong&gt; should ensure that your smallest unit is appropriately tested, but the testing trophy won’t emphasize them to the same extent as the test pyramid.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Integration&lt;/strong&gt; is the main focus as it balances out the cost and the higher confidence in the best way, as with other adaptations.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;UI tests&lt;/strong&gt;, including E2E and visual tests, are at the top of the testing trophy, similar to their role in the test pyramid.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;To read more about the testing trophy, I can highly recommend the &lt;a href=&quot;https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests&quot; rel=&quot;noopener&quot;&gt;blog post by Kent C. Dodds&lt;/a&gt; on this subject.&lt;/p&gt;
&lt;h2 id=&quot;some-more-ui-focused-approaches&quot;&gt;Some more UI-focused approaches &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#some-more-ui-focused-approaches&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;That’s all well and good. However, no matter if we call our strategy a “pyramid”, “honeycomb,” or “diamond”, there’s still something missing. While test automation is valuable, it&#39;s important to remember that manual testing is still essential. Automated testing should alleviate routine tasks, freeing testers to concentrate on crucial areas. Rather than replace manual testing, automation should complement it. Is there a way to integrate manual testing with automation for optimal results?&lt;/p&gt;
&lt;h3 id=&quot;testing-ice-cone-and-testing-crab&quot;&gt;Testing ice cone and testing crab &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#testing-ice-cone-and-testing-crab&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;There are indeed two adaptations of the testing pyramid that focus more on these UI-focused ways of testing. Both share the advantage of high confidence, but naturally—due to the slower test execution—they are more costly.&lt;/p&gt;
&lt;p&gt;The first one—the test ice cone, also known as the testing pizza if you leave out the manual testing step—looks like the pyramid in reverse.&lt;/p&gt;
&lt;img alt=&quot;The testing ice cone.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QdBKM36jvq93jrERrSCP.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;As a result, the following layers will be showcased with the following granularity: the greater focus is on manual or UI testing, with the least focus on unit testing. It often happens with projects where the developers started work with only a few thoughts on testing. However, this testing strategy is considered an anti-pattern and rightfully so—because of its high costs in resources and manual work.&lt;/p&gt;
&lt;p&gt;Similar to the test ice cone, but with a more drawn-out focus on E2E and visual testing, is the testing crab:&lt;/p&gt;
&lt;img alt=&quot;The testing crab.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uY4XiFIldA1JySM9ZbHD.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This testing strategy includes one more aspect: it should verify that our application functions and looks good. So this is the first testing strategy that highlights the importance of &lt;a href=&quot;https://docs.cypress.io/guides/tooling/visual-testing&quot; rel=&quot;noopener&quot;&gt;visual testing&lt;/a&gt;, which we also briefly defined in the last article. Integration testing, divided into component and API testing, moves further into the background, and unit testing plays an even more minor role here. You can find further details on this testing strategy in this &lt;a href=&quot;https://changelog.com/posts/the-testing-pyramid-should-look-more-like-a-crab&quot; rel=&quot;noopener&quot;&gt;article on the testing crab&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;While being more costly, these two testing strategies have their place: for example, in smaller projects where fewer tests are needed, or less complexity needs to be covered. In this case, a full-blown testing strategy focusing on integration testing might be over-engineered.&lt;/p&gt;
&lt;h2 id=&quot;practical-advice-lets-strategize&quot;&gt;Practical advice: Let’s strategize! &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-strategies/#practical-advice-lets-strategize&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;So we have now learned about the most common testing strategies. We started with the classic—the test pyramid—and got to know its many adaptations. Now we need to evaluate them for our product and decide which might be the best for our use case. As I briefly mentioned at the beginning of this article, the answer to this question should start with everyone’s favorite response (although it’s no less accurate)—&lt;strong&gt;It depends&lt;/strong&gt;.&lt;/p&gt;
&lt;img alt=&quot;It depends.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/u1yCzUoUXkXAHUCgyrz2.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;Choosing the most suitable testing strategy from the ones described—and even the ones we have left out—depends on your application. It needs to suit your architecture, your requirements, and last but not least, your users and their requirements. And this might differ from application to application. That’s totally fine: remember—our most important goal is to serve our users, not a textbook definition.&lt;/p&gt;
&lt;p&gt;In reality, you can see this very clearly, as teams sometimes need to stop sticking to the textbook definitions of these strategies. Tests themselves are sometimes really difficult to separate out and define individually. Even Martin Fowler himself emphasizes the &lt;a href=&quot;https://martinfowler.com/articles/2021-test-shapes.html&quot; rel=&quot;noopener&quot;&gt;positive aspect of differing definitions&lt;/a&gt;, such as in the case of unit tests. As &lt;a href=&quot;https://justin.searls.co/about/&quot; rel=&quot;noopener&quot;&gt;Justin Searls&lt;/a&gt; states correctly in &lt;a href=&quot;https://twitter.com/searls/status/1393385209089990659&quot; rel=&quot;noopener&quot;&gt;his tweet&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;
    […] write expressive tests that establish clear boundaries, run quickly &amp; reliably, and only fail for useful reasons.
  &lt;/p&gt;
  &lt;cite&gt;
    by Justin Searls
  &lt;/cite&gt;
&lt;/blockquote&gt;
&lt;p&gt;Focus on the tests that report actual errors which a user might encounter, and don’t get distracted from your goal. Tests should be designed to benefit the user, not just provide 100% coverage or to debate which percentage of which testing type to write.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; This blog post was written by Ramona, with input and review from &lt;a href=&quot;https://web.dev/authors/jecelynyeen/&quot;&gt;Jecelyn Yeen&lt;/a&gt; (&lt;a href=&quot;https://twitter.com/jecfish&quot;&gt;Twitter&lt;/a&gt;), and &lt;a href=&quot;https://www.linkedin.com/in/michael-hablich-2128646/&quot;&gt;Michael Hablich&lt;/a&gt; (&lt;a href=&quot;https://twitter.com/MHablich&quot;&gt;Twitter&lt;/a&gt;). Special thanks to &lt;a href=&quot;https://www.linkedin.com/in/sofia-yemelianova/&quot;&gt;Sofia Emelianova&lt;/a&gt; for supporting the publication process. &lt;/div&gt;&lt;/aside&gt;
        </content>
        <author>
            <name>
                Ramona Schwering
            </name>
        </author>
    </entry>
    <entry>
        <title>
            How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
        </title>
        <link href="https://web.dev/yahoo-japan-news-bfcache/"/>
        <updated>
            2023-07-25T00:00:00Z
        </updated>
        <id>
            https://web.dev/yahoo-japan-news-bfcache/
        </id>
        <content type="text/html" mode="escaped">
            &lt;blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://web.dev/bfcache/&quot;&gt;Back/forward cache&lt;/a&gt; (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth navigations.&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;web.dev article on bfcache &lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a &lt;strong&gt;9% increase in ads revenue&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;This case study will explain how Yahoo! JAPAN News removed the blockers for bfcache, and how bfcache drastically improved the user experience.&lt;/p&gt;
&lt;h2 id=&quot;removing-blockers-for-bfcache&quot;&gt;Removing blockers for bfcache &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/yahoo-japan-news-bfcache/#removing-blockers-for-bfcache&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;bfcache has been available since Chrome 86, and is also available on all modern browsers. However, taking full advantage of bfcache requires removing potential blockers on one&#39;s website. Some major blockers that Yahoo! JAPAN News faced were:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Use of &lt;code&gt;unload&lt;/code&gt; handlers&lt;/li&gt;
&lt;li&gt;Use of the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#no-store&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;no-store&lt;/code&gt; directive&lt;/a&gt; on &lt;code&gt;Cache-control&lt;/code&gt; headers&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;You can check what major blockers there are for your website by going to &lt;strong&gt;Chrome Dev Tools &amp;gt; Applications &amp;gt; Back/forward Cache&lt;/strong&gt; (&lt;a href=&quot;https://web.dev/bfcache/#test-to-ensure-your-pages-are-cacheable&quot;&gt;more details&lt;/a&gt;), or by using the &lt;a href=&quot;https://developer.chrome.com/docs/web-platform/bfcache-notrestoredreasons/&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;notRestoredReasons&lt;/code&gt; API&lt;/a&gt; to get a more comprehensive view of blockers based on actual usage in the field.&lt;/p&gt;
&lt;p&gt;Here&#39;s how Yahoo! JAPAN News has removed their blockers:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Unload Handlers:&lt;/strong&gt; Use the &lt;code&gt;pagehide&lt;/code&gt; event instead of &lt;code&gt;unload&lt;/code&gt; event, as the &lt;code&gt;unload&lt;/code&gt; event is &lt;a href=&quot;https://web.dev/bfcache/#never-use-the-unload-event&quot;&gt;very unreliable&lt;/a&gt;. Also, &lt;code&gt;permission-policy: unload&lt;/code&gt; was &lt;a href=&quot;https://chromestatus.com/feature/5579556305502208&quot; rel=&quot;noopener&quot;&gt;launched in Chrome 115&lt;/a&gt; so that the websites can reliably remove &lt;code&gt;unload&lt;/code&gt; handlers for specific origins. Chrome is also planning to &lt;a href=&quot;https://github.com/fergald/docs/blob/master/explainers/permissions-policy-deprecate-unload.md#logistics-of-deprecation&quot; rel=&quot;noopener&quot;&gt;gradually deprecate &lt;code&gt;unload&lt;/code&gt; handlers&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;Cache-control: no-store&lt;/code&gt;&lt;/strong&gt; (or CCNS for short): Changing the &lt;code&gt;Cache-control&lt;/code&gt; header from &lt;strong&gt;&lt;code&gt;no-store&lt;/code&gt;&lt;/strong&gt; to &lt;strong&gt;&lt;code&gt;no-cache&lt;/code&gt;&lt;/strong&gt; can enable bfcache. Chrome is also planning to start &lt;a href=&quot;https://chromestatus.com/feature/6705326844805120&quot; rel=&quot;noopener&quot;&gt;caching for bfcache even with a &lt;code&gt;no-store&lt;/code&gt; header in certain circumstances&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;CCNS is intended for pages that should never be cached under any circumstances. This comes with the caveat that any page with CCNS will not be able to benefit from any caching technology, including CDN edge servers and local caches.&lt;/p&gt;
&lt;p&gt;If you have a CCNS header, this is a great opportunity to discuss what the right &lt;code&gt;Cache-control&lt;/code&gt; strategies are for your website. Here are the main differences between &lt;code&gt;no-store&lt;/code&gt; and &lt;code&gt;no-cache&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;table-wrapper scrollbar&quot;&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;code&gt;Cache-control: &lt;strong&gt;no-store&lt;/strong&gt;&lt;/code&gt;&lt;/th&gt;
        &lt;th&gt;&lt;code&gt;Cache-control: &lt;strong&gt;no-cache&lt;/strong&gt;&lt;/code&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;ul&gt;
            &lt;li&gt;The response is not allowed to be stored in caches.&lt;/li&gt;
            &lt;li&gt;Consequently, the response is fetched in full on every request.&lt;/li&gt;
            &lt;li&gt;This should be used for private responses.&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;ul&gt;
            &lt;li&gt;The response is allowed to be stored in caches as long as it&#39;s revalidated with the server before each use.&lt;/li&gt;
            &lt;li&gt;This should be public responses you want revalidated every time (for example, the home page of a news website - though even then a very short caching time can improve performance and offload work from the main servers).&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;If you are interested in learning more about &lt;code&gt;Cache-control&lt;/code&gt; options, &lt;a href=&quot;https://web.dev/http-cache/?hl=en#flowchart&quot;&gt;this flowchart&lt;/a&gt; is a great help.&lt;/p&gt;
&lt;h2 id=&quot;impact-of-bfcache-in-numbers&quot;&gt;Impact of bfcache in numbers &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/yahoo-japan-news-bfcache/#impact-of-bfcache-in-numbers&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To measure the impact of bfcache, Yahoo! JAPAN News conducted an A/B test for 2 weeks, where they served a version of their pages with their bfcache fixes to one group, and a version with pages ineligible for bfcache to another. They picked the URL paths with a significant amount of traffic so that the test could achieve meaningful results. There were no other visual or functional difference between the 2 versions.&lt;/p&gt;
&lt;p&gt;Here&#39;s a video comparing the website with bfcache and without bfcache. You can see that the website with bfcache enabled loads significantly faster during a back or forward navigation.&lt;/p&gt;
&lt;style&gt;
  .bfcache-video video {
    height: auto;
  }
&lt;/style&gt;
&lt;figure class=&quot;bfcache-video&quot;&gt;
  &lt;video autoplay=&quot;&quot; controls=&quot;&quot; height=&quot;800&quot; loop=&quot;&quot; muted=&quot;&quot; width=&quot;800&quot; style=&quot;--vid-width: 800; --vid-height: 800&quot;&gt;      &lt;source src=&quot;https://storage.googleapis.com/web-dev-uploads/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/2qqiTs9XuedWvtjfKuMu.mp4&quot; type=&quot;video/mp4&quot; /&gt;    &lt;/video&gt;
&lt;/figure&gt;
&lt;p&gt;What&#39;s really promising is that the group with bfcache enabled had a &lt;strong&gt;significant increase in page views and ads revenue&lt;/strong&gt;, especially on mobile devices.&lt;/p&gt;
&lt;p&gt;Here are details about the impact observed by Yahoo! JAPAN News with their bfcache A/B test. (Further information can be found in &lt;a href=&quot;https://techblog.yahoo.co.jp/entry/2023072430429932/&quot; rel=&quot;noopener&quot;&gt;their case study article&lt;/a&gt;).&lt;/p&gt;
&lt;div class=&quot;table-wrapper scrollbar&quot;&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;/thead&gt;&lt;td&gt;
        &lt;strong&gt;Metrics&lt;/strong&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;strong&gt;Uplift % (mobile)&lt;/strong&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;strong&gt;Uplift % (desktop)&lt;/strong&gt;
      &lt;/td&gt;
    
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;bfcache hit rate&lt;/td&gt;
        &lt;td&gt;
          &lt;strong&gt;+54.03 points&lt;/strong&gt; (0.04% → 54.07%)
        &lt;/td&gt;
        &lt;td&gt;+47.28 points (0.02% → 47.30%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Page views&lt;/td&gt;
        &lt;td&gt;
          &lt;strong&gt;+2.26%&lt;/strong&gt;
        &lt;/td&gt;
        &lt;td&gt;+0.65%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Ads revenue&lt;/td&gt;
        &lt;td&gt;
          &lt;strong&gt;+9.0%&lt;/strong&gt;
        &lt;/td&gt;
        &lt;td&gt;+0.6%&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;When back/forward navigations between pages become instantaneous with bfcache, users tend to stay on pages longer, thus increasing ad views, leading to an increase of ad revenue.&lt;/p&gt;
&lt;h2 id=&quot;bfcache-enhances-seamless-user-experience-on-the-website&quot;&gt;bfcache enhances seamless user experience on the website &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/yahoo-japan-news-bfcache/#bfcache-enhances-seamless-user-experience-on-the-website&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When pages load instantly, &lt;strong&gt;navigations feel more seamless.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;In Yahoo! JAPAN News, one of the major user journey is as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Go to the article list&lt;/li&gt;
&lt;li&gt;Click on one article to read&lt;/li&gt;
&lt;li&gt;Go back to the article list&lt;/li&gt;
&lt;li&gt;Click on another article to read&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Before bfcache, when users finished reading an article (step 2), they had to wait for the article list page to load again. This could be a friction factor for users who just want to go back to the article list to pick out another article to read.&lt;/p&gt;
&lt;p&gt;Another source of friction during backward navigation was the scroll position. In practice, the browser tries to restore the scroll position when a backward navigation happens. However, because of dynamically-added ads or other layout changes, the scroll position often gets incorrectly restored, which could cause users to lose their bearings or even leave the page. This is never an issue when a backward navigation is powered by bfcache: the scroll position is immediately and correctly restored.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Two filmstrips of a backward navigation from an article to the article listing page. The top is a filmstrip of the process being handled with bfcache which takes 0.3 seconds, whereas the bottom is of the same process being handled without bfcache, which takes 3.3 seconds.&quot; decoding=&quot;async&quot; height=&quot;343&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WlJn1GZnDrSLpEPPHWAn.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;Now with bfcache, the friction in the user journey is gone—users can instantly navigate back to the article list page and pick another article to read without having to wait for the article list page to load.&lt;/p&gt;
&lt;p&gt;The same thing happens when users browse from one article directly to another and back:&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;An animated image showing the backward navigation flow from an article to the article listing page with and without bfcache. With bfcache, the backward navigation is not only faster, but the scroll position is accurately maintained. Without bfcache, these guarantees cannot be made.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pk7QmKzBA49ADdcJGE7q.gif?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;In a nutshell, the benefits of using bfcache for Yahoo! JAPAN News includes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Increased pageviews: Users were more likely to navigate within the website when pages were cached with bfcache.&lt;/li&gt;
&lt;li&gt;Increased revenue: As a result of increased pageviews per session, ads impression increased, which resulted in a 9% increase in revenue on mobile compared with the test group without bfcache.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/yahoo-japan-news-bfcache/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In short, bfcache not only makes your website instant, but can also reduce friction in overall user experience and increase engagement within your website.&lt;/p&gt;
&lt;p&gt;The Chrome team is continually looking at bfcache blockers—especially the two reasons listed in this article as they are common reasons bfcache is not used. In the future, these may not prevent bfcache usage, but there&#39;s no need to wait until then. You can benefit from bfcache by looking at your bfcache blockers and avoiding these common, and other less common, patterns.&lt;/p&gt;
        </content>
        <author>
            <name>
                Yuriko Hirota
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Three common types of test automation
        </title>
        <link href="https://web.dev/ta-types/"/>
        <updated>
            2023-07-12T00:00:00Z
        </updated>
        <id>
            https://web.dev/ta-types/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;We&#39;ve all been there: what is a recurring coding meme that happens all too often in real life?
&lt;img alt=&quot;A cupboard with two drawers you cannot open at the same time.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yl1OSGuWVIOsgLO6odFZ.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;&lt;/p&gt;
&lt;p&gt;This meme sums it up quite nicely: each drawer works perfectly well individually, but in combination with the other drawer, they block each other and fail to function. You want both drawers to work well with each other and be operable at the same time.&lt;/p&gt;
&lt;img alt=&quot;The same cupboard but with two drawers you can open at the same time.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PY6rfmGkB26vX3qIbsj.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;Apply this to web development: you wrote some tests, maybe even achieved 100% test coverage, but your application still needs to work once other parts fall into place. The units may work well on their own but not in relation to each other. Writing some tests is crucial but it&#39;s only one part of the ideal test setup for your project. As a very first step, you need to determine what parts of the application quality you need to ensure and how you can achieve that.&lt;/p&gt;
&lt;p&gt;Simply put, you need a plan before you start writing the actual test code. To approach the topic of how to test practically, let&#39;s start with a clean slate and answer two basic questions:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How do you want to test?&lt;/li&gt;
&lt;li&gt;What do you want to test?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This article focuses on the general things you need to know to answer the first question. To start from a common ground, let&#39;s first learn what testing modes exist and then focus on the common types of testing. In later articles, we will answer the second question, combine the answers, and find the testing strategy that works best for your project. Let&#39;s go! 🙌&lt;/p&gt;
&lt;h2 id=&quot;start-with-the-basics-general-testing-modes&quot;&gt;Start with the basics: General testing modes &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#start-with-the-basics-general-testing-modes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When answering the question of how to test, the first point to clarify is very abstract. Should you test manually or let a computer take over? It&#39;s important, however, not to fall into binary thinking here.&lt;/p&gt;
&lt;h3 id=&quot;manual-testing-versus-automated-testing&quot;&gt;Manual testing versus automated testing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#manual-testing-versus-automated-testing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you ask quality assurance engineers to define testing, they will probably break it down into two &amp;quot;modes&amp;quot; first:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Manual testing&lt;/strong&gt;. This is a typical testing method conducted by actual people. A quality assurance engineer click through the application, check if it works and, at the same time, try to break it. The most common way is exploratory testing, where the engineer investigates the application using their knowledge of the application against a predefined path or checklist.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Automated testing&lt;/strong&gt;. This is a type of testing conducted by a computer. Quality assurance engineers implement it to automate away repetitive and monotonous tests.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This series of guides will mostly focus on automated testing. However, you shouldn&#39;t focus on only one way of testing. Even if automation saves a lot of time and effort, humans and manual testing will always play a vital role. Rather, test automation should free up people to focus on exploratory testing and creative problem-solving. For example, ensuring the quality of user experiences or protecting the high-risk business logic. In other words, automation has your back. ❤️&lt;/p&gt;
&lt;h3 id=&quot;opaque-box-versus-clear-box&quot;&gt;Opaque box versus clear box &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#opaque-box-versus-clear-box&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;So, you have defined the general modes of testing. However, that&#39;s not enough yet. To plan the testing strategy, there is one more question to answer: should you know how your application works under the hood or is it better to test without this knowledge? Depending on the answer, there are two procedures to choose from for deriving and selecting test cases:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Opaque box testing&lt;/strong&gt; (or black box testing). It is based on analyzing a component or system&#39;s functional or non-functional requirements (specifications) without considering its internal structure.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Clear box testing&lt;/strong&gt; (or white box testing) is a procedure that takes into account the internal structure of said box. In other words, how your application works under the hood.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Both procedures can be applied to manual and automated testing. However, some aspects of general testing modes may focus more on one of the two—we will cover that later. For now, let&#39;s further break down test automation into types.&lt;/p&gt;
&lt;h2 id=&quot;test-automation-types-how-do-you-want-to-test&quot;&gt;Test automation types: How do you want to test? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#test-automation-types-how-do-you-want-to-test&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As you get closer to answering the &amp;quot;how&amp;quot; question, you have already decided to do some manual testing. However, choosing and applying test automation types is a bit more challenging. The types of automation testing are closely related to the metrics you want to create in your projects. So let&#39;s take a closer look at the most important ones.&lt;/p&gt;
&lt;p&gt;As illustrated in the meme mentioned earlier, you have already come across two types: unit testing and integration testing. End-to-end testing is the third important one to consider. But that isn&#39;t all of them still. Let&#39;s take a closer look.&lt;/p&gt;
&lt;h3 id=&quot;unit-testing&quot;&gt;Unit testing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#unit-testing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Unit testing is a testing type in which minor testable parts or units of an application are individually and independently tested for proper operation. These units can vary in scope from functions, classes, or interfaces, to services or complete components. Their primary attributes are execution speed, isolation, and comfortable maintainability. If you want to dive deeper into unit testing, head over to this &lt;a href=&quot;https://en.wikipedia.org/wiki/Unit_testing&quot; rel=&quot;noopener&quot;&gt;guide on unit testing&lt;/a&gt;.&lt;/p&gt;
&lt;img alt=&quot;A simplified depiction of unit testing showing input and output.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kVCbDIZN23OUGwOdpJmm.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; Possible tools include but aren&#39;t limited to &lt;a href=&quot;https://vitest.dev/&quot;&gt;Vitest&lt;/a&gt; and &lt;a href=&quot;https://jestjs.io/&quot;&gt;Jest&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;integration-testing&quot;&gt;Integration testing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#integration-testing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Integration testing focuses on interactions between components or systems. In other words, on how well they work together. Typical examples of integration tests are API or component tests.&lt;/p&gt;
&lt;img alt=&quot;A simplified depiction of integration testing showing how two unit working together.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1dxHGzPGPDgkMqRMj46o.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; The tools you may consider using are often the same as those mentioned in the &lt;a href=&quot;https://web.dev/ta-types/#unit-testing&quot;&gt;unit testing section&lt;/a&gt; and can also include frameworks providing component testing, for example, &lt;a href=&quot;https://webdriver.io/&quot;&gt;WebdriverIO&lt;/a&gt; and &lt;a href=&quot;https://www.cypress.io/&quot;&gt;Cypress&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;end-to-end-testing&quot;&gt;End-to-end testing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#end-to-end-testing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;These tests are often called UI tests and this name explains their function even better. These tests interact with your application&#39;s UI, including the complete application stack, and test your application from one end to the other.&lt;/p&gt;
&lt;img alt=&quot;A simplified depiction of end-to-end testing showing a computer as a robot, looking at a workflow.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9ZWWlop306SoGFP9rbeH.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;They resemble a system test if you refer to the theory of quality assurance. These tests simulate a genuine user and their interactions. End-to-end tests take more runtime because they involve the whole system and more runtime requires more computing power. As a result, this additional effort results in higher maintenance costs.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; The tools you might use for end-to-end testing include but aren&#39;t limited to &lt;a href=&quot;https://webdriver.io/&quot;&gt;WebdriverIO&lt;/a&gt;, &lt;a href=&quot;https://www.cypress.io/&quot;&gt;Cypress&lt;/a&gt;, &lt;a href=&quot;https://playwright.dev/&quot;&gt;Playwright&lt;/a&gt;, &lt;a href=&quot;https://www.selenium.dev/&quot;&gt;Selenium&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h4 id=&quot;visual-ui-testing&quot;&gt;Visual UI testing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#visual-ui-testing&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;An interesting subcategory of UI tests is visual tests. These tests are extended end-to-end tests that provide a means to verify the visible output of an application. Such a test takes a screenshot after a change and another screenshot containing the “status quo” (or golden file), then provides those results to a human reviewer to inspect and check. In other words, it helps find “visual bugs” in the appearance of a page, beyond purely functional bugs and not explicitly written down into assertions.&lt;/p&gt;
&lt;h3 id=&quot;static-analysis&quot;&gt;Static analysis &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#static-analysis&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;There&#39;s one more thing to introduce here: static analysis. It isn&#39;t a testing type in the textbook sense. However, it will be an essential aspect in quality assurance strategies later on. You can imagine it working like a spell check function: it scans your code for more significant defects and syntax errors without running the program, thus detecting code style issues. This simple measure can prevent many bugs. This is a good point to learn about Static Analysis if you want to get to know it in more detail.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; The tools you might use for static analysis include but aren&#39;t limited to &lt;a href=&quot;https://eslint.org/&quot;&gt;Eslint&lt;/a&gt; and &lt;a href=&quot;https://stylelint.io/&quot;&gt;StyleLint&lt;/a&gt;.  &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;testing-in-all-shapes-how-does-this-all-work-together&quot;&gt;Testing in all shapes: How does this all work together? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/ta-types/#testing-in-all-shapes-how-does-this-all-work-together&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While searching for answers to all these questions, you might find a possible solution in some analogies. In the web and testing communities specifically, developers tend to use these analogies to give you an idea of how many tests you should use of which type.&lt;/p&gt;
&lt;img alt=&quot;A lot of shapes like pyramid, diamonds, ice cone, honeycombs and a trophy; representing test strategies.&quot; decoding=&quot;async&quot; height=&quot;450&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/a96diycjrTQ2nVRpVgWH.jpeg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The following five strategies depicted in this image are the most common ones:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Test Pyramid&lt;/li&gt;
&lt;li&gt;Test Diamond&lt;/li&gt;
&lt;li&gt;Test Ice Cone (also known as Test Pizza)&lt;/li&gt;
&lt;li&gt;Test Honeycomb&lt;/li&gt;
&lt;li&gt;Test Trophy&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This is truly a lot of information to process. How should you decide on a matching test strategy based on all this? Don&#39;t worry, we&#39;ve got you covered. In the next article, we will discuss these different strategies in more detail and explain how to choose the best fit for your project. Stay tuned! 🔥&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; This blog post was written by Ramona, with input and review from &lt;a href=&quot;https://web.dev/authors/jecelynyeen/&quot;&gt;Jecelyn Yeen&lt;/a&gt; (&lt;a href=&quot;https://twitter.com/jecfish&quot;&gt;Twitter&lt;/a&gt;), &lt;a href=&quot;https://www.linkedin.com/in/michael-hablich-2128646/&quot;&gt;Michael Hablich&lt;/a&gt; (&lt;a href=&quot;https://twitter.com/MHablich&quot;&gt;Twitter&lt;/a&gt;), and &lt;a href=&quot;https://www.linkedin.com/in/sofia-yemelianova/&quot;&gt;Sofia Emelianova&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
        </content>
        <author>
            <name>
                Ramona Schwering
            </name>
        </author>
    </entry>
    <entry>
        <title>
            New to the web platform in June
        </title>
        <link href="https://web.dev/web-platform-06-2023/"/>
        <updated>
            2023-06-30T00:00:00Z
        </updated>
        <id>
            https://web.dev/web-platform-06-2023/
        </id>
        <content type="text/html" mode="escaped">
            &lt;h2 id=&quot;stable-browser-releases&quot;&gt;Stable browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-06-2023/#stable-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In June 2023 &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/114&quot; rel=&quot;noopener&quot;&gt;Firefox 114&lt;/a&gt; became stable, so it&#39;s a single browser issue this month. Check out the beta browser releases section for details of several features that are about to become interoperable once those betas become stable.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-bad-bg color-state-bad-text&quot;&gt;&lt;p class=&quot;cluster color-state-bad-text&quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Error sign&quot;&gt;   &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Caution&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the &lt;a href=&quot;https://github.com/mdn/browser-compat-data/releases&quot;&gt;browser-compat-data release&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;webtransport-api&quot;&gt;WebTransport API &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-06-2023/#webtransport-api&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 114 includes the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/WebTransport_API&quot; rel=&quot;noopener&quot;&gt;WebTransport API&lt;/a&gt;, a modern update to WebSockets providing support for multiple streams, unidirectional streams, and out-of-order delivery.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 97, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      97
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox preview, Preview&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;preview&quot; title=&quot;Preview&quot; aria-label=&quot;Preview&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 97, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
97
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/WebTransport#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;the-svg-crossorigin-attribute&quot;&gt;The SVG &lt;code&gt;crossorigin&lt;/code&gt; attribute &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-06-2023/#the-svg-crossorigin-attribute&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 114 also includes the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/SVG/Attribute/crossorigin&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;crossorigin&lt;/code&gt; attribute&lt;/a&gt;, on the &lt;code&gt;&amp;lt;image&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;feImage&amp;gt;&lt;/code&gt; elements in SVG, provides support for configuration of the Cross-Origin Resource Sharing (CORS) requests for the element&#39;s fetched data. This works in the same way as the HTML &lt;a href=&quot;https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;crossorigin&lt;/code&gt;&lt;/a&gt; attribute.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h2 id=&quot;beta-browser-releases&quot;&gt;Beta browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-06-2023/#beta-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Beta browser versions give you a preview of things that will be in the next stable version of the browser. It&#39;s a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/115&quot; rel=&quot;noopener&quot;&gt;Firefox 115&lt;/a&gt;, and &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 17&lt;/a&gt; with &lt;a href=&quot;https://developer.chrome.com/blog/chrome-115-beta/&quot; rel=&quot;noopener&quot;&gt;Chrome 115&lt;/a&gt; and &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 16.6&lt;/a&gt; still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.&lt;/p&gt;
&lt;p&gt;Firefox 115 supports the CSS &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/animation-composition&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;animation-composition&lt;/code&gt;&lt;/a&gt; property. Once this version of Firefox becomes stable on July 4th, &lt;code&gt;animation-composition&lt;/code&gt; will be supported in all three major engines. Learn more in the article &lt;a href=&quot;https://developer.chrome.com/articles/css-animation-composition/&quot; rel=&quot;noopener&quot;&gt;Specify how multiple animation effects should composite with animation-composition&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Also reaching interoperability with Firefox 115 are a set of methods for &lt;code&gt;Array&lt;/code&gt; and &lt;code&gt;TypedArray&lt;/code&gt;.  &lt;code&gt;Array.toReversed()&lt;/code&gt;, &lt;code&gt;Array.toSorted()&lt;/code&gt;, &lt;code&gt;Array.toSpliced()&lt;/code&gt;, &lt;code&gt;Array.with()&lt;/code&gt;, &lt;code&gt;TypedArrays.toReversed()&lt;/code&gt;, &lt;code&gt;TypedArrays.toSorted()&lt;/code&gt;, and &lt;code&gt;TypedArrays.with()&lt;/code&gt; return a new array with elements that have been shallow copied.&lt;/p&gt;
&lt;p&gt;There is a whole stack of new features and fixes in the Safari 17 beta. Safari 17 adds &lt;a href=&quot;https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/&quot; rel=&quot;noopener&quot;&gt;Web Apps&lt;/a&gt; to macOS Sonoma. This means you can add a website to the Dock from the File menu or Share Sheet, and it will open in its own window.&lt;/p&gt;
&lt;p&gt;Safari 17 also brings some features to interoperable status—&lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;contain-intrinsic-size&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/@counter-style&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;@counter-style&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/@font-face/size-adjust&quot; rel=&quot;noopener&quot;&gt;@font-face size-adjust&lt;/a&gt;, and the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/@media/overflow-block&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;overflow-block&lt;/code&gt;&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/@media/overflow-inline&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;overflow-inline&lt;/code&gt;&lt;/a&gt; media features will be available in all major engines when Safari 17 ships.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Photo by &lt;a href=&quot;https://unsplash.com/@rodrigospabreu&quot; rel=&quot;noopener&quot;&gt;Rodrigo Abreu&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
    <entry>
        <title>
            The origin private file system
        </title>
        <link href="https://web.dev/origin-private-file-system/"/>
        <updated>
            2023-06-08T00:00:00Z
        </updated>
        <id>
            https://web.dev/origin-private-file-system/
        </id>
        <content type="text/html" mode="escaped">
            &lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 128 128&quot; style=&quot;enable-background:new 0 0 128 128&quot; xml:space=&quot;preserve&quot;&gt;&lt;path d=&quot;M7.5 123.3c2.2 2.4 11.6-1.9 19-5.3C32 115.4 54 106.3 65 101.6c3-1.2 7.3-2.9 10.4-7 2.8-3.6 10-19-4.6-34.7-15-16-30.4-11.5-36.2-7.5A28.5 28.5 0 0 0 27.3 63c-5.2 11.6-12.7 32.9-15.7 41.3-2.3 6.1-6.4 16.5-4.1 19z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 86.8s.7 6.5 6.1 14.6c6.3 9.6 15 11.2 15 11.2l-5.8 2.4s-6.5-2-12.7-10.4c-3.8-5.3-5-11.6-5-11.6l2.3-6.2zm-5.6 15.4s1.5 5.6 4.7 9.7c3.8 5 8.6 6.5 8.6 6.5l-4.5 2s-3.3-.8-7-5.5c-2.9-3.5-3.7-7.6-3.7-7.6l1.9-5.1z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 116.4c-.2-.5-.2-1 0-1.4l25.4-53 4.2 16-26.8 38.7c-.7 1-2.3 1-2.8-.2z&quot; style=&quot;opacity:.44&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M41.6 83.2c12 14 25.5 12.2 30 8.6 4.5-3.5 8.1-15.6-3.7-29.3C55.3 48.2 41.3 52.2 38 55.3s-7.4 15.1 3.5 27.9z&quot; style=&quot;fill: var(--color-state-good-bg);&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M82.5 89c-4.3-3.7-6.6-3-9.7-1.8a26 26 0 0 1-18.9 0l2.6-6.2c5 1.7 8.7 1 12-1 4-2.4 9.6-5.6 18.3 1.6 3.6 3 7.3 5.1 10 4.2 2-.7 3-3.6 3.6-6l.2-1.3c.4-3.7 1.2-11.6 7.1-15.7 6.4-4.3 13-4.3 13-4.3l1.2 12c-3-.5-5.2.1-7 1-6.7 3.8-.8 18.2-11.3 23-10.1 4.8-18.4-3.3-21-5.6zM45.4 73.7l-4.3-3.9c8-8.9 5.8-15.4 4.3-20.2A26.4 26.4 0 0 1 44 38.8c-3-3.8-4.4-7.8-4.5-8-1.9-5.7-.5-11.2 2.8-16.4C48.7 4 60.5 4 60.5 4l4 10.5c-3-.1-12.8 0-15.8 4.8-3.8 6-1.3 9.6-1.2 10 .8-1 1.5-1.7 2.2-2.3 4.8-4.2 9-4.8 11.6-4.6a11 11 0 0 1 7.6 4.2c2 2.7 3 6.2 2.3 9.4a11 11 0 0 1-5.8 7.4 16 16 0 0 1-13 1.5v.3l.6 2c1.8 5.4 5 14.1-7.6 26.5zm7.4-37.5c.5.4 1.1.8 1.8 1 2 .8 4.4.6 7-.8 1.5-.9 1.7-1.7 1.7-2 .2-.9 0-2-.7-2.8a2.8 2.8 0 0 0-2-1.2c-1.6-.2-3.6.8-5.6 2.6-1 .9-1.7 2-2.3 3.2zm10 39.1-6.2-.1s3-16.7 12.5-19.5c1.8-.5 3.7-1 5.7-1.3l4-.8c.1-1.6-.5-3.6-1.3-5.9-.6-1.7-1.2-3.5-1.5-5.5-.6-3.9.4-7.3 3-9.6 3-2.9 7.9-3.8 13.4-2.5 3.2.7 5.5 2.2 7.6 3.6 2.9 2 4.6 3 8.2.5 4.3-2.9-1.4-14.3-4.4-21l11.3-4.6c1.5 3.3 8.8 20.3 4 30a11.5 11.5 0 0 1-8.1 6.2c-8 1.8-12.6-1.3-16-3.6-1.6-1-3-1.9-4.6-2.3-10.6-3 4.2 12.6-2.7 19.6-4.2 4.2-14.4 5.3-15 5.5-6.6 1.6-10 11.3-10 11.3z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M44 38.8c-.2 2.2-.3 3.5.3 6.4 2.7 2 8.7 2 8.7 2l-.6-2v-.3c-6.1-3-8.4-6.1-8.4-6.1zm-12.5 9.8-10.3-5 5.1-7.5 8.2 5.4zm-15.2-14A26 26 0 0 1 5 28.9l5.2-6c1.6 1.2 5 3.5 7.2 3.8l-1.1 7.9zM25.6 21.3 18 18.8a18 18 0 0 0 .7-8.3l7.9-1.3c.6 4 .3 8.2-1 12zM73 15.3l7.9-1.7L83 23.9l-7.8 1.7zM92.5 17.8 87 12c2.8-2.8 3.5-6.3 3.5-6.4L98.4 7c-.1.6-1.1 6.3-6 10.9zM95.5 48.6l7-2.2 2.3 7.7-7 2.1zM97.5 113l-7.9-1c.3-2.7-1.8-6.2-2.4-7l6.4-4.8c.5.6 4.7 6.4 4 12.8zM120.4 102.9c-3-.5-6-.6-9.1-.5l-.3-8c3.5-.2 7 0 10.6.6l-1.2 7.9zM109.6 113.9l5.6-5.7 7.8 7.6-5.6 5.7zM93.1 63.3 99 70l-6.6 5.8-5.8-6.6z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt; &lt;/span&gt;&lt;strong&gt;Celebration&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; The origin private file system allows web apps to store and manipulate files in their very own origin-specific virtual filesystem, including low-level file manipulation, byte-by-byte access, and file streaming. The origin private file system is supported across all major browsers. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;browser-support&quot;&gt;Browser support &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#browser-support&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The origin private file system is supported by modern browsers and is standardized by the Web Hypertext Application Technology Working Group (&lt;a href=&quot;https://whatwg.org/&quot; rel=&quot;noopener&quot;&gt;WHATWG&lt;/a&gt;) in the &lt;a href=&quot;https://fs.spec.whatwg.org/&quot; rel=&quot;noopener&quot;&gt;File System Living Standard&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 86, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      86
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 86, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      86
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.2, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.2
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/StorageManager/getDirectory#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h2 id=&quot;motivation&quot;&gt;Motivation &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#motivation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When you think of files on your computer, you probably think about a file hierarchy: files organized in folders that you can explore with your operating system&#39;s file explorer. For example, on Windows, for a user called Tom, their To Do list might live in &lt;code&gt;C:\Users\Tom\Documents\ToDo.txt&lt;/code&gt;. In this example, &lt;code&gt;ToDo.txt&lt;/code&gt; is the file name, and &lt;code&gt;Users&lt;/code&gt;, &lt;code&gt;Tom&lt;/code&gt;, and &lt;code&gt;Documents&lt;/code&gt; are folder names. &lt;code&gt;C:\&lt;/code&gt; on Windows  represents the root directory of the drive.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; In this article, I use the terms &lt;em&gt;folder&lt;/em&gt; and &lt;em&gt;directory&lt;/em&gt; interchangeably, disregarding the difference between the file system concept (directory) and the graphical user interface &lt;a href=&quot;https://en.wikipedia.org/wiki/Directory_%28computing%29#Folder_metaphor&quot;&gt;metaphor&lt;/a&gt; (folder). &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;traditional-way-of-working-with-files-on-the-web&quot;&gt;Traditional way of working with files on the web &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#traditional-way-of-working-with-files-on-the-web&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;To edit the To Do list in a web application, this is the traditional flow:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The user &lt;em&gt;uploads&lt;/em&gt; the file to a server or &lt;em&gt;opens&lt;/em&gt; it on the client with &lt;a href=&quot;https://developer.mozilla.org/docs/Web/HTML/Element/input/file&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;&amp;lt;input type=&amp;quot;file&amp;quot;&amp;gt;&lt;/code&gt;&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;The user makes their changes, and then &lt;em&gt;downloads&lt;/em&gt; the resulting file with an injected &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/download&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;&amp;lt;a download=&amp;quot;ToDo.txt&amp;gt;&lt;/code&gt;&lt;/a&gt; that you programmatically &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/HTMLElement/click&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;click()&lt;/code&gt;&lt;/a&gt; via JavaScript.&lt;/li&gt;
&lt;li&gt;For opening folders, you use a special attribute in &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/HTMLInputElement/webkitdirectory&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;&amp;lt;input type=&amp;quot;file&amp;quot; webkitdirectory&amp;gt;&lt;/code&gt;&lt;/a&gt;, which, despite its proprietary name, has practically universal browser support.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;modern-way-of-working-with-files-on-the-web&quot;&gt;Modern way of working with files on the web &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#modern-way-of-working-with-files-on-the-web&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;This flow is not representative of how users think of editing files, and means users end up with downloaded &lt;em&gt;copies&lt;/em&gt; of their input files. Therefore,  the File System Access API introduced three picker methods—&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/showOpenFilePicker&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;showOpenFilePicker()&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/showSaveFilePicker&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;showSaveFilePicker()&lt;/code&gt;&lt;/a&gt;, and &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/showDirectoryPicker&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;showDirectoryPicker()&lt;/code&gt;&lt;/a&gt;—that do exactly what their name suggests. They enable a flow as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Open &lt;code&gt;ToDo.txt&lt;/code&gt; with &lt;code&gt;showOpenFilePicker()&lt;/code&gt;, and get a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileSystemFileHandle&lt;/code&gt;&lt;/a&gt; object.&lt;/li&gt;
&lt;li&gt;From the &lt;code&gt;FileSystemFileHandle&lt;/code&gt; object, get a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/File&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;File&lt;/code&gt;&lt;/a&gt; by calling the file handle&#39;s &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/getFile&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;getFile()&lt;/code&gt;&lt;/a&gt; method.&lt;/li&gt;
&lt;li&gt;Modify the file, then call &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemHandle/requestPermission&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;requestPermission({mode: &#39;readwrite&#39;})&lt;/code&gt;&lt;/a&gt; on the handle.&lt;/li&gt;
&lt;li&gt;If the user accepts the permission request, save the changes back to the original file.&lt;/li&gt;
&lt;li&gt;Alternatively, call &lt;code&gt;showSaveFilePicker()&lt;/code&gt; and let the user pick a new file. (If the user picks a previously opened file, its contents will be overwritten.) For repeat saves, you can keep the file handle around, so you don&#39;t have to show the file save dialog again.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;restrictions-of-working-with-files-on-the-web&quot;&gt;Restrictions of working with files on the web &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#restrictions-of-working-with-files-on-the-web&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Files and folders that are accessible via these methods live in what can be called the &lt;em&gt;user-visible&lt;/em&gt; file system. Files saved from the web, and executable files specifically, are marked with the &lt;a href=&quot;https://textslashplain.com/2016/04/04/downloads-and-the-mark-of-the-web/&quot; rel=&quot;noopener&quot;&gt;mark of the web&lt;/a&gt;, so there&#39;s an additional warning the operating system can show before a potentially dangerous file gets executed. As an additional security feature, files obtained from the web are also protected by &lt;a href=&quot;https://safebrowsing.google.com/&quot; rel=&quot;noopener&quot;&gt;Safe Browsing&lt;/a&gt;, which, for the sake of simplicity and in the context of this article, you can think of as a cloud-based virus scan. When you write data to a file using the File System Access API, writes are  not in-place, but use a temporary file. The file itself is not modified unless it passes all these security checks. As you can imagine, this work makes file operations relatively slow, despite improvements applied where possible, for example, &lt;a href=&quot;https://bugs.chromium.org/p/chromium/issues/detail?id=1413443&quot; rel=&quot;noopener&quot;&gt;on macOS&lt;/a&gt;. Still every &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream/write&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;write()&lt;/code&gt;&lt;/a&gt; call is self-contained, so under the hood it opens the file, seeks to the given offset, and finally writes data.&lt;/p&gt;
&lt;h3 id=&quot;files-as-the-foundation-of-processing&quot;&gt;Files as the foundation of processing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#files-as-the-foundation-of-processing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;At the same time, files are an excellent way to record data. For example, &lt;a href=&quot;https://www.sqlite.org/&quot; rel=&quot;noopener&quot;&gt;SQLite&lt;/a&gt; stores entire databases in a single file. Another example are &lt;a href=&quot;https://en.wikipedia.org/wiki/Mipmap&quot; rel=&quot;noopener&quot;&gt;mipmaps&lt;/a&gt; used in image processing. Mipmaps are pre-calculated, optimized sequences of images, each of which is a progressively lower resolution representation of the previous, which makes many operations like zooming faster. So how can web applications get the benefits of files, but without the performance costs of traditional web-based file processing? The answer is the &lt;em&gt;origin private file system&lt;/em&gt;.&lt;/p&gt;
&lt;h2 id=&quot;the-user-visible-versus-the-origin-private-file-system&quot;&gt;The user-visible versus the origin private file system &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#the-user-visible-versus-the-origin-private-file-system&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Unlike the user-visible file system browsed via the operating system&#39;s file explorer, with files and folders you can read, write, move, and rename, the origin private file system is not meant to be seen by users. Files and folders in the origin private file system, as the name suggests, are private, and more concretely, private to the &lt;a href=&quot;https://developer.mozilla.org/docs/Glossary/Origin&quot; rel=&quot;noopener&quot;&gt;origin&lt;/a&gt; of a site. Discover the origin of a page by typing &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Location/origin&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;location.origin&lt;/code&gt;&lt;/a&gt; in the DevTools Console. For example, the origin of the page &lt;code&gt;https://developer.chrome.com/articles/&lt;/code&gt; is &lt;code&gt;https://developer.chrome.com&lt;/code&gt; (that is, the part &lt;code&gt;/articles&lt;/code&gt; is &lt;em&gt;not&lt;/em&gt; part of the origin). You can read more about the theory of origins in &lt;a href=&quot;https://web.dev/same-site-same-origin/#origin&quot;&gt;Understanding &amp;quot;same-site&amp;quot; and &amp;quot;same-origin&amp;quot;&lt;/a&gt;. All pages that share the same origin can see the same origin private file system data, so &lt;code&gt;https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/&lt;/code&gt; can see the same details as the previous example. Each origin has its own independent origin private file system, which means the origin private file system of &lt;code&gt;https://developer.chrome.com&lt;/code&gt; is completely distinct from the one of, say, &lt;a href=&quot;https://web.dev/&quot;&gt;&lt;code&gt;https://web.dev&lt;/code&gt;&lt;/a&gt;. On Windows, the root directory of the user-visible file system is &lt;code&gt;C:\&lt;/code&gt;. The equivalent for the origin private file system is an initially empty root directory per origin accessed by calling the asynchronous method &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/StorageManager/getDirectory&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;navigator.storage.getDirectory()&lt;/code&gt;&lt;/a&gt;. For a comparison of the user-visible file system and the origin private file system, see the following diagram. The diagram shows that apart from the root directory, everything else is conceptually the same, with a hierarchy of files and folders to organize and arrange as needed for your data and storage needs.&lt;/p&gt;
&lt;img alt=&quot;Diagram of the user-visible file system and the origin private file system with two exemplary file hierarchies. The entry point for the user-visible file system is a symbolic harddisk, the entry point for the origin private file system is calling of the method &amp;#x27;navigator.storage.getDirectory&amp;#x27;.&quot; decoding=&quot;async&quot; height=&quot;722&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/xej6CL5VFJuGJgXPkeKJ.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;h2 id=&quot;specifics-of-the-origin-private-file-system&quot;&gt;Specifics of the origin private file system &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#specifics-of-the-origin-private-file-system&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Just like other storage mechanisms in the browser (for example, &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/localStorage&quot; rel=&quot;noopener&quot;&gt;localStorage&lt;/a&gt; or &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Using_IndexedDB&quot; rel=&quot;noopener&quot;&gt;IndexedDB&lt;/a&gt;), the origin private file system is subject to browser quota restrictions. When a user &lt;a href=&quot;https://support.google.com/chrome/answer/2392709&quot; rel=&quot;noopener&quot;&gt;clears all browsing data&lt;/a&gt; or &lt;a href=&quot;https://developer.chrome.com/docs/devtools/storage/cache/#deletecache&quot; rel=&quot;noopener&quot;&gt;all site data&lt;/a&gt;, the origin private file system will be deleted, too. Call &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/StorageManager/estimate&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;navigator.storage.estimate()&lt;/code&gt;&lt;/a&gt; and in the resulting response object see the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/StorageManager/estimate#usage&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;usage&lt;/code&gt;&lt;/a&gt; entry to see how much storage your app already consumes, which is broken down by storage mechanism in the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/StorageManager/estimate#usagedetails&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;usageDetails&lt;/code&gt;&lt;/a&gt; object, where you want to look at the &lt;code&gt;fileSystem&lt;/code&gt; entry specifically. Since the origin private file system is not visible to the user, there are no permissions prompts and no Safe Browsing checks.&lt;/p&gt;
&lt;h2 id=&quot;getting-access-to-the-root-directory&quot;&gt;Getting access to the root directory &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#getting-access-to-the-root-directory&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To get access to the root directory, run the command below. You end up with an empty directory handle, more specifically, a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileSystemDirectoryHandle&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; opfsRoot &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; navigator&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;storage&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDirectory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// A FileSystemDirectoryHandle whose type is &quot;directory&quot;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// and whose name is &quot;&quot;.&lt;/span&gt;&lt;br /&gt;console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;opfsRoot&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;main-thread-or-web-worker&quot;&gt;Main thread or Web Worker &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#main-thread-or-web-worker&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;There are two ways of using the origin private file system: on the &lt;a href=&quot;https://developer.mozilla.org/docs/Glossary/Main_thread&quot; rel=&quot;noopener&quot;&gt;main thread&lt;/a&gt; or in a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Worker&quot; rel=&quot;noopener&quot;&gt;Web Worker&lt;/a&gt;. Web Workers cannot block the main thread, which means in this context APIs can be synchronous, a pattern generally disallowed on the main thread. Synchronous APIs can be faster as they avoid having to deal with promises, and file operations are typically synchronous in languages like C that can be compiled to WebAssembly.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-c&quot;&gt;&lt;code class=&quot;language-c&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// This is synchronous C code.&lt;/span&gt;&lt;br /&gt;FILE &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt;f&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;f &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;fopen&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;example.txt&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;w+&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token function&quot;&gt;fputs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;Some text\n&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; f&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token function&quot;&gt;fclose&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;f&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;If you need the fastest possible file operations and/or you deal with &lt;a href=&quot;https://developer.mozilla.org/es/docs/WebAssembly&quot; rel=&quot;noopener&quot;&gt;WebAssembly&lt;/a&gt;, skip down to &lt;a href=&quot;https://example.com/&quot; rel=&quot;noopener&quot;&gt;Using the origin private file system in a Web Worker&lt;/a&gt;. Else, you can read on.&lt;/p&gt;
&lt;h2 id=&quot;using-the-origin-private-file-system-on-the-main-thread&quot;&gt;Using the origin private file system on the main thread &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#using-the-origin-private-file-system-on-the-main-thread&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;h3 id=&quot;creating-new-files-and-folders&quot;&gt;Creating new files and folders &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#creating-new-files-and-folders&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Once you have a root folder, create files and folders using the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getFileHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;getFileHandle()&lt;/code&gt;&lt;/a&gt; and the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getDirectoryHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;getDirectoryHandle()&lt;/code&gt;&lt;/a&gt; methods respectively. By passing &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/getFileHandle#create&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;{create: true}&lt;/code&gt;&lt;/a&gt;, the file or folder will be created if it doesn&#39;t exist. Build up a hierarchy of files by calling these functions using a newly created directory as the starting point.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; directoryHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDirectoryHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first folder&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; nestedFileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; directoryHandle&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first nested file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; nestedDirectoryHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; directoryHandle&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDirectoryHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first nested folder&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;img alt=&quot;The resulting file hierarchy from the earlier code sample.&quot; decoding=&quot;async&quot; height=&quot;196&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 438px) 438px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/VtWQ4T2a1gph0kFzhRwN.png?auto=format&amp;w=876 876w&quot; width=&quot;438&quot; /&gt;
&lt;h3 id=&quot;accessing-existing-files-and-folders&quot;&gt;Accessing existing files and folders &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#accessing-existing-files-and-folders&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you know their name, access previously created files and folders by calling the &lt;code&gt;getFileHandle()&lt;/code&gt; or the &lt;code&gt;getDirectoryHandle()&lt;/code&gt; methods, passing in the name of the file or folder.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; existingFileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; existingDirectoryHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDirectoryHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&#39;my first folder&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h3 id=&quot;getting-the-file-associated-with-a-file-handle-for-reading&quot;&gt;Getting the file associated with a file handle for reading &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#getting-the-file-associated-with-a-file-handle-for-reading&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;A &lt;code&gt;FileSystemFileHandle&lt;/code&gt; represents a file on the file system. To obtain the associated &lt;code&gt;File&lt;/code&gt;, use the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/getFile&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;getFile()&lt;/code&gt;&lt;/a&gt; method. A &lt;code&gt;File&lt;/code&gt; object is a specific kind of &lt;a href=&quot;https://developer.mozilla.org/es/docs/Web/API/Blob&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;Blob&lt;/code&gt;&lt;/a&gt;, and can be used in any context that a &lt;code&gt;Blob&lt;/code&gt; can. In particular, &lt;a href=&quot;https://developer.mozilla.org/es/docs/Web/API/FileReader&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileReader&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://developer.mozilla.org/es/docs/Web/API/URL/createObjectURL&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;URL.createObjectURL()&lt;/code&gt;&lt;/a&gt;, &lt;a href=&quot;https://developer.mozilla.org/es/docs/Web/API/createImageBitmap&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;createImageBitmap()&lt;/code&gt;&lt;/a&gt;, and &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/send&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;XMLHttpRequest.send()&lt;/code&gt;&lt;/a&gt; accept both &lt;code&gt;Blobs&lt;/code&gt; and &lt;code&gt;Files&lt;/code&gt;. If you will, obtaining a &lt;code&gt;File&lt;/code&gt; from a &lt;code&gt;FileSystemFileHandle&lt;/code&gt; &amp;quot;frees&amp;quot; the data, so you can access it and make it available to the user-visible file system.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; file &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFile&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h3 id=&quot;writing-to-a-file-by-streaming&quot;&gt;Writing to a file by streaming &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#writing-to-a-file-by-streaming&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Stream data into a file by calling &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/createWritable&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;createWritable()&lt;/code&gt;&lt;/a&gt; which creates a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileSystemWritableFileStream&lt;/code&gt;&lt;/a&gt; to that you then &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemWritableFileStream/write&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;write()&lt;/code&gt;&lt;/a&gt; the contents. At the end, you need to &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/WritableStream/close&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;close()&lt;/code&gt;&lt;/a&gt; the stream.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; contents &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Some text&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Get a writable stream.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; writable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createWritable&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Write the contents of the file to the stream.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; writable&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;contents&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Close the stream, which persists the contents.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; writable&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h3 id=&quot;deleting-files-and-folders&quot;&gt;Deleting files and folders &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#deleting-files-and-folders&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Delete files and folders by calling their file or directory handle&#39;s particular &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemHandle/remove&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;remove()&lt;/code&gt;&lt;/a&gt; method. To delete a folder including all subfolders, pass the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemHandle/remove#recursive&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;{recursive: true}&lt;/code&gt;&lt;/a&gt; option.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;remove&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;remove&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;recursive&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; The &lt;code&gt;remove()&lt;/code&gt; method is currently only implemented in Chrome. You can feature-detect support via &lt;code&gt;&#39;remove&#39; in FileSystemFileHandle.prototype&lt;/code&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;As an alternative, if you know the name of the to-be-deleted file or folder in a directory, use the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/removeEntry&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;removeEntry()&lt;/code&gt;&lt;/a&gt; method.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;removeEntry&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first nested file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; As a quick tip, &lt;code&gt;await (await navigator.storage.getDirectory()).remove({recursive: true})&lt;/code&gt; is the fastest way to clear the entire origin private file system. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;moving-and-renaming-files-and-folders&quot;&gt;Moving and renaming files and folders &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#moving-and-renaming-files-and-folders&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Rename and move files and folders using the &lt;a href=&quot;https://github.com/whatwg/fs/pull/10&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;move()&lt;/code&gt;&lt;/a&gt; method. Moving and renaming can happen together or in isolation.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Rename a file.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;move&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my first renamed file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Move a file to another directory.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;move&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nestedDirectoryHandle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Move a file to another directory and rename it.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;move&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nestedDirectoryHandle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;my first renamed and now nested file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; Renaming and moving folders is not implemented yet in Chrome. You also can&#39;t move files from the origin private file system to the user-visible file system. You can &lt;a href=&quot;https://web.dev/origin-private-file-system/#copying-a-file-from-the-origin-private-file-system-to-the-user-visible-file-system&quot;&gt;copy&lt;/a&gt; them, though. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;resolving-the-path-of-a-file-or-folder&quot;&gt;Resolving the path of a file or folder &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#resolving-the-path-of-a-file-or-folder&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;To learn where a given file or folder is located  in relation to a reference directory, use the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/resolve&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;resolve()&lt;/code&gt;&lt;/a&gt; method, passing it a &lt;code&gt;FileSystemHandle&lt;/code&gt; as the argument. To obtain the full path of a file or folder in the origin private file system, use the root directory as the reference directory obtained via &lt;code&gt;navigator.storage.getDirectory()&lt;/code&gt;.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; relativePath &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nestedDirectoryHandle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// `relativePath` is `[&#39;my first folder&#39;, &#39;my first nested folder&#39;]`.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h3 id=&quot;checking-if-two-file-or-folder-handles-point-to-the-same-file-or-folder&quot;&gt;Checking if two file or folder handles point to the same file or folder &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#checking-if-two-file-or-folder-handles-point-to-the-same-file-or-folder&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Sometimes you have two handles and don&#39;t know if they point at the same file or folder. To check whether this is the case, use the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemHandle/isSameEntry&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;isSameEntry()&lt;/code&gt;&lt;/a&gt; method.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isSameEntry&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;nestedFileHandle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Returns `false`.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;listing-the-contents-of-a-folder&quot;&gt;Listing the contents of a folder &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#listing-the-contents-of-a-folder&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;FileSystemDirectoryHandle&lt;/code&gt; is an &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols&quot; rel=&quot;noopener&quot;&gt;asynchronous iterator&lt;/a&gt; that you iterate over with a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for-await...of&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;for await…of&lt;/code&gt;&lt;/a&gt; loop. As an asynchronous iterator, it also supports the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/entries&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;entries()&lt;/code&gt;&lt;/a&gt;, the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/values&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;values()&lt;/code&gt;&lt;/a&gt;, and the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemDirectoryHandle/keys&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;keys()&lt;/code&gt;&lt;/a&gt; methods, from which you can choose depending on what information you need:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;entries&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; handle &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;values&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; name &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;recursively-listing-the-contents-of-a-folder-and-all-subfolders&quot;&gt;Recursively listing the contents of a folder and all subfolders &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#recursively-listing-the-contents-of-a-folder-and-all-subfolders&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Dealing with asynchronous loops and functions paired with recursion is easy to get wrong. The function below can serve as a starting point for listing the contents of a folder and all its subfolders, including all files and their sizes. You can simplify the function if you don&#39;t need the file sizes by, where it says &lt;code&gt;directoryEntryPromises.push&lt;/code&gt;, not pushing the &lt;code&gt;handle.getFile()&lt;/code&gt; promise, but the &lt;code&gt;handle&lt;/code&gt; directly.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; getDirectoryEntriesRecursive &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br /&gt;    directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    relativePath &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;.&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fileHandles &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; directoryHandles &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; entries &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// Get an iterator of the files and folders in the directory.&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; directoryIterator &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; directoryHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;values&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; directoryEntryPromises &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; handle &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; directoryIterator&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; nestedPath &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;relativePath&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;kind &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;file&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;        fileHandles&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nestedPath &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;        directoryEntryPromises&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br /&gt;          handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFile&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;file&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;            &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;kind&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;size&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;type&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;lastModified&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; file&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lastModified&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;relativePath&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; nestedPath&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              handle&lt;br /&gt;            &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;          &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;kind &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;directory&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;        directoryHandles&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nestedPath &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;        directoryEntryPromises&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;br /&gt;          &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;            &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;kind&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; handle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;kind&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;relativePath&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; nestedPath&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              &lt;span class=&quot;token literal-property property&quot;&gt;entries&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt;&lt;br /&gt;                  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;getDirectoryEntriesRecursive&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;handle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; nestedPath&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;              handle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;            &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;          &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; directoryEntries &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; Promise&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;directoryEntryPromises&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    directoryEntries&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;directoryEntry&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      entries&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;directoryEntry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; directoryEntry&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; entries&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;using-the-origin-private-file-system-in-a-web-worker&quot;&gt;Using the origin private file system in a Web Worker &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#using-the-origin-private-file-system-in-a-web-worker&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As outlined before, Web Workers can&#39;t block the main thread, which is why in this context synchronous methods are allowed.&lt;/p&gt;
&lt;h3 id=&quot;getting-a-synchronous-access-handle&quot;&gt;Getting a synchronous access handle &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#getting-a-synchronous-access-handle&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The entry point to the fastest possible file operations is a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileSystemSyncAccessHandle&lt;/code&gt;&lt;/a&gt;, obtained from a regular &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;FileSystemFileHandle&lt;/code&gt;&lt;/a&gt; by calling &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemFileHandle/createSyncAccessHandle&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;createSyncAccessHandle()&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;my highspeed file.txt&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; syncAccessHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createSyncAccessHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; It might seem confusing, but you actually get a &lt;em&gt;synchronous&lt;/em&gt; &lt;code&gt;FileSystemSyncAccessHandle&lt;/code&gt; from a regular &lt;code&gt;FileSystemFileHandle&lt;/code&gt;. Also note that the &lt;code&gt;createSyncAccessHandle()&lt;/code&gt; method is &lt;em&gt;asynchronous&lt;/em&gt;, despite the &lt;code&gt;Sync&lt;/code&gt; in its name. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;synchronous-in-place-file-methods&quot;&gt;Synchronous in-place file methods &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#synchronous-in-place-file-methods&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Once you have a synchronous access handle, you get access to fast in-place file methods that are all synchronous.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/getSize&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;getSize()&lt;/code&gt;&lt;/a&gt;: Returns the size of the file in bytes.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/write&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;write()&lt;/code&gt;&lt;/a&gt;: Writes the content of a buffer into the, optionally at a given offset, and returns the number of written bytes. Checking the returned number of written bytes allows callers to detect and handle errors and partial writes.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/read&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;read()&lt;/code&gt;&lt;/a&gt;: Reads the contents of the file into a buffer, optionally at a given offset.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/truncate&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;truncate()&lt;/code&gt;&lt;/a&gt;: Resizes the file to the given size.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/flush&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;flush()&lt;/code&gt;&lt;/a&gt;: Ensures that the contents of the file contain all the modifications done through &lt;code&gt;write()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/FileSystemSyncAccessHandle/close&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;close()&lt;/code&gt;&lt;/a&gt;: Closes the access handle.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Here is an example that uses all the methods mentioned above.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; opfsRoot &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; navigator&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;storage&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getDirectory&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;fast&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;create&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; accessHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createSyncAccessHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; textEncoder &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TextEncoder&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; textDecoder &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;TextDecoder&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Initialize this variable for the size of the file.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; size&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// The current size of the file, initially `0`.&lt;/span&gt;&lt;br /&gt;size &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getSize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Encode content to write to the file.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; content &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; textEncoder&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;Some text&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Write the content at the beginning of the file.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;content&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;at&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; size&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Flush the changes.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// The current size of the file, now `9` (the length of &quot;Some text&quot;).&lt;/span&gt;&lt;br /&gt;size &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getSize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Encode more content to write to the file.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; moreContent &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; textEncoder&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;encode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;More content&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Write the content at the end of the file.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;moreContent&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;at&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; size&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Flush the changes.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;flush&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// The current size of the file, now `21` (the length of&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// &quot;Some textMore content&quot;).&lt;/span&gt;&lt;br /&gt;size &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getSize&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Prepare a data view of the length of the file.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; dataView &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;DataView&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;ArrayBuffer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;size&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Read the entire file into the data view.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;dataView&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Logs `&quot;Some textMore content&quot;`.&lt;/span&gt;&lt;br /&gt;console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;textDecoder&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;decode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;dataView&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Read starting at offset 9 into the data view.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;read&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;dataView&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;at&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;9&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Logs `&quot;More content&quot;`.&lt;/span&gt;&lt;br /&gt;console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;textDecoder&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;decode&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;dataView&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Truncate the file after 4 bytes.&lt;/span&gt;&lt;br /&gt;accessHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;truncate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; Note that the first parameter for &lt;code&gt;read()&lt;/code&gt; and &lt;code&gt;write()&lt;/code&gt; is an &lt;a href=&quot;https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer&quot;&gt;&lt;code&gt;ArrayBuffer&lt;/code&gt;&lt;/a&gt; or an &lt;code&gt;ArrayBufferView&lt;/code&gt; like a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView&quot;&gt;&lt;code&gt;DataView&lt;/code&gt;&lt;/a&gt;. You cannot directly manipulate the contents of an &lt;code&gt;ArrayBuffer&lt;/code&gt;. Instead, you create one of the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray&quot;&gt;typed array objects&lt;/a&gt; like an &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int8Array&quot;&gt;&lt;code&gt;Int8Array&lt;/code&gt;&lt;/a&gt; or a &lt;code&gt;DataView&lt;/code&gt; object which represents the buffer in a specific format, and use that to read and write the contents of the buffer. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;copying-a-file-from-the-origin-private-file-system-to-the-user-visible-file-system&quot;&gt;Copying a file from the origin private file system to the user-visible file system &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#copying-a-file-from-the-origin-private-file-system-to-the-user-visible-file-system&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As mentioned above, moving files from the origin private file system to the user-visible file system isn&#39;t possible, but you can copy files. Since &lt;code&gt;showSaveFilePicker()&lt;/code&gt; is only exposed on the main thread, but not in the Worker thread, be sure to run the code there.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// On the main thread, not in the Worker. This assumes&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// `fileHandle` is the `FileSystemFileHandle` you obtained&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// the `FileSystemSyncAccessHandle` from in the Worker&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// thread. Be sure to close the file in the Worker thread first.&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; fileHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; opfsRoot&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFileHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;fast&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;try&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token comment&quot;&gt;// Obtain a file handle to a new file in the user-visible file system&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token comment&quot;&gt;// with the same name as the file in the origin private file system.&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; saveHandle &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;showSaveFilePicker&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;suggestedName&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;&#39;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; writable &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; saveHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createWritable&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; writable&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;write&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; fileHandle&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getFile&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; writable&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;close&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;catch&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;err&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;err&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; err&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;message&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;debugging-the-origin-private-file-system&quot;&gt;Debugging the origin private file system &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#debugging-the-origin-private-file-system&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Until built-in DevTools support is added (see &lt;a href=&quot;https://crbug.com/1284595&quot; rel=&quot;noopener&quot;&gt;crbug/1284595&lt;/a&gt;), use the &lt;a href=&quot;https://chrome.google.com/webstore/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd&quot; rel=&quot;noopener&quot;&gt;OPFS Explorer&lt;/a&gt; Chrome extension to debug the origin private file system. The screenshot above from the section &lt;a href=&quot;https://web.dev/origin-private-file-system/#creating-new-files-and-folders&quot;&gt;Creating new files and folders&lt;/a&gt; is taken straight from the extension by the way.&lt;/p&gt;
&lt;img alt=&quot;The OPFS Explorer Chrome DevTools extension in the Chrome Web Store.&quot; decoding=&quot;async&quot; height=&quot;612&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/kmE7qbP61UlLcCxBkMMQ.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;After installing the extension, open the Chrome DevTools, select the &lt;strong&gt;OPFS Explorer&lt;/strong&gt; tab, and you&#39;re then ready to inspect the file hierarchy. Save files from the origin private file system to the user-visible file system by clicking the file name and delete files and folders by clicking the trash can icon.&lt;/p&gt;
&lt;h2 id=&quot;demo&quot;&gt;Demo &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#demo&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;See the origin private file system in action (if you install the OPFS Explorer extension) in a &lt;a href=&quot;https://sqlite-wasm-opfs.glitch.me/&quot; rel=&quot;noopener&quot;&gt;demo&lt;/a&gt; that uses it as a backend for a SQLite database compiled to WebAssembly. Be sure to check out the &lt;a href=&quot;https://glitch.com/edit/#!/sqlite-wasm-opfs&quot; rel=&quot;noopener&quot;&gt;source code on Glitch&lt;/a&gt;. Note how the embedded version below does not use the origin private file system backend (because the iframe is cross-origin), but when you open the demo in a separate tab, it does.&lt;/p&gt;
&lt;div class=&quot;glitch-embed-wrap&quot; style=&quot;height: 420px; width: 100%;&quot;&gt;
  &lt;iframe allow=&quot;camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi&quot; loading=&quot;lazy&quot; src=&quot;https://glitch.com/embed/#!/embed/sqlite-wasm-opfs?attributionHidden=true&amp;sidebarCollapsed=true&amp;previewSize=100&quot; style=&quot;height: 100%; width: 100%; border: 0;&quot; title=&quot;sqlite-wasm-opfs on Glitch&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;h2 id=&quot;conclusions&quot;&gt;Conclusions &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#conclusions&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The origin private file system, as specified by the WHATWG, has shaped the way we use and interact with files on the web. It has enabled new use cases that were impossible to achieve with the user-visible file system. All major browser vendors—Apple, Mozilla, and Google—are on-board and share a joint vision. The development of the origin private file system is very much a collaborative effort, and feedback from developers and users is essential to its progress. As we continue to refine and improve the standard, feedback on the &lt;a href=&quot;https://github.com/whatwg/fs&quot; rel=&quot;noopener&quot;&gt;whatwg/fs repository&lt;/a&gt; in the form of Issues or Pull Requests is welcome.&lt;/p&gt;
&lt;h2 id=&quot;related-links&quot;&gt;Related links &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#related-links&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://fs.spec.whatwg.org/&quot; rel=&quot;noopener&quot;&gt;File System Standard spec&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/whatwg/fs&quot; rel=&quot;noopener&quot;&gt;File System Standard repo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/&quot; rel=&quot;noopener&quot;&gt;The File System API with Origin Private File System WebKit post&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://chrome.google.com/webstore/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd&quot; rel=&quot;noopener&quot;&gt;OPFS Explorer extension&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;acknowledgements&quot;&gt;Acknowledgements &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/origin-private-file-system/#acknowledgements&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This article was reviewed by &lt;a href=&quot;https://github.com/a-sully&quot; rel=&quot;noopener&quot;&gt;Austin Sully&lt;/a&gt;, &lt;a href=&quot;https://ca.linkedin.com/in/enoel19&quot; rel=&quot;noopener&quot;&gt;Etienne Noël&lt;/a&gt;, and &lt;a href=&quot;https://rachelandrew.co.uk/&quot; rel=&quot;noopener&quot;&gt;Rachel Andrew&lt;/a&gt;. Hero image by &lt;a href=&quot;https://unsplash.com/@rumpf&quot; rel=&quot;noopener&quot;&gt;Christina Rumpf&lt;/a&gt; on &lt;a href=&quot;https://unsplash.com/photos/XWDMmk-yW7Q&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;.&lt;/p&gt;
        </content>
        <author>
            <name>
                Thomas Steiner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            New CSS color spaces and functions in all major engines
        </title>
        <link href="https://web.dev/color-spaces-and-functions/"/>
        <updated>
            2023-06-02T00:00:00Z
        </updated>
        <id>
            https://web.dev/color-spaces-and-functions/
        </id>
        <content type="text/html" mode="escaped">
            &lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 128 128&quot; style=&quot;enable-background:new 0 0 128 128&quot; xml:space=&quot;preserve&quot;&gt;&lt;path d=&quot;M7.5 123.3c2.2 2.4 11.6-1.9 19-5.3C32 115.4 54 106.3 65 101.6c3-1.2 7.3-2.9 10.4-7 2.8-3.6 10-19-4.6-34.7-15-16-30.4-11.5-36.2-7.5A28.5 28.5 0 0 0 27.3 63c-5.2 11.6-12.7 32.9-15.7 41.3-2.3 6.1-6.4 16.5-4.1 19z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 86.8s.7 6.5 6.1 14.6c6.3 9.6 15 11.2 15 11.2l-5.8 2.4s-6.5-2-12.7-10.4c-3.8-5.3-5-11.6-5-11.6l2.3-6.2zm-5.6 15.4s1.5 5.6 4.7 9.7c3.8 5 8.6 6.5 8.6 6.5l-4.5 2s-3.3-.8-7-5.5c-2.9-3.5-3.7-7.6-3.7-7.6l1.9-5.1z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M10 116.4c-.2-.5-.2-1 0-1.4l25.4-53 4.2 16-26.8 38.7c-.7 1-2.3 1-2.8-.2z&quot; style=&quot;opacity:.44&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M41.6 83.2c12 14 25.5 12.2 30 8.6 4.5-3.5 8.1-15.6-3.7-29.3C55.3 48.2 41.3 52.2 38 55.3s-7.4 15.1 3.5 27.9z&quot; style=&quot;fill: var(--color-state-good-bg);&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M82.5 89c-4.3-3.7-6.6-3-9.7-1.8a26 26 0 0 1-18.9 0l2.6-6.2c5 1.7 8.7 1 12-1 4-2.4 9.6-5.6 18.3 1.6 3.6 3 7.3 5.1 10 4.2 2-.7 3-3.6 3.6-6l.2-1.3c.4-3.7 1.2-11.6 7.1-15.7 6.4-4.3 13-4.3 13-4.3l1.2 12c-3-.5-5.2.1-7 1-6.7 3.8-.8 18.2-11.3 23-10.1 4.8-18.4-3.3-21-5.6zM45.4 73.7l-4.3-3.9c8-8.9 5.8-15.4 4.3-20.2A26.4 26.4 0 0 1 44 38.8c-3-3.8-4.4-7.8-4.5-8-1.9-5.7-.5-11.2 2.8-16.4C48.7 4 60.5 4 60.5 4l4 10.5c-3-.1-12.8 0-15.8 4.8-3.8 6-1.3 9.6-1.2 10 .8-1 1.5-1.7 2.2-2.3 4.8-4.2 9-4.8 11.6-4.6a11 11 0 0 1 7.6 4.2c2 2.7 3 6.2 2.3 9.4a11 11 0 0 1-5.8 7.4 16 16 0 0 1-13 1.5v.3l.6 2c1.8 5.4 5 14.1-7.6 26.5zm7.4-37.5c.5.4 1.1.8 1.8 1 2 .8 4.4.6 7-.8 1.5-.9 1.7-1.7 1.7-2 .2-.9 0-2-.7-2.8a2.8 2.8 0 0 0-2-1.2c-1.6-.2-3.6.8-5.6 2.6-1 .9-1.7 2-2.3 3.2zm10 39.1-6.2-.1s3-16.7 12.5-19.5c1.8-.5 3.7-1 5.7-1.3l4-.8c.1-1.6-.5-3.6-1.3-5.9-.6-1.7-1.2-3.5-1.5-5.5-.6-3.9.4-7.3 3-9.6 3-2.9 7.9-3.8 13.4-2.5 3.2.7 5.5 2.2 7.6 3.6 2.9 2 4.6 3 8.2.5 4.3-2.9-1.4-14.3-4.4-21l11.3-4.6c1.5 3.3 8.8 20.3 4 30a11.5 11.5 0 0 1-8.1 6.2c-8 1.8-12.6-1.3-16-3.6-1.6-1-3-1.9-4.6-2.3-10.6-3 4.2 12.6-2.7 19.6-4.2 4.2-14.4 5.3-15 5.5-6.6 1.6-10 11.3-10 11.3z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M44 38.8c-.2 2.2-.3 3.5.3 6.4 2.7 2 8.7 2 8.7 2l-.6-2v-.3c-6.1-3-8.4-6.1-8.4-6.1zm-12.5 9.8-10.3-5 5.1-7.5 8.2 5.4zm-15.2-14A26 26 0 0 1 5 28.9l5.2-6c1.6 1.2 5 3.5 7.2 3.8l-1.1 7.9zM25.6 21.3 18 18.8a18 18 0 0 0 .7-8.3l7.9-1.3c.6 4 .3 8.2-1 12zM73 15.3l7.9-1.7L83 23.9l-7.8 1.7zM92.5 17.8 87 12c2.8-2.8 3.5-6.3 3.5-6.4L98.4 7c-.1.6-1.1 6.3-6 10.9zM95.5 48.6l7-2.2 2.3 7.7-7 2.1zM97.5 113l-7.9-1c.3-2.7-1.8-6.2-2.4-7l6.4-4.8c.5.6 4.7 6.4 4 12.8zM120.4 102.9c-3-.5-6-.6-9.1-.5l-.3-8c3.5-.2 7 0 10.6.6l-1.2 7.9zM109.6 113.9l5.6-5.7 7.8 7.6-5.6 5.7zM93.1 63.3 99 70l-6.6 5.8-5.8-6.6z&quot; fill=&quot;currentColor&quot;&gt;&lt;/path&gt;&lt;/svg&gt; &lt;/span&gt;&lt;strong&gt;Celebration&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; This web feature is now available in all three major browser engines! &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;CSS now supports color spaces that allow us to access colors outside of the sRGB &lt;a href=&quot;https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-gamut&quot; rel=&quot;noopener&quot;&gt;gamut&lt;/a&gt;. This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.&lt;/p&gt;
&lt;h2 id=&quot;accessing-color-spaces-from-css&quot;&gt;Accessing color spaces from CSS &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/color-spaces-and-functions/#accessing-color-spaces-from-css&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We already have a number of functions that allow us to access colors within the sRGB gamut—&lt;code&gt;rgb()&lt;/code&gt;, &lt;code&gt;hsl()&lt;/code&gt;, and &lt;code&gt;hwb()&lt;/code&gt;. Now supported in browsers is the &lt;code&gt;color()&lt;/code&gt; function, a normalized way to access colors within any RGB color space. This includes sRGB, Display P3, and Rec2020. You can see some examples in the following CSS:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.valid-css-color-function-colors&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--srgb&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;srgb 1 1 1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--srgb-linear&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;srgb-linear 100% 100% 100% / 50%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--display-p3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;display-p3 1 1 1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--rec2020&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;rec2020 0 0 0&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--a98-rgb&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;a98-rgb 1 1 1 / 25%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--prophoto&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;prophoto-rgb 0% 0% 0%&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;--xyz&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;xyz 1 1 1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/color_value/color#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;Also supported are several functions allowing access to color spaces other than sRGB using &lt;code&gt;lch()&lt;/code&gt;, &lt;code&gt;lab()&lt;/code&gt;, &lt;code&gt;oklch()&lt;/code&gt;, and &lt;code&gt;oklab()&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/color_value/lch#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;You can learn about all of these different color spaces in the &lt;a href=&quot;https://developer.chrome.com/articles/high-definition-css-color-guide/&quot; rel=&quot;noopener&quot;&gt;High definition CSS color guide&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;the-color-mix-function&quot;&gt;The &lt;code&gt;color-mix()&lt;/code&gt; function &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/color-spaces-and-functions/#the-color-mix-function&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As well as these new color spaces, all engines now support the &lt;code&gt;color-mix()&lt;/code&gt; function. This function enables mixing of one color into another, in any of the color spaces. In the following CSS, 25% of blue is mixed into white, in the srgb color space.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.example&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;background-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;color-mix&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;in srgb&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; blue 25%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; white&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 16.2, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      16.2
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.chrome.com/blog/css-color-mix/&quot; rel=&quot;noopener&quot;&gt;Learn more about &lt;code&gt;color-mix()&lt;/code&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;These new functions and color spaces promise to bring vibrant HD color to the web. For inspiration, make a start by creating some beautiful gradients using the HD gradient generator at &lt;a href=&quot;https://gradient.style/&quot; rel=&quot;noopener&quot;&gt;gradient.style&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image by &lt;a href=&quot;https://unsplash.com/fr/@yogidan2012&quot; rel=&quot;noopener&quot;&gt;Daniele Levis Pelusi&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
    <entry>
        <title>
            New to the web platform in May
        </title>
        <link href="https://web.dev/web-platform-05-2023/"/>
        <updated>
            2023-05-31T00:00:00Z
        </updated>
        <id>
            https://web.dev/web-platform-05-2023/
        </id>
        <content type="text/html" mode="escaped">
            &lt;h2 id=&quot;stable-browser-releases&quot;&gt;Stable browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#stable-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In May 2023, &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/113&quot; rel=&quot;noopener&quot;&gt;Firefox 113&lt;/a&gt;, &lt;a href=&quot;https://developer.chrome.com/blog/new-in-chrome-113/&quot; rel=&quot;noopener&quot;&gt;Chrome 113&lt;/a&gt;, &lt;a href=&quot;https://developer.chrome.com/blog/new-in-chrome-114/&quot; rel=&quot;noopener&quot;&gt;Chrome 114&lt;/a&gt;, and &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 16.5&lt;/a&gt; became stable. Let&#39;s take a look at what this means for the web platform.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-bad-bg color-state-bad-text&quot;&gt;&lt;p class=&quot;cluster color-state-bad-text&quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Error sign&quot;&gt;   &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Caution&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; We include browser compatibility data pulled from MDN in these posts which may not have been updated yet for very recent browser releases. The post will show the correct information as soon as it appears in the &lt;a href=&quot;https://github.com/mdn/browser-compat-data/releases&quot;&gt;browser-compat-data release&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;webgpu&quot;&gt;WebGPU &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#webgpu&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome 113 includes &lt;a href=&quot;https://developer.chrome.com/blog/webgpu-release/&quot; rel=&quot;noopener&quot;&gt;WebGPU&lt;/a&gt;, the successor to the WebGL and WebGL 2 graphics APIs for the web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox preview, Preview&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;preview&quot; title=&quot;Preview&quot; aria-label=&quot;Preview&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 113, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
113
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/GPU#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;first-party-sets&quot;&gt;First-Party Sets &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#first-party-sets&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.chrome.com/docs/privacy-sandbox/first-party-sets/&quot; rel=&quot;noopener&quot;&gt;First-Party Sets (FPS)&lt;/a&gt; is part of the &lt;a href=&quot;https://privacysandbox.com/&quot; rel=&quot;noopener&quot;&gt;Privacy Sandbox&lt;/a&gt;. It is a way for organizations to declare relationships among sites, so that browsers can decide when to allow limited third-party cookie access for sites within a set. FPS began a staged rollout in Chrome 113.&lt;/p&gt;
&lt;h3 id=&quot;css-media-features-and-more&quot;&gt;CSS media features and more &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#css-media-features-and-more&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For CSS, Chrome 113 includes the &lt;code&gt;overflow-inline&lt;/code&gt; and &lt;code&gt;overflow-block&lt;/code&gt; media features.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 66, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      66
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/@media/overflow-inline#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;And the &lt;code&gt;update&lt;/code&gt; media feature.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 102, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      102
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/@media/update-frequency#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;Also included is the &lt;code&gt;linear()&lt;/code&gt; easing function, which you can learn more about in the article &lt;a href=&quot;https://developer.chrome.com/articles/css-linear-easing-function/&quot; rel=&quot;noopener&quot;&gt;Create complex animation curves in CSS with the &lt;code&gt;linear()&lt;/code&gt; easing function&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;css-color-level-4-features&quot;&gt;CSS Color Level 4 features &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#css-color-level-4-features&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 113 includes the &lt;code&gt;color()&lt;/code&gt;, &lt;code&gt;lab()&lt;/code&gt;, &lt;code&gt;lch()&lt;/code&gt;, &lt;code&gt;oklab()&lt;/code&gt;, &lt;code&gt;oklch()&lt;/code&gt;, and &lt;code&gt;color-mix()&lt;/code&gt; functional notations, along with the forced-color-adjust property. This means that the new color spaces and functions are now supported across all three major engines. You can learn more about these color spaces and functions in the &lt;a href=&quot;https://web.dev/articles/high-definition-css-color-guide/&quot;&gt;High definition CSS color guide&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 16.2, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      16.2
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;more-control-over-nth-child-selections&quot;&gt;More control over &lt;code&gt;:nth-child()&lt;/code&gt; selections &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#more-control-over-nth-child-selections&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 113 also adds the ability to pass a selector list into &lt;code&gt;:nth-child()&lt;/code&gt; and &lt;code&gt;nth-last-child()&lt;/code&gt;. Learn more about this, and see examples in the post &lt;a href=&quot;https://developer.chrome.com/articles/css-nth-child-of-s/&quot; rel=&quot;noopener&quot;&gt;More control over :nth-child() selections with the of S syntax&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 111, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      111
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 9, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      9
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;compressions-streams-api&quot;&gt;Compressions Streams API &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#compressions-streams-api&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Now supported in all three major engines due to inclusion in Firefox 113, the Compressions Streams API enables the compression and decompression of streams. This means that JavaScript applications no longer need to bundle a compression library.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 80, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      80
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 80, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      80
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 16.4, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      16.4
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/CompressionStream#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;css-nesting&quot;&gt;CSS nesting &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#css-nesting&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Safari 16.5 mostly resolved issues, but also adds support for &lt;a href=&quot;https://developer.chrome.com/articles/css-nesting/&quot; rel=&quot;noopener&quot;&gt;CSS Nesting&lt;/a&gt;, with the new nesting selector &lt;code&gt;&amp;gt;&lt;/code&gt;, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.nesting&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; hotpink&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;&gt; .is&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rebeccapurple&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;&gt; .awesome&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; deeppink&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 112, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
112
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari preview, Preview&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;preview&quot; title=&quot;Preview&quot; aria-label=&quot;Preview&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/Nesting_selectors#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;balancing-headlines-with-text-wrap-balance&quot;&gt;Balancing headlines with &lt;code&gt;text-wrap: balance&lt;/code&gt; &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#balancing-headlines-with-text-wrap-balance&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;From Chrome 114 you can use &lt;code&gt;text-wrap: balance&lt;/code&gt;. This allows you to balance headlines, avoiding the issue of having a single word on the final line, providing a more pleasing and readable result. You can find out more in &lt;a href=&quot;https://developer.chrome.com/blog/css-text-wrap-balance/&quot; rel=&quot;noopener&quot;&gt;CSS text-wrap: balance&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;chips-cookies-having-independent-partitioned-state&quot;&gt;CHIPS: Cookies Having Independent Partitioned State &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#chips-cookies-having-independent-partitioned-state&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;As part of the work to &lt;a href=&quot;https://developer.chrome.com/docs/privacy-sandbox/third-party-cookie-phase-out/&quot; rel=&quot;noopener&quot;&gt;phase out third-party cookies&lt;/a&gt;, &lt;a href=&quot;https://developer.chrome.com/docs/privacy-sandbox/chips/&quot; rel=&quot;noopener&quot;&gt;CHIPS&lt;/a&gt; enables opting-in to third-party cookies being partitioned by top-level site using the new cookie attribute &lt;code&gt;Partitioned&lt;/code&gt;. CHIPS is available in Chrome 114.&lt;/p&gt;
&lt;h3 id=&quot;the-popover-api&quot;&gt;The Popover API &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#the-popover-api&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Also in Chrome 114 is the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Popover_API&quot; rel=&quot;noopener&quot;&gt;Popover API&lt;/a&gt; making it easier to build transient user interface (UI) elements that are displayed on top of all other web app UI.&lt;/p&gt;
&lt;p&gt;These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI.&lt;/p&gt;
&lt;p&gt;The new popover attribute enables any element to be displayed in the &lt;a href=&quot;https://developer.chrome.com/blog/top-layer-devtools/&quot; rel=&quot;noopener&quot;&gt;top layer&lt;/a&gt; automatically. This means no more worrying about positioning, stacking elements, focus or keyboard interactions for the developer.&lt;/p&gt;
&lt;p&gt;Learn more in &lt;a href=&quot;https://developer.chrome.com/blog/introducing-popover-api/&quot; rel=&quot;noopener&quot;&gt;Introducing the popover API&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 114, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      114
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 114, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
114
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/ToggleEvent#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h2 id=&quot;beta-browser-releases&quot;&gt;Beta browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-05-2023/#beta-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Beta browser versions give you a preview of things that will be in the next stable version of the browser. It&#39;s a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/114&quot; rel=&quot;noopener&quot;&gt;Firefox 114&lt;/a&gt;, &lt;a href=&quot;https://developer.chrome.com/blog/chrome-115-beta/&quot; rel=&quot;noopener&quot;&gt;Chrome 115&lt;/a&gt;, and &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 16.6&lt;/a&gt;. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.&lt;/p&gt;
&lt;p&gt;Chrome 115 includes multiple values for the CSS &lt;code&gt;display&lt;/code&gt; property. This means that &lt;code&gt;display: flex&lt;/code&gt; becomes &lt;code&gt;display: block flex&lt;/code&gt; and &lt;code&gt;display: block&lt;/code&gt; becomes &lt;code&gt;display: block flow&lt;/code&gt;. The single values are maintained as legacy keywords, and once in Chrome Stable this makes the multiple values available accross all engines.&lt;/p&gt;
&lt;p&gt;Also in Chrome 115 are the &lt;code&gt;ScrollTimeline&lt;/code&gt; and &lt;code&gt;ViewTimeline&lt;/code&gt; extensions to the Web Animations specification. These enable &lt;a href=&quot;https://developer.chrome.com/articles/scroll-driven-animations/&quot; rel=&quot;noopener&quot;&gt;scroll-driven animations&lt;/a&gt; via CSS and JavaScript.&lt;/p&gt;
&lt;p&gt;Firefox 114 includes the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/WebTransport_API&quot; rel=&quot;noopener&quot;&gt;WebTransport API&lt;/a&gt;, a modern update to WebSockets providing support for multiple streams, unidirectional streams, and out-of-order delivery.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Photo by &lt;a href=&quot;https://unsplash.com/@photozace&quot; rel=&quot;noopener&quot;&gt;Photoz ace&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Deploying AVIF for more responsive websites
        </title>
        <link href="https://web.dev/avif-updates-2023/"/>
        <updated>
            2023-05-24T00:00:00Z
        </updated>
        <id>
            https://web.dev/avif-updates-2023/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;&lt;a href=&quot;https://aomedia.org/avif/&quot; rel=&quot;noopener&quot;&gt;AVIF&lt;/a&gt; is a new image format that is quickly gaining popularity on the web because of its high compression rates, efficient performance, and broad adoption. AVIF is an open, royalty-free image format that is based on the AV1 video codec standardized by the Alliance for Open Media. This blog post will provide an overview of how AVIF is adopted in the ecosystem, and what kind of performance and quality benefits developers can expect from AVIF for still images and animations.&lt;/p&gt;
&lt;h2 id=&quot;whats-new-with-the-avif-ecosystem&quot;&gt;What’s new with the AVIF ecosystem? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/avif-updates-2023/#whats-new-with-the-avif-ecosystem&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since the introduction of AVIF in Chrome, Firefox and Safari, usage of AVIF on the web has been growing steadily; &lt;a href=&quot;https://caniuse.com/avif&quot; rel=&quot;noopener&quot;&gt;almost all browsers&lt;/a&gt; support AVIF today.&lt;/p&gt;
&lt;p&gt;In Chrome alone, AVIF usage grew to approximately one percent in a little over a year after Chrome added AVIF support in stable.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A line graph of AVIF usage in Chrome from May 2021 to March 2023. Support has steadily grown from 0% to just beneath 1.4%.&quot; decoding=&quot;async&quot; height=&quot;367&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/QunCznNR5EJf8lp4rGNe.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;A number of image CDNs, such as &lt;a href=&quot;https://techdocs.akamai.com/ivm/changelog/apr-07-2021-new-policy-filters-and-avif-image-format&quot; rel=&quot;noopener&quot;&gt;Akamai&lt;/a&gt;, &lt;a href=&quot;https://blog.cloudflare.com/images-avif-blur-bundle/&quot; rel=&quot;noopener&quot;&gt;Cloudflare&lt;/a&gt;, &lt;a href=&quot;https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary&quot; rel=&quot;noopener&quot;&gt;Cloudinary&lt;/a&gt; and &lt;a href=&quot;https://blog.imgix.com/2021/10/27/avif-limited-availability&quot; rel=&quot;noopener&quot;&gt;Imgix&lt;/a&gt; are serving AVIF images today. In a &lt;a href=&quot;https://blog.imgix.com/2021/10/27/avif-limited-availability&quot; rel=&quot;noopener&quot;&gt;blog post&lt;/a&gt; announcing AVIF support, Imgix reported 60% file size savings compared to JPEG and 35% savings compared to WebP. These file size savings lead to significant storage savings, but also help pages load faster, yielding faster &lt;a href=&quot;https://web.dev/lcp/&quot;&gt;Largest Contentful Paint (LCP)&lt;/a&gt; times. LCP is one of the &lt;a href=&quot;https://web.dev/learn-core-web-vitals/&quot;&gt;Core Web Vitals&lt;/a&gt;, and represents how quickly the largest block of content on the page has loaded. Using modern codecs to compress images is one of the &lt;a href=&quot;https://web.dev/optimize-lcp/&quot;&gt;key techniques&lt;/a&gt; to reduce LCP. &lt;a href=&quot;https://developer.chrome.com/docs/lighthouse/overview/&quot; rel=&quot;noopener&quot;&gt;Lighthouse&lt;/a&gt; is a great Chrome developer tool for testing your web site and to see &lt;a href=&quot;https://developer.chrome.com/en/docs/lighthouse/performance/uses-webp-images/&quot; rel=&quot;noopener&quot;&gt;how much savings AVIF would bring&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;WordPress is the &lt;a href=&quot;https://www.wpbeginner.com/beginners-guide/ultimate-list-of-wordpress-stats-facts-and-other-research/&quot; rel=&quot;noopener&quot;&gt;most popular&lt;/a&gt; website platform in the world, and there are number of plugins available for developers to convert their images to AVIF, such as:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wordpress.org/plugins/autoptimize/&quot; rel=&quot;noopener&quot;&gt;AutoOptimize&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wordpress.org/plugins/webp-converter-for-media/&quot; rel=&quot;noopener&quot;&gt;Converted for Media&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://ewww.io/&quot; rel=&quot;noopener&quot;&gt;EWWW Image Optimizer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://optimole.com/&quot; rel=&quot;noopener&quot;&gt;Optimole&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://shortpixel.com/&quot; rel=&quot;noopener&quot;&gt;ShortPixel Image Optimizer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For more hands-on developers, tools like &lt;a href=&quot;https://imagemagick.org/index.php&quot; rel=&quot;noopener&quot;&gt;ImageMagick&lt;/a&gt; and &lt;a href=&quot;https://ffmpeg.org/&quot; rel=&quot;noopener&quot;&gt;FFmpeg&lt;/a&gt; are a good starting point.&lt;/p&gt;
&lt;h2 id=&quot;avif-encode-speed&quot;&gt;AVIF encode speed &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/avif-updates-2023/#avif-encode-speed&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Fast encoding speed and high visual quality are critical for deploying image compression at scale. AVIF software encoding speed has improved significantly over the past two years. Compared to other modern still image formats, AVIF produces smaller files with similar visual quality (see the following graph, lower is better) but is also &lt;a href=&quot;https://storage.googleapis.com/avif-comparison/subset1.html&quot; rel=&quot;noopener&quot;&gt;faster to encode&lt;/a&gt;.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A bar chart comparing various image codec file sizes as a percentage of the output of TurboJPEG. AVIF is lowest, then JPEG XL, then WebP, and finally MozJPEG.&quot; decoding=&quot;async&quot; height=&quot;415&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/bmoOLQMWjYTQzWK8hPE8.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;The chart below (higher is better) illustrates how AVIF encoding speed compares to other image formats. Previous generation codecs like WebP benefit from the less complex (but also less efficient) compression algorithms. With a multi-threaded encoding scheme, AVIF achieves similar performance for common use cases while delivering significant compression gains.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A comparison of image codec encoding speed. The compared encoders are average AVIF, average JPEG XL, average WebP (one thread), and average MozJPEG (one thread). AVIF is generally one of the fastest image encoders in terms of best quality and default effort, but is the slowest of all encoders for on-the-fly performance.&quot; decoding=&quot;async&quot; height=&quot;433&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/FSzUG4d4ixJQytow1WNU.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;For developers interested in more detailed encoding speed and visual quality comparisons, the &lt;a href=&quot;https://storage.googleapis.com/avif-comparison/index.html&quot; rel=&quot;noopener&quot;&gt;Image Coding Comparisons&lt;/a&gt; site contains reproducible benchmark results.&lt;/p&gt;
&lt;p&gt;While software implementations for modern image codecs like AVIF and WebP are optimized for x86 and ARM processors architectures, compressing vast amounts of images at scale can be computationally expensive. One alternative to reduce compression costs is to explore hardware acceleration. &lt;a href=&quot;https://www.blue-dot.io/&quot; rel=&quot;noopener&quot;&gt;Bluedot&lt;/a&gt; has developed a hardware accelerated Pulsar-AVIF encoder running on programmable FPGAs, such as AMD&#39;s Alveo U250. Compared to software based avifenc, Pulsar-AVIF delivers a 7 to 23 times speed improvement with similar &lt;a href=&quot;https://www.blue-dot.io/avif-speed-quality-benchmark/&quot; rel=&quot;noopener&quot;&gt;compression efficiency&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;table-wrapper scrollbar&quot;&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Encoder&lt;/th&gt;
        &lt;th&gt;Encode time (ms)&lt;/th&gt;
        &lt;th&gt;Frames per second&lt;/th&gt;
        &lt;th&gt;CPU utilization&lt;/th&gt;
        &lt;th&gt;Hardware specification&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          Pulsar-AVIF&lt;br /&gt;
          (FPGA)
        &lt;/td&gt;
        &lt;td&gt;60&lt;/td&gt;
        &lt;td&gt;409.85&lt;/td&gt;
        &lt;td&gt;305%&lt;/td&gt;
        &lt;td&gt;
          AMD Alveo U250 1ea + Intel(R) Xeon(R)&lt;br /&gt;
          Platinum 8171 CPU at 2.6GHz, 10 cores
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          avifenc&lt;br /&gt;
          (libaom)
        &lt;/td&gt;
        &lt;td&gt;405&lt;/td&gt;
        &lt;td&gt;59.26&lt;/td&gt;
        &lt;td&gt;3200%&lt;/td&gt;
        &lt;td&gt;
          Intel(R) Xeon(R) Platinum 8370C CPU at&lt;br /&gt;
          2.8GHz, 32 cores
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          avifenc&lt;br /&gt;
          (SVT-AV1)
        &lt;/td&gt;
        &lt;td&gt;1325&lt;/td&gt;
        &lt;td&gt;18.11&lt;/td&gt;
        &lt;td&gt;3200%&lt;/td&gt;
        &lt;td&gt;
          Intel(R) Xeon(R) Platinum 8370C CPU at&lt;br /&gt;
          2.8GHz, 32 cores
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;caption&gt;
      AVIF encode speed comparison&lt;br /&gt;
      &lt;ul&gt;
        &lt;li&gt;Test set: Kodak (24 images of 768x512)&lt;/li&gt;
        &lt;li&gt;Encoding 24 images simultaneously (24 processes)&lt;/li&gt;
        &lt;li&gt;Each software encoding process is executed with 4 threads. (-j 4)&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/caption&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;Developers can deploy Pulsar-AVIF encoder with cloud virtual machines, such as &lt;a href=&quot;https://learn.microsoft.com/en-us/azure/virtual-machines/np-series&quot; rel=&quot;noopener&quot;&gt;Azure NP-Series&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;avif-features-for-responsive-web-pages&quot;&gt;AVIF features for responsive web pages &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/avif-updates-2023/#avif-features-for-responsive-web-pages&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;AVIF has a few interesting features that will help to deliver more responsive web pages. This time we’ll dive a bit into animated AVIFs, which are by far the most efficient way of delivering cool animations on the web.&lt;/p&gt;
&lt;h3 id=&quot;animated-avif&quot;&gt;Animated AVIF &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/avif-updates-2023/#animated-avif&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Animated &lt;a href=&quot;https://en.wikipedia.org/wiki/GIF&quot; rel=&quot;noopener&quot;&gt;GIF&lt;/a&gt; is still &lt;a href=&quot;https://almanac.httparchive.org/en/2022/media#gifs-animated-and-not&quot; rel=&quot;noopener&quot;&gt;a popular format&lt;/a&gt; for animated images, despite being 35 years old. Biggest drawbacks of animated GIFs are the support for 256 colors only and poor compression leading to very large file sizes while also limiting the resolution or frame rate for practical use cases. In contrast, animated AVIF coding is actually the same as AV1 video coding scheme which provides significant file size savings compared to animated GIF.&lt;/p&gt;
&lt;p&gt;We ran a simple benchmark where we encoded a set of animated GIFs to both AVIF and JPEG XL. Over the test set, median file size savings percentage was approximately 86% compared to original GIF files and about 73% compared to animated JPEG XL files*.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A comparison of animated image codec performance. AVIF outperforms GIF and JPEG XL in terms of both average and median file size.&quot; decoding=&quot;async&quot; height=&quot;371&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 600px) 600px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ltmx3lsTIyqiVcRAaYXL.png?auto=format&amp;w=1200 1200w&quot; width=&quot;600&quot; /&gt;
  &lt;figcaption&gt;
    * libavif and libjxl versions: libavif version 4cff6a3 (libaom version v3.5.0), libjxl version 176b1c03. Test set: 15 sample GIFs from &lt;a href=&quot;https://commons.wikimedia.org/wiki/Category:Animated_GIF_files.&quot; rel=&quot;noopener&quot;&gt;Wikipedia&lt;/a&gt;.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Chrome, Firefox and Safari all support animated AVIF playbacks.&lt;/p&gt;
&lt;p&gt;FFmpeg is one tool to use for creating animated AVIF files, here’s a basic example of converting a GIF to AVIF using FFmpeg:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;ffmpeg -i &lt;span class=&quot;token string&quot;&gt;&quot;&lt;span class=&quot;token variable&quot;&gt;$INPUT_GIF&lt;/span&gt;&quot;&lt;/span&gt; -crf &lt;span class=&quot;token variable&quot;&gt;$CRF&lt;/span&gt; -b:v &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&lt;span class=&quot;token variable&quot;&gt;$OUTPUT&lt;/span&gt;.avif&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;&lt;code&gt;$CRF&lt;/code&gt; is the desired output quality on a scale of &lt;code&gt;0&lt;/code&gt; to &lt;code&gt;63&lt;/code&gt;. Lower values mean better quality and greater file size. &lt;code&gt;0&lt;/code&gt; uses &lt;a href=&quot;https://en.wikipedia.org/wiki/Lossless_compression&quot; rel=&quot;noopener&quot;&gt;lossless compression&lt;/a&gt;. Start with a value of &lt;code&gt;23&lt;/code&gt; for small animated AVIF files.&lt;/p&gt;
&lt;p&gt;FFmpeg uses libaom by default for encoding AVIF images, but it can also use &lt;a href=&quot;https://github.com/xiph/rav1e&quot; rel=&quot;noopener&quot;&gt;rav1e&lt;/a&gt; or &lt;a href=&quot;https://gitlab.com/AOMediaCodec/SVT-AV1&quot; rel=&quot;noopener&quot;&gt;SVT-AV1&lt;/a&gt; when available. More information about encoder choices, tuning the encoding parameters for speed/quality trade-offs can be found in &lt;a href=&quot;https://trac.ffmpeg.org/wiki/Encode/AV1&quot; rel=&quot;noopener&quot;&gt;FFmpeg&#39;s AV1 encoding guide&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Another use case is to repackage an AV1 video into AVIF without re-encoding the original file. This is significantly cheaper than decoding/encoding the original AV1 file and makes the AV1 video available for use with the &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; element. Passing &lt;code&gt;-c:v copy&lt;/code&gt; to FFmpeg can do this.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;ffmpeg -i &lt;span class=&quot;token string&quot;&gt;&quot;&lt;span class=&quot;token variable&quot;&gt;$INPUT_AV1_VIDEO&lt;/span&gt;&quot;&lt;/span&gt; -c:v copy -an &lt;span class=&quot;token string&quot;&gt;&quot;&lt;span class=&quot;token variable&quot;&gt;$OUTPUT&lt;/span&gt;.avif&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;h2 id=&quot;conclusions&quot;&gt;Conclusions &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/avif-updates-2023/#conclusions&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;AVIF use on the web has been steadily increasing since launch and is widely supported by browsers, image CDNs, WordPress plugins and encoding tools. All in all, AVIF is a great choice for serving images on the web; AVIF is fast to encode and decode while providing the best quality or smallest file size, whichever you prefer for your website. AVIF is the most efficient way to deliver animations on the web. If you have questions, comments, or feature requests, please reach out on the &lt;a href=&quot;https://groups.google.com/a/aomedia.org/g/av1-discuss&quot; rel=&quot;noopener&quot;&gt;av1-discuss mailing list&lt;/a&gt;, &lt;a href=&quot;https://github.com/AOMediaCodec/community/wiki&quot; rel=&quot;noopener&quot;&gt;AOM Github community&lt;/a&gt;, and &lt;a href=&quot;https://github.com/AOMediaCodec/av1-avif/wiki&quot; rel=&quot;noopener&quot;&gt;AVIF wiki&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/photos/oXlXu2qukGE&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@amal_z7z&quot; rel=&quot;noopener&quot;&gt;Amal S
&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jani Huoponen
            </name>
        </author>
        <author>
            <name>
                Vignesh Venkatasubramanian
            </name>
        </author>
    </entry>
    <entry>
        <title>
            How redBus improved their website&#39;s Interaction to Next Paint (INP) and increased sales by 7%
        </title>
        <link href="https://web.dev/redbus-inp/"/>
        <updated>
            2023-05-10T00:00:00Z
        </updated>
        <id>
            https://web.dev/redbus-inp/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;The web and its capabilities are evolving at a fast pace. You can now build rich and full-featured experiences on the web that can achieve much of what native applications can in terms of capabilities.&lt;/p&gt;
&lt;p&gt;JavaScript is a primary driver for interactivity across the web, but if it&#39;s not used with care, interactions can feel sluggish, and lead users to perceive your website to be non-responsive or altogether broken. Thankfully, the &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; metric was created to address this specific user experience problem.&lt;/p&gt;
&lt;p&gt;INP measures all interactions made with a page during its lifecycle, and reports a single value that is representative of a website&#39;s speed in responding to user inputs. Simply put, if a page&#39;s INP is at or below the &lt;a href=&quot;https://web.dev/inp/#what-is-a-good-inp-score&quot;&gt;good threshold&lt;/a&gt;, all interactions made with a page can be said to be reliably fast.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.redbus.in/&quot; rel=&quot;noopener&quot;&gt;redBus&lt;/a&gt;, a bus booking and ticketing website based in India, undertook a substantial effort to improve their website&#39;s INP, even during the time when it was still considered an experimental metric. As a result of their efforts, they were able to increase sales by 7%, illustrating once again the relationship between web performance and business health. Here&#39;s what redBus did to improve their website&#39;s INP.&lt;/p&gt;
&lt;h2 id=&quot;top-goals&quot;&gt;Top goals &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#top-goals&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When redBus set out to optimize their website&#39;s INP, they had three goals in mind:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Provide a better user experience for users by focusing on interaction latency regardless of network speed and device capabilities.&lt;/li&gt;
&lt;li&gt;Optimize their website to keep interactions as fast as possible.&lt;/li&gt;
&lt;li&gt;Ensure that responses from their API were as light as possible to ensure fast data transfer to the front end.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;the-journey&quot;&gt;The journey &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#the-journey&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;redBus categorized interaction latency in two ways:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Interaction latency caused by blocking JavaScript on the client. When interactions use excessive JavaScript that blocks the main thread, rendering is delayed, and this affects a page&#39;s INP.&lt;/li&gt;
&lt;li&gt;Network latency caused by API calls. While network activity is not something that INP measures, an interaction reliant on a call to a remote API can feel sluggish on slower networks, or if requests result in large responses.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;redBus was initially quite confident that the INP for their website would be good, but the &lt;a href=&quot;https://en.wikipedia.org/wiki/Real_user_monitoring&quot; rel=&quot;noopener&quot;&gt;Real User Monitoring (RUM)&lt;/a&gt; data for this metric at the 95th percentile told a different story.&lt;/p&gt;
&lt;h2 id=&quot;how-redbus-measured-inp&quot;&gt;How redBus measured INP &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#how-redbus-measured-inp&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;redBus relied on the &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;web-vitals&lt;/code&gt; JavaScript library&lt;/a&gt; built by Google to track not just INP, but all important user experience metrics for all pages across their website. In addition to the &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library, redBus used &lt;a href=&quot;https://www.elastic.co/what-is/elk-stack&quot; rel=&quot;noopener&quot;&gt;ELK&lt;/a&gt; to analyze INP data that was collected on the front end.&lt;/p&gt;
&lt;p&gt;However, how you track your website&#39;s INP in &lt;a href=&quot;https://web.dev/lab-and-field-data-differences/#field-data&quot;&gt;the field&lt;/a&gt; may be quite different from how redBus approached the problem. We highly recommend that you read about &lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/&quot;&gt;how to find slow interactions in the field&lt;/a&gt; to learn how to best to track INP for your websites, and subsequently &lt;a href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/&quot;&gt;how to reproduce them in the lab&lt;/a&gt; before you begin &lt;a href=&quot;https://web.dev/optimize-inp/&quot;&gt;optimizing interactions&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Once redBus had a system in place for tracking INP, they were able to analyze the data in order to gain a better understanding of where slow interactivity was present.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the ELK logging system reporting INP values for analysis.&quot; decoding=&quot;async&quot; height=&quot;287&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A screenshot of the logging system used by redBus to analyze INP values collected from the field. (&lt;a href=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/s4JxEJgRhQAYZRSi7X3m.png&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;Click for a higher resolution version of this image&lt;/a&gt;.)
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;use-cases&quot;&gt;Use cases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#use-cases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When users search for fares on the redBus website, they can change the date on the search page to filter selected fares for the desired destination. The interaction to change the date on this page was slow, and was a cause of poor INP.&lt;/p&gt;
&lt;p&gt;Additionally, when a user scrolls through fares, additional fares are lazy-loaded from the API. &lt;a href=&quot;https://web.dev/inp/#whats-in-an-interaction&quot;&gt;Though scrolling itself isn&#39;t factored in how INP is measured&lt;/a&gt;, the &lt;code&gt;scroll&lt;/code&gt; event listener itself schedules a lot of work that must run on the main thread. This work was causing contention on the main thread that increased interaction latency, leading to poor INP on the search page.&lt;/p&gt;
&lt;figure&gt;
  &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;&gt;
    &lt;source src=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xcxqqKz4JaUO9yQlS3Ex.webm&quot; type=&quot;video/webm&quot; /&gt;
  &lt;/video&gt;
  &lt;figcaption&gt;
    The lazy-loading behavior used to load additional fares from the API on scroll. (&lt;a href=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/xcxqqKz4JaUO9yQlS3Ex.webm&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;Click for a higher resolution version of this video&lt;/a&gt;.)
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;how-redbus-optimized-inp-for-the-search-page&quot;&gt;How redBus optimized INP for the search page &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#how-redbus-optimized-inp-for-the-search-page&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To improve the search page&#39;s INP, redBus made several optimizations:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Element/scroll_event&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;scroll&lt;/code&gt;&lt;/a&gt; event handler was &lt;a href=&quot;https://web.dev/debounce-your-input-handlers/&quot;&gt;debounced&lt;/a&gt; in order to reduce the amount of times the event callback would fire in a given period. By lowering the frequency in which &lt;code&gt;scroll&lt;/code&gt; event callback ran, the main thread was able to respond more quickly to user interactions on the search page.&lt;/li&gt;
&lt;li&gt;The resulting rendering work was prioritized by using a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;requestAnimationFrame&lt;/code&gt;&lt;/a&gt; callback. &lt;code&gt;requestAnimationFrame&lt;/code&gt; tells the browser that the work in the callback must be done before the next frame.&lt;/li&gt;
&lt;/ul&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the performance panel in Chrome DevTools showing the redBus website firing scroll event callbacks which are not debounced. The result is that the main thread becomes blocked.&quot; decoding=&quot;async&quot; height=&quot;500&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/seddeACyZ710UvE5s5L7.jpg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Before: scroll handlers firing without debouncing applied to the event callback. A considerable number of blocking tasks on the main thread are present, which will delay interactions.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the performance panel in Chrome DevTools showing the redBus website firing scroll event callbacks which are debounced. The result is that the main thread is less blocked because the scroll event handlers fire far less frequently.&quot; decoding=&quot;async&quot; height=&quot;500&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/op1p5FGFPsSi8cNU21WS.jpg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    After: scroll handlers firing with debouncing applied. The scroll event callbacks fire less frequently, giving the main thread more opportunities to respond to user interactions.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Additionally, the following further optimizations were made to the search results page:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;New batches of results were fetched on the second to last card on the search results page in order to improve the user experience and visual performance by triggering lazy loading earlier.&lt;/li&gt;
&lt;li&gt;Fewer results were fetched on each network call during lazy loading. By reducing fetches from 30 to 10 results, a reduction in INP ranges at 870 to 900 down to 350 to 370 were observed.&lt;/li&gt;
&lt;/ul&gt;
&lt;figure&gt;
  &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;&gt;
    &lt;source src=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZjeONw0InjN2H5FEU0PM.webm&quot; type=&quot;video/webm&quot; /&gt;
  &lt;/video&gt;
  &lt;figcaption&gt;
    The lazy-loading behavior used to load additional fares from the API on scroll. (&lt;a href=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ZjeONw0InjN2H5FEU0PM.webm&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;Click for a higher resolution version of this video&lt;/a&gt;.)
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;While these changes significantly improved the INP of the search page, there was still the problem where the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;change&lt;/code&gt;&lt;/a&gt; event on the search page&#39;s input fields would call an expensive reducer function to update the user interface. This resulted in unnecessary rerendering of the user interface, which affected the page&#39;s INP.&lt;/p&gt;
&lt;figure&gt;
  &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;&gt;
    &lt;source src=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/9A46NHqYLxgWLkFsKGmF.webm&quot; type=&quot;video/webm&quot; /&gt;
  &lt;/video&gt;
  &lt;figcaption&gt;
    INP values reported in the console while the user types in an input field. The resulting INP value of 344 observed in a lab setting falls within the &quot;need improvement&quot; thresholds. (&lt;a href=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/9A46NHqYLxgWLkFsKGmF.webm&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;Click for a higher resolution version of this video&lt;/a&gt;.)
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;To optimize this interaction, redBus managed the state of input components locally and synced it with the &lt;a href=&quot;https://react-redux.js.org/&quot; rel=&quot;noopener&quot;&gt;Redux&lt;/a&gt; store only when an input&#39;s &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Element/blur_event&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;blur&lt;/code&gt;&lt;/a&gt; event was fired. This change reduced the number of rerenders and eliminated unwanted rerendering of the user interface by calling the reducer less frequently.&lt;/p&gt;
&lt;figure&gt;
  &lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot;&gt;
    &lt;source src=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gD8RNByfNP8IsjytGbXZ.webm&quot; type=&quot;video/webm&quot; /&gt;
  &lt;/video&gt;
  &lt;figcaption&gt;
    Improved INP as a result of calling the reducer less frequently on an input field change. (&lt;a href=&quot;https://web-dev.imgix.net/video/jL3OLOhcWUQDnR4XjewLBx4e3PC3/gD8RNByfNP8IsjytGbXZ.webm&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;Click for a higher resolution version of this video&lt;/a&gt;.)
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;With this change, the page&#39;s INP improved by 72%, resulting in a faster and smoother user experience that users are more likely to engage with.&lt;/p&gt;
&lt;h2 id=&quot;business-impact&quot;&gt;Business impact &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/redbus-inp/#business-impact&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The relationship between business health and page performance is well-known. Though INP is a relatively new metric compared to other Core Web Vitals, redBus observed better business outcomes by focusing on improving this important user-centric performance metric. &lt;strong&gt;The result was a 7% overall increase in sales.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;In short, INP helped to paint a picture of runtime performance issues on the redBus website. With the knowledge that there were improvements to be made, redBus was able to observe the problem, reproduce it, and use that crucial information to make optimizations that were beneficial to redBus and its business.&lt;/p&gt;
        </content>
        <author>
            <name>
                Amit Kumar
            </name>
        </author>
        <author>
            <name>
                Saurabh Rajpal
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Introducing Baseline
        </title>
        <link href="https://web.dev/introducing-baseline/"/>
        <updated>
            2023-05-10T00:00:00Z
        </updated>
        <id>
            https://web.dev/introducing-baseline/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Baseline helps you to see, at a glance, whether a feature or API is safe to use in your site or web applications. In this post, learn about the ideas that led to this concept, and how we hope it will help you.&lt;/p&gt;
&lt;div class=&quot;youtube&quot;&gt;  &lt;lite-youtube videoid=&quot;eZa3BgGaAeA&quot;&gt;  &lt;/lite-youtube&gt;&lt;/div&gt;
&lt;h2 id=&quot;keeping-up-with-changes-to-the-web-platform&quot;&gt;Keeping up with changes to the web platform &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/introducing-baseline/#keeping-up-with-changes-to-the-web-platform&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The web of today changes rapidly. Our browsers are &lt;em&gt;evergreen&lt;/em&gt;, with new features landing in stable browsers each month. This is exciting, however it also poses problems. How do web developers keep up with all of this change? How do you know when it&#39;s safe to use a feature? When is it the right time to start to learn, and to invest in new features?&lt;/p&gt;
&lt;p&gt;In the past, we often explained browser support to stakeholders by tying it to a certain browser release (for example, Internet Explorer 11) because the line in the sand a non-evergreen browser created was clear to everyone. Today, the landscape can often seem less clear, with so many features landing it&#39;s a lot of work to check support for everything we use.&lt;/p&gt;
&lt;p&gt;We know how much of a problem this is to developers, because you have consistently &lt;a href=&quot;https://web.dev/deep-dive-into-developer-pain-points/&quot;&gt;told us that it&#39;s a problem&lt;/a&gt;. Over two years ago we decided it was a problem we wanted to try to address.&lt;/p&gt;
&lt;h2 id=&quot;getting-our-own-house-in-order&quot;&gt;Getting our own house in order &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/introducing-baseline/#getting-our-own-house-in-order&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We recognized that we were adding to confusion about the status of features, mixing experimental things in with stable content on our sites. So, we&#39;ve improved the clarity of our own communication channels. We now use web.dev to publish content about the stable web, those things that we can now describe as part of Baseline, and those that are very close to that status. We also highlight the work of other browsers, as we all work together to improve the interoperability of the platform.&lt;/p&gt;
&lt;p&gt;On web.dev you&#39;ll find content such as the &lt;a href=&quot;https://web.dev/tags/newly-interoperable/&quot;&gt;newly interoperable&lt;/a&gt; series, celebrating features that are now supported in all three major engines. We also have our monthly series, covering &lt;a href=&quot;https://web.dev/tags/new-to-the-web/&quot;&gt;what&#39;s new to the web platform&lt;/a&gt; sharing the work of all browsers, and updates about Interop 2023. This site is also home to our best practices guidance in subjects such as performance, accessibility, and fundamental web development skills.&lt;/p&gt;
&lt;p&gt;On &lt;a href=&quot;https://developer.chrome.com/&quot; rel=&quot;noopener&quot;&gt;developer.chrome.com&lt;/a&gt; you can learn about the new things that Chrome is bringing to the web platform. Some of these things are experimental, or only in Chrome right now. Many of the things we post about on developer.chrome.com are coming to other browsers, and we hope to celebrate their interoperable moments very soon, but we want you to have clarity about their status and browser support.&lt;/p&gt;
&lt;p&gt;We have also been adding clear browser support information to everything that we publish, and when our team talks about features at conferences.&lt;/p&gt;
&lt;p&gt;Documentation is really important for adoption of new features, and this year we&#39;ve made sure that the new features we are landing in Chrome have documentation over on MDN. For example, take a look at the documentation for &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/View_Transitions_API&quot; rel=&quot;noopener&quot;&gt;View Transitions&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/WebGPU_API&quot; rel=&quot;noopener&quot;&gt;WebGPU&lt;/a&gt;. We also help support &lt;a href=&quot;https://openwebdocs.org/&quot; rel=&quot;noopener&quot;&gt;Open Web Docs&lt;/a&gt; who contribute documentation for the entire web platform to MDN.&lt;/p&gt;
&lt;h2 id=&quot;working-with-others&quot;&gt;Working with others &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/introducing-baseline/#working-with-others&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Improving what we do was important, however to address the bigger issue we needed to work with others. We&#39;ve been successfully working with our partners at other browser vendors and related companies through &lt;a href=&quot;https://web.dev/interop-2022-wrapup/&quot;&gt;Interop 2022&lt;/a&gt; and &lt;a href=&quot;https://web.dev/interop-2023/&quot;&gt;2023&lt;/a&gt;. Forming the &lt;a href=&quot;https://www.w3.org/community/webdx/&quot; rel=&quot;noopener&quot;&gt;WebDX Community Group&lt;/a&gt; brought everyone together to think about this issue of clarity across the platform as a whole.&lt;/p&gt;
&lt;p&gt;The group is working together on a &lt;a href=&quot;https://github.com/web-platform-dx/feature-set&quot; rel=&quot;noopener&quot;&gt;feature set&lt;/a&gt;, a way to group web platform features to show their support status, and this feature-set is key to the concept of Baseline.&lt;/p&gt;
&lt;h2 id=&quot;creating-platform-wide-clarity-with-baseline&quot;&gt;Creating platform-wide clarity with Baseline &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/introducing-baseline/#creating-platform-wide-clarity-with-baseline&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://web.dev/baseline&quot;&gt;Baseline&lt;/a&gt; is the line in the sand that is hard to identify in a world of evergreen browsers. Everything that is fully supported in the most recent two versions of major browsers will be part of Baseline. Therefore if your library states that all features used are part of Baseline, developers know what you mean. When creating a proposal for a new application, you can explain to stakeholders that browser support will be tied to Baseline, thus creating clarity for everyone as to levels of support.&lt;/p&gt;
&lt;p&gt;From today you will start to see Baseline appearing on pages &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/grid&quot; rel=&quot;noopener&quot;&gt;on MDN&lt;/a&gt;, and on &lt;a href=&quot;https://web.dev/baseline-features/&quot;&gt;web.dev&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;As Baseline will be a continuously moving line, with new features becoming part of that set each month, every year we will publish a cut of features that are part of Baseline at one moment in time. For extra clarity, you can tie support to Baseline 24, for example.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; We&#39;re also quite excited by the ability to compare year-on-year what Baseline looks like. What will have changed between Baseline 24 and Baseline 25? That will be interesting to see. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;whats-next&quot;&gt;What&#39;s next? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/introducing-baseline/#whats-next&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We&#39;ll be continuing the rollout of Baseline across web.dev. When reading an article or tutorial, you&#39;ll be able to see when the features described are part of Baseline. You won&#39;t get part of the way through something and realize it uses something that doesn&#39;t have good browser support.&lt;/p&gt;
&lt;p&gt;We&#39;ll be providing widgets that you can use on your own articles or libraries, indicating support for the Baseline feature set.&lt;/p&gt;
&lt;p&gt;We&#39;ll also be working to ensure that new features we are landing in Chrome become part of Baseline as quickly as possible. Watch out for future posts where we&#39;ll talk more about that work.&lt;/p&gt;
&lt;p&gt;And we&#39;ll be gathering feedback from developers to find out how this idea is working in practice, and what more you would like to see. Keep an eye on the &lt;a href=&quot;https://web.dev/baseline/&quot;&gt;Baseline page&lt;/a&gt;, or offer feedback right now via the &lt;a href=&quot;https://www.w3.org/community/webdx/&quot; rel=&quot;noopener&quot;&gt;WebDX Community Group&lt;/a&gt;.&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Advancing Interaction to Next Paint
        </title>
        <link href="https://web.dev/inp-cwv/"/>
        <updated>
            2023-05-10T00:00:00Z
        </updated>
        <id>
            https://web.dev/inp-cwv/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Chrome&#39;s mission with the &lt;a href=&quot;https://web.dev/vitals/&quot;&gt;Web Vitals program&lt;/a&gt; is to help developers focus on the metrics that are essential to great user experiences—the Core Web Vitals. One important aspect of the user experience that we&#39;ve been focusing on is responsiveness, which is the ability of a web page to react quickly to user interactions.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://web.dev/fid/&quot;&gt;First Input Delay (FID)&lt;/a&gt; is the Core Web Vital metric that measures responsiveness, but as we&#39;ve written in the past, there are &lt;a href=&quot;https://web.dev/better-responsiveness-metric/&quot;&gt;known limitations of FID&lt;/a&gt;. This led us to explore and seek feedback on a (then) &lt;a href=&quot;https://web.dev/responsiveness/&quot;&gt;experimental metric&lt;/a&gt; that addresses these limitations more effectively. In 2022, we announced &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; as  that new metric, made it widely available in our tools, and started working with the community to test its efficacy.&lt;/p&gt;
&lt;p&gt;After another year of testing and gathering feedback from the community, we&#39;re ready to take the training wheels off and announce that INP is no longer experimental. Furthermore, effective March 2024, we&#39;re also committed to promoting INP as the new Core Web Vital metric for responsiveness, replacing FID.&lt;/p&gt;
&lt;p&gt;In this post, we&#39;ll cover more about the motivation behind the decision, exactly what&#39;s changing, and how to get started. For more on how this affects Google Search, refer to &lt;a href=&quot;https://developers.google.com/search/blog/2023/05/introducing-inp&quot; rel=&quot;noopener&quot;&gt;their blog post&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;a-better-responsiveness-metric&quot;&gt;A better responsiveness metric &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/inp-cwv/#a-better-responsiveness-metric&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;FID was a huge step forward when we &lt;a href=&quot;https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html&quot; rel=&quot;noopener&quot;&gt;introduced&lt;/a&gt; it as a Core Web Vital in 2020. It offered developers a new way to measure responsiveness &lt;em&gt;as real users experience it&lt;/em&gt;, which has always been an important part of the Web Vitals program. Unlike similar metrics that only approximate page interactivity—like &lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt; and &lt;a href=&quot;https://web.dev/tti/&quot;&gt;Time To Interactive (TTI)&lt;/a&gt;—FID directly measures the user experience. Crucially, a page could have slow TBT or TTI and still be perceived as responsive, because of the way real users interact with the page.&lt;/p&gt;
&lt;p&gt;While it did improve the way we measure responsiveness, FID wasn&#39;t without limitations. The name itself actually gives away two such limitations: &amp;quot;first input&amp;quot; and &amp;quot;delay&amp;quot;.  FID only reports the responsiveness of the &lt;em&gt;first&lt;/em&gt; time a user interacts with the page. Even though first impressions are important, the first interaction is not necessarily representative of &lt;em&gt;all&lt;/em&gt; interactions throughout the life of a page. Further, FID only measures the &lt;em&gt;input delay&lt;/em&gt; portion of the first interaction, which is the amount of time the browser had to wait (due to main thread busyness) before even beginning to handle the interaction.&lt;/p&gt;
&lt;p&gt;Enter INP. Rather than only measuring the first interaction, INP takes &lt;a href=&quot;https://web.dev/inp/#whats-in-an-interaction&quot;&gt;&lt;em&gt;all&lt;/em&gt; interactions&lt;/a&gt; into account, reporting one of the slowest over the entire lifetime of the page. And, rather than only measuring the delay portion, INP measures the full duration from the start of the interaction, through the event handler, and until the browser is able to paint the next frame. Hence, Interaction to &lt;em&gt;Next Paint&lt;/em&gt;. These implementation details make INP a much more comprehensive measure of user-perceived responsiveness than FID.&lt;/p&gt;
&lt;h2 id=&quot;evolving-inp&quot;&gt;Evolving INP &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/inp-cwv/#evolving-inp&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Starting today, INP is no longer experimental and will instead be considered a &lt;a href=&quot;https://web.dev/vitals/#pending&quot;&gt;&lt;em&gt;pending&lt;/em&gt; Core Web Vital metric&lt;/a&gt;. This is a new designation to indicate that INP has proven its readiness to replace FID—but we&#39;re not making the change just yet. To give the ecosystem time to adjust, INP will officially become a stable Core Web Vital metric in March 2024.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Graphic showing the timeline of INP phases, starting from when Chrome announced experimental support for INP in May 2022, to today in May 2023 when Chrome is announcing that INP is now a non-experimental, pending Core Web Vital metric, and finally to March 2024 when INP becomes a stable Core Web Vital metric, replacing FID.&quot; decoding=&quot;async&quot; height=&quot;270&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/so4oTRZP5vEEB6m8xo5L.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Graphic showing the timeline of INP phases.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Across our tools, you&#39;ll start to see INP without the &lt;code&gt;experimental&lt;/code&gt; prefix or icon. If you programmatically consume INP data from any of the following APIs, you&#39;ll need to update your code to switch over to the non-experimental INP field.&lt;/p&gt;
&lt;div class=&quot;table-wrapper scrollbar&quot;&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Tool&lt;/th&gt;
        &lt;th&gt;Deprecated field&lt;/th&gt;
        &lt;th&gt;New field&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;CrUX API&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;experimental_interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;CrUX History API&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;experimental_interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;CrUX BigQuery&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;experimental.interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;PageSpeed Insights API&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;experimental_interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;interaction_to_next_paint&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Lighthouse report*&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;experimental-interaction-to-next-paint&lt;/code&gt;&lt;/td&gt;
        &lt;td&gt;&lt;code&gt;interaction-to-next-paint&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;caption style=&quot;max-width: 60ch;&quot;&gt;
      Map of APIs to their old and new INP field name.&lt;br /&gt;
      * Lighthouse will stop using the experimental INP field in version 11.
    &lt;/caption&gt;
  &lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;To ease the transition and avoid breaking any downstream applications, these APIs will continue to serve the experimental INP field for another 90 days. API support for the experimental INP field will end on August 8, 2023.&lt;/p&gt;
&lt;p&gt;Meanwhile, FID will remain a Core Web Vital until March 2024. At that time, INP will join &lt;a href=&quot;https://web.dev/lcp/&quot;&gt;Largest Contentful Paint (LCP)&lt;/a&gt; and &lt;a href=&quot;https://web.dev/cls/&quot;&gt;Cumulative Layout Shift (CLS)&lt;/a&gt; as the three stable Core Web Vitals. In a future update, we&#39;ll share more information about the precise timing of the change and the plan for FID after it&#39;s replaced as a Core Web Vital.&lt;/p&gt;
&lt;h2 id=&quot;getting-started-with-inp&quot;&gt;Getting started with INP &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/inp-cwv/#getting-started-with-inp&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;style&gt;
  .inp-mobile {
    display: inline;
  }

  .inp-desktop {
    display: none;
  }

  @media screen and (min-width: 640px) {
    .inp-mobile {
      display: none;
    }

    .inp-desktop {
      display: inline;
    }
  }
&lt;/style&gt;
&lt;figure&gt;
  &lt;svg title=&quot;A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page&#39;s responsiveness needs improvement. Anything over 500 milliseconds means that a page&#39;s responsiveness is poor.&quot; class=&quot;inp-mobile&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 296.6 220.2&quot; style=&quot;enable-background:new 0 0 296.6 220.2&quot; xml:space=&quot;preserve&quot;&gt;&lt;style&gt;.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}&lt;/style&gt;&lt;path class=&quot;st0&quot; d=&quot;M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st1&quot; d=&quot;M0 137.1h96v38.4H0v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st3&quot; d=&quot;M96 137.1h105.6v38.4H96v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st4&quot; d=&quot;M200.6 137.1h96v38.4h-96v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;svg title=&quot;A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page&#39;s responsiveness needs improvement. Anything over 500 milliseconds means that a page&#39;s responsiveness is poor.&quot; class=&quot;inp-desktop&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 658.4 113.6&quot; style=&quot;enable-background:new 0 0 658.4 113.6&quot; xml:space=&quot;preserve&quot;&gt;&lt;style&gt;.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}&lt;/style&gt;&lt;path class=&quot;st0&quot; d=&quot;M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st1&quot; d=&quot;M303.2 14.9h115.2v43.2H303.2V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st3&quot; d=&quot;M418.4 14.9h124.8v43.2H418.4V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st4&quot; d=&quot;M543.2 14.9h115.2v43.2H543.2V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;figcaption&gt;
    Graphic showing the thresholds for good and poor INP.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Don&#39;t wait for INP to become a Core Web Vital in 2024 to start improving it. Your website may very well be in the &lt;a href=&quot;https://httparchive.org/reports/chrome-ux-report#cruxFastFid&quot; rel=&quot;noopener&quot;&gt;93%&lt;/a&gt; of sites that have good FID performance on mobile devices; however, you might be surprised to learn that only &lt;a href=&quot;https://httparchive.org/reports/chrome-ux-report#cruxFastInp&quot; rel=&quot;noopener&quot;&gt;65%&lt;/a&gt; of sites have good INP on mobile devices. INP paints a much more accurate picture of responsiveness, so these numbers help us to more clearly see the room for improvement ahead of us.&lt;/p&gt;
&lt;p&gt;To find out whether your site has INP issues, how to address them, and all things INP, the best place to start is the &lt;a href=&quot;https://web.dev/optimize-inp/&quot;&gt;INP optimization guide&lt;/a&gt;. Whether you&#39;re learning about responsiveness for the first time or you&#39;re a performance expert, we&#39;ve added a lot of new guidance to make it as easy as possible for everyone to learn how to measure and optimize INP.&lt;/p&gt;
&lt;p&gt;INP might take some time to learn, and that&#39;s just fine. To help you focus on the optimizations with the biggest ROI, earlier this year we published &lt;a href=&quot;https://web.dev/top-cwv-2023/&quot;&gt;a blog post&lt;/a&gt; to distill our guidance down to the most effective recommendations to improve Core Web Vitals. Specifically, we wrote about three must-know techniques that apply equally to optimizing FID and INP: avoid or break up long tasks, avoid unnecessary JavaScript, and avoid large rendering updates. You can learn more about these and many other INP optimization techniques in &lt;a href=&quot;https://web.dev/optimize-inp/&quot;&gt;our documentation&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;the-road-ahead&quot;&gt;The road ahead &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/inp-cwv/#the-road-ahead&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;A new bar for responsiveness has been set, and we&#39;re excited to see the community rise to the challenge for a better user experience. The early &lt;a href=&quot;https://groups.google.com/g/web-vitals-feedback&quot; rel=&quot;noopener&quot;&gt;feedback&lt;/a&gt; and &lt;a href=&quot;https://web.dev/tags/case-study/&quot;&gt;case studies&lt;/a&gt; have been promising, but we know that for many, it may be a long and unfamiliar road ahead. We strive to make that journey as easy as possible with improved &lt;a href=&quot;https://github.com/w3c/longtasks/blob/main/loaf-explainer.md&quot; rel=&quot;noopener&quot;&gt;diagnostics&lt;/a&gt;, &lt;a href=&quot;https://web.dev/vitals-tools/&quot;&gt;tools&lt;/a&gt;, and &lt;a href=&quot;https://web.dev/optimize-inp/&quot;&gt;documentation&lt;/a&gt; to help developers along the way.&lt;/p&gt;
&lt;p&gt;Stay tuned for updates on INP&#39;s exact graduation date in March 2024. And even though the metric is not experimental anymore, we&#39;re always open to feedback at &lt;a href=&quot;mailto:web-vitals-feedback@googlegroups.com&quot; rel=&quot;noopener&quot;&gt;web-vitals-feedback@googlegroups.com&lt;/a&gt; to help us improve INP and the Web Vitals program as a whole.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@agebarros&quot; rel=&quot;noopener&quot;&gt;Agê Barros&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rick Viscomi
            </name>
        </author>
        <author>
            <name>
                Annie Sullivan
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Economic Times quest for fixing INP
        </title>
        <link href="https://web.dev/economic-times-inp/"/>
        <updated>
            2023-05-10T00:00:00Z
        </updated>
        <id>
            https://web.dev/economic-times-inp/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;&lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; is a metric that assesses a website&#39;s responsiveness to user input. Good responsiveness means that a page is quick to respond to user interactions. The lower a page&#39;s INP is, the better it is able to respond to user interactions.&lt;/p&gt;
&lt;style&gt;
  .inp-mobile {
    display: inline;
  }

  .inp-desktop {
    display: none;
  }

  @media screen and (min-width: 640px) {
    .inp-mobile {
      display: none;
    }

    .inp-desktop {
      display: inline;
    }
  }
&lt;/style&gt;
&lt;figure&gt;
  &lt;svg title=&quot;A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page&#39;s responsiveness needs improvement. Anything over 500 milliseconds means that a page&#39;s responsiveness is poor.&quot; class=&quot;inp-mobile&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 296.6 220.2&quot; style=&quot;enable-background:new 0 0 296.6 220.2&quot; xml:space=&quot;preserve&quot;&gt;&lt;style&gt;.st0{fill:#2979FF} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0CCE6B} .st2{fill:#191919} .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA400} .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill:#191919}} [data-user-theme=light] .st2 {fill:#191919} @media screen and (prefers-color-scheme: dark){.st2{fill:#fff}} [data-user-theme=dark] .st2{fill:#fff}&lt;/style&gt;&lt;path class=&quot;st0&quot; d=&quot;M83.3 63V0h11.9v63H83.3zm26.3 0V0h13.8l25.3 42.2h.7l-.7-12.1V0h11.8v63H148l-26.8-44.6h-.7l.7 12.1V63h-11.6zm65.4 0V0h22.2c4.1 0 7.7.8 10.9 2.5s5.8 4 7.7 7 2.9 6.4 2.9 10.4c0 3.9-1 7.4-2.9 10.4s-4.5 5.4-7.7 7c-3.2 1.7-6.9 2.5-10.9 2.5h-15.6V28.6h15.9c2.1 0 3.8-.4 5.2-1.2s2.5-1.9 3.2-3.2c.7-1.3 1.1-2.8 1.1-4.3s-.4-2.9-1.1-4.2c-.7-1.3-1.8-2.3-3.2-3.2s-3.1-1.2-5.2-1.2h-10.7V63H175z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st1&quot; d=&quot;M0 137.1h96v38.4H0v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M34 161c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-1-1.4-.2-.6-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.6.6-1 1-1.4.4-.4.9-.7 1.4-.9.5-.2 1.1-.3 1.8-.3s1.3.1 1.8.3c.6.2 1 .6 1.4 1l-.9.9c-.2-.2-.4-.4-.6-.5-.2-.1-.5-.3-.8-.3-.3-.1-.6-.1-.9-.1-.4 0-.8.1-1.2.2-.4.1-.7.4-1 .6-.3.3-.5.6-.7 1-.2.4-.2.8-.2 1.3s.1.9.2 1.3c.2.4.4.7.7 1 .3.3.6.5 1 .7.4.1.8.2 1.2.2.4 0 .8-.1 1.1-.2.3-.1.6-.3.9-.5.3-.2.5-.5.6-.8.2-.3.3-.6.3-1H34v-1.2h4.2v.7c0 .6-.1 1.2-.3 1.7-.2.5-.5.9-.9 1.3s-.8.6-1.3.8c-.5.3-1.1.4-1.7.4zm9.5 0c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8 0-.6.1-1.2.3-1.8.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8 0 .6-.1 1.2-.3 1.8-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.3.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.3-1-.4-1.7-.4h-1.4v6z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st3&quot; d=&quot;M96 137.1h105.6v38.4H96v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M130.8 153.9v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm8.7 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.2 3.7v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V149h4.1v1.2h-4.1zm6.1 3.7v-8.6h2.8c.9 0 1.7.2 2.3.5.7.4 1.2.9 1.5 1.5.4.6.5 1.4.5 2.2s-.2 1.6-.5 2.2c-.4.6-.9 1.2-1.5 1.5-.6.4-1.4.5-2.3.5h-2.8zm1.3-1.3h1.4c.6 0 1.2-.1 1.7-.4.5-.2.8-.6 1.1-1 .2-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.6-.2-.5-.6-.8-1.1-1-.5-.2-1-.4-1.7-.4h-1.4v6zm9.9 1.4c-.5 0-.9-.1-1.3-.3-.4-.2-.8-.4-1.1-.8-.3-.4-.5-.8-.7-1.3l1.2-.5c.1.5.3.9.7 1.2.3.3.7.5 1.2.5.3 0 .5 0 .8-.1.2-.1.4-.2.6-.4s.2-.4.2-.7c0-.3-.1-.5-.2-.7-.1-.2-.3-.3-.6-.5s-.6-.3-1-.5l-.5-.2c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.3-.7-.5-.2-.2-.4-.4-.5-.7-.1-.3-.2-.6-.2-.9 0-.4.1-.8.3-1.2.2-.4.5-.6.9-.8.4-.2.9-.3 1.4-.3.6 0 1 .1 1.4.3.4.2.7.4.9.7.2.3.4.5.4.8l-1.2.5c0-.2-.1-.3-.2-.5s-.3-.3-.5-.4c-.2-.1-.4-.2-.8-.2-.2 0-.5.1-.7.2-.2.1-.4.2-.5.4-.1.2-.2.3-.2.6s.1.6.4.8c.3.2.6.4 1.1.5l.6.2c.3.1.6.2.8.3.3.1.5.3.7.5.2.2.4.4.5.7.1.3.2.6.2 1s-.1.8-.3 1.2c-.2.3-.4.6-.7.8-.3.2-.6.3-.9.4s-.5.2-.8.2zM107 167.9v-8.6h1.3v8.6H107zm3.2 0v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6h-1.3V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.4zm10.6 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm7.2 0v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4H128zm2-4h1.5l2.7 3.9v.1h-1.5l-2.7-4zm9.3 4.1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.2.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm7.9 1.1-3-8.6h1.4l1.9 5.7.3 1h.1l.3-1 2-5.7h1.4l-3.1 8.6h-1.3zm5.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2h-4.1zm6.2 3.7v-8.6h1.8l2.5 6.5h.1l2.5-6.5h1.8v8.6H167V163l.1-1.5h-.1l-2.5 6.4h-1l-2.5-6.4h-.1l.1 1.5v4.9h-1.3zm10.6 0v-8.6h5.2v1.2h-3.9v6.1h3.9v1.2h-5.2zm.7-3.7V163h4.1v1.2H171zm6.1 3.7v-8.6h1.6l3.9 6.3h.1l-.1-1.7v-4.7h1.3v8.6h-1.4l-4.1-6.6h-.1l.1 1.7v5h-1.3zm10.5 0V160h1.3v7.9h-1.3zm-2.4-7.4v-1.2h6.1v1.2h-6.1z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st4&quot; d=&quot;M200.6 137.1h96v38.4h-96v-38.4z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M232.5 160.9v-8.6h3c.5 0 1 .1 1.4.3.4.2.8.5 1 .9.3.4.4.9.4 1.4 0 .5-.1 1-.4 1.4-.2.4-.6.7-1 .9-.4.2-.9.3-1.4.3h-2.2v-1.2h2.3c.3 0 .6-.1.8-.2.2-.1.4-.3.5-.5.1-.2.2-.4.2-.7 0-.2-.1-.4-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.3h-1.4zm11 .1c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.5.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.6.3 1.1.4 1.6.4zm9.9 1.2c-.6 0-1.2-.1-1.8-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-.9-.9-1.4-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8c.2-.5.5-1 .9-1.4.4-.4.9-.7 1.4-1 .5-.2 1.1-.3 1.8-.3.6 0 1.2.1 1.8.3.5.2 1 .6 1.4 1 .4.4.7.9.9 1.4.2.5.3 1.1.3 1.8s-.1 1.2-.3 1.8c-.2.5-.5 1-.9 1.4-.4.4-.9.7-1.4 1-.6.2-1.1.3-1.8.3zm0-1.2c.6 0 1.1-.1 1.6-.4.5-.3.8-.7 1.1-1.1.3-.5.4-1.1.4-1.7 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.1-1.1-.5-.3-1-.4-1.6-.4-.6 0-1.1.1-1.6.4-.5.3-.8.7-1.1 1.1-.3.5-.4 1-.4 1.7 0 .6.1 1.2.4 1.7.3.5.7.9 1.1 1.1.5.3 1 .4 1.6.4zm6 1.1v-8.6h3c.5 0 1 .1 1.4.3.4.2.7.5 1 .9.2.4.4.8.4 1.4 0 .3-.1.7-.2 1s-.3.6-.6.8c-.3.2-.6.4-1 .6-.4.1-.8.2-1.2.2h-2.1v-1.2h2.3c.3 0 .5-.1.7-.2.2-.1.4-.3.5-.5.1-.2.2-.5.2-.7 0-.2-.1-.5-.2-.7-.1-.2-.3-.4-.5-.5-.2-.1-.5-.2-.8-.2h-1.7v7.4h-1.2zm2-4h1.5l2.7 3.9v.1H264l-2.6-4zM178.1 219.9c-.5 0-1-.1-1.5-.3-.5-.2-1-.5-1.4-1-.4-.4-.7-1-.8-1.7l1.5-.6c.1.6.4 1 .8 1.4.4.4.9.5 1.4.5.6 0 1.1-.2 1.5-.6.4-.4.6-.9.6-1.5s-.2-1.1-.6-1.5c-.4-.4-.9-.6-1.5-.6-.4 0-.7.1-1 .2-.3.1-.5.4-.7.6l-1.7-.8.7-5.5h5.9v1.6h-4.5l-.4 2.9h.1c.2-.2.5-.3.8-.5.3-.1.7-.2 1.2-.2.6 0 1.2.2 1.7.5s1 .7 1.3 1.3c.3.5.5 1.2.5 1.9s-.2 1.3-.5 1.9c-.3.6-.8 1-1.3 1.3-.7.5-1.4.7-2.1.7zm9.9 0c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm.1-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.7c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.2-1.2.4-1.9.4zm0-1.7c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.3c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.6.2-1.1.4-1.7.4zM69 220v-1.6s.2-.1.4-.4c.2-.2.5-.5.8-.9l1.1-1.1 1-1c.3-.3.5-.6.7-.8.3-.3.5-.6.7-.8.2-.2.3-.5.4-.7.1-.2.1-.5.1-.8 0-.3-.1-.5-.2-.8-.1-.3-.3-.4-.6-.6-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.1-.5.3-.6.6-.1.2-.3.4-.3.7l-1.5-.6c.1-.3.2-.5.4-.8.2-.3.4-.5.7-.8.3-.3.6-.5 1-.6.4-.2.9-.3 1.4-.2.7 0 1.3.2 1.9.5.5.3.9.7 1.2 1.2.3.5.4 1 .4 1.6 0 .5-.1.9-.2 1.3-.2.4-.4.8-.7 1.2-.3.4-.5.7-.8 1l-.5.5c-.2.2-.4.5-.7.7l-.7.7-.6.6-.4.4h4.8v1.6H69zm13.2.2c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.4.3.9.5 1.5.5zm10.5 1.6c-.7 0-1.3-.1-1.9-.4-.5-.3-1-.7-1.4-1.2-.4-.5-.7-1.1-.9-1.8-.2-.7-.3-1.4-.3-2.2 0-.8.1-1.6.3-2.2.2-.7.5-1.3.9-1.8s.9-.9 1.4-1.2c.6-.3 1.2-.5 1.9-.5s1.3.2 1.9.5c.6.3 1 .7 1.4 1.2.4.5.7 1.1.9 1.8.2.7.3 1.4.3 2.2 0 .8-.1 1.6-.3 2.2-.2.7-.5 1.3-.9 1.8s-.9.9-1.4 1.2c-.6.3-1.2.4-1.9.4zm0-1.6c.6 0 1-.2 1.5-.5.4-.4.7-.9 1-1.5.2-.6.3-1.3.3-2.1s-.1-1.5-.3-2.1c-.2-.6-.5-1.1-1-1.5-.4-.4-.9-.5-1.5-.5s-1.1.2-1.5.5c-.4.4-.7.8-.9 1.5-.2.6-.3 1.3-.3 2.1s.1 1.5.3 2.1c.2.6.5 1.1.9 1.5.5.3 1 .5 1.5.5zm10 1.4v-8.2h1.6v1.1h.1c.2-.3.4-.5.6-.7.3-.2.6-.4.9-.5.3-.1.7-.2 1-.2.6 0 1.1.1 1.5.4.4.3.7.7.9 1.1.3-.4.6-.8 1.1-1.1.5-.3 1-.5 1.7-.5 1 0 1.7.3 2.1.9.5.6.7 1.4.7 2.3v5.2h-1.7v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4H108v-4.9c0-.7-.1-1.1-.4-1.4-.3-.3-.7-.5-1.2-.5-.4 0-.7.1-1 .3-.3.2-.5.5-.7.9-.2.4-.2.8-.2 1.2v4.4h-1.8zm17.2.2c-.6 0-1.2-.1-1.7-.3-.5-.2-.9-.5-1.2-.8-.3-.3-.5-.7-.7-1.1l1.5-.7c.2.4.5.8.8 1 .4.2.8.3 1.2.3.4 0 .8-.1 1.1-.2.3-.2.5-.4.5-.8 0-.2-.1-.4-.2-.6-.1-.1-.3-.3-.6-.4-.2-.1-.5-.2-.8-.2l-1-.2c-.4-.1-.8-.3-1.1-.5-.3-.2-.6-.5-.8-.8-.2-.3-.3-.7-.3-1.1 0-.5.1-.9.4-1.3.3-.4.7-.6 1.1-.8.5-.2 1-.3 1.6-.3.5 0 1 .1 1.4.2.4.1.8.3 1.1.6.3.3.6.6.8 1l-1.5.7c-.2-.4-.4-.6-.7-.8-.3-.1-.6-.2-1-.2s-.7.1-1 .2c-.3.2-.4.4-.4.6 0 .3.1.5.4.7.2.2.5.3.9.4l1.2.3c.8.2 1.4.5 1.8.9.4.4.6.9.6 1.5 0 .5-.2 1-.5 1.4-.3.4-.7.7-1.2.9-.5.3-1.1.4-1.7.4zM42.4 96.3V82h1.7v14.3h-1.7zm4.6 0V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H47zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.6-.7-1.3-.7-2.2zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7s1-1.5 1.7-2 1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5H65V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-.9.6-1.8.8-2.9.8zm6.7-.3V86.1h1.6v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7s.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2c-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.5.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm11.8 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5s.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2s-1.9.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zm6.5 2.7V86.1h1.7v10.2h-1.7zm.9-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.2-.6.4-.9.4zm8.1 12.3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2s.7 1.7.7 2.7c0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1-.8-1-1.3-1.3c-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3-.5 1.3-.5 2.1.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.2V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zM143 86.1h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.6-1.7.8-2.7.8zm0-1.5c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.2V82h2.1l7.2 11.4h.1l-.1-2.8V82h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2h-1.7zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V90h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .6-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5V83.3h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.6-.7-1.3-.7-2.2zm11.2 2.7V82h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5H215v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2s-.1-.8-.3-1.2c-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14.1.3c-.8 0-1.4-.1-2-.4s-1-.7-1.3-1.2-.5-1.1-.5-1.8c0-.8.2-1.4.6-1.9s.9-.9 1.5-1.2c.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1s.7.2 1 .3c.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7s1.1-.2 1.6-.2c1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8s-.7.5-1.1.7c-.6.2-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5s-1-.2-1.5-.2c-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4 1 .4 1.6.4zm7.4 1.2V86.1h1.7v10.2h-1.7zm.8-12c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.9c0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.2.2-.5.4-.9.4zm3.5 12V86.1h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V90c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H240zm10.1-10.2h6v1.5h-6v-1.5zm1.7 7.5V83.3h1.7v10c0 .5.1.9.3 1.2s.6.4 1.1.4c.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8s-.7-1.3-.7-2.2zM96 172.8c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v20.1h2v-20.1c1.9-.5 3.3-2.1 3.3-4.2 0-2.3-1.9-4.3-4.3-4.3zM201.6 172.6c-2.4 0-4.3 1.9-4.3 4.3 0 2 1.4 3.7 3.3 4.2v19.8h2v-19.8c1.9-.5 3.3-2.1 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;svg title=&quot;A diagram of the INP thresholds. An INP at or below 200 milliseconds is considered good. Between 200 and 500 milliseconds suggests a page&#39;s responsiveness needs improvement. Anything over 500 milliseconds means that a page&#39;s responsiveness is poor.&quot; class=&quot;inp-desktop&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 658.4 113.6&quot; style=&quot;enable-background:new 0 0 658.4 113.6&quot; xml:space=&quot;preserve&quot;&gt;&lt;style&gt;.st0{fill: #2979FF} v.st1{fill-rule: evenodd;clip-rule: evenodd;fill: #0CCE6B} .st2 {fill: #191919} .st3{fill-rule: evenodd;clip-rule: evenodd;fill: #FFA400} .st4{fill-rule: evenodd;clip-rule: evenodd;fill: #FF4E42} @media screen and (prefers-color-scheme: light){.st2{fill: #191919}} @media screen and (prefers-color-scheme: dark){.st2{fill: #fff}} [data-user-theme=dark] .st2{fill: #fff}&lt;/style&gt;&lt;path class=&quot;st0&quot; d=&quot;M30.2 68.7V0h13v68.7h-13zm28.7 0V0H74l27.7 46.1h.8l-.8-13.2V0h12.9v68.7H101L71.7 20.1h-.8l.8 13.2v35.4H58.9zm71.3 0V0h24.2c4.4 0 8.4.9 11.9 2.7 3.5 1.8 6.3 4.4 8.4 7.6 2.1 3.3 3.1 7 3.1 11.3 0 4.3-1 8.1-3.1 11.4-2.1 3.3-4.9 5.8-8.4 7.7-3.5 1.8-7.5 2.7-11.9 2.7h-17V31.2h17.4c2.2 0 4.1-.4 5.7-1.3 1.5-.9 2.7-2.1 3.5-3.5.8-1.4 1.2-3 1.2-4.7 0-1.7-.4-3.2-1.2-4.6-.8-1.4-1.9-2.6-3.5-3.5-1.5-.9-3.4-1.3-5.7-1.3h-11.6v56.5h-13z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st1&quot; d=&quot;M303.2 14.9h115.2v43.2H303.2V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M345.3 41.5c-.7 0-1.3-.1-1.9-.4-.6-.2-1.1-.6-1.6-1s-.8-1-1.1-1.6c-.3-.6-.4-1.3-.4-2s.1-1.4.4-2c.3-.6.6-1.1 1.1-1.6.5-.5 1-.8 1.6-1 .6-.2 1.2-.4 1.9-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1l-1 1c-.2-.2-.4-.4-.7-.6-.3-.2-.5-.3-.9-.4-.3-.1-.6-.1-1-.1-.5 0-.9.1-1.3.3-.4.2-.8.4-1.1.7-.3.3-.6.7-.8 1.1-.2.4-.3.9-.3 1.5s.1 1 .3 1.5c.2.4.5.8.8 1.1.3.3.7.6 1.1.7.4.2.9.2 1.3.2s.8-.1 1.2-.2c.4-.1.7-.3 1-.5.3-.2.5-.5.7-.8.2-.3.3-.7.3-1.1h-3.3v-1.3h4.6v.8c0 .7-.1 1.3-.4 1.9-.2.6-.6 1-1 1.5-.4.4-.9.7-1.5.9-.3.2-.9.3-1.6.3zm10.5 0c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm11 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3s.5-1.2.5-1.9-.2-1.3-.5-1.9-.7-1-1.2-1.3c-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3s-.5 1.2-.5 1.9.2 1.3.5 1.9.7 1 1.2 1.3c.6.4 1.2.5 1.8.5zm6.6 1.2v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st3&quot; d=&quot;M418.4 14.9h124.8v43.2H418.4V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M460.8 33.3v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm9.7 0v-9.5h5.8v1.4H472V32h4.3v1.4h-5.8zm.7-4.1v-1.4h4.6v1.4h-4.6zm6.9 4.1v-9.5h5.8v1.4h-4.3V32h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h3c1 0 1.9.2 2.6.6.7.4 1.3 1 1.7 1.7s.6 1.5.6 2.5c0 .9-.2 1.8-.6 2.5s-1 1.3-1.7 1.7c-.7.4-1.6.6-2.6.6h-3zm1.5-1.4h1.5c.7 0 1.3-.1 1.8-.4.5-.3.9-.7 1.2-1.2.3-.5.4-1.1.4-1.8s-.1-1.3-.4-1.8c-.3-.5-.7-.9-1.2-1.2-.5-.3-1.1-.4-1.8-.4h-1.5v6.8zm10.9 1.6c-.5 0-1-.1-1.5-.3-.5-.2-.9-.5-1.2-.9-.3-.4-.6-.9-.8-1.5l1.4-.6c.1.5.4.9.8 1.3.4.3.8.5 1.3.5.3 0 .6-.1.8-.2.3-.1.5-.3.6-.5.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.6-.5-.3-.2-.7-.3-1.1-.5l-.6-.2c-.3-.1-.5-.2-.8-.4-.3-.1-.5-.3-.7-.5-.2-.2-.4-.5-.5-.7-.1-.3-.2-.6-.2-1 0-.5.1-.9.4-1.3.2-.4.6-.7 1-.9.4-.2 1-.4 1.6-.4.6 0 1.1.1 1.5.3.4.2.7.5 1 .8.2.3.4.6.5.9l-1.3.6c-.1-.2-.2-.4-.3-.5-.1-.2-.3-.3-.5-.4-.2-.1-.5-.2-.8-.2-.3 0-.5.1-.8.2-.2.1-.4.2-.6.4-.1.2-.2.4-.2.6 0 .3.1.6.4.8s.7.4 1.2.6l.6.2c.3.1.6.2.9.4.3.1.6.3.8.6.2.2.4.5.6.8.1.3.2.7.2 1.2s-.1.9-.3 1.3c-.2.4-.4.6-.8.9-.3.2-.7.4-1 .5-.3 0-.7.1-1 .1zM434.4 49.3v-9.5h1.5v9.5h-1.5zm3.6 0v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5h-1.4v-5.4l.1-1.7h-.1l-2.8 7.1h-1.2l-2.8-7.1h-.1l.1 1.7v5.4H438zm11.7 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm8 0v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1h-1.7l-3-4.4zm10.3 4.6c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.2.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm8.8 1.2-3.4-9.5h1.6l2.2 6.3.3 1.1h.1l.4-1.1 2.2-6.3h1.6l-3.5 9.5H479zm6.2 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4H486zm6.8 4.1v-9.5h2l2.8 7.3h.1l2.8-7.3h2v9.5H501v-5.4l.1-1.7h-.1l-2.8 7.1H497l-2.8-7.1h-.1l.1 1.7v5.4h-1.4zm11.8 0v-9.5h5.8v1.4h-4.3V48h4.3v1.4h-5.8zm.8-4.1v-1.4h4.6v1.4h-4.6zm6.8 4.1v-9.5h1.7l4.3 7h.1l-.1-1.8v-5.2h1.5v9.5h-1.5l-4.5-7.4h-.1l.1 1.8v5.5h-1.5zm11.7 0v-8.8h1.5v8.8h-1.5zm-2.7-8.2v-1.4h6.8v1.4h-6.8z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st4&quot; d=&quot;M543.2 14.9h115.2v43.2H543.2V14.9z&quot;&gt;&lt;/path&gt;&lt;path class=&quot;st2&quot; d=&quot;M582.9 41.3v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.9.6 1.1 1 .3.4.4.9.4 1.5s-.1 1.1-.4 1.5c-.3.4-.7.8-1.1 1-.5.2-1 .4-1.6.4h-2.5v-1.4h2.5c.4 0 .7-.1.9-.2.2-.1.4-.3.5-.6.1-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2h-1.8v8.2h-1.5zm12.3.2c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.7.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.8.5-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.1.5 1.8.5zm10.9 1.4c-.7 0-1.4-.1-2-.4-.6-.3-1.1-.6-1.6-1.1-.4-.5-.8-1-1-1.6-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9c.2-.6.6-1.1 1-1.6s1-.8 1.6-1.1c.6-.3 1.3-.4 2-.4s1.4.1 2 .4c.6.2 1.1.6 1.6 1.1.5.5.8 1 1 1.6.2.6.4 1.2.4 1.9s-.1 1.3-.4 1.9c-.2.6-.6 1.1-1 1.6s-1 .8-1.6 1.1c-.6.3-1.3.4-2 .4zm0-1.4c.6 0 1.2-.2 1.8-.5.5-.3.9-.7 1.2-1.3.3-.5.5-1.2.5-1.9s-.2-1.3-.5-1.9c-.3-.5-.7-1-1.2-1.3-.5-.3-1.1-.5-1.8-.5s-1.2.2-1.8.5c-.5.3-.9.7-1.2 1.3-.3.5-.5 1.2-.5 1.9s.2 1.3.5 1.9c.3.5.7 1 1.2 1.3.6.4 1.2.5 1.8.5zm6.7 1.2v-9.5h3.3c.6 0 1.1.1 1.6.4.5.2.8.6 1.1 1s.4.9.4 1.5c0 .4-.1.8-.2 1.1s-.4.7-.7.9c-.3.3-.6.5-1 .6-.4.1-.9.2-1.4.2h-2.3v-1.3h2.5c.3 0 .6-.1.8-.2.2-.1.4-.3.6-.6.2-.2.2-.5.2-.8 0-.3-.1-.5-.2-.7-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.9-.2h-1.9v8.2h-1.4zm2.2-4.4h1.7l3 4.3v.1H618l-3-4.4zM517.7 102.9c-.6 0-1.1-.1-1.7-.3-.6-.2-1-.6-1.5-1-.4-.5-.7-1.1-.9-1.8l1.7-.7c.2.6.4 1.1.8 1.5.4.4.9.6 1.6.6.7 0 1.2-.2 1.6-.6.4-.4.7-1 .7-1.6 0-.7-.2-1.2-.6-1.6-.4-.4-1-.7-1.6-.7-.4 0-.8.1-1.1.2-.3.2-.6.4-.8.7l-1.8-.8.7-6h6.4v1.7h-4.9l-.4 3.2h.1c.3-.2.6-.4.9-.5.4-.1.8-.2 1.3-.2.7 0 1.3.2 1.9.5.6.3 1 .8 1.4 1.4.4.6.5 1.3.5 2 0 .8-.2 1.5-.5 2.1-.4.6-.8 1.1-1.5 1.4-.7.3-1.5.5-2.3.5zm10.8 0c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.4 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm.1-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6s-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.5.3-2.1.3zM389.2 102.6v-1.8l.4-.4.9-.9c.4-.4.7-.8 1.1-1.2l1.1-1.1.8-.8c.3-.3.6-.6.8-.9.2-.3.3-.5.4-.8.1-.2.1-.5.1-.8 0-.3-.1-.6-.2-.8-.1-.3-.4-.5-.7-.6-.3-.2-.6-.2-1.1-.2-.4 0-.7.1-1 .2-.3.2-.5.4-.7.6-.2.2-.3.5-.3.7l-1.7-.7c.1-.3.2-.6.4-.9.2-.3.4-.6.8-.9.3-.3.7-.5 1.1-.7.4-.2.9-.3 1.5-.3.8 0 1.4.2 2 .5.6.3 1 .7 1.3 1.2.3.5.5 1.1.5 1.7 0 .5-.1 1-.3 1.5-.2.5-.4.9-.7 1.3-.3.4-.6.7-.9 1-.2.1-.4.3-.6.6-.2.2-.5.5-.7.8l-.8.8-.7.7-.4.4h5.2v1.7h-7.6zm14.2.3c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.5.3-1.2.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.5.4 1 .6 1.6.6zm11.5 1.8c-.7 0-1.4-.2-2-.5-.6-.3-1.1-.8-1.5-1.3-.4-.6-.8-1.2-1-2-.2-.8-.3-1.6-.3-2.4 0-.9.1-1.7.3-2.5.2-.8.6-1.4 1-2 .4-.6.9-1 1.5-1.3.6-.3 1.3-.5 2-.5.8 0 1.4.2 2 .5.6.3 1.1.8 1.5 1.3.4.6.8 1.2 1 2 .2.8.3 1.6.3 2.5 0 .9-.1 1.7-.3 2.4-.2.8-.5 1.4-1 2-.4.6-.9 1-1.5 1.3-.6.3-1.3.5-2 .5zm0-1.8c.6 0 1.1-.2 1.6-.6.4-.4.8-.9 1-1.6.2-.7.4-1.4.4-2.2 0-.8-.1-1.6-.4-2.3-.2-.7-.6-1.2-1-1.6-.4-.4-1-.6-1.6-.6-.6 0-1.2.2-1.6.6-.4.4-.8.9-1 1.6-.2.7-.4 1.4-.4 2.3 0 .8.1 1.6.4 2.2.2.7.6 1.2 1 1.6.4.4.9.6 1.6.6zm10.8 1.5v-8.8h1.8V95h.1c.2-.3.4-.5.7-.8s.6-.4.9-.5c.4-.1.7-.2 1.1-.2.7 0 1.2.2 1.7.5s.8.7 1 1.2c.3-.5.7-.8 1.2-1.2.5-.3 1.1-.5 1.8-.5 1 0 1.8.3 2.3 1 .5.6.8 1.5.8 2.5v5.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.7-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.8 1s-.3.9-.3 1.3v4.7h-1.9v-5.4c0-.7-.2-1.2-.5-1.5-.3-.3-.8-.5-1.3-.5-.4 0-.8.1-1.1.4-.3.2-.6.6-.7 1s-.3.9-.3 1.3v4.7h-1.7zm18.6.3c-.7 0-1.3-.1-1.8-.3-.5-.2-.9-.5-1.3-.9-.3-.4-.6-.8-.7-1.2l1.7-.7c.2.5.5.8.9 1.1.4.2.8.4 1.3.4s.9-.1 1.2-.2c.3-.2.5-.4.5-.8 0-.2-.1-.5-.2-.6-.2-.2-.4-.3-.6-.4l-.9-.3-1.1-.2c-.4-.1-.8-.3-1.2-.5-.4-.2-.7-.5-.9-.9-.2-.4-.3-.8-.3-1.2 0-.5.2-1 .5-1.4.3-.4.7-.7 1.2-.9.5-.2 1.1-.3 1.7-.3.6 0 1.1.1 1.5.2.5.1.9.3 1.2.6.3.3.6.6.8 1l-1.6.7c-.2-.4-.5-.7-.8-.8-.3-.2-.7-.2-1.1-.2-.4 0-.8.1-1.1.3-.3.2-.4.4-.4.7 0 .3.1.5.4.7.3.2.6.3 1 .4l1.3.3c.9.2 1.5.6 2 1 .4.4.7 1 .7 1.6 0 .6-.2 1.1-.5 1.5-.3.4-.8.7-1.3 1-.8.2-1.4.3-2.1.3zM0 113.3V99h1.7v14.3H0zm4.6 0v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7H4.6zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.5-.5-.7-1.2-.7-2.1zm10.3 3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm6.7-.3v-10.2H35v1.6h.1c.1-.4.4-.7.7-1 .3-.3.7-.5 1.1-.7.4-.2.8-.2 1.2-.2h.7c.2 0 .3.1.5.2v1.8c-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.1-.5 0-1 .1-1.4.4-.4.3-.7.7-1 1.1-.2.5-.4 1-.4 1.5v5.7h-1.7zm10.4.3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-1 .2-1.5.2zm.1-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm11.7 1.5c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-2 .7-2.8.4-.8 1.1-1.5 1.8-1.9.8-.5 1.7-.7 2.7-.7 1.1 0 2.1.3 2.8.8.7.5 1.3 1.2 1.6 2l-1.5.6c-.2-.6-.6-1.1-1.1-1.4-.5-.3-1.1-.5-1.8-.5-.6 0-1.2.2-1.7.5s-.9.8-1.2 1.4c-.3.6-.5 1.3-.5 2 0 .8.2 1.4.5 2 .3.6.7 1 1.2 1.4.5.3 1.1.5 1.7.5.7 0 1.3-.2 1.9-.5.5-.3.9-.8 1.2-1.4l1.5.6c-.3.8-.9 1.5-1.6 2-.9.5-1.8.8-3 .8zm5.5-10.5h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm6.5 2.7v-10.2h1.7v10.2h-1.7zm.9-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.6.4-.9.4zm8.1 12.4c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm7 1.3v-10.2H87v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm15.1-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm10.5 3c-1 0-1.9-.2-2.7-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.7-1.7-.7-2.8 0-1 .2-1.9.7-2.8.4-.8 1.1-1.5 1.8-2 .8-.5 1.7-.7 2.7-.7 1 0 1.9.2 2.7.7.8.5 1.4 1.1 1.9 2 .4.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.8-.4.8-1.1 1.5-1.9 1.9-.8.5-1.7.8-2.7.8zm0-1.6c.6 0 1.2-.2 1.7-.5s1-.8 1.3-1.3c.3-.6.5-1.3.5-2.1s-.2-1.5-.5-2.1c-.3-.6-.8-1-1.3-1.3-.5-.3-1.1-.5-1.7-.5-.6 0-1.2.2-1.7.5s-1 .7-1.3 1.3c-.3.6-.5 1.3-.5 2.1s.2 1.5.5 2.1c.3.6.8 1 1.3 1.3.5.4 1.1.5 1.7.5zm12.2 1.3V99h2.1l7.2 11.4h.1l-.1-2.8V99h1.7v14.3h-1.8l-7.5-11.9h-.1l.1 2.8v9.2H125zm18.2.3c-1 0-1.9-.2-2.6-.7-.8-.5-1.4-1.1-1.8-1.9-.4-.8-.6-1.7-.6-2.8 0-1 .2-1.9.6-2.7.4-.8 1-1.5 1.7-2s1.6-.8 2.6-.8 1.9.2 2.6.7c.7.4 1.3 1.1 1.7 1.8.4.8.6 1.7.6 2.7v.5h-8.8V107h7c0-.3-.1-.6-.2-.9-.1-.3-.3-.6-.5-.9-.2-.3-.6-.5-.9-.7-.4-.2-.8-.3-1.4-.3-.7 0-1.2.2-1.7.5s-.8.8-1.1 1.4c-.3.6-.4 1.2-.4 2 0 .9.2 1.6.5 2.2.3.6.8 1 1.3 1.3.5.3 1.1.4 1.7.4.8 0 1.4-.2 1.8-.5.5-.4.9-.8 1.2-1.3l1.4.7c-.4.8-1 1.4-1.7 1.9-1 .5-1.9.8-3 .8zm5.5-.3 4.1-5.9h.2l2.9-4.3h2l-4 5.6h-.1l-3.1 4.6h-2zm.1-10.2h1.9l3.2 4.5h.1l4 5.7h-2l-3-4.5h-.1l-4.1-5.7zm9.9 0h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zm11.2 2.7V99h4.8c.8 0 1.5.2 2.2.5.7.4 1.2.8 1.6 1.5.4.6.6 1.4.6 2.2 0 .8-.2 1.6-.6 2.2-.4.6-.9 1.1-1.6 1.5-.7.4-1.4.5-2.2.5h-3.9v-1.6h4c.6 0 1-.1 1.4-.4.4-.3.7-.6.9-1 .2-.4.3-.8.3-1.2 0-.4-.1-.8-.3-1.2-.2-.4-.5-.7-.9-1-.4-.3-.9-.4-1.4-.4h-3.2v12.7h-1.7zm14 .3c-.8 0-1.4-.1-2-.4-.6-.3-1-.7-1.3-1.2-.3-.5-.5-1.1-.5-1.8 0-.8.2-1.4.6-1.9.4-.5.9-.9 1.5-1.2.7-.3 1.4-.4 2.2-.4.4 0 .9 0 1.2.1.4.1.7.2 1 .3.3.1.5.2.7.3v-.6c0-.8-.3-1.4-.8-1.8-.5-.5-1.2-.7-2-.7-.6 0-1.1.1-1.6.4-.5.2-.9.6-1.1 1l-1.3-1c.3-.4.6-.7 1-1 .4-.3.9-.5 1.4-.7.5-.2 1.1-.2 1.6-.2 1.4 0 2.5.4 3.2 1.1.8.7 1.2 1.7 1.2 3v6.5h-1.6v-1.5h-.1c-.2.3-.4.6-.7.8-.3.3-.7.5-1.1.7-.5.1-.9.2-1.5.2zm.2-1.5c.6 0 1.1-.1 1.6-.4.5-.3.9-.7 1.2-1.2.3-.5.5-1 .5-1.6-.3-.2-.7-.4-1.2-.5-.5-.1-1-.2-1.5-.2-1 0-1.7.2-2.1.6-.4.4-.7.9-.7 1.5s.2 1 .6 1.4c.4.2 1 .4 1.6.4zm7.4 1.2v-10.2h1.7v10.2h-1.7zm.8-12.1c-.3 0-.6-.1-.9-.4-.2-.2-.4-.5-.4-.9 0-.3.1-.6.4-.9.2-.2.5-.4.9-.4.3 0 .6.1.9.4.2.2.4.5.4.9 0 .3-.1.6-.4.9-.3.3-.5.4-.9.4zm3.5 12.1v-10.2h1.6v1.5h.1c.3-.5.7-.9 1.3-1.3.6-.4 1.3-.5 2-.5 1.2 0 2.2.4 2.8 1.1.6.7 1 1.7 1 2.9v6.5h-1.7V107c0-1-.2-1.7-.7-2.1-.5-.4-1.1-.6-1.8-.6-.6 0-1.1.2-1.5.5-.4.3-.8.7-1 1.2-.2.5-.4 1-.4 1.6v5.7h-1.7zm10-10.2h6v1.5h-6v-1.5zm1.8 7.5v-10.4h1.7v10c0 .5.1.9.3 1.2.2.3.6.4 1.1.4.2 0 .4 0 .6-.1.2-.1.4-.2.5-.2v1.7c-.2.1-.4.1-.6.2-.2.1-.5.1-.8.1-.9 0-1.5-.2-2.1-.8-.4-.5-.7-1.2-.7-2.1zM418.1 55.2c-1.8 0-3.3 1.5-3.3 3.3 0 1.5 1 2.7 2.3 3.1V83h2V61.6c1.3-.4 2.3-1.7 2.3-3.1 0-1.8-1.5-3.3-3.3-3.3zM546.5 58.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3c0 1.5 1 2.7 2.3 3.1v21.2h2V61.7c1.3-.4 2.3-1.6 2.3-3.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;the-fuzzy-beginning&quot;&gt;The fuzzy beginning &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#the-fuzzy-beginning&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;a href=&quot;https://developer.chrome.com/docs/crux/about/&quot; rel=&quot;noopener&quot;&gt;Chrome User Experience Report (CrUX)&lt;/a&gt;, the &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;web-vitals&lt;/code&gt; JavaScript library&lt;/a&gt;, 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.&lt;/p&gt;
&lt;p&gt;One thing that emerged while fixing INP in &lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/&quot;&gt;the field&lt;/a&gt; was that one of the lab metrics to target could be &lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt;. TBT was already well documented and supported by the community. Despite already meeting the thresholds for Core Web Vitals, however, we weren&#39;t doing as well on the TBT front, as it was over 3 seconds when we began.&lt;/p&gt;
&lt;h2 id=&quot;what-is-tbt,-and-what-steps-did-we-take-to-improve-it&quot;&gt;What is TBT, and what steps did we take to improve it? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#what-is-tbt,-and-what-steps-did-we-take-to-improve-it&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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 &lt;strong&gt;blocking time&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;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:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Task A takes 80 milliseconds (30 milliseconds more than 50 milliseconds).&lt;/li&gt;
&lt;li&gt;Task B takes 100 milliseconds (50 milliseconds more than 50 milliseconds).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The page&#39;s TBT will be: 80 milliseconds (30 + 50). The lower the TBT, the better, and TBT also &lt;a href=&quot;https://almanac.httparchive.org/en/2022/performance#inp-and-tbt&quot; rel=&quot;noopener&quot;&gt;correlates well with INP&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Here’s a quick lab comparison of our TBT before and after taking steps to improve it:&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;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.&quot; decoding=&quot;async&quot; height=&quot;502&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UfZ9zaCLHjCMcPg74xHV.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    The main thread during startup before optimizing TBT. The TBT is 3,260 milliseconds.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
  &lt;img alt=&quot;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.&quot; decoding=&quot;async&quot; height=&quot;701&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/RLx2y7zTItkaklqxSG17.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    The main thread during startup after optimizing TBT. The TBT is 120 milliseconds.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h3 id=&quot;minimize-main-thread-work&quot;&gt;Minimize main thread work &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#minimize-main-thread-work&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;We took small steps at first, such as de-prioritizing loading of less critical business assets. Second, we used &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;requestIdleCallback&lt;/code&gt;&lt;/a&gt; for non-critical work, which can help to reduce TBT.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;requestIdleCallback&#39;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;requestIdleCallbackId &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;requestIdleCallback&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;fetchMarketsData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;bind&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;timeout&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3000&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token function&quot;&gt;fetchMarketsData&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// Fallback in case requestIdleCallback is not supported&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;Specifying a timeout is recommended when using &lt;code&gt;requestIdleCallback&lt;/code&gt;, 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.&lt;/p&gt;
&lt;h3 id=&quot;minimize-script-evaluation-time&quot;&gt;Minimize script evaluation time &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#minimize-script-evaluation-time&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We also lazy loaded third party libraries using &lt;a href=&quot;https://loadable-components.com/&quot; rel=&quot;noopener&quot;&gt;Loadable components&lt;/a&gt;. We also removed unused JavaScript and CSS by profiling the page with the &lt;a href=&quot;https://developer.chrome.com/docs/devtools/coverage/&quot; rel=&quot;noopener&quot;&gt;coverage tool&lt;/a&gt; in Chrome DevTools. It helped us to identify areas where &lt;a href=&quot;https://webpack.js.org/guides/tree-shaking/&quot; rel=&quot;noopener&quot;&gt;tree shaking&lt;/a&gt; was needed to ship less code during page load, and therefore reduce the initial bundle size of the application.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the coverage tool in Chrome DevTools. Here, the tool displays unused portions of JavaScript and CSS files during page load.&quot; decoding=&quot;async&quot; height=&quot;100&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/uynCVTUjcv4ujJva41PS.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;h3 id=&quot;reduce-dom-size&quot;&gt;Reduce DOM size &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#reduce-dom-size&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Per Lighthouse, large DOM sizes increase memory usage, causes longer &lt;a href=&quot;https://web.dev/economic-times-inp/reduce-the-scope-and-complexity-of-style-calculations/&quot;&gt;style recalculations&lt;/a&gt;, and produces costly &lt;a href=&quot;https://developers.google.com/speed/docs/insights/browser-reflow&quot; rel=&quot;noopener&quot;&gt;layout reflows&lt;/a&gt;.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the DOM size audit in Lighthouse. The number of DOM elements reported is 2,706 elements.&quot; decoding=&quot;async&quot; height=&quot;86&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 712px) 712px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JLQfvWp1Fouc55Xbgy7X.png?auto=format&amp;w=1424 1424w&quot; width=&quot;712&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;We reduced the number of DOM nodes in two ways:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;First, we rendered our menu items at the user’s request (on click). It decreased the DOM size by around 1,200 nodes.&lt;/li&gt;
&lt;li&gt;Second, we lazy loaded less important widgets.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Because of all these efforts, we reduced TBT significantly, and our INP was reduced accordingly by almost 50%:&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the INP audit in CrUX. The INP for the page is 539 milliseconds, which exceeds the &amp;#x27;poor&amp;#x27; threshold.&quot; decoding=&quot;async&quot; height=&quot;216&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 574px) 574px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ojm0miY1lwoFqxZWnYVM.png?auto=format&amp;w=1148 1148w&quot; width=&quot;574&quot; /&gt;
&lt;/figure&gt;
&lt;p&gt;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 &lt;a href=&quot;https://nextjs.org/&quot; rel=&quot;noopener&quot;&gt;Next.js&lt;/a&gt; to make better use of &lt;a href=&quot;https://react.dev/reference/react&quot; rel=&quot;noopener&quot;&gt;hooks&lt;/a&gt; to avoid unnecessary re-rendering of components.&lt;/p&gt;
&lt;p&gt;Due to more frequent updates and comparatively lesser traffic as compared to the other portions of the website, we began to migrate our &lt;a href=&quot;https://economictimes.indiatimes.com/topic/home&quot; rel=&quot;noopener&quot;&gt;topic pages&lt;/a&gt; to Next.js. We also used &lt;a href=&quot;https://partytown.builder.io/&quot; rel=&quot;noopener&quot;&gt;PartyTown&lt;/a&gt; for offloading additional heavy main thread work to web workers, along with techniques like &lt;code&gt;requestIdleCallBack&lt;/code&gt; for deferring non-critical tasks.&lt;/p&gt;
&lt;h2 id=&quot;how-has-improving-inp-helped-the-economic-times&quot;&gt;How has improving INP helped The Economic Times? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#how-has-improving-inp-helped-the-economic-times&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;h3 id=&quot;current-tbt-and-inp-on-origin&quot;&gt;Current TBT and INP on origin &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#current-tbt-and-inp-on-origin&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the INP audit in CrUX. The INP for the page is 257 milliseconds, which is within the &amp;#x27;needs improvement&amp;#x27; thresholds.&quot; decoding=&quot;async&quot; height=&quot;218&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 582px) 582px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/6cMvebBQKG2nhyc1eYeB.png?auto=format&amp;w=1164 1164w&quot; width=&quot;582&quot; /&gt;
&lt;/figure&gt;
&lt;h3 id=&quot;inp-crux-trend&quot;&gt;INP CrUX trend &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#inp-crux-trend&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;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 &amp;#x27;poor&amp;#x27; and &amp;#x27;needs improvement&amp;#x27; thresholds declined somewhat, while the values within the &amp;#x27;good&amp;#x27; threshold increased.&quot; decoding=&quot;async&quot; height=&quot;190&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pkPEYIQIeEDKdIKOCFSY.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;h3 id=&quot;akamai-mpulse-tbt-analysis&quot;&gt;Akamai mPulse TBT Analysis &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#akamai-mpulse-tbt-analysis&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We use &lt;a href=&quot;https://www.akamai.com/products/mpulse-real-user-monitoring&quot; rel=&quot;noopener&quot;&gt;Akamai mPulse&lt;/a&gt; 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.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of a chart in Akamai mPulse, showing a decline in TBT over the course of roughly a month.&quot; decoding=&quot;async&quot; height=&quot;118&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/eS3iIvNxEUhe19GGdDBG.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;business-outcome&quot;&gt;Business outcome &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#business-outcome&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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 &lt;strong&gt;50% decrease in bounce rate and 43% uplift in pageviews&lt;/strong&gt; on topic pages.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;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.&quot; decoding=&quot;async&quot; height=&quot;288&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WOzP0OjtPV6rsjqbtbfe.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/economic-times-inp/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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&#39;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.&lt;/p&gt;
        </content>
        <author>
            <name>
                Saurabh Rajpal
            </name>
        </author>
        <author>
            <name>
                Daya Ram Yadav
            </name>
        </author>
        <author>
            <name>
                Barun Kumar
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Baseline features you can use today
        </title>
        <link href="https://web.dev/baseline-features/"/>
        <updated>
            2023-05-10T00:00:00Z
        </updated>
        <id>
            https://web.dev/baseline-features/
        </id>
        <content type="text/html" mode="escaped">
            &lt;div class=&quot;youtube&quot;&gt;  &lt;lite-youtube videoid=&quot;x9rh0Du4Czg&quot;&gt;  &lt;/lite-youtube&gt;&lt;/div&gt;
&lt;p&gt;The web is always evolving and browsers update constantly to give developers new tools to innovate on the platform. Things that previously required helper libraries become part of the web platform and supported on all browsers, along with shorter or easier ways to code design elements.&lt;/p&gt;
&lt;p&gt;While this constant evolution and adaptation is helpful, it can also bring confusion. It can be difficult to navigate all these updates. As developers, we have questions like, &amp;quot;When will all browser engines support this new feature?&amp;quot; &amp;quot;When can I actually start using those features in my production code?&amp;quot; &amp;quot;For how long should we support older browsers?&amp;quot;&lt;/p&gt;
&lt;p&gt;The true answer is &amp;quot;it depends&amp;quot;. What is needed and what is usable really depends on your user base, tech stack, your team structure, and supported devices. But, one thing we all agree, is that the current landscape of the web can make it difficult to make those decisions.&lt;/p&gt;
&lt;p&gt;The Chrome team is collaborating with other browser engines and the web community to bring more clarity. This includes our work on projects like &lt;a href=&quot;https://wpt.fyi/interop-2023&quot; rel=&quot;noopener&quot;&gt;Interop 2023&lt;/a&gt; which helps to improve interoperability of a set of key features. But what about features landed in the past few years? Are experimental features we learned about two years ago ready to use?&lt;/p&gt;
&lt;p&gt;In this post, I want to highlight some features that are now available to all major browser engines for the past two major versions. This is the cut-off point where we feel that the majority of developers will feel a feature is safe to use, and is the feature set we&#39;re calling Baseline. For more, please see the announcement &lt;a href=&quot;https://web.dev/baseline&quot;&gt;of Baseline here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;the-dialog-element&quot;&gt;The dialog element &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#the-dialog-element&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt; element is a new HTML element to create dialog prompts such as popups and modals.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 37, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      37
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 98, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      98
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 79, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      79
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.4, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.4
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/HTML/Element/dialog#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;To use it, define the modal element, then open the dialog by calling the &lt;code&gt;showModal()&lt;/code&gt; method on the dialog element.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;dialog&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;d&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;form&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;method&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;dialog&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hi, I&#39;m a dialog.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;ok&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;form&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;dialog&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token special-attr&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;onclick&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token value javascript language-javascript&quot;&gt;d&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;showModal&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  Open Dialog&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;As a native HTML element, features like focus management, tab tracking, and keeping the stacking context are built in.  For more, read &lt;a href=&quot;https://web.dev/building-a-dialog-component/&quot;&gt;Building a dialog component&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;individual-css-transform-properties&quot;&gt;Individual CSS transform properties &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#individual-css-transform-properties&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Using CSS transforms is a performant way to add a movement to your site.&lt;br /&gt;
You might be familiar with writing CSS transforms with three properties in one line.&lt;br /&gt;
With individual transform properties you can now specify transform properties individually. This comes in handy when you are writing complex keyframe animations.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.target&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;translate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50% 0&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;rotate&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 30deg&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;scale&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1.2&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 104, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      104
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 72, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      72
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 104, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      104
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 14.1, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      14.1
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/scale#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;For an in-depth explanation of this change, read &lt;a href=&quot;https://web.dev/css-individual-transform-properties/&quot;&gt;Finer grained control over CSS transforms with individual transform properties&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;new-viewport-units&quot;&gt;New viewport units &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#new-viewport-units&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;On mobile, viewport size is influenced by the presence or absence of dynamic toolbars.&lt;br /&gt;
Sometimes you have a URL bar and navigation toolbar visible, but sometimes those toolbars are completely retracted.&lt;br /&gt;
The actual size of viewport will be different depending on whether the toolbars are visible or not.&lt;br /&gt;
New viewport units like &lt;code&gt;svh&lt;/code&gt; and &lt;code&gt;lvh&lt;/code&gt; give web developers finer control when designing for the mobile. You can learn more in the article &lt;a href=&quot;https://web.dev/viewport-units/&quot;&gt;The large, small, and dynamic viewport units&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 108, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      108
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 101, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      101
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 108, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      108
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.4, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.4
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h2 id=&quot;deep-copy-in-javascript&quot;&gt;Deep copy in JavaScript &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#deep-copy-in-javascript&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In the past, to create a deep copy of an object with no reference to the original object, a popular hack was &lt;code&gt;JSON.stringify&lt;/code&gt; combined with &lt;code&gt;JSON.parse&lt;/code&gt;. This was such a common hack that V8 (Chrome&#39;s javascript engine) aggressively improved the performance of this trick. But, you don&#39;t need this hack anymore with &lt;code&gt;structuredClone&lt;/code&gt;.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; original &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token literal-property property&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token literal-property property&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Tom&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;/* Old hack */&lt;/span&gt; &lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; deepCopy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token constant&quot;&gt;JSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;parse&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token constant&quot;&gt;JSON&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;stringify&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;original&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;/* New way */&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; deepCopy &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;structuredClone&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;original&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 98, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      98
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 94, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      94
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 98, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      98
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.4, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.4
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/structuredClone#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;Please refer to &lt;a href=&quot;https://web.dev/structured-clone/&quot;&gt;Deep-copying in JavaScript using structuredClone&lt;/a&gt; for more details.&lt;/p&gt;
&lt;h2 id=&quot;the-focus-visible-pseudo-class&quot;&gt;The &lt;code&gt;:focus-visible&lt;/code&gt; pseudo-class &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#the-focus-visible-pseudo-class&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As web developers, we all are familiar with that &amp;quot;focus ring&amp;quot; that shows up when you are navigating a page with a keyboard or clicking on input elements. It is a necessary feature for accessibility but sometimes it gets in the way of the visual design for different users. The &lt;code&gt;:focus-visible&lt;/code&gt; CSS pseudo-class checks if the browser believes that the focus should be visible.  You can now specify styles for only when focus should be visible.&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;/* focus with tab key */&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token selector&quot;&gt;:focus-visible&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5px solid pink&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;/* mouse click */&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token selector&quot;&gt;:focus:not(:focus-visible)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 86, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      86
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 85, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      85
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 86, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      86
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.4, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.4
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/:focus-visible#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;Check out the &lt;a href=&quot;https://web.dev/learn/css/focus/&quot;&gt;Focus section on Learn CSS&lt;/a&gt; for more information.&lt;/p&gt;
&lt;h2 id=&quot;the-transformstream-interface&quot;&gt;The TransformStream interface &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#the-transformstream-interface&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The TransformStream interface of the Streams API makes it possible to pipe streams into one another.&lt;/p&gt;
&lt;p&gt;For example you can stream data from one place, then compress the data stream to another location as the data gets passed. The article &lt;a href=&quot;https://developer.chrome.com/articles/fetch-streaming-requests/&quot; rel=&quot;noopener&quot;&gt;Streaming requests with the fetch API&lt;/a&gt; walks you through this sample use case.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 67, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      67
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 102, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      102
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 79, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      79
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 14.1, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      14.1
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/TransformStream#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h2 id=&quot;wrap-up&quot;&gt;Wrap up &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/baseline-features/#wrap-up&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;There are many more features that recently became interoperable and stable to use on the web platform. Going forward we will work with the &lt;a href=&quot;https://www.w3.org/community/webdx/&quot; rel=&quot;noopener&quot;&gt;WebDX Community Group&lt;/a&gt; to bring more clarity to these Baseline feature sets. Please check out &lt;a href=&quot;https://web.dev/baseline/&quot;&gt;web.dev/baseline&lt;/a&gt; for ongoing details.&lt;/p&gt;
&lt;p&gt;If you want to stay up-to-date, our team is publishing articles &lt;a href=&quot;https://web.dev/tags/newly-interoperable/&quot;&gt;when a feature becomes interoperable&lt;/a&gt;, and publish &lt;a href=&quot;https://web.dev/tags/new-to-the-web/&quot;&gt;monthly updates on what&#39;s going on the web platform&lt;/a&gt; from experimental features to newly interoperable.&lt;/p&gt;
&lt;p&gt;We are always curious if what we are doing helps you, or if you need different kinds of support, so please reach out to us at &lt;a href=&quot;https://www.w3.org/community/webdx/&quot; rel=&quot;noopener&quot;&gt;WebDX Community Group&lt;/a&gt;.&lt;/p&gt;
        </content>
        <author>
            <name>
                Mariko Kosaka
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Script evaluation and long tasks
        </title>
        <link href="https://web.dev/script-evaluation-and-long-tasks/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/script-evaluation-and-long-tasks/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;When it comes to optimizing &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt;, most of the advice you&#39;ll encounter is to optimize interactions themselves. For example, in the &lt;a href=&quot;https://web.dev/optimize-long-tasks/&quot;&gt;optimize long tasks guide&lt;/a&gt;, techniques such as yielding with &lt;code&gt;setTimeout&lt;/code&gt;, &lt;code&gt;isInputPending&lt;/code&gt;, and so forth are discussed. These techniques are beneficial, as they allow the main thread some breathing room by avoiding long tasks, which can allow more opportunities for interactions and other activity to run sooner, rather than if they had to wait for a single long task.&lt;/p&gt;
&lt;p&gt;However, what about the long tasks that come from loading scripts themselves? These tasks can interfere with user interactions and affect a page&#39;s INP during load. This guide will explore how browsers handle tasks kicked off by script evaluation, and look into what you may be able to do to break up script evaluation work so that your main thread can be more responsive to user input while the page is loading.&lt;/p&gt;
&lt;h2 id=&quot;what-is-script-evaluation&quot;&gt;What is script evaluation? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#what-is-script-evaluation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you&#39;ve profiled an application that ships a lot of JavaScript, you may have seen long tasks where the culprit is labeled &lt;strong&gt;Evaluate Script&lt;/strong&gt;.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Script evaluation work as visualized in the performance profiler of Chrome DevTools. The work causes a long task during startup, which blocks the main thread&amp;#x27;s ability to respond to user interactions.&quot; decoding=&quot;async&quot; height=&quot;107&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 697px) 697px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WZyF71IiPWyG8vwKQcdP.png?auto=format&amp;w=1394 1394w&quot; width=&quot;697&quot; /&gt;
  &lt;figcaption&gt;
    Script evaluation work as shown in the performance profiler in Chrome DevTools. In this case, the work is enough to cause a long task that blocks the main thread from taking on other work—including tasks that drive user interactions.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Script evaluation is a necessary part of executing JavaScript in the browser, as JavaScript is compiled &lt;a href=&quot;https://en.wikipedia.org/wiki/Just-in-time_compilation&quot; rel=&quot;noopener&quot;&gt;just-in-time before execution&lt;/a&gt;. When a script is evaluated, it is first parsed for errors. If the parser doesn&#39;t find errors, the script is then compiled into &lt;a href=&quot;https://en.wikipedia.org/wiki/Bytecode&quot; rel=&quot;noopener&quot;&gt;bytecode&lt;/a&gt;, and then can continue onto execution.&lt;/p&gt;
&lt;p&gt;Though necessary, script evaluation can be problematic, as users may try to interact with a page shortly after it initially renders. However, just because a page has &lt;em&gt;rendered&lt;/em&gt; doesn&#39;t mean that the page has finished &lt;em&gt;loading&lt;/em&gt;. Interactions that take place during load can be delayed because the page is busy evaluating scripts. While there&#39;s no guarantee that the desired interaction can take place at this point in time—as a script responsible for it may not have loaded yet—there could be interactions dependent on JavaScript that &lt;em&gt;are&lt;/em&gt; ready, or the interactivity doesn&#39;t depend on JavaScript at all.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; One metric that might give you insight into whether you have excessive script evaluation occurring during page load is &lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt;, as it is a &lt;a href=&quot;https://web.dev/user-centric-performance-metrics/#types-of-metrics&quot;&gt;load responsiveness&lt;/a&gt; metric. &lt;a href=&quot;https://almanac.httparchive.org/en/2022/performance#inp-and-tbt&quot;&gt;Because TBT correlates well with INP&lt;/a&gt;, a page with a high TBT is a reasonable indicator that there may be high INP values during load that may be tied to script evaluation work. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;the-relationship-between-scripts-and-the-tasks-that-evaluate-them&quot;&gt;The relationship between scripts and the tasks that evaluate them &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#the-relationship-between-scripts-and-the-tasks-that-evaluate-them&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;How tasks responsible for script evaluation are kicked off depends on whether the script you&#39;re loading is loaded via a regular &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element, or if a script is a module loaded with the &lt;code&gt;type=module&lt;/code&gt;. Since browsers have the tendency to handle things differently, how the major browser engines handle script evaluation will be touched upon where script evaluation behaviors across them vary.&lt;/p&gt;
&lt;h3 id=&quot;loading-scripts-with-the-lessscriptgreater-element&quot;&gt;Loading scripts with the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#loading-scripts-with-the-lessscriptgreater-element&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; This section deals with loading scripts using the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element &lt;em&gt;without&lt;/em&gt; the &lt;code&gt;type=module&lt;/code&gt; attribute. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;The number of tasks dispatched to evaluate scripts generally has a direct relationship with the number of &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; elements on a page. Each &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element kicks off a task to evaluate the requested script so it can be parsed, compiled, and executed. &lt;strong&gt;This is the case for Chromium-based browsers, Safari, &lt;em&gt;and&lt;/em&gt; Firefox.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Why does this matter? Let&#39;s say you&#39;re using a bundler to manage your production scripts, and you&#39;ve configured it to bundle everything your page needs to run into a single script. If this is the case for your website, you can expect that there will be a single task dispatched to evaluate that script. Is this a bad thing? Not necessarily—unless that script is &lt;em&gt;huge&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;You can break up script evaluation work by avoiding loading large chunks of JavaScript, and load more individual, smaller scripts using additional &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; elements.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; As devices vary in their capability, it&#39;s very difficult to define a set limit for how large individual scripts should be. To achieve a decent balance between compression efficiency, download time, and script evaluation time, a limit of 100 kilobytes per individual script is a good target. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;While you should always strive to load as little JavaScript as possible during page load, splitting up your scripts ensures that, instead of one large task that may block the main thread, you have a greater number of smaller tasks that won&#39;t block the main thread at all—or at least less than what you started with.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Multiple tasks involving script evaluation as visualized in the performance profiler of Chrome DevTools. Because multiple smaller scripts are loaded instead of fewer larger scripts, tasks are less likely to become long tasks, allowing the main thread to respond to user input more quickly.&quot; decoding=&quot;async&quot; height=&quot;174&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/dajGS6urKufQoweVhJQh.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Multiple tasks spawned to evaluate scripts as a result of multiple &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; elements present in the page&#39;s HTML. This is preferable to sending one large script bundle to users, which is more likely to block the main thread.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;You can think of breaking up tasks for script evaluation as being somewhat similar to &lt;a href=&quot;https://web.dev/optimize-long-tasks/#use-asyncawait-to-create-yield-points&quot;&gt;yielding during event callbacks that run during an interaction&lt;/a&gt;. However, with script evaluation, the yielding mechanism breaks up the JavaScript you load into multiple smaller scripts, rather than a smaller number of larger scripts than are more likely to block the main thread.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; Currently, Chromium-based browsers will execute all loaded scripts with the &lt;code&gt;defer&lt;/code&gt; attribute in the same task as the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Window/DOMContentLoaded_event&quot;&gt;&lt;code&gt;DOMContentLoaded&lt;/code&gt; event&lt;/a&gt;. While this minimizes overall layout work, the cost is the increased likelihood of a longer task, which may cause other performance problems. A potential solution is &lt;a href=&quot;https://github.com/whatwg/html/issues/6230&quot;&gt;currently being explored&lt;/a&gt;. This behavior also takes place with scripts loaded using the &lt;code&gt;type=module&lt;/code&gt; attribute, as such scripts are deferred by default. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;loading-scripts-with-the-lessscriptgreater-element-and-the-type=module-attribute&quot;&gt;Loading scripts with the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element and the &lt;code&gt;type=module&lt;/code&gt; attribute &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#loading-scripts-with-the-lessscriptgreater-element-and-the-type=module-attribute&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; If you&#39;re not bundling ES modules and loading them using the &lt;code&gt;type=module&lt;/code&gt; attribute, you could actually end up slowing down page startup. For more information, read the &lt;a href=&quot;https://web.dev/script-evaluation-and-long-tasks/#trade-offs-and-considerations&quot;&gt;trade-offs and considerations section&lt;/a&gt; later on in this guide. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;It&#39;s now possible to load ES modules natively in the browser with the &lt;a href=&quot;https://web.dev/serve-modern-code-to-modern-browsers/#use-lessscript-type=modulegreater&quot;&gt;&lt;code&gt;type=module&lt;/code&gt; attribute&lt;/a&gt; on the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element. This approach to script loading carries some developer experience benefits, such as not having to transform code for production use—especially when used in combination with &lt;a href=&quot;https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap&quot; rel=&quot;noopener&quot;&gt;import maps&lt;/a&gt;. However, loading scripts in this way schedules tasks that differ from browser to browser.&lt;/p&gt;
&lt;h4 id=&quot;chromium-based-browsers&quot;&gt;Chromium-based browsers &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#chromium-based-browsers&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;In browsers such as Chrome—or those derived from it—loading ES modules using the &lt;code&gt;type=module&lt;/code&gt; attribute produces different sorts of tasks than you&#39;d normally see when not using &lt;code&gt;type=module&lt;/code&gt;. For example, a task for each module script will run that involves activity labeled as &lt;strong&gt;Compile module&lt;/strong&gt;.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Module compilation work in multiple tasks as visualized in Chrome DevTools.&quot; decoding=&quot;async&quot; height=&quot;140&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aEGTjOqtruKet5I6sCLM.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Module loading behavior in Chromium-based browsers. Each module script will spawn a &lt;strong&gt;Compile module&lt;/strong&gt; call to compile their contents prior to evaluation.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Once the modules have compiled, any code that subsequently runs in them will kick off activity labeled as &lt;strong&gt;Evaluate module&lt;/strong&gt;.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Just-in-time evaluation of a module as visualized in the performance panel of Chrome DevTools.&quot; decoding=&quot;async&quot; height=&quot;184&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/CQpGnJmXh9JSUIMuBpeu.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    When code in a module runs, that module will be evaluated just-in-time.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The effect here—in Chrome and related browsers, at least—is that the compilation steps are broken up when using ES modules. This is a clear win in terms of managing long tasks; however, the resulting module evaluation work that results still means you&#39;re incurring some unavoidable cost. While you should strive to ship as little JavaScript as possible, using ES modules—regardless of the browser—provides the following benefits:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;All module code is automatically run in &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Strict_mode&quot; rel=&quot;noopener&quot;&gt;strict mode&lt;/a&gt;, which allows potential optimizations by JavaScript engines that couldn&#39;t otherwise be made in a non-strict context.&lt;/li&gt;
&lt;li&gt;Scripts loaded using &lt;code&gt;type=module&lt;/code&gt; are treated as if they were &lt;a href=&quot;https://developer.mozilla.org/docs/Web/HTML/Element/script#attr-defer&quot; rel=&quot;noopener&quot;&gt;deferred&lt;/a&gt; by default. It&#39;s possible to use the &lt;code&gt;async&lt;/code&gt; attribute on scripts loaded with &lt;code&gt;type=module&lt;/code&gt; to change this behavior.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;safari-and-firefox&quot;&gt;Safari and Firefox &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#safari-and-firefox&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;When modules are loaded in Safari and Firefox, each of them is evaluated in a separate task. This means you could theoretically load a single top-level module consisting of only &lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import&quot; rel=&quot;noopener&quot;&gt;static &lt;code&gt;import&lt;/code&gt;&lt;/a&gt; statements to other modules, and every module loaded will incur a separate network request and task to evaluate it.&lt;/p&gt;
&lt;h3 id=&quot;loading-scripts-with-dynamic-import&quot;&gt;Loading scripts with dynamic &lt;code&gt;import()&lt;/code&gt; &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#loading-scripts-with-dynamic-import&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import&quot; rel=&quot;noopener&quot;&gt;Dynamic &lt;code&gt;import()&lt;/code&gt;&lt;/a&gt; is another method for loading scripts. Unlike static &lt;code&gt;import&lt;/code&gt; statements that are required to be at the top of an ES module, a dynamic &lt;code&gt;import()&lt;/code&gt; call can appear anywhere in a script to load a chunk of JavaScript on demand. This technique is called &lt;a href=&quot;https://web.dev/reduce-javascript-payloads-with-code-splitting/&quot;&gt;code splitting&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Dynamic &lt;code&gt;import()&lt;/code&gt; has two advantages when it comes to improving INP:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Modules which are deferred to load later reduce main thread contention during startup by reducing the amount of JavaScript loaded at that time. This frees up the main thread so it can be more responsive to user interactions.&lt;/li&gt;
&lt;li&gt;When dynamic &lt;code&gt;import()&lt;/code&gt; calls are made, each call will effectively separate the compilation and evaluation of each module to its own task. Of course, a dynamic &lt;code&gt;import()&lt;/code&gt; that loads a very large module will kick off a rather large script evaluation task, and that can interfere with the ability of the main thread to respond to user input if the interaction occurs at the same time as the dynamic &lt;code&gt;import()&lt;/code&gt; call. &lt;strong&gt;Therefore, it&#39;s still very important that you load as little JavaScript as possible.&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Dynamic &lt;code&gt;import()&lt;/code&gt; calls behave similarly in all major browser engines: the script evaluation tasks that result will be the same as the amount of modules that are dynamically imported.&lt;/p&gt;
&lt;h3 id=&quot;loading-scripts-in-a-web-worker&quot;&gt;Loading scripts in a web worker &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#loading-scripts-in-a-web-worker&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Web_Workers_API&quot; rel=&quot;noopener&quot;&gt;Web workers&lt;/a&gt; are a special JavaScript use case. Web workers are registered on the main thread, and the code within the worker then runs on its own thread. This is hugely beneficial in the sense that—while the code that registers the web worker runs on the main thread—the code within the web worker doesn&#39;t. This reduces main thread congestion, and can help keep the main thread more responsive to user interactions.&lt;/p&gt;
&lt;p&gt;In addition to reducing main thread work, web workers &lt;em&gt;themselves&lt;/em&gt; can load external scripts to be used in the worker context, either through &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/importScripts&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;importScripts&lt;/code&gt;&lt;/a&gt; or static &lt;code&gt;import&lt;/code&gt; statements in browsers that support &lt;a href=&quot;https://web.dev/module-workers/&quot;&gt;module workers&lt;/a&gt;. The result is that any script requested by a web worker is evaluated off the main thread.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; height=&quot;24&quot; width=&quot;24&quot; fill=&quot;currentColor&quot; role=&quot;img&quot; aria-label=&quot;Check&quot;&gt;   &lt;path d=&quot;M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Objective&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; &lt;strong&gt;Read to learn more:&lt;/strong&gt; &lt;a href=&quot;https://web.dev/off-main-thread/&quot;&gt;Use web workers to run JavaScript off the browser&#39;s main thread&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;trade-offs-and-considerations&quot;&gt;Trade-offs and considerations &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#trade-offs-and-considerations&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While breaking up your scripts into separate, smaller files helps limit long tasks as opposed to loading fewer, much larger files, it&#39;s important to take some things into account when deciding how to break scripts up.&lt;/p&gt;
&lt;h3 id=&quot;compression-efficiency&quot;&gt;Compression efficiency &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#compression-efficiency&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://web.dev/reduce-network-payloads-using-text-compression/&quot;&gt;Compression&lt;/a&gt; is a factor when it comes to breaking up scripts. When scripts are smaller, compression becomes somewhat less efficient. Larger scripts will benefit much more from compression. While increasing compression efficiency helps to keep load times for scripts as low as possible, it&#39;s a bit of a balancing act to ensure that you&#39;re breaking up scripts into enough smaller chunks to facilitate better interactivity during startup.&lt;/p&gt;
&lt;p&gt;Bundlers are ideal tools for managing the output size for the scripts your website depends on:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Where webpack is concerned, its &lt;code&gt;SplitChunksPlugin&lt;/code&gt; plugin can help. Consult the &lt;a href=&quot;https://webpack.js.org/plugins/split-chunks-plugin/&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;SplitChunksPlugin&lt;/code&gt; documentation&lt;/a&gt; for options you can set to help manage asset sizes.&lt;/li&gt;
&lt;li&gt;For other bundlers such as &lt;a href=&quot;https://rollupjs.org/&quot; rel=&quot;noopener&quot;&gt;Rollup&lt;/a&gt; and &lt;a href=&quot;https://esbuild.github.io/&quot; rel=&quot;noopener&quot;&gt;esbuild&lt;/a&gt;, you can manage script file sizes by using dynamic &lt;code&gt;import()&lt;/code&gt; calls in your code. These bundlers—as well as webpack—will automatically break off the dynamically imported asset into its own file, thus avoiding larger initial bundle sizes.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;cache-invalidation&quot;&gt;Cache invalidation &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#cache-invalidation&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Cache invalidation plays a big role in how fast a page loads on repeat visits. When you ship large, monolithic script bundles, you&#39;re at a disadvantage when it comes to browser caching. This is because when you update your first-party code—either through updating packages or shipping bug fixes—the entire bundle becomes invalidated and must be downloaded again.&lt;/p&gt;
&lt;p&gt;By breaking up your scripts, you&#39;re not just breaking up script evaluation work across smaller tasks, you&#39;re also increasing the likelihood that return visitors will grab more scripts from the browser cache instead of from the network. This translates into an overall faster page load.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; In order for caching to be both efficient and to avoid stale resources from being served from the cache, be sure that your bundler is &lt;a href=&quot;https://bundlers.tooling.report/hashing/&quot;&gt;generating resources with a hash in the file name&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;nested-modules-and-loading-performance&quot;&gt;Nested modules and loading performance &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#nested-modules-and-loading-performance&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you&#39;re shipping ES modules in production and loading them with the &lt;code&gt;type=module&lt;/code&gt; attribute, you need to be aware of how module nesting can impact startup time. Module nesting refers to when an ES module statically imports another ES module that statically imports another ES module:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// a.js&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;b&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;./b.js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// b.js&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;c&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;./c.js&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;If your ES modules are not bundled together, the preceding code results in a network request chain: when &lt;code&gt;a.js&lt;/code&gt; is requested from a &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element, another network request is dispatched for &lt;code&gt;b.js&lt;/code&gt;, which then involves &lt;em&gt;another&lt;/em&gt; request for &lt;code&gt;c.js&lt;/code&gt;. One way to avoid this is to use a bundler—but be sure you&#39;re configuring your bundler to break up scripts to spread out script evaluation work.&lt;/p&gt;
&lt;p&gt;If you don&#39;t want to use a bundler, then another way to get around nested module calls is to use the &lt;a href=&quot;https://developer.chrome.com/blog/modulepreload/&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;modulepreload&lt;/code&gt; resource hint&lt;/a&gt;, which will preload ES modules ahead of time to avoid network request chains. Beware, however: this hint is currently only supported in Chromium-based browsers.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/script-evaluation-and-long-tasks/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Optimizing evaluation of scripts in the browser is no doubt a tricky feat. The approach depends on your website&#39;s requirements and constraints. However, by splitting up scripts, you&#39;re spreading the work of script evaluation over numerous smaller tasks, and therefore giving the main thread the ability to handle user interactions more efficiently, rather than blocking the main thread.&lt;/p&gt;
&lt;p&gt;To recap, here are some things you can to do to break up large script evaluation tasks:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;When loading scripts using the &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element without the &lt;code&gt;type=module&lt;/code&gt; attribute, avoid loading scripts that are very large, as these will kick off resource-intensive script evaluation tasks that block the main thread. Spread out your scripts over more &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; elements to break up this work.&lt;/li&gt;
&lt;li&gt;Using the &lt;code&gt;type=module&lt;/code&gt; attribute to load ES modules natively in the browser will kick off individual tasks for evaluation for each separate module script.&lt;/li&gt;
&lt;li&gt;Reduce the size of your initial bundles by using dynamic &lt;code&gt;import()&lt;/code&gt; calls. This also works in bundlers, as bundlers will treat each dynamically imported module as a &amp;quot;split point,&amp;quot; resulting in a separate script being generated for each dynamically imported module.&lt;/li&gt;
&lt;li&gt;Be sure to weigh trade-offs such as compression efficiency and cache invalidation. Larger scripts will compress better, but are more likely to involve more expensive script evaluation work in fewer tasks, and result in browser cache invalidation, leading to overall lower caching efficiency.&lt;/li&gt;
&lt;li&gt;If using ES modules natively without bundling, use the &lt;code&gt;modulepreload&lt;/code&gt; resource hint to optimize the loading of them during startup.&lt;/li&gt;
&lt;li&gt;As always, ship as little JavaScript as possible.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;It&#39;s a balancing act for sure—but by breaking up scripts and reducing initial payloads via dynamic &lt;code&gt;import()&lt;/code&gt;, you can achieve better startup performance and better accommodate user interactions during that crucial startup period. This should help you score better on the INP metric, thus delivering a better user experience.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@markusspiske&quot; rel=&quot;noopener&quot;&gt;Markus Spiske&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Optimize input delay
        </title>
        <link href="https://web.dev/optimize-input-delay/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/optimize-input-delay/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Interactions on the web are complicated things, with all sorts of activity occurring in the browser to drive them. What they all have in common, though, is that they incur some input delay before their event callbacks begin to run. In this guide, you&#39;ll learn what input delay is, and what you can do to minimize it so your website&#39;s interactions run faster.&lt;/p&gt;
&lt;h2 id=&quot;what-is-input-delay&quot;&gt;What is input delay? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#what-is-input-delay&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;Input delay&lt;/em&gt; is the period of time beginning from when the user first interacts with a page—such as tapping on a screen, clicking with a mouse, or pressing a key—up to when the event callbacks for the interaction begin to run. Every interaction begins with some amount of input delay.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A simplified visualization of input delay. At left, there is line art of a mouse cursor with a starburst behind it, signifying the start of an interaction. To the right is line art of a cogwheel, signifying when the event handlers for an interaction begin to run. The space in between is noted as the input delay with a curly brace.&quot; decoding=&quot;async&quot; height=&quot;303&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 736px) 736px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/WVS8po7gV1gKbeWcVadI.png?auto=format&amp;w=1472 1472w&quot; width=&quot;736&quot; /&gt;
  &lt;figcaption&gt;
    The mechanics behind input delay. When an input is received by the operating system, it must be passed to the browser before the interaction starts. This takes a certain amount of time, and can be increased by existing main thread work.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Some portion of the input delay is unavoidable: it always takes some amount of time for the operating system to recognize an input event and pass it to the browser. However, that portion of the input delay is often not even noticeable, and there are other things that happen on the page itself that can make input delays long enough to cause problems.&lt;/p&gt;
&lt;h2 id=&quot;how-to-think-about-input-delay&quot;&gt;How to think about input delay &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#how-to-think-about-input-delay&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Generally speaking, you want to keep every part of an interaction as short as possible so that your website has the best chance of meeting &lt;a href=&quot;https://web.dev/inp/#what-is-a-good-inp-score&quot;&gt;the Interaction to Next Paint (INP) metric&#39;s &amp;quot;good&amp;quot; threshold&lt;/a&gt;, regardless of the user&#39;s device. Keeping input delay in check is just one part of meeting that threshold.&lt;/p&gt;
&lt;p&gt;You might be tempted to look to &lt;a href=&quot;https://web.dev/fid/#what-is-a-good-fid-score&quot;&gt;the First Input Delay (FID) thresholds&lt;/a&gt; to determine an allowance for input delays—but the &amp;quot;good&amp;quot; threshold for FID is &lt;strong&gt;100 milliseconds or less&lt;/strong&gt;. If you go by this threshold, you&#39;d be allotting half of your budget for INP to input delay alone. This is inadvisable when you consider that an interaction also requires time to run event callbacks and for the browser to paint the next frame.&lt;/p&gt;
&lt;p&gt;To meet INP&#39;s &amp;quot;good&amp;quot; threshold, you&#39;ll want to aim for the shortest input delay possible, but you shouldn&#39;t expect to eliminate it entirely, as that is impossible. As long as you&#39;re avoiding excessive main thread work while users are attempting to interact with your page, your input delay should be low enough to avoid problems.&lt;/p&gt;
&lt;h2 id=&quot;how-to-minimize-input-delay&quot;&gt;How to minimize input delay &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#how-to-minimize-input-delay&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As said previously, some input delay is unavoidable, but on the other hand, some input delay &lt;em&gt;is&lt;/em&gt; avoidable. Here are some things to consider if you&#39;re struggling with long input delays.&lt;/p&gt;
&lt;h3 id=&quot;avoid-recurring-timers-that-kick-off-excessive-main-thread-work&quot;&gt;Avoid recurring timers that kick off excessive main thread work &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#avoid-recurring-timers-that-kick-off-excessive-main-thread-work&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;There are two commonly used timer functions in JavaScript that can contribute to input delay: &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/setTimeout&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;setTimeout&lt;/code&gt;&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/setInterval&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;setInterval&lt;/code&gt;&lt;/a&gt;. The difference between the two is that &lt;code&gt;setTimeout&lt;/code&gt; schedules a callback to run after a specified time. &lt;code&gt;setInterval&lt;/code&gt;, on the other hand, schedules a callback to run every &lt;em&gt;n&lt;/em&gt; milliseconds in perpetuity, or until the timer is stopped with &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/clearInterval&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;clearInterval&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;setTimeout&lt;/code&gt; is not problematic in itself—in fact, it can be helpful in &lt;a href=&quot;https://web.dev/optimize-input-delay/#avoid-long-tasks&quot;&gt;avoiding long tasks&lt;/a&gt;. However, it depends on &lt;em&gt;when&lt;/em&gt; the timeout occurs, and whether the user attempts to interact with the page when the timeout callback runs.&lt;/p&gt;
&lt;p&gt;Additionally, &lt;code&gt;setTimeout&lt;/code&gt; can be run in a loop or recursively, where it acts more like &lt;code&gt;setInterval&lt;/code&gt;, though preferably not scheduling the next iteration until the previous one is completed. While this means the loop will yield to the main thread every time &lt;code&gt;setTimeout&lt;/code&gt; is called, you should take care to ensure its callback doesn&#39;t end up doing excessive work.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;setInterval&lt;/code&gt; runs a callback on an interval, and is therefore much more likely to get in the way of interactions. This is because—unlike a single instance of a &lt;code&gt;setTimeout&lt;/code&gt; call, which is a one-off callback that &lt;em&gt;may&lt;/em&gt; get in the way of a user interaction—&lt;code&gt;setInterval&lt;/code&gt;&#39;s recurring nature makes it much more likely that it &lt;em&gt;will&lt;/em&gt; get in the way of an interaction, thus increasing the interaction&#39;s input delay.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the performance profiler in Chrome DevTools demonstrating input delay. A task fired by a timer function occurs just before a user initiates a click interaction. However, the timer extends the input delay, causing the interaction&amp;#x27;s event callbacks to run later than they otherwise would.&quot; decoding=&quot;async&quot; height=&quot;291&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/tjzVtS9wFXxd06gaPHNY.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A timer registered by a previous &lt;code&gt;setInterval&lt;/code&gt; call contributing to input delay as depicted in the performance panel of Chrome DevTools. The added input delay causes the event callbacks for the interaction to run later than they otherwise could.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;If timers are occurring in first-party code, then you have control over them. Evaluate whether you need them, or do your best to reduce the work in them as much as possible. However, timers in third-party scripts are a different story. You often don&#39;t have control over what a third-party script does, and fixing performance issues in third-party code often involves working with stakeholders to determine whether a given third-party script is necessary, and if so, establish contact with a third-party script vendor to determine what can done to fix performance issues they may cause on your website.&lt;/p&gt;
&lt;h3 id=&quot;avoid-long-tasks&quot;&gt;Avoid long tasks &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#avoid-long-tasks&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;One way to mitigate long input delays is to avoid long tasks. When you have excessive main thread work that blocks the main thread during interactions, that will add to the input delay for them before the long tasks have had a chance to finish.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A visualization of how long tasks extend input delay. At top, an interaction occurs shortly after a single long task runs, causing significant input delay that causes event callbacks to run much later than they should. At bottom, an interaction occurs at roughly the same time, but the long task is broken up into several smaller ones by yielding, allowing the interaction&amp;#x27;s event callbacks to run much sooner.&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/PRO5n8DxflhLaM5PdoZv.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A visualization of what happens to interactions when tasks are too long and the browser can&#39;t respond quickly enough to interactions, versus when longer tasks are broken up into smaller tasks.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Besides minimizing the amount of work you do in a task—and you should &lt;em&gt;always&lt;/em&gt; strive to do as little work as possible on the main thread—you can improve responsiveness to user input by &lt;a href=&quot;https://web.dev/optimize-long-tasks/&quot;&gt;breaking up long tasks&lt;/a&gt;.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; Yielding isn&#39;t foolproof, as tasks from third-party JavaScript can still make their way in between first-party tasks after yielding. This can still contribute to input delay for future interactions, and you&#39;ll need to be mindful of third-party tasks that may run on an interval, as described in the previous section. This is a problem that &lt;a href=&quot;https://github.com/WICG/scheduling-apis/blob/main/explainers/yield-and-continuation.md&quot;&gt;the proposed &lt;code&gt;scheduler.yield&lt;/code&gt; API&lt;/a&gt; is looking to solve. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;be-mindful-of-interaction-overlap&quot;&gt;Be mindful of interaction overlap &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#be-mindful-of-interaction-overlap&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;A particularly challenging part of optimizing INP can be if you have interactions that overlap. Interaction overlap means that after you&#39;ve interacted with one element, you make another interaction with the page before the initial interaction has had a chance to render the next frame.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A depiction of when tasks can overlap to produce long input delays. In this depiction, a click interaction overlaps with a keydown interaction to increase the input delay for the keydown interaction.&quot; decoding=&quot;async&quot; height=&quot;307&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ohYy7phsKRbKCeth0iUu.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A visualization of two concurrent interactions in the performance profiler in Chrome&#39;s DevTools. The rendering work in the initial click interaction causes an input delay for the subsequent keyboard interaction.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Sources of interaction overlap may be as simple as users making many interactions in a short period of time. This can occur when users type in form fields, where many keyboard interactions can occur in a very short period of time. If the work on a key event is especially expensive—such as in the common case of autocomplete fields where network requests are made to a back end—you have a couple of options:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Consider &lt;a href=&quot;https://web.dev/debounce-your-input-handlers/&quot;&gt;debouncing&lt;/a&gt; inputs to limit the amount of times an event callback executes in a given period of time.&lt;/li&gt;
&lt;li&gt;Use &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/AbortController/abort&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;AbortController&lt;/code&gt;&lt;/a&gt; to cancel outgoing &lt;code&gt;fetch&lt;/code&gt; requests so the main thread doesn&#39;t become congested handling &lt;code&gt;fetch&lt;/code&gt; callbacks. Note: an &lt;code&gt;AbortController&lt;/code&gt; instance&#39;s &lt;code&gt;signal&lt;/code&gt; property can also be used to &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/AbortSignal/abort_event&quot; rel=&quot;noopener&quot;&gt;abort events&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Another source of increased input delay due to overlapping interactions can be expensive animations. In particular, animations in JavaScript may fire many &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;requestAnimationFrame&lt;/code&gt;&lt;/a&gt; calls, which may get in the way of user interactions. To get around this, use CSS animations whenever possible to avoid queueing potentially expensive animation frames—but if you do this, make sure you &lt;a href=&quot;https://developer.chrome.com/en/docs/lighthouse/performance/non-composited-animations/&quot; rel=&quot;noopener&quot;&gt;avoid non-composited animations&lt;/a&gt; so that animations run mainly on the GPU and compositor threads, and not on the main thread.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/optimize-input-delay/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While input delays may not represent the majority of the time your interactions take to run, it&#39;s important to understand that every part of an interaction takes up an amount of time that you can reduce. If you&#39;re &lt;a href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#how-to-identify-long-input-delays&quot;&gt;observing long input delay&lt;/a&gt;, then you have opportunities to reduce it. Avoiding recurring timer callbacks, breaking up long tasks, and being aware of potential interaction overlap can all help you to reduce input delay, leading to faster interactivity for your website&#39;s users.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@introspectivedsgn&quot; rel=&quot;noopener&quot;&gt;Erik Mclean&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Find slow interactions in the field
        </title>
        <link href="https://web.dev/find-slow-interactions-in-the-field/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/find-slow-interactions-in-the-field/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;&lt;a href=&quot;https://web.dev/lab-and-field-data-differences/#field-data&quot;&gt;Field data&lt;/a&gt; is &lt;em&gt;the&lt;/em&gt; authoritative source when it comes to how actual users are experiencing your website. It teases out issues you may not see in &lt;a href=&quot;https://web.dev/lab-and-field-data-differences/#lab-data&quot;&gt;lab data&lt;/a&gt; alone. While interactions can be simulated in lab-based tools, you&#39;re not going to be able to reproduce every single interaction in the lab in the way that users in the field experience them. Gathering field data for &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; is critical to understanding how responsive your page is to real users, and it contains the clues to make their experience even better.&lt;/p&gt;
&lt;h2 id=&quot;what-you-should-collect-in-the-field-and-why&quot;&gt;What you should collect in the field and why &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#what-you-should-collect-in-the-field-and-why&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When collecting INP data in the field, you&#39;ll want to capture the following to give context to why interactions were slow:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;The INP value.&lt;/strong&gt; This is the key piece of data you&#39;ll need to collect. The distribution of these values will determine whether the page meets &lt;a href=&quot;https://web.dev/inp/#what-is-a-good-inp-score&quot;&gt;the INP thresholds&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The element selector string responsible for the page&#39;s INP.&lt;/strong&gt; Knowing a page&#39;s INP is good, but not good enough by itself. Without knowing what element was responsible for it, you&#39;ll be in the dark. By logging element selector strings, you’ll know exactly what elements are responsible for interactions.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The loading state of the page for the interaction that is the page&#39;s INP.&lt;/strong&gt; When a page is loading, it&#39;s reasonable to assume that there&#39;s more main thread activity occurring that could result in higher interaction latency. During page load, there&#39;s HTML parsing, stylesheet parsing, and JavaScript evaluation and execution going on. Knowing whether an interaction has taken place during page load or afterwards helps you to figure out if you need to optimize for faster startup so interactions have more room on the main thread to run quickly, or if the interaction responsible for the page&#39;s INP in itself is slow regardless.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The interaction&#39;s &lt;code&gt;startTime&lt;/code&gt;.&lt;/strong&gt; Logging the interaction&#39;s &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/PerformanceEntry/startTime&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;startTime&lt;/code&gt;&lt;/a&gt; lets you know exactly when the interaction occurred on the performance timeline.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;The event type.&lt;/strong&gt; The &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Event/type&quot; rel=&quot;noopener&quot;&gt;event type&lt;/a&gt; is good to know, as it will tell you whether the interaction was the result of a &lt;code&gt;click&lt;/code&gt;, &lt;code&gt;keypress&lt;/code&gt;, or other eligible event type. A user interaction may contain multiple callbacks, and can help you to pinpoint exactly which event callback in the interaction took the longest to run.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;While this all seems like a lot to take into account, you don&#39;t have to reinvent the wheel to get there. Thankfully, this data is exposed in the &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;web-vitals&lt;/code&gt; JavaScript library&lt;/a&gt;, and you&#39;ll learn how to gather it in the next section.&lt;/p&gt;
&lt;h2 id=&quot;measure-interactions-in-the-field-with-the-web-vitals-javascript-library&quot;&gt;Measure interactions in the field with the &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#measure-interactions-in-the-field-with-the-web-vitals-javascript-library&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library is a great way to find slow interactions in the field, thanks in large part to its ability to provide &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals#attribution-build&quot; rel=&quot;noopener&quot;&gt;attribution&lt;/a&gt; for what&#39;s causing them. INP can be collected in browsers that support the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming&quot; rel=&quot;noopener&quot;&gt;Event Timing API&lt;/a&gt; and its &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming/interactionId&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;interactionId&lt;/code&gt; property&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 96, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      96
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 96, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
96
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming/interactionId#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;Using a &lt;a href=&quot;https://en.wikipedia.org/wiki/Real_user_monitoring&quot; rel=&quot;noopener&quot;&gt;Real User Monitoring (RUM)&lt;/a&gt; provider to get INP is most convenient, but not always an option. If that&#39;s your case, for example, you can use the &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library to collect and transmit INP data to Google Analytics for later evaluation:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Be sure to import from the attribution build:&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;onINP&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;web-vitals/attribution&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sendToGoogleAnalytics&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; id&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; attribution&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token comment&quot;&gt;// Destructure the attribution object:&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;eventEntry&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; eventTarget&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; eventType&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; loadState&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; attribution&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token comment&quot;&gt;// Get timings from the event timing entry:&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;startTime&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; processingStart&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; processingEnd&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; duration&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; interactionId&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; eventEntry&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; eventParams &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The page&#39;s INP value:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_value&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// A unique ID for the page session, which is useful&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// for computing totals when you group by the ID.&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_id&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; id&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The event target (a CSS selector string pointing&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// to the element responsible for the interaction):&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_event_target&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; eventTarget&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The type of event that triggered the interaction:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_event_type&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; eventType&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// Whether the page was loaded when the interaction&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// took place. Useful for identifying startup versus&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// post-load interactions:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_load_state&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; loadState&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The time (in milliseconds) after page load when&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// the interaction took place:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_start_time&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; startTime&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// When processing of the event callbacks in the&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// interaction started to run:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_processing_start&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; processingStart&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// When processing of the event callbacks in the&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// interaction finished:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_processing_end&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; processingEnd&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The total duration of the interaction. Note: this&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// value is rounded to 8 milliseconds of granularity:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_duration&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; duration&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// The interaction ID assigned to the interaction by&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// the Event Timing API. This could be useful in cases&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token comment&quot;&gt;// where you might want to aggregate related events:&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token literal-property property&quot;&gt;metric_inp_interaction_id&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; interactionId&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token comment&quot;&gt;// Send to Google Analytics&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token function&quot;&gt;gtag&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;event&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; name&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; eventParams&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token comment&quot;&gt;// Pass the reporting function to the web-vitals INP reporter:&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token function&quot;&gt;onINP&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;sendToGoogleAnalytics&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; Where element attribution is concerned, not every interaction can be attributed to a specific element. This is due to a limitation of the underlying &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming&quot;&gt;Event Timing API&lt;/a&gt;, which is used to calculate the page&#39;s INP. In this API, &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Event/target&quot;&gt;the event target&lt;/a&gt; may be absent if the element responsible for the interaction was disconnected from the DOM, or if the element was in the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM&quot;&gt;shadow DOM&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;If you have Google Analytics and run the preceding code on your website, you&#39;ll get a detailed reporting of not just the page&#39;s INP, but also useful contextual information that can give you a better sense of where to begin optimizing slow interactions.&lt;/p&gt;
&lt;h3 id=&quot;monitor-full-session-duration,-not-just-up-to-onload&quot;&gt;Monitor full session duration, not just up to &lt;code&gt;onload&lt;/code&gt; &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#monitor-full-session-duration,-not-just-up-to-onload&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Using the &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library, as previously mentioned, may result in multiple analytics events being sent to Google Analytics. This is fine, as the ID &lt;code&gt;web-vitals&lt;/code&gt; generates for the current page will stay the same, and Google Analytics will allow you to overwrite previous data.&lt;/p&gt;
&lt;p&gt;However, not all RUM providers operate this way, so if you&#39;re building your own RUM collection solution, you&#39;ll need to take this into account. If your current analytics provider won&#39;t allow overwrites of existing records, you&#39;ll need to record all the &lt;code&gt;delta&lt;/code&gt; values—that is, the difference between a metric&#39;s past and current states— for a metric and transmit them using the same ID provided by the &lt;code&gt;web-vitals&lt;/code&gt; library;  then you can sum those changes by grouping on the ID. For more more information, consult the &lt;code&gt;web-vitals&lt;/code&gt; documentation&#39;s &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals#report-only-the-delta-of-changes&quot; rel=&quot;noopener&quot;&gt;section on handling deltas&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;get-field-data-quickly-with-crux&quot;&gt;Get field data quickly with CrUX &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#get-field-data-quickly-with-crux&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The &lt;a href=&quot;https://developer.chrome.com/docs/crux/&quot; rel=&quot;noopener&quot;&gt;Chrome UX Report (CrUX)&lt;/a&gt; is the official dataset of the Web Vitals program. While data from CrUX alone doesn&#39;t give you all the information you need to troubleshoot specific INP issues, it does let you know whether you have a problem in the first place. Even if you&#39;re already collecting field data through a RUM provider, consider contrasting it with CrUX data for your website (if available), as there are &lt;a href=&quot;https://web.dev/crux-and-rum-differences/&quot;&gt;differences in the methodologies they use&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;You can evaluate your website&#39;s INP and view its CrUX data using &lt;a href=&quot;https://pagespeed.web.dev/&quot; rel=&quot;noopener&quot;&gt;PageSpeed Insights (PSI)&lt;/a&gt;. PageSpeed Insights may provide page-level field data for websites that are included in the CrUX dataset. To audit a URL with PageSpeed Insights, go to &lt;a href=&quot;https://pagespeed.web.dev/&quot; rel=&quot;noopener&quot;&gt;https://pagespeed.web.dev/&lt;/a&gt;, enter a URL to test, and click the &lt;strong&gt;Analyze&lt;/strong&gt; button.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; The URL you enter &lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/%E2%80%8B%E2%80%8Bhttps://developer.chrome.com/docs/crux/methodology/#eligibility&quot;&gt;may not be eligible for CrUX&lt;/a&gt;. If this is the case, you&#39;ll need to collect your own field data, which is explained in the previous section. Also, where page-level data is not available for the given URL in PageSpeed Insights, the provided field data will be aggregated over the entire website. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;Once the assessment begins, CrUX data will be available instantly as Lighthouse (a &lt;a href=&quot;https://web.dev/lab-and-field-data-differences/#lab-data&quot;&gt;lab tool&lt;/a&gt;) runs.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of INP field data in a distribution. The distribution aligns with the INP thresholds, and in this example, the field INP value is 545 milliseconds, which lands in the poor range.&quot; decoding=&quot;async&quot; height=&quot;161&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/JZjcvOGERDsYovSJVn7o.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;The distribution of INP experiences as seen in PageSpeed Insights.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;When Lighthouse has finished running its assessment, PSI will populate the assessment with Lighthouse audits.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; Because PageSpeed Insights is not scripted to interact with the page, there will be no audits relevant to INP. However, &lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt; is &lt;a href=&quot;https://almanac.httparchive.org/en/2022/performance#inp-and-tbt&quot;&gt;highly correlated with INP&lt;/a&gt;. Therefore, you can filter audits by TBT to find opportunities to reduce the amount of time a page blocks the main thread during the test. &lt;/div&gt;&lt;/aside&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of Lighthouse audits as seen in PageSpeed Insights. The audits are filtered by the TBT metric, showing tips for minimizing main thread work, avoiding an excessive DOM size, and avoiding long main thread tasks.&quot; decoding=&quot;async&quot; height=&quot;346&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Ra3g6IEXkYsgMhpQsjEV.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;Audits for Total Blocking Time&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id=&quot;what-if-i-dont-have-field-data&quot;&gt;What if I don&#39;t have field data? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#what-if-i-dont-have-field-data&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;You might be in a situation where you don&#39;t have or can’t even collect field data. If this describes your situation, then you&#39;ll be entirely dependent on lab tools in order to find slow interactions. For more information on lab testing, read &lt;a href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/&quot;&gt;How to diagnose what&#39;s causing poor INP in the lab&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/find-slow-interactions-in-the-field/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Field data is the best source of information you can draw on when it comes to understanding which interactions are problematic for actual users in the field. By drawing on information available in PageSpeed Insights, or relying on field data collection tools such as the &lt;code&gt;web-vitals&lt;/code&gt; JavaScript library (or your RUM provider), you can be more confident about which interactions are most problematic, and then move on to &lt;a href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/&quot;&gt;reproducing problematic interactions in the lab&lt;/a&gt; and then go about fixing them.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@federicorespini&quot; rel=&quot;noopener&quot;&gt;Federico Respini&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            How large DOM sizes affect interactivity, and what you can do about it
        </title>
        <link href="https://web.dev/dom-size-and-interactivity/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/dom-size-and-interactivity/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;There&#39;s no way around it: when you build a web page, that page is going to have a &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Document_Object_Model&quot; rel=&quot;noopener&quot;&gt;Document Object Model (DOM)&lt;/a&gt;. The DOM represents the structure of your page&#39;s HTML, and gives JavaScript and CSS access to a page&#39;s structure and contents.&lt;/p&gt;
&lt;p&gt;The problem, however, is that the &lt;em&gt;size&lt;/em&gt; of the DOM affects a browser&#39;s ability to render a page quickly and efficiently. Generally speaking, the larger a DOM is, the more expensive it is to initially render that page and update its rendering later on in the page lifecycle.&lt;/p&gt;
&lt;p&gt;This becomes problematic in pages with very large DOMs when interactions that modify or update the DOM trigger expensive layout work that affects the ability of the page to respond quickly. Expensive layout work can affect a page&#39;s &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt;; If you want a page to respond quickly to user interactions, it&#39;s important to ensure your DOM sizes are only as large as necessary.&lt;/p&gt;
&lt;h2 id=&quot;when-is-a-pages-dom-too-large&quot;&gt;When is a page&#39;s DOM &lt;em&gt;too&lt;/em&gt; large? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#when-is-a-pages-dom-too-large&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;aside class=&quot;aside flow color-secondary-box-text bg-secondary-box-bg&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; role=&quot;img&quot; aria-label=&quot;Highlighter pen&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M10.22 9.49l-5.91 6c-.77.8-.7 2.05.08 2.85L.77 22h5.68l.74-.75c.78.81 1.95.86 2.73.05l5.96-6.05-5.66-5.76zm12.46-4l-2.82-2.87c-.78-.8-2.07-.84-2.84-.04l-5.75 5.85 5.66 5.75 5.69-5.78c.77-.81.83-2.11.06-2.91z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Key Term&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; It&#39;s important to know the difference between DOM elements and DOM nodes. A DOM &lt;em&gt;element&lt;/em&gt; refers to a specific &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/HTMLElement&quot;&gt;HTML element&lt;/a&gt; in the DOM tree. A &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Node&quot;&gt;DOM &lt;em&gt;node&lt;/em&gt;&lt;/a&gt; has overlapping meaning with the DOM element term, but its definition is expanded to include comments, whitespace, and text. While the &lt;a href=&quot;https://developer.chrome.com/en/docs/lighthouse/performance/dom-size/&quot;&gt;Lighthouse DOM size audit&lt;/a&gt; refers to DOM nodes, this guide will refer to DOM elements over nodes whenever possible. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.chrome.com/en/docs/lighthouse/performance/dom-size/#how-the-lighthouse-dom-size-audit-fails&quot; rel=&quot;noopener&quot;&gt;According to Lighthouse&lt;/a&gt;, a page&#39;s DOM size is excessive when it exceeds 1,400 nodes. Lighthouse will begin to throw warnings when a page&#39;s DOM exceeds 800 nodes. Take the following HTML for example:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;List item one.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;List item two.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;List item three.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;In the above code, there are four DOM elements: the &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; element, and its three &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; child elements. Your web page will almost certainly have many more nodes than this, so it&#39;s important to understand what you can do to keep DOM sizes in check—as well as other strategies to optimize the rendering work once you&#39;ve gotten a page&#39;s DOM as small as it can be.&lt;/p&gt;
&lt;h2 id=&quot;how-do-large-doms-affect-page-performance&quot;&gt;How do large DOMs affect page performance? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#how-do-large-doms-affect-page-performance&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Large DOMs affect page performance in a few ways:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;During the page&#39;s initial render. When CSS is applied to a page, a structure similar to the DOM known as the &lt;a href=&quot;https://web.dev/critical-rendering-path-constructing-the-object-model/#css-object-model-cssom&quot;&gt;CSS Object Model (CSSOM)&lt;/a&gt; is created. As CSS selectors increase in specificity, the CSSOM becomes more complex, and more time is needed to run the necessary layout, styling, compositing, and paint work necessary to draw the web page to the screen. This added work increases interaction latency for interactions that occur early on during page load.&lt;/li&gt;
&lt;li&gt;When interactions modify the DOM, either through element insertion or deletion, or by modifying DOM contents and styles, the work necessary to render that update can result in very costly layout, styling, compositing, and paint work. As is the case with the page&#39;s initial render, an increase in CSS selector specificity can add to rendering work when HTML elements are inserted into the DOM as the result of an interaction.&lt;/li&gt;
&lt;li&gt;When JavaScript queries the DOM, references to DOM elements are stored in memory. For example, if you call &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;document.querySelectorAll&lt;/code&gt;&lt;/a&gt; to select all &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; elements on a page, the memory cost could be considerable if the result returns a large number of DOM elements.&lt;/li&gt;
&lt;/ol&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of a long task caused by excessive rendering work in the performance panel of Chrome DevTools. The long task&amp;#x27;s call stack shows significant time spent recalculating page styles, as well as pre-paint.&quot; decoding=&quot;async&quot; height=&quot;248&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/qqLuCIvjmvKn5L8YTLGt.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A long task as shown in the performance profiler in Chrome DevTools. The long task shown is caused by inserting DOM elements into a large DOM via JavaScript.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;All of these can affect interactivity, but the second item in the list above is of particular importance. If an interaction results in a change to the DOM, it can kick off a lot of work that can contribute to a poor INP on a page.&lt;/p&gt;
&lt;h2 id=&quot;how-do-i-measure-dom-size&quot;&gt;How do I measure DOM size? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#how-do-i-measure-dom-size&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;You can measure DOM size in a couple of ways. The first method uses Lighthouse. When you run an audit, statistics on the current page&#39;s DOM will be in the &amp;quot;Avoid an excessive DOM size&amp;quot; audit under the &amp;quot;Diagnostics&amp;quot; heading. In this section, you can see the total number of DOM elements, the DOM element containing the most child elements, as well as the deepest DOM element.&lt;/p&gt;
&lt;p&gt;A simpler method involves using the JavaScript console in the developer tools in any major browser. To get the total number of HTML elements in the DOM, you can use the following code in the console after the page has loaded:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelectorAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;*&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; Note that the code snippet above only includes the number of HTML &lt;em&gt;elements&lt;/em&gt; in the DOM. It doesn&#39;t include all the &lt;em&gt;nodes&lt;/em&gt; in the DOM. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;If you want to see the DOM size update in realtime, you can also use the &lt;a href=&quot;https://developer.chrome.com/blog/new-in-devtools-64/#perf-monitor&quot; rel=&quot;noopener&quot;&gt;performance monitor tool&lt;/a&gt;. Using this tool, you can correlate layout and styling operations (and other performance aspects) along with the current DOM size.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the performance monitor in Chrome DevTools. At left, there are various aspects of page performance that can be continuously monitored during the life of the page. In the screenshot, the number of DOM nodes, layouts per second, and style recalculations per section are actively being monitored.&quot; decoding=&quot;async&quot; height=&quot;273&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/mjhhoz41DjdR4cZFwU89.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    The performance monitor in Chrome DevTools. In this view, the page&#39;s current number of DOM nodes is charted along with layout operations and style recalculations performed per second.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;If the DOM&#39;s size is approaching Lighthouse DOM size&#39;s warning threshold—or fails altogether—the next step is to figure out how to reduce the DOM&#39;s size to improve your page&#39;s ability to respond to user interactions so that your website&#39;s INP can improve.&lt;/p&gt;
&lt;h2 id=&quot;how-can-i-measure-the-number-of-dom-elements-affected-by-an-interaction&quot;&gt;How can I measure the number of DOM elements affected by an interaction? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#how-can-i-measure-the-number-of-dom-elements-affected-by-an-interaction&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you&#39;re profiling a slow interaction in the lab that you suspect might have something to do with the size of the page&#39;s DOM, you can figure out how many DOM elements were affected by selecting any piece of activity in the profiler labeled &amp;quot;Recalculate Style&amp;quot; and observe the contextual data in the bottom panel.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of selected style recalculation activity in the performance panel of Chrome DevTools. At top, the interactions track shows a click interaction, and the majority of the work is spent doing style recalculation and pre-paint work. At the bottom, a panel shows more detail for the selected activity, which reports that 2,547 DOM elements were affected.&quot; decoding=&quot;async&quot; height=&quot;639&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/IjTPVbiLoerWFO5eClbl.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Observing the number of affected elements in the DOM as the result of style recalculation work. Note that the shaded portion of the interaction in the interactions track represents the portion of the interaction duration that was over 200 milliseconds, which is &lt;a href=&quot;https://web.dev/inp/#what-is-a-good-inp-score&quot; rel=&quot;noopener&quot;&gt;the designated &quot;good&quot; threshold for INP&lt;/a&gt;.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;In the above screenshot, observe that the style recalculation of the work—when selected—shows the number of affected elements. While the above screenshot shows an extreme case of the effect of DOM size on rendering work on a page with many DOM elements, this diagnostic info is useful in any case to determine if the size of the DOM is a limiting factor in how long it takes for the next frame to paint in response to an interaction.&lt;/p&gt;
&lt;h2 id=&quot;how-can-i-reduce-dom-size&quot;&gt;How can I reduce DOM size? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#how-can-i-reduce-dom-size&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Beyond auditing your website&#39;s HTML for unnecessary markup, the principal way to reduce DOM size is to reduce DOM depth. One signal that your DOM might be unnecessarily deep is if you&#39;re seeing markup that looks something like this in the &lt;strong&gt;Elements&lt;/strong&gt; tab of your browser&#39;s developer tools:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;        &lt;span class=&quot;token comment&quot;&gt;&amp;lt;!-- Contents --&gt;&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;p&gt;When you see patterns like this, you can probably simplify them by flattening your DOM structure. Doing so will reduce the number of DOM elements, and likely give you an opportunity to simplify page styles.&lt;/p&gt;
&lt;p&gt;DOM depth may also be a symptom of the frameworks you use. In particular, component-based frameworks—such as those that rely on &lt;a href=&quot;https://reactjs.org/docs/introducing-jsx.html&quot; rel=&quot;noopener&quot;&gt;JSX&lt;/a&gt;—require you to nest multiple components in a parent container.&lt;/p&gt;
&lt;p&gt;However, many frameworks allow you to avoid nesting components by using what are known as fragments. Component-based frameworks that offer fragments as a feature include (but are not limited to) the following:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://reactjs.org/docs/fragments.html&quot; rel=&quot;noopener&quot;&gt;React&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://preactjs.com/guide/v10/components/#fragments&quot; rel=&quot;noopener&quot;&gt;Preact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://v3-migration.vuejs.org/new/fragments.html&quot; rel=&quot;noopener&quot;&gt;Vue&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://svelte.dev/tutorial/svelte-fragment&quot; rel=&quot;noopener&quot;&gt;Svelte&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;By using fragments in your framework of choice, you can reduce DOM depth. If you&#39;re concerned about the impact flattening DOM structure has on styling, you might benefit from using more modern (and faster) layout modes such as &lt;a href=&quot;https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox&quot; rel=&quot;noopener&quot;&gt;flexbox&lt;/a&gt; or &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout&quot; rel=&quot;noopener&quot;&gt;grid&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;other-strategies-to-consider&quot;&gt;Other strategies to consider &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#other-strategies-to-consider&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Even if you take pains to flatten your DOM tree and remove unnecessary HTML elements to keep your DOM as small as possible, it can still be quite large and kick off a lot of rendering work as it changes in response to user interactions. If you find yourself in this position, there are some other strategies you can consider to limit rendering work.&lt;/p&gt;
&lt;h3 id=&quot;consider-an-additive-approach&quot;&gt;Consider an additive approach &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#consider-an-additive-approach&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;You might be in a position where large parts of your page aren&#39;t initially visible to the user when it first renders. This could be an opportunity to lazy load HTML by omitting those parts of the DOM on startup, but add them in when the user interacts with the parts of the page that require the initially hidden aspects of the page.&lt;/p&gt;
&lt;p&gt;This approach is useful both during the initial load and perhaps even afterwards. For the initial page load, you&#39;re taking on less rendering work up front, meaning that your initial HTML payload will be lighter, and will render more quickly. This will give interactions during that crucial period more opportunities to run with less competition for the main thread&#39;s attention.&lt;/p&gt;
&lt;p&gt;If you have many parts of the page that are initially hidden on load, it could also speed up other interactions that trigger re-rendering work. However, as other interactions add more to the DOM, rendering work will increase as the DOM grows throughout the page lifecycle.&lt;/p&gt;
&lt;p&gt;Adding to the DOM over time can be tricky, and it has its own tradeoffs. If you&#39;re going this route, you&#39;re likely making network requests to get data to populate the HTML you intend to add to the page in response to a user interaction. While in-flight network requests are not counted towards INP, it can increase perceived latency. If possible, show a loading spinner or other indicator that data is being fetched so that users understand that something is happening.&lt;/p&gt;
&lt;h3 id=&quot;limit-css-selector-complexity&quot;&gt;Limit CSS selector complexity &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#limit-css-selector-complexity&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;When the browser parses selectors in your CSS, it has to traverse the DOM tree to understand how—and if—those selectors apply to the current layout. The more complex these selectors are, the more work the browser has to do in order to perform both the initial rendering of the page, as well as increased style recalculations and layout work if the page changes as the result of an interaction.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; height=&quot;24&quot; width=&quot;24&quot; fill=&quot;currentColor&quot; role=&quot;img&quot; aria-label=&quot;Check&quot;&gt;   &lt;path d=&quot;M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Objective&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; &lt;strong&gt;Read to learn more:&lt;/strong&gt; &lt;a href=&quot;https://web.dev/reduce-the-scope-and-complexity-of-style-calculations/&quot;&gt;Reduce the scope and complexity of style calculations&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;use-the-content-visibility-property&quot;&gt;Use the &lt;code&gt;content-visibility&lt;/code&gt; property &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#use-the-content-visibility-property&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;CSS offers the &lt;code&gt;content-visibility&lt;/code&gt; property, which is effectively a way to lazily render off-screen DOM elements. As the elements approach the viewport, they&#39;re rendered on demand. The benefits of &lt;code&gt;content-visibility&lt;/code&gt; don&#39;t just cut out a significant amount of rendering work on the initial page render, but also skip rendering work for offscreen elements when the page DOM is changed as the result of a user interaction.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; height=&quot;24&quot; width=&quot;24&quot; fill=&quot;currentColor&quot; role=&quot;img&quot; aria-label=&quot;Check&quot;&gt;   &lt;path d=&quot;M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Objective&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; &lt;strong&gt;Read to learn more:&lt;/strong&gt; &lt;a href=&quot;https://web.dev/content-visibility/&quot;&gt;&lt;code&gt;content-visibility&lt;/code&gt;: the new CSS property that boosts your rendering performance&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/dom-size-and-interactivity/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Reducing your DOM size to only what is strictly necessary is a good way to optimize your website&#39;s INP. By doing so, you can reduce the amount of time it takes for the browser to perform layout and rendering work when the DOM is updated. Even if you can&#39;t meaningfully reduce DOM size, there are some techniques you can use to isolate rendering work to a DOM subtree, such as CSS containment and the &lt;code&gt;content-visibility&lt;/code&gt; CSS property.&lt;/p&gt;
&lt;p&gt;However you go about it, creating an environment where rendering work is minimized—as well as reducing the amount of rendering work your page does in response to interactions—the result will be that your website will feel more responsive to users when they interact with them. That means you&#39;ll have a lower INP for your website, and that translates to a better user experience.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@_louisreed&quot; rel=&quot;noopener&quot;&gt;Louis Reed&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Diagnose slow interactions in the lab
        </title>
        <link href="https://web.dev/diagnose-slow-interactions-in-the-lab/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/diagnose-slow-interactions-in-the-lab/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;One challenging aspect of optimizing &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; is figuring out what&#39;s causing poor INP. There&#39;s a large variety of potential causes: third-party scripts that schedule many tasks on the main thread, large &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Document_Object_Model&quot; rel=&quot;noopener&quot;&gt;DOM&lt;/a&gt; sizes, expensive event callbacks, and so on.&lt;/p&gt;
&lt;p&gt;Finding ways to fix poor INP can be difficult. To start, you have to know which interactions tend to be responsible for a page&#39;s INP. If you don&#39;t know this already, start by reading &lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/&quot;&gt;Find slow interactions in the field&lt;/a&gt;. Once you have that field data and know what interactions to test, you can do so in lab tools to work out why those interactions are slow.&lt;/p&gt;
&lt;h2 id=&quot;what-if-you-dont-have-field-data&quot;&gt;What if you don&#39;t have field data? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#what-if-you-dont-have-field-data&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ideally, you&#39;ll want field data, as it saves you a lot of time trying to figure out which interactions need to be optimized. You might be in a position where you don&#39;t have field data, though. If that&#39;s your situation, you can still find interactions to improve: you&#39;ll just have to take a different approach.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt; is a metric that assesses page responsiveness during load. &lt;a href=&quot;https://almanac.httparchive.org/en/2022/performance#inp-and-tbt&quot; rel=&quot;noopener&quot;&gt;It correlates very well with INP&lt;/a&gt;, and can give you an idea if there might be interactions you can profile while the page is loading.&lt;/p&gt;
&lt;p&gt;You can use either &lt;a href=&quot;https://developer.chrome.com/docs/lighthouse/overview/&quot; rel=&quot;noopener&quot;&gt;Lighthouse&lt;/a&gt; or &lt;a href=&quot;https://pagespeed.web.dev/&quot; rel=&quot;noopener&quot;&gt;PageSpeed Insights&lt;/a&gt; to measure your page&#39;s TBT. If your TBT is either poor or needs improvement, there&#39;s a good chance there are interactions that might be slow during page load.&lt;/p&gt;
&lt;p&gt;To find slow interactions after the page has loaded, you might need to rely on other types of data, such as common user flows that you may already have in your website&#39;s analytics. If you work on an ecommerce website, for example, a common user flow would be the actions users take when they&#39;re adding items to an online shopping cart or going through an online checkout.&lt;/p&gt;
&lt;p&gt;Whether or not you have field data, the next step involves reproducing that interaction—because it&#39;s only when you&#39;re able to conclusively identify a slow interaction that you&#39;ll be able to fix it.&lt;/p&gt;
&lt;h2 id=&quot;reproducing-slow-interactions-in-the-lab&quot;&gt;Reproducing slow interactions in the lab &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#reproducing-slow-interactions-in-the-lab&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Once you&#39;ve identified a slow interaction, the next step is to test it in the lab to see if it&#39;s reliably slow.&lt;/p&gt;
&lt;h3 id=&quot;dont-reach-for-the-performance-profiler-right-away&quot;&gt;Don&#39;t reach for the performance profiler right away &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#dont-reach-for-the-performance-profiler-right-away&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome performance profiler—while invaluable—doesn&#39;t provide a live view while interacting with the page. It&#39;s more efficient to test interaction latency in a much faster way first, so you can quickly assess whether a given interaction is reliably slow, and then reach for the performance profiler when you need more information.&lt;/p&gt;
&lt;h4 id=&quot;use-the-web-vitals-chrome-extension&quot;&gt;Use the Web Vitals Chrome Extension &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#use-the-web-vitals-chrome-extension&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;The &lt;a href=&quot;https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en&quot; rel=&quot;noopener&quot;&gt;Web Vitals Chrome Extension&lt;/a&gt; involves the lowest amount of effort in testing interaction latency. Once installed, the extension will display interaction data in the console if you do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;In Chrome, click the extensions icon to the right of the address bar.&lt;/li&gt;
&lt;li&gt;Locate the Web Vitals extension in the drop-down menu.&lt;/li&gt;
&lt;li&gt;Click the icon at the right to open the extension&#39;s settings.&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;Options&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Enable the &lt;strong&gt;Console logging&lt;/strong&gt; checkbox in the resulting screen, and then click &lt;strong&gt;Save&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Once this has been done, open the console in Chrome DevTools, and begin testing the desired interactions on your website. As you interact with the page, you&#39;ll receive useful console logs giving you detailed diagnostic information for the interaction.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the console logging that the Web Vitals extension provides for interactions. The logging contains details such timings and other contextual information.&quot; decoding=&quot;async&quot; height=&quot;264&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/aVIMXrpfirRew3rTM2PM.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    A console entry from the Web Vitals extension when console logging is turned on. Each qualifying interaction will log interaction data to the console.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h4 id=&quot;use-a-javascript-snippet&quot;&gt;Use a JavaScript snippet &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#use-a-javascript-snippet&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;Using the Web Vitals extension may not be a viable option for a number of reasons. Extensions can be blocked in some cases, and they also can&#39;t be installed on mobile devices. The latter is problematic if you want to test on a physical Android device with &lt;a href=&quot;https://developer.chrome.com/docs/devtools/remote-debugging/&quot; rel=&quot;noopener&quot;&gt;remote debugging&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;An alternate method involves copying and pasting some JavaScript into the console of Chrome DevTools. The following code yields the same console output as the Web Vitals extension for every interaction:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; worstInp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; observer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;PerformanceObserver&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;list&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; obs&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token keyword&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; entry &lt;span class=&quot;token keyword&quot;&gt;of&lt;/span&gt; list&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getEntries&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;interactionId&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;continue&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;renderTime &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;startTime &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;duration&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    worstInp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;duration&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; worstInp&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;      &lt;br /&gt;    console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;[Interaction]&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;duration&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;type: &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;entry&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt; interactionCount: &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;performance&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;interactionCount&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;, worstInp: &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;worstInp&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; entry&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; options&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;observer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;observe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token literal-property property&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;event&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token literal-property property&quot;&gt;durationThreshold&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// 16 minimum by spec&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token literal-property property&quot;&gt;buffered&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; A more convenient way of using the preceding code is to use the &lt;a href=&quot;https://developer.chrome.com/docs/devtools/javascript/snippets/&quot;&gt;snippets feature in Chrome DevTools&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;Once you have determined that the interaction is reliably slow, you can then profile the interaction to get more detailed information on &lt;em&gt;why&lt;/em&gt; that interaction is slow.&lt;/p&gt;
&lt;h4 id=&quot;what-if-you-cant-reproduce-a-slow-interaction&quot;&gt;What if you can&#39;t reproduce a slow interaction? &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#what-if-you-cant-reproduce-a-slow-interaction&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;What if you&#39;ve managed to find something in your field data that suggests a particular interaction is slow, but you can&#39;t reproduce it in the lab?&lt;/p&gt;
&lt;p&gt;For one, this is a common challenge in troubleshooting performance issues of any kind. Your point of view when testing is entirely relative and dependent on the hardware you&#39;re using. After all, you may be on a fast device with a fast internet connection—but that doesn&#39;t mean your users are too. For this situation you can do one of three things:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;If you have a physical Android device, use &lt;a href=&quot;https://developer.chrome.com/docs/devtools/remote-debugging/&quot; rel=&quot;noopener&quot;&gt;remote debugging&lt;/a&gt; to open a Chrome DevTools instance on your host machine and try to reproduce slow interactions there.&lt;/li&gt;
&lt;li&gt;If you don&#39;t have a physical device, &lt;a href=&quot;https://umaar.com/dev-tips/88-cpu-throttling/&quot; rel=&quot;noopener&quot;&gt;enable the CPU throttling feature in Chrome DevTools&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Follow both steps 1 and 2, as you can also enable CPU throttling on the DevTools instance for a physical Android device.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Another cause could be that you&#39;re waiting for a page to load before you interact with it, but your users are not. If you&#39;re on a fast network, enable &lt;a href=&quot;https://developer.chrome.com/docs/devtools/settings/throttling/&quot; rel=&quot;noopener&quot;&gt;network throttling&lt;/a&gt; and interact with the page as soon as it paints. You should do this because the main thread is often busiest during startup, and testing at that time might help reveal what your users are actually experiencing.&lt;/p&gt;
&lt;h3 id=&quot;record-a-trace&quot;&gt;Record a trace &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#record-a-trace&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;To get more information on why an interaction is slow, you&#39;ll need to take things to the next level by &lt;a href=&quot;https://developer.chrome.com/docs/devtools/performance/&quot; rel=&quot;noopener&quot;&gt;using the performance profiler in Chrome DevTools&lt;/a&gt;. To profile an interaction in Chrome&#39;s performance profiler, do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;With the page you need to profile loaded and ready for interactions, open Chrome DevTools and go to the &lt;strong&gt;Performance&lt;/strong&gt; panel.&lt;/li&gt;
&lt;li&gt;Click the &lt;strong&gt;Record&lt;/strong&gt; button at the upper left of the panel to start tracing.&lt;/li&gt;
&lt;li&gt;Perform the desired interaction.&lt;/li&gt;
&lt;li&gt;Click the &lt;strong&gt;Record&lt;/strong&gt; button again to stop tracing.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;When the profile populates, the first place to look should be the activity summary at the top of the profiler. The activity summary will show red bars at the top where long tasks occurred in the recording. This allows you to quickly zoom in on problem areas.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of the activity summary in the performance panel of Chrome DevTools. The activity displayed is mostly from JavaScript that causes a long task, which is highlighted in red above the flame chart.&quot; decoding=&quot;async&quot; height=&quot;126&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 674px) 674px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UcSCVSfw65rg6u1YkqmY.png?auto=format&amp;w=1348 1348w&quot; width=&quot;674&quot; /&gt;
  &lt;figcaption&gt;
    The activity summary at the top of Chrome&#39;s performance profiler. Long tasks are highlighted in red above the activity flame chart. In this case, significant scripting work was responsible for most of the work in the long task.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;You can quickly focus on the problem area by dragging and selecting a region in the activity summary. Once you&#39;ve focused to where the interaction occurred, the &lt;strong&gt;Interactions&lt;/strong&gt; track will help you line up the interaction and the activity that occurred in the main thread track below it:&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of an interaction as visualized in the performance panel of Chrome DevTools. An interactions track above the main thread track shows the duration of an interaction, which can be lined up with main thread activity.&quot; decoding=&quot;async&quot; height=&quot;325&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/YKYLTuog3110ynQyXDdM.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    An interaction profiled in the performance profiler in Chrome&#39;s DevTools. The &lt;strong&gt;Interactions&lt;/strong&gt; track shows a series of events that amount to a click interaction. The Interactions track entries span across the tasks responsible for driving the interaction.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;From here, it&#39;s a matter of observing what the problem with the interaction might be. There are many things that can contribute to high interaction latency, so let&#39;s go through what some of the culprits could be.&lt;/p&gt;
&lt;h3 id=&quot;use-lighthouse-timespans-as-an-alternative-to-tracing&quot;&gt;Use Lighthouse timespans as an alternative to tracing &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#use-lighthouse-timespans-as-an-alternative-to-tracing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome&#39;s performance profiler—while rich with diagnostic information—can be a bit intimidating to the uninitiated. One alternative to the performance profiler is Lighthouse&#39;s timespan mode. To use this mode, do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;With DevTools open, go to the &lt;strong&gt;Lighthouse&lt;/strong&gt; tab in DevTools.&lt;/li&gt;
&lt;li&gt;Under the section labeled &lt;strong&gt;Mode&lt;/strong&gt;, select the &lt;strong&gt;Timespan&lt;/strong&gt; option.&lt;/li&gt;
&lt;li&gt;Select the desired device type under the section labeled &lt;strong&gt;Device&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Ensure at least the checkbox labeled &lt;strong&gt;Performance&lt;/strong&gt; is selected under the &lt;strong&gt;Categories&lt;/strong&gt; label.&lt;/li&gt;
&lt;li&gt;Click the &lt;strong&gt;Start timespan&lt;/strong&gt; button.&lt;/li&gt;
&lt;li&gt;Test the desired interaction(s) on the page.&lt;/li&gt;
&lt;li&gt;Click the &lt;strong&gt;End timespan&lt;/strong&gt; button and wait for the audit to appear&lt;/li&gt;
&lt;li&gt;Once the audit populates in the Lighthouse tab, you can filter the audits by INP by clicking the &lt;strong&gt;INP&lt;/strong&gt; link next to the label which reads &lt;strong&gt;Show audits relevant to&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;At this point, you&#39;ll see a drop-down list for audits that have failed or passed. When you expand that drop-down, you&#39;ll probably see a breakdown of time spent during the interaction.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of a Lighthouse audit provided by its timespan mode. The audit is specific to INP, and shows details for an interaction, including a screenshot of the element that triggered it, and a table beneath detailing where time was spent processing the interaction.&quot; decoding=&quot;async&quot; height=&quot;662&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/F3fWEdo61KDoAE1OQx9X.jpg?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    An interaction profiled in Lighthouse&#39;s timespan mode. When interactions are made with the page, Lighthouse provides an audit detailing where the time during an interaction was spent, and breaks it down by input delay, processing delay, and presentation delay.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;aside class=&quot;aside flow bg-state-info-bg color-state-info-text&quot;&gt;&lt;div class=&quot; flow&quot;&gt; If you want to further investigate the cause behind a slow interaction, you can do so by clicking the &lt;strong&gt;View Trace&lt;/strong&gt; button just above the filmstrip. This will take you to the performance profiler that shows interactions details for the interactions that you tested in the timespan mode. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;how-to-identify-long-input-delays&quot;&gt;How to identify long input delays &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#how-to-identify-long-input-delays&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;One thing that could be contributing to high interaction latency is input delay. The &lt;em&gt;input delay&lt;/em&gt; is the first phase of an interaction. This is the period of time from when the user action is first received by the operating system until the browser is able to start processing the first event triggered by that input. The input delay ends right as the event callbacks for the interaction begin to run.&lt;/p&gt;
&lt;p&gt;Identifying input delay in Chrome&#39;s performance profiler can be done by finding the start of an interaction in the interactions panel, and then finding the beginning of when the event callbacks for that interaction start to run.&lt;/p&gt;
&lt;p&gt;You&#39;ll always incur at least some input delay, as it takes some time for the operating system to pass the input event to the browser—but you do have some control over how long the input delay is. &lt;strong&gt;The key is to figure out if there is work running on the main thread that&#39;s preventing your callbacks from running.&lt;/strong&gt;&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A depiction of input delay in Chrome&amp;#x27;s performance panel. The start of the interaction comes significantly before the event callbacks because of increased input delay due to a timer firing from a third-party script.&quot; decoding=&quot;async&quot; height=&quot;291&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/UrkbAOpDSW2ABcG5ZHE3.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Input delay caused by a task fired by a timer from a third-party script.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;In the previous figure, a task from a third-party script is running as the user attempts to interact with the page, and therefore extends the input delay. The extended input delay affects the interaction&#39;s latency, and could therefore affect the page&#39;s INP.&lt;/p&gt;
&lt;p&gt;For more information on how you can resolve long input delays, read about how you can &lt;a href=&quot;https://web.dev/optimize-input-delay/&quot;&gt;identify and reduce input delay&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;how-to-identify-expensive-event-callbacks&quot;&gt;How to identify expensive event callbacks &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#how-to-identify-expensive-event-callbacks&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Event callbacks occur immediately after the input delay. If an event callback runs too long, it delays the browser from presenting the next frame, and can add significantly to an interaction&#39;s total latency. Event callbacks can often run for too long, whether they run as the result of first-party or third-party JavaScript—and in some cases, both.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A depiction of event callback tasks in Chrome&amp;#x27;s performance panel. The event callbacks occur for the pointerdown and click events, which occur in a long task.&quot; decoding=&quot;async&quot; height=&quot;291&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/h0UKtDuUBvWxd10vjrsn.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    The event callbacks that run in response to a click interaction, as shown in the performance profiler in Chrome DevTools. Note the red triangle in the upper right corner of both the &lt;strong&gt;Event: pointerdown&lt;/strong&gt; and &lt;strong&gt;Event: click&lt;/strong&gt; entries, which identifies expensive event callbacks.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Finding expensive event callbacks can be done by observing the following in a trace for a specific interaction:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Determine whether the task associated with the event callbacks is a &lt;a href=&quot;https://web.dev/long-tasks-devtools/#what-are-long-tasks&quot;&gt;long task&lt;/a&gt;. To reveal long tasks in a lab setting more reliably, you may need to &lt;a href=&quot;https://developer.chrome.com/blog/new-in-devtools-61/#throttling&quot; rel=&quot;noopener&quot;&gt;enable CPU throttling&lt;/a&gt; in the performance panel, or connect a low to mid-tier Android device and use &lt;a href=&quot;https://developer.chrome.com/docs/devtools/remote-debugging/&quot; rel=&quot;noopener&quot;&gt;remote debugging&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;If the task that runs the event callbacks is a long task, look for event handler entries (entries with names such as &lt;strong&gt;Event: click&lt;/strong&gt;, for example) in the call stack that have a red triangle at the upper right corner of the entry. These are expensive event callbacks.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;To address expensive event callbacks, try one of the following strategies:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Do as little work as possible.&lt;/strong&gt; Is everything that happens in an expensive event callback strictly necessary? If not, consider removing that code altogether if you can, or deferring its execution to a later point in time if you can&#39;t. You can also take advantage of framework features to help. For example, React&#39;s &lt;a href=&quot;https://beta.reactjs.org/reference/react/PureComponent&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;PureComponent&lt;/code&gt; class&lt;/a&gt; and &lt;a href=&quot;https://react.dev/reference/react/memo&quot; rel=&quot;noopener&quot;&gt;memoization feature&lt;/a&gt; can skip unnecessary rendering work when props and state haven&#39;t changed for a component.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Defer non-rendering work in the event callback to a later point in time.&lt;/strong&gt; Long tasks can be broken up by &lt;a href=&quot;https://web.dev/optimize-long-tasks/#use-asyncawait-to-create-yield-points&quot;&gt;yielding to the main thread&lt;/a&gt;. Whenever you yield to the main thread, you&#39;re ending execution of the current task and breaking up the remainder of the work into a separate task. This gives the renderer a chance to process updates to the user interface that were processed earlier in the event callback. If you happen to be developing in React, its &lt;a href=&quot;https://react.dev/reference/react/useTransition&quot; rel=&quot;noopener&quot;&gt;transitions feature&lt;/a&gt; will do this for you.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;By employing these strategies, you should be able to get your event callbacks in a place where they&#39;re responding more quickly to user input.&lt;/p&gt;
&lt;h2 id=&quot;how-to-identify-presentation-delays&quot;&gt;How to identify presentation delays &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#how-to-identify-presentation-delays&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Long input delays and expensive event callbacks aren&#39;t the only possible culprits of poor INP. Sometimes the rendering updates that occur in response to even small amounts of event callback code can be expensive. The time it takes for the browser to render visual updates to the user interface to reflect the result of an interaction is known as &lt;em&gt;presentation delay&lt;/em&gt;.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; The &lt;a href=&quot;https://web.dev/rendering-performance/&quot;&gt;rendering performance guide&lt;/a&gt; is a good primer on understanding how the browser renders a page. &lt;a href=&quot;https://www.youtube.com/watch?v=K2QHdgAKP-s&quot;&gt;Life of a pixel&lt;/a&gt; goes further in depth on how rendering works in Chromium-based browsers. &lt;/div&gt;&lt;/aside&gt;
&lt;figure&gt;
  &lt;img alt=&quot;Rendering work as visualized in the performance panel of Chrome DevTools. The rendering work occurs after the event callback in order to paint the next frame.&quot; decoding=&quot;async&quot; height=&quot;229&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/pFmaZMXrlbugrC9WPoHM.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Rendering tasks as shown in Chrome&#39;s performance profiler. The rendering work is shown in purple, with paint work in green.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; When profiling slow interactions due to expensive rendering work, you should enable the &lt;strong&gt;Screenshots&lt;/strong&gt; checkbox at the top of the performance profiler. This will help you to line up user interface updates with the corresponding rendering work on the main thread. &lt;/div&gt;&lt;/aside&gt;
&lt;p&gt;Of all the possible causes of high interaction latency, rendering work can be the most difficult to troubleshoot and fix, but the result is worth the effort. Excessive rendering work could be caused by any of the following:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Large DOM sizes.&lt;/strong&gt; Rendering work often increases along with the size of the page&#39;s DOM. For more information, read &lt;a href=&quot;https://web.dev/dom-size-and-interactivity/&quot;&gt;How large DOM sizes affect interactivity—and what you can do about it&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Forced reflows.&lt;/strong&gt; This happens when you apply style changes to elements in JavaScript, and &lt;em&gt;then&lt;/em&gt; query the results of that work. The result is that the browser has to perform the layout work before doing anything else, so that the browser can return the updated styles. For more information and tips on avoiding forced reflows, read &lt;a href=&quot;https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/&quot;&gt;Avoid large, complex layouts and layout thrashing&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Excessive or unnecessary work in &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;requestAnimationFrame&lt;/code&gt;&lt;/a&gt; callbacks.&lt;/strong&gt; &lt;code&gt;requestAnimationFrame()&lt;/code&gt; callbacks are run during the rendering phase of the event loop, and must complete before the next frame can be presented. If you&#39;re using &lt;code&gt;requestAnimationFrame()&lt;/code&gt; to do work that doesn&#39;t involve changes to the user interface, understand that you could be delaying the next frame.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/ResizeObserver&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;ResizeObserver&lt;/code&gt;&lt;/a&gt; callbacks.&lt;/strong&gt; Such callbacks run prior to rendering, and may delay presentation of the next frame if the work in them is expensive. As with event callbacks, defer any logic not needed for the next frame.&lt;/li&gt;
&lt;/ul&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; Troubleshooting might be made easier by enabling the &lt;strong&gt;Timeline: event initiators&lt;/strong&gt; experiment in Chrome DevTools. Enabling this experiment will draw an arrow from any style recalculation task to the JavaScript task that kicked it off. To enable this experiment, go into the Chrome DevTools settings, click on &lt;strong&gt;Experiments&lt;/strong&gt; in the left hand menu, the click the checkbox labeled &lt;strong&gt;Timeline: event initiators&lt;/strong&gt;, and restart DevTools. &lt;/div&gt;&lt;/aside&gt;
&lt;h2 id=&quot;troubleshooting-inp-is-an-iterative-process&quot;&gt;Troubleshooting INP is an iterative process &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/diagnose-slow-interactions-in-the-lab/#troubleshooting-inp-is-an-iterative-process&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Finding out what&#39;s causing high interaction latency that contributes to poor INP takes a lot of work—but if you can pin down the causes, you&#39;re halfway there. By following a methodical approach to troubleshooting poor INP, you can reliably pin down what&#39;s causing a problem, and arrive more quickly to the right fix. To review:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/&quot;&gt;Rely on field data to find slow interactions&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Test problematic field interactions in the lab to see if they&#39;re reproducible.&lt;/li&gt;
&lt;li&gt;Identify whether the cause is due to long input delay, expensive event callbacks, or expensive rendering work.&lt;/li&gt;
&lt;li&gt;Repeat.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The last of these is the most important. Like most other work you must do to improve page performance, troubleshooting and improving INP is a cyclical process. When you fix one slow interaction, you&#39;ll need to move onto the next, and continue to do so until you start to see results. Stay vigilant!&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/@_louisreed&quot; rel=&quot;noopener&quot;&gt;Louis Reed&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Client-side rendering of HTML and interactivity
        </title>
        <link href="https://web.dev/client-side-rendering-of-html-and-interactivity/"/>
        <updated>
            2023-05-09T00:00:00Z
        </updated>
        <id>
            https://web.dev/client-side-rendering-of-html-and-interactivity/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;Parsing and rendering of HTML is something that browsers do very well by default for websites that use the browser&#39;s built-in navigation logic—sometimes called &amp;quot;traditional page loads&amp;quot; or &amp;quot;hard navigations&amp;quot;. Such websites are sometimes called multi-page applications (MPAs).&lt;/p&gt;
&lt;p&gt;However, developers may work around browser defaults to suit their application needs. This is certainly the case for websites using the &lt;a href=&quot;https://en.wikipedia.org/wiki/Single-page_application&quot; rel=&quot;noopener&quot;&gt;single page application (SPA) pattern&lt;/a&gt;, which dynamically creates large parts of the HTML/DOM on the client with JavaScript. Client-side rendering is the name for this design pattern, and it can have effects on your website&#39;s &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; if the work involved is excessive.&lt;/p&gt;
&lt;p&gt;This guide will help you weigh the difference between using HTML sent by the server to the browser versus creating it on the client with JavaScript, and how the latter can result in high interaction latency at crucial moments.&lt;/p&gt;
&lt;h2 id=&quot;how-the-browser-renders-html-provided-by-the-server&quot;&gt;How the browser renders HTML provided by the server &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#how-the-browser-renders-html-provided-by-the-server&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The navigation pattern used in traditional page loads involves receiving HTML from the server on every navigation. If you enter a URL in the address bar of your browser or click on a link in an MPA, the following series of events occurs:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The browser sends a navigation request for the URL provided.&lt;/li&gt;
&lt;li&gt;The server responds with HTML in chunks.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The last step of these is key. It&#39;s also one of the most fundamental performance optimizations in the server/browser exchange, and is known as &lt;em&gt;streaming&lt;/em&gt;. If the server can begin sending HTML as soon as possible, and the browser doesn&#39;t wait for the entire response to arrive, the browser can process HTML in chunks as it arrives.&lt;/p&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of parsing of HTML sent by the server visualized in the performance panel of Chrome DevTools. As the HTML streams in, chunks of it are processed across multiple shorter tasks, and rendering is incremental.&quot; decoding=&quot;async&quot; height=&quot;379&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/8ZgdJRdWzvk5L72XKv2Z.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Parsing and rendering of HTML provided by the server as visualized in the performance panel of Chrome DevTools. The tasks involved in parsing HTML and rendering it are split into chunks.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Like most things that happen in the browser, parsing HTML occurs within tasks. When HTML is streamed from the server to the browser, the browser optimizes parsing of that HTML by doing so a bit at a time as bits of that stream arrive in chunks. The consequence is that the browser yields to the main thread periodically after processing each chunk, which avoids &lt;a href=&quot;https://web.dev/long-tasks-devtools/#what-are-long-tasks&quot;&gt;long tasks&lt;/a&gt;. This means that other work can occur while HTML is being parsed, including the incremental rendering work necessary to present a page to the user, as well as processing user interactions that may occur during the page&#39;s crucial startup period. This approach translates to a better &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt; score for the page.&lt;/p&gt;
&lt;p&gt;The takeaway? When you stream HTML from the server, &lt;strong&gt;you get incremental parsing and rendering of HTML and automatic yielding to the main thread for free.&lt;/strong&gt; You don&#39;t get that with client-side rendering.&lt;/p&gt;
&lt;h2 id=&quot;how-the-browser-renders-html-provided-by-javascript&quot;&gt;How the browser renders HTML provided by JavaScript &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#how-the-browser-renders-html-provided-by-javascript&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While every navigation request to a page requires some amount of HTML to be provided by the server, some websites will use the SPA pattern. This approach often involves a minimal initial payload of HTML is provided by the server, but then the client will populate the main content area of a page with HTML assembled from data fetched from the server. Subsequent navigations—sometimes referred to as &amp;quot;soft navigations&amp;quot; in this case—are handled entirely by JavaScript to populate the page with new HTML.&lt;/p&gt;
&lt;p&gt;Client-side rendering may also occur in non-SPAs in more limited cases where HTML is dynamically added to the DOM through JavaScript.&lt;/p&gt;
&lt;p&gt;There are a few common ways of creating HTML or adding to the DOM through JavaScript:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Element/innerHTML&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;innerHTML&lt;/code&gt; property&lt;/a&gt; allows you to set the content on an existing element via a string, which the browser parses into DOM.&lt;/li&gt;
&lt;li&gt;The &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Document/createElement&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;document.createElement&lt;/code&gt; method&lt;/a&gt; allows you to create new elements to be added to the DOM without using any browser HTML parsing.&lt;/li&gt;
&lt;li&gt;The &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/Document/write&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;document.write&lt;/code&gt; method&lt;/a&gt; allows you to write HTML to the document (and the browser parses it, just like in approach #1). Due to &lt;a href=&quot;https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()&quot; rel=&quot;noopener&quot;&gt;a number of reasons&lt;/a&gt;, however, &lt;strong&gt;usage of &lt;code&gt;document.write&lt;/code&gt; is strongly discouraged.&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;figure&gt;
  &lt;img alt=&quot;A screenshot of parsing of HTML rendered via JavaScript visualized in the performance panel of Chrome DevTools. The work occurs in a single, long task that blocks the main thread.&quot; decoding=&quot;async&quot; height=&quot;141&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/Xam8fQoVZBmDPET1dVQ1.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
  &lt;figcaption&gt;
    Parsing and rendering of HTML through JavaScript on the client as visualized in the performance panel of Chrome DevTools. The tasks involved in parsing and rendering it are not chunked up, resulting in a long task that blocks the main thread.
  &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The consequences of creating HTML/DOM through client-side JavaScript can be significant:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Unlike HTML streamed by the server in response to a navigation request, JavaScript tasks on the client are not automatically chunked up, which may result in long tasks that block the main thread. This means that your page&#39;s INP can be negatively affected if you&#39;re creating too much HTML/DOM at a time on the client.&lt;/li&gt;
&lt;li&gt;If HTML is created on the client during startup, resources referenced within it &lt;a href=&quot;https://web.dev/preload-scanner/#rendering-markup-with-client-side-javascript&quot;&gt;will &lt;em&gt;not&lt;/em&gt; be discovered by the browser preload scanner&lt;/a&gt;. This will certainly have a negative effect on a page&#39;s &lt;a href=&quot;https://web.dev/lcp/&quot;&gt;Largest Contentful Paint (LCP)&lt;/a&gt;. While this is not a runtime performance issue (instead it&#39;s an issue of network delay in fetching important resources), you don&#39;t want your website&#39;s LCP to be affected by sidestepping this fundamental browser performance optimization.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;what-you-can-do-about-the-performance-impact-of-client-side-rendering&quot;&gt;What you can do about the performance impact of client-side rendering &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#what-you-can-do-about-the-performance-impact-of-client-side-rendering&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If your website depends heavily on client-side rendering and you&#39;ve observed &lt;a href=&quot;https://web.dev/find-slow-interactions-in-the-field/&quot;&gt;poor INP values in your field data&lt;/a&gt;, you might be wondering if client-side rendering has anything to do with the problem. For example, if your website is an SPA, your field data may reveal interactions responsible for considerable rendering work.&lt;/p&gt;
&lt;p&gt;Whatever the cause, here are some potential causes you can explore to help get things back on track.&lt;/p&gt;
&lt;h3 id=&quot;provide-as-much-html-from-the-server-as-possible&quot;&gt;Provide as much HTML from the server as possible &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#provide-as-much-html-from-the-server-as-possible&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;As mentioned earlier, the browser handles HTML from the server in a very performant way by default. It will break up parsing and rendering of HTML in a way that avoids long tasks, and optimizes the amount of total main thread time. This leads to a lower &lt;a href=&quot;https://web.dev/tbt/&quot;&gt;Total Blocking Time (TBT)&lt;/a&gt;, and TBT is &lt;a href=&quot;https://almanac.httparchive.org/en/2022/performance#inp-and-tbt&quot; rel=&quot;noopener&quot;&gt;strongly correlated with INP&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;You may be relying on a frontend framework to build your website. If so, you&#39;ll want to make sure you&#39;re rendering component HTML on the server. This will limit the amount of initial client-side rendering your website will require, and should result in a better experience.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;For React, you&#39;ll want to make use of the &lt;a href=&quot;https://react.dev/reference/react-dom/server&quot; rel=&quot;noopener&quot;&gt;Server DOM API&lt;/a&gt; to render HTML on the server. But be aware: the traditional method of server-side rendering uses &lt;a href=&quot;https://react.dev/reference/react-dom/server#server-apis-for-non-streaming-environments&quot; rel=&quot;noopener&quot;&gt;a synchronous approach&lt;/a&gt;, which can lead to a longer &lt;a href=&quot;https://web.dev/ttfb/&quot;&gt;Time to First Byte (TTFB)&lt;/a&gt;, as well as subsequent metrics such as &lt;a href=&quot;https://web.dev/fcp/&quot;&gt;First Contentful Paint (FCP)&lt;/a&gt; and LCP. Where possible, make sure you&#39;re using the streaming APIs for &lt;a href=&quot;https://react.dev/reference/react-dom/server#server-apis-for-nodejs-streams&quot; rel=&quot;noopener&quot;&gt;Node.js&lt;/a&gt; or &lt;a href=&quot;https://react.dev/reference/react-dom/server#server-apis-for-web-streams&quot; rel=&quot;noopener&quot;&gt;other JavaScript runtimes&lt;/a&gt; so that the server can begin streaming HTML to the browser as soon as possible. Next.js—a React-based framework—provides many best practices by default. In addition to automatically rendering HTML on the server, it can also statically generate HTML for pages that don&#39;t change based on user context (such as authentication).&lt;/li&gt;
&lt;li&gt;Vue also performs client-side rendering by default. However, like React, Vue can also &lt;a href=&quot;https://vuejs.org/guide/scaling-up/ssr.html&quot; rel=&quot;noopener&quot;&gt;render your component HTML on the server&lt;/a&gt;. Either take advantage of these server-side APIs where possible, or consider a &lt;a href=&quot;https://vuejs.org/guide/scaling-up/ssr.html#higher-level-solutions&quot; rel=&quot;noopener&quot;&gt;higher-level abstraction&lt;/a&gt; for your Vue project to make the best practices easier to implement.&lt;/li&gt;
&lt;li&gt;Svelte &lt;a href=&quot;https://learn.svelte.dev/tutorial/ssr&quot; rel=&quot;noopener&quot;&gt;renders HTML on the server&lt;/a&gt; by default—although if your component code needs access to browser-exclusive namespaces (&lt;code&gt;window&lt;/code&gt;, for example), you may not be able to render that component&#39;s HTML on the server. Explore alternative approaches wherever possible so that you&#39;re not causing unnecessary client-side rendering. &lt;a href=&quot;https://kit.svelte.dev/&quot; rel=&quot;noopener&quot;&gt;SvelteKit&lt;/a&gt;—which is to Svelte as Next.js is to React—embeds many best practices into your Svelte projects as possible, so you can avoid potential pitfalls in projects that use Svelte alone.&lt;/li&gt;
&lt;/ul&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; If your application uses either of these frameworks and requires interactivity on the client, you&#39;ll still need to &lt;a href=&quot;https://web.dev/rendering-on-the-web/#combining-server-rendering-and-csr-via-rehydration&quot;&gt;hydrate your components on the client&lt;/a&gt; so that they&#39;ll be interactive. For a comprehensive evaluation of the different approaches to rendering HTML, and for some advice on how to handle component hydration on the client with performance in mind, read &lt;a href=&quot;https://web.dev/rendering-on-the-web/&quot;&gt;Rendering on the web&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;limit-the-amount-of-dom-nodes-created-on-the-client&quot;&gt;Limit the amount of DOM nodes created on the client &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#limit-the-amount-of-dom-nodes-created-on-the-client&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;When DOMs are large, the amount of processing time required to render them tends to increase. Whether your website is a full-fledged SPA, or is injecting new nodes into an existing DOM as the result of an interaction for an MPA, consider keeping those DOMs as small as possible. This will help reduce the work required during client-side rendering to display that HTML, hopefully helping to keep your website&#39;s INP lower.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-good-bg color-state-good-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; height=&quot;24&quot; width=&quot;24&quot; fill=&quot;currentColor&quot; role=&quot;img&quot; aria-label=&quot;Check&quot;&gt;   &lt;path d=&quot;M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Objective&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; &lt;strong&gt;Read to learn more:&lt;/strong&gt; &lt;a href=&quot;https://web.dev/dom-size-and-interactivity/&quot;&gt;DOM size and interactivity&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;consider-a-streaming-service-worker-architecture&quot;&gt;Consider a streaming service worker architecture &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#consider-a-streaming-service-worker-architecture&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;This is an advanced technique—one that may not work easily with every use case—but it&#39;s one that can turn your MPA into a website that feels like it&#39;s loading instantly when users navigate from one page to the next. You can use a service worker to precache the static parts of your website in &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/CacheStorage&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;CacheStorage&lt;/code&gt;&lt;/a&gt; while using the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/API/ReadableStream&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;ReadableStream&lt;/code&gt; API&lt;/a&gt; to fetch the rest of a page&#39;s HTML from the server.&lt;/p&gt;
&lt;p&gt;When you use this technique successfully, you aren&#39;t creating HTML on the client, but the instant loading of content partials from the cache will give the impression that your site is loading quickly. Websites using this approach can feel almost like an SPA, but without the downfalls of client-side rendering. It also &lt;a href=&quot;https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/&quot; rel=&quot;noopener&quot;&gt;reduces the amount of HTML you&#39;re requesting from the server&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In short, a streaming service worker architecture doesn&#39;t &lt;em&gt;replace&lt;/em&gt; the browser&#39;s built-in navigation logic—it &lt;em&gt;adds&lt;/em&gt; to it. For more information on how to achieve this with &lt;a href=&quot;https://developer.chrome.com/docs/workbox/&quot; rel=&quot;noopener&quot;&gt;Workbox&lt;/a&gt;, read &lt;a href=&quot;https://developer.chrome.com/docs/workbox/faster-multipage-applications-with-streams/&quot; rel=&quot;noopener&quot;&gt;Faster multipage applications with streams&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/client-side-rendering-of-html-and-interactivity/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;How your website receives and renders HTML has an impact on performance. When you rely on the server to send all (or the bulk of) the HTML required for your website to function, you&#39;re getting a lot for free: incremental parsing and rendering, and automatic yielding to the main thread to avoid long tasks.&lt;/p&gt;
&lt;p&gt;Client-side HTML rendering introduces a number of potential performance issues that can be avoidable in many cases. Due to each individual website&#39;s requirements, however, it&#39;s not entirely avoidable 100% of the time. To mitigate the potential long tasks that can result from excessive client-site rendering, make sure you&#39;re sending as much of your website&#39;s HTML from the server whenever possible, keep your DOM sizes as small as possible for HTML that must be rendered on the client, and consider alternative architectures to speed the delivery of HTML to the client while also taking advantage of the incremental parsing and rendering the browser provides for HTML loaded from the server.&lt;/p&gt;
&lt;p&gt;If you can get your website&#39;s client-side rendering to be as minimal as possible, you&#39;ll improve not just your website&#39;s INP, but other metrics such as LCP, TBT, and possibly even your TTFB in some cases.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hero image from &lt;a href=&quot;https://unsplash.com/&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;, by &lt;a href=&quot;https://unsplash.com/de/fotos/nZcMWOKAJrY&quot; rel=&quot;noopener&quot;&gt;Maik Jonietz&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Jeremy Wagner
            </name>
        </author>
    </entry>
    <entry>
        <title>
            Using the Web Vitals extension to debug Core Web Vitals issues
        </title>
        <link href="https://web.dev/debug-cwvs-with-web-vitals-extension/"/>
        <updated>
            2023-05-04T00:00:00Z
        </updated>
        <id>
            https://web.dev/debug-cwvs-with-web-vitals-extension/
        </id>
        <content type="text/html" mode="escaped">
            &lt;p&gt;The &lt;a href=&quot;https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma&quot; rel=&quot;noopener&quot;&gt;Web Vitals extension&lt;/a&gt; provides easy access to Core Web Vitals diagnostic information to help developers measure, and address Core Web Vitals issues. It supplements the other tools provided by the Chrome team to aid developers in improving the experiences on their websites.&lt;/p&gt;
&lt;p&gt;We have updated the extension to provide additional debug information to developers to make it easier to understand and address their performance problems.&lt;/p&gt;
&lt;h2 id=&quot;showing-debug-information-in-the-console&quot;&gt;Showing debug information in the console &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#showing-debug-information-in-the-console&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The Web Vitals extension has had a &amp;quot;Console Logging&amp;quot; debug option for some time now. It can be enabled in the Options screen:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension Options screen&quot; decoding=&quot;async&quot; height=&quot;434&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/SjuszdY0PADWgETicJNl.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;Prior to the this last upgrade, this logged the outputs from the &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;web-vitals library&lt;/code&gt;&lt;/a&gt; (that underpins the extension) in a JSON object:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension old console logging&quot; decoding=&quot;async&quot; height=&quot;458&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/iUoyoe41Ik4zNDNRPHKo.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This object could then be expanded to get the full details, and elements such as the LCP image, could be hovered over to highlight them in the main panel:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension old console logging with element highlighting&quot; decoding=&quot;async&quot; height=&quot;514&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/oNVOo321R5U3Lqg1xrH6.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This was helpful, but the output format was not particularly user friendly, and we thought we could provide a better developer experience. So we have improved the extension to make the most important information more visible—while still including the full object for those wanting more details.&lt;/p&gt;
&lt;h2 id=&quot;new-debug-information-for-each-metric&quot;&gt;New debug information for each metric &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#new-debug-information-for-each-metric&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;With the new release, we have added new debug information in a more readable format to help you find and address issues. Different information is provided for each of the metrics, as each one is different.&lt;/p&gt;
&lt;h3 id=&quot;lcp-debug-information&quot;&gt;LCP debug information &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#lcp-debug-information&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For &lt;a href=&quot;https://web.dev/lcp/&quot;&gt;Largest Contentful Paint (LCP)&lt;/a&gt;, we show both the element, and the breakdown of the 4 phases detailed in our &lt;a href=&quot;https://web.dev/optimize-lcp/#lcp-breakdown&quot;&gt;Optimize LCP&lt;/a&gt; guide:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging showing LCP elements and sub-parts&quot; decoding=&quot;async&quot; height=&quot;535&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/HXzKcJORE2nRUI9Pl8Mw.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The LCP time (2,876 milliseconds—or about 2.9 seconds) is highlighted in amber as it is in the &amp;quot;Needs Improvement&amp;quot; category.&lt;/p&gt;
&lt;p&gt;In this example, we see the &lt;code&gt;Resource load time&lt;/code&gt; is the longest time, so to improve your LCP time you would look to optimize that - perhaps by avoiding hosting them on a separate domain, or by using smaller images or more efficient formats. In this case it&#39;s due to being artificially slowed down to demonstrate the output—web.dev is a fast site 😀&lt;/p&gt;
&lt;p&gt;The element can also be hovered over to highlight the image:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging retains element highlighting on hover&quot; decoding=&quot;async&quot; height=&quot;535&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/8H8ZldOw8y953w7vTpuA.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;Right clicking on the element also allows you to reveal it in the elements panel.&lt;/p&gt;
&lt;p&gt;Here the LCP element is an image, and hovering over that in the console on the right, also highlights that element on the site on the left.&lt;/p&gt;
&lt;h3 id=&quot;cls-debug-information&quot;&gt;CLS debug information &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#cls-debug-information&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Shifts contributing to &lt;a href=&quot;https://web.dev/cls/&quot;&gt;Cumulative Layout Shift (CLS)&lt;/a&gt; are now also listed, and can be hovered over to highlight the relevant element:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging showing each CLS element shift&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/v1kaVvcekk5oLWuGHAkd.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;The above screenshot shows 2 shifts, the first made up of two elements (when the banner image is loaded and the content beneath it is shifted downloaded), and the second of 4 elements (when the dynamic ad is loaded and most of the page is shifted downwards).&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;h2&lt;/code&gt; element is being hovered over in this screenshot in the console on the right, and you can see this highlights the element on the site on the left.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-tertiary-box-bg color-tertiary-box-text&quot;&gt;&lt;p class=&quot;cluster &quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; role=&quot;img&quot; aria-label=&quot;Lightbulb&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;   &lt;path d=&quot;M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Important&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; &lt;p&gt; Note that the shifted elements are not the elements &lt;em&gt;causing&lt;/em&gt; the shift, but the ones that were &lt;em&gt;impacted&lt;/em&gt; by any shifts. &lt;/p&gt; &lt;p&gt; However, as per the above example, this should usually be enough to help you identify the cause of the shift by looking at the element which is either above the first shifted element (for inserted elements) or the first element itself (if this is expanded and so shifts itself). &lt;/p&gt; &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;fid-debug-information&quot;&gt;FID debug information &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#fid-debug-information&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For &lt;a href=&quot;https://web.dev/fid/&quot;&gt;First Input Delay (FID)&lt;/a&gt; we show the affected element (which again, can be hovered over to highlight it on the page) and the interaction type, along with the full JSON object as usual:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging showing FID target and type&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/f8JI8akIhiqfA7WHWfRz.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;h3 id=&quot;inp-debug-information&quot;&gt;INP debug information &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#inp-debug-information&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;For &lt;a href=&quot;https://web.dev/inp/&quot;&gt;Interaction to Next Paint (INP)&lt;/a&gt;, we have added two new logs:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;INP - the longest interaction&lt;/li&gt;
&lt;li&gt;Interactions - all interactions&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;inp-metric&quot;&gt;INP metric &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#inp-metric&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;First up, we highlight the INP metric when it changes:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging showing INP target, event type, and breakdown&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/kxh8TRS2585OJTZJmWmt.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;Similar to LCP, the extension breaks down the INP time to show three phases:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Input delay&lt;/li&gt;
&lt;li&gt;Processing time&lt;/li&gt;
&lt;li&gt;Presentation delay&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;This helps you identify if the event was slow due to being held up by other events (&lt;strong&gt;input delay&lt;/strong&gt;), as the event handler itself was slow due to your code (&lt;strong&gt;processing time&lt;/strong&gt;), if the post-processing render delay was the reason (&lt;strong&gt;presentation delay&lt;/strong&gt;), or a combination of two or more of these.&lt;/p&gt;
&lt;h4 id=&quot;interactions&quot;&gt;Interactions &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#interactions&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;p&gt;INP can be slow due to previous interactions blocking the main thread, and thus causing a high input delay. For this reason, we list all interactions in a similar format to the INP logging:&lt;/p&gt;
&lt;img alt=&quot;Web Vitals Extension new console logging showing all interactions&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/k2uHWUQXoq5fWGOQ4yyF.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;p&gt;This allows you to &amp;quot;live trace&amp;quot; a website by interacting with it and seeing in the console which interactions, in which combinations, are likely to cause an INP problem.&lt;/p&gt;
&lt;p&gt;This also allows you to identify multiple slow interactions, rather than just the largest INP interaction to help you avoid the feeling of chasing your tail when improving your responsiveness.&lt;/p&gt;
&lt;h2 id=&quot;filtering-the-console-logs&quot;&gt;Filtering the console logs &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#filtering-the-console-logs&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;All this extra information, while useful, can be distracting if you are doing other development unrelated to Core Web Vitals, or are only interested in one particular Core Web Vital at that time.&lt;/p&gt;
&lt;p&gt;You can use the &lt;a href=&quot;https://developer.chrome.com/docs/devtools/console/reference/#filter&quot; rel=&quot;noopener&quot;&gt;Console filtering options in DevTools&lt;/a&gt; to filter out some or all of the messages:&lt;/p&gt;
&lt;img alt=&quot;Using console filtering options&quot; decoding=&quot;async&quot; height=&quot;448&quot; loading=&quot;lazy&quot; sizes=&quot;(min-width: 800px) 800px, calc(100vw - 48px)&quot; src=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&quot; srcset=&quot;https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=200 200w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=228 228w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=260 260w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=296 296w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=338 338w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=385 385w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=439 439w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=500 500w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=571 571w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=650 650w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=741 741w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=845 845w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=964 964w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=1098 1098w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=1252 1252w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=1428 1428w, https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/NOA3kNu5rKMzkw7iAyW7.png?auto=format&amp;w=1600 1600w&quot; width=&quot;800&quot; /&gt;
&lt;ul&gt;
&lt;li&gt;To remove all the extension messages, you can either turn this off in the options or use the &lt;code&gt;-Extension&lt;/code&gt; filter.&lt;/li&gt;
&lt;li&gt;To look at just LCP you can use the &lt;code&gt;Web Vitals Extension LCP&lt;/code&gt; filter.&lt;/li&gt;
&lt;li&gt;To look at just INP and interactions you can use the &lt;code&gt;Web Vitals Extension -LCP -CLS -FID&lt;/code&gt; filter.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&#39;re trying to keep the number of options for this extension down, but do let us know by raising a &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals-extension/issues&quot; rel=&quot;noopener&quot;&gt;GitHub issue&lt;/a&gt; if DevTools filtering is not sufficient and you would prefer options here.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We hope you find the new debug options in the latest version of the extension useful and that they make it easier to identify and resolve Core Web Vitals issues, improving the  user experiences on your website.&lt;/p&gt;
&lt;p&gt;Do remember that your experiences, on your developer computer, may not be representative of what your real users are experiencing. Check out our &lt;a href=&quot;https://web.dev/field-data-in-the-web-vitals-extension/&quot;&gt;previous blog post on how you can view the CrUX field data for your site in the extension&lt;/a&gt; to get a sense of how aligned your experiences are with your users.&lt;/p&gt;
&lt;p&gt;We would be grateful to hear any feedback on these improvements, or any other suggestions on our &lt;a href=&quot;https://github.com/GoogleChrome/web-vitals-extension/issues&quot; rel=&quot;noopener&quot;&gt;GitHub issues tracker&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;acknowledgements&quot;&gt;Acknowledgements &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/debug-cwvs-with-web-vitals-extension/#acknowledgements&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;Hero image by &lt;a href=&quot;https://unsplash.com/@euwars?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText&quot; rel=&quot;noopener&quot;&gt;Farzad&lt;/a&gt; on &lt;a href=&quot;https://unsplash.com/photos/p-xSl33Wxyc?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText&quot; rel=&quot;noopener&quot;&gt;Unsplash&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Barry Pollard
            </name>
        </author>
        <author>
            <name>
                Michal Mocny
            </name>
        </author>
        <author>
            <name>
                Rick Viscomi
            </name>
        </author>
        <author>
            <name>
                Brendan Kenny
            </name>
        </author>
    </entry>
    <entry>
        <title>
            New to the web platform in April
        </title>
        <link href="https://web.dev/web-platform-04-2023/"/>
        <updated>
            2023-04-28T00:00:00Z
        </updated>
        <id>
            https://web.dev/web-platform-04-2023/
        </id>
        <content type="text/html" mode="escaped">
            &lt;h2 id=&quot;stable-browser-releases&quot;&gt;Stable browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#stable-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In April 2023, &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/112&quot; rel=&quot;noopener&quot;&gt;Firefox 112&lt;/a&gt;, and &lt;a href=&quot;https://developer.chrome.com/blog/new-in-chrome-112/&quot; rel=&quot;noopener&quot;&gt;Chrome 112&lt;/a&gt; became stable. Let&#39;s take a look at what this means for the web platform.&lt;/p&gt;
&lt;aside class=&quot;aside flow bg-state-bad-bg color-state-bad-text&quot;&gt;&lt;p class=&quot;cluster color-state-bad-text&quot;&gt;&lt;span class=&quot;aside__icon box-block &quot;&gt;&lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; role=&quot;img&quot; aria-label=&quot;Error sign&quot;&gt;   &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-2h2v2h-2zm0-10v6h2V7h-2z&quot;&gt;&lt;/path&gt; &lt;/svg&gt;&lt;/span&gt;&lt;strong&gt;Caution&lt;/strong&gt;&lt;/p&gt;&lt;div class=&quot; flow&quot;&gt; We include browser compatibility data pulled from MDN in these posts which may not have updated for very recent browser releases. The post will show the correct information as soon as it appears in the &lt;a href=&quot;https://github.com/mdn/browser-compat-data/releases&quot;&gt;browser-compat-data release&lt;/a&gt;. &lt;/div&gt;&lt;/aside&gt;
&lt;h3 id=&quot;the-inert-attribute&quot;&gt;The &lt;code&gt;inert&lt;/code&gt; attribute &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#the-inert-attribute&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Firefox 112 includes the &lt;code&gt;inert&lt;/code&gt; global attribute. This attribute tells the browser to ignore the element, indicating content that should not be interactive. It:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Prevents &lt;code&gt;click&lt;/code&gt; events being fired.&lt;/li&gt;
&lt;li&gt;Prevents the element from gaining focus.&lt;/li&gt;
&lt;li&gt;Excludes the element and its contents from the accessibility tree.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This attribute is now interoperable in all three engines.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 102, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      102
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 102, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      102
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari 15.5, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      15.5
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inert#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;the-linear-easing-function&quot;&gt;The &lt;code&gt;linear()&lt;/code&gt; easing function &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#the-linear-easing-function&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The &lt;code&gt;linear()&lt;/code&gt; easing function enables linear interpolation between a number of points. This enables more complex animations such as bounce and elastic effects. This function is in Firefox 112.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Edge 113, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      113
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Safari, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;h3 id=&quot;css-nesting&quot;&gt;CSS nesting &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#css-nesting&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome 112 adds support for &lt;a href=&quot;https://developer.chrome.com/articles/css-nesting/&quot; rel=&quot;noopener&quot;&gt;CSS Nesting&lt;/a&gt;, a feature that is highly anticipated by many developers. This introduces a new nesting selector &lt;code&gt;&amp;gt;&lt;/code&gt;, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:&lt;/p&gt;
&lt;div&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.nesting&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; hotpink&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;  &lt;span class=&quot;token selector&quot;&gt;&gt; .is&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; rebeccapurple&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;    &lt;span class=&quot;token selector&quot;&gt;&gt; .awesome&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br /&gt;      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; deeppink&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br /&gt;    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox, Not supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;no&quot; title=&quot;Not supported&quot; aria-label=&quot;Not supported&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 112, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
112
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari preview, Preview&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;preview&quot; title=&quot;Preview&quot; aria-label=&quot;Preview&quot;&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/Nesting_selectors#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;css-animation-composition&quot;&gt;CSS &lt;code&gt;animation-composition&lt;/code&gt; &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#css-animation-composition&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Chrome 112 also includes support for &lt;code&gt;animation-composition&lt;/code&gt;. Learn how this property works in &lt;a href=&quot;https://developer.chrome.com/articles/css-animation-composition/&quot; rel=&quot;noopener&quot;&gt;Specify how multiple animation effects should composite with animation-composition&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;wdi-browser-compat&quot;&gt;
  &lt;span class=&quot;wdi-browser-compat__label&quot;&gt;Browser support&lt;/span&gt;
  &lt;ul class=&quot;wdi-browser-compat__items&quot;&gt;
    &lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;chrome&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Chrome 112, Supported&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
      112
    &lt;/span&gt;
    &lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
    &lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;firefox&quot;&gt;
      &lt;span class=&quot;visually-hidden&quot;&gt;Firefox 104, Behind a flag&lt;/span&gt;
    &lt;/span&gt;
    &lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;flag&quot; title=&quot;Behind a flag&quot; aria-label=&quot;Behind a flag&quot;&gt;
&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;edge&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Edge 112, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
112
&lt;/span&gt;
&lt;/li&gt;&lt;li class=&quot;wdi-browser-compat__item&quot;&gt;
&lt;span class=&quot;wdi-browser-compat__icon&quot; data-browser=&quot;safari&quot;&gt;
&lt;span class=&quot;visually-hidden&quot;&gt;Safari 16, Supported&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;wdi-browser-compat__version&quot; data-compat=&quot;yes&quot; title=&quot;Supported&quot; aria-label=&quot;Supported&quot;&gt;
16
&lt;/span&gt;
&lt;/li&gt;&lt;p&gt;&lt;/p&gt;
  &lt;/ul&gt;
  &lt;a class=&quot;wdi-browser-compat__link&quot; href=&quot;https://developer.mozilla.org/docs/Web/CSS/animation-composition#browser_compatibility&quot; target=&quot;_blank&quot;&gt;Source&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id=&quot;new-headless-mode&quot;&gt;New headless mode &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#new-headless-mode&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you use Chrome&#39;s Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in &lt;a href=&quot;https://developer.chrome.com/articles/new-headless/&quot; rel=&quot;noopener&quot;&gt;Chrome&#39;s Headless mode gets an upgrade&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;beta-browser-releases&quot;&gt;Beta browser releases &lt;a class=&quot;headline-link&quot; href=&quot;https://web.dev/web-platform-04-2023/#beta-browser-releases&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Beta browser versions give you a preview of things that will be in the next stable version of the browser. It&#39;s a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are &lt;a href=&quot;https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/113&quot; rel=&quot;noopener&quot;&gt;Firefox 113&lt;/a&gt; and &lt;a href=&quot;https://developer.chrome.com/blog/chrome-113-beta/&quot; rel=&quot;noopener&quot;&gt;Chrome 113&lt;/a&gt;, with the &lt;a href=&quot;https://developer.apple.com/documentation/safari-release-notes/safari-16_5-release-notes&quot; rel=&quot;noopener&quot;&gt;Safari 16.5&lt;/a&gt; beta still ongoing. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.&lt;/p&gt;
&lt;p&gt;Firefox 113 includes the &lt;code&gt;color()&lt;/code&gt;, &lt;code&gt;lab()&lt;/code&gt;, &lt;code&gt;lch()&lt;/code&gt;, &lt;code&gt;oklab()&lt;/code&gt;, and &lt;code&gt;oklch()&lt;/code&gt; functions. Also included is the &lt;a href=&quot;https://developer.chrome.com/blog/css-color-mix/&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;color-mix()&lt;/code&gt;&lt;/a&gt; function from CSS Color 5, and the &lt;code&gt;forced-color-adjust&lt;/code&gt; property.&lt;/p&gt;
&lt;p&gt;Firefox also includes the &lt;a href=&quot;https://developer.mozilla.org/docs/Web/CSS/:nth-child#the_of_selector_syntax&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;nth-child of &amp;lt;selector&amp;gt;&lt;/code&gt;&lt;/a&gt; syntax, giving finer control of which elements you want to select. Read more in &lt;a href=&quot;https://developer.chrome.com/articles/css-nth-child-of-s/&quot; rel=&quot;noopener&quot;&gt;More control over :nth-child() selections with the of S syntax&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;For CSS, Chrome 113 includes the &lt;code&gt;overflow-inline&lt;/code&gt;, &lt;code&gt;overflow-block&lt;/code&gt;, and &lt;code&gt;update&lt;/code&gt; media features. Also included in the &lt;code&gt;linear()&lt;/code&gt; easing function, and the unprefixed &lt;code&gt;image-set()&lt;/code&gt; type.&lt;/p&gt;
&lt;p&gt;Chrome 113 also includes &lt;a href=&quot;https://developer.chrome.com/blog/webgpu-release/&quot; rel=&quot;noopener&quot;&gt;WebGPU&lt;/a&gt;, the successor to the WebGL and WebGL 2 graphics APIs for the Web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Photo by &lt;a href=&quot;https://unsplash.com/@moonflowerstudiocreativet&quot; rel=&quot;noopener&quot;&gt;Karen Ciocca&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
        </content>
        <author>
            <name>
                Rachel Andrew
            </name>
        </author>
    </entry>
</feed>