Google top Core Web Vitals recommendations for 2023

The following is my cherry-picked and noted version of the original article published on this site.

Largest Contentful Paint (LCP)

Our first set of recommendations are for Largest Contentful Paint (LCP), which is a measure of load performance. Of the three Core Web Vitals metrics, LCP is the one that the largest number of sites struggle with—only about half of all sites on the web today meet the recommended threshold—so let's start there.

• LCP is number 1 recommendation

According to the 2022 Web Almanac by HTTP Archive, 72% of mobile pages have an image as their LCP element, which means that for most sites to optimize their LCP, they'll need to ensure those images can load quickly.

• blog posts, PDP (Product Details Pages), CLP (Category Landing Pages) - each of those is a possible candidate for checking the main image as a potential LCP poor performer

In fact, of the pages where the LCP element was an image, 39% of those images had source URLs that were not discoverable from the HTML document source. In other words, those URLs were not found in standard HTML attributes (such as <img src="..."> or <link rel="preload" href="...">), which would allow the browser to quickly discover them and start loading them right away.

• Often, this is the case with React and SPA pages that use mainly Client Side Rendering (CSR) rather than Server Side Rendering (SSR) or static rendering (SSG/ISR in Next.js).

As a general rule, if your LCP element is an image, the image's URL should always be discoverable from the HTML source

• Lazy loading of React components could also contribute to this problem

Another critical aspect of prioritizing the LCP resource is to ensure you don't do anything that causes it to be deprioritized, such as adding the loading="lazy" attribute. Today, 10% of pages actually set loading="lazy" on their LCP image.

• It is not uncommon for developers to add extra prop to every image component

---

CDN

Many developers are familiar with using a CDN to host static assets, but CDNs can serve and cache HTML documents as well, even those that are dynamically generated.

• cache SSR requests with SWR headers
• use SSG/ISR or SSR with caching headers in Next.js

According to the Web Almanac, only 29% of HTML document requests were served from a CDN, which means there is significant opportunity for sites to claim additional savings.

• Use Next.js 13 addDir architecture with solid defaults for dynamic cache per page route and per component level.

---

Edge

Explore whether you can move dynamic logic currently running on your origin server to the edge (a feature of most modern CDNs).

• use for redirect, rewrites, header and cookie manipulation
• check out vercel/examples repo for edge logic examples.

In general, any time you can serve content directly from the edge (avoiding a trip to your origin server) it's a performance win

• Avoid chaining fetch() between different regions

• Avoid calls between different regions (edge region calling database in a different regions)

---

CLS

Layout shifts may be caused by other content that typically loads in after the page is initially rendered, including third-party ads or embedded videos. The aspect-ratio property can help combat this.

• Use next/script to load third-party scripts

However, even if you don't know the exact size, you can still take steps to reduce the severity of layout shifts. Setting a sensible min-height is almost always better than allowing the browser to use the default height of 0px for an empty element.

Avoid animations/transitions that use layout-inducing CSS properties

• Utilize CWV testing when developing design systems with popular tools like storybook

Another common source of layout shifts is when elements are animated. For example, cookie banners

• Put all components, features, A/B testing tools, and HTML injection tools that could have an impact on CWV under feature flags and test with and without them to determine how much of an impact they have on the CWV

This is particularly problematic when these banners push other content out of the way

• In addition to affecting performance and SEO, this annoys your users (UX).

As a general rule, never animate or transition any CSS property that requires the browser to update the page layout, unless you're doing it in response to a user tap or key press (though not hover).

• It is important to verify CWV data in the field as well as in the lab. Data from the field was necessary for discovering some user actions (for example mouse hover CLS impact).

---

FID & INP

Our new Interaction to Next Paint (INP) metric is a possible successor to FID, and all of the recommendations below apply equally well to both FID and INP. Given that sites perform worse on INP than FID, especially on mobile, we encourage developers to seriously consider these responsiveness recommendations, despite having "good" FID.

When tasks become long tasks—that is, 50 milliseconds or longer—they block the main thread from being able to respond quickly to user inputs.

---

All Core Web Vitals :)

There's no doubt about it: websites are shipping more JavaScript than ever before, and the trend doesn't look like it's changing any time soon

• Consider using Next.js 13 appDir when starting new projects

Godspeed

PS. Follow me on Elon's Twitter.
https://twitter.com/dom_sipowicz