Astro Creator: New Web Metric Will Hurt JS Framework Sites

Next month, Google will introduce Interaction to Next Paint (INP) to its web core vitals. It’s a move that should raise concerns about what it will do to existing sites, contended the creator of Astro in a tweet.

Fred Schott, who made Astro, tweeted his concern that sites built with some popular JavaScript frameworks may take a hit when Google introduces INP, which is currently considered a pending Core Web Vital metric.

Schott posted a graph that suggested when Google moves off the “notoriously passable metric (First Input Delay, or FID) with something much more difficult (Interaction to Next Paint, or INP)” that performance will dive for frameworks, particularly for websites built on Nuxt and Next.js.

The data draws on about 9 million sites, according to a follow-up tweet by Schott. (The New Stack tried but was unable to schedule an interview with Schott.)

Nuxt: Revamped and Ready

That 9 million sites includes a bulk of sites built on an older version of Nuxt, as well as sites developed on older versions of Next.js, pointed out Daniel Roe, who leads the core Nuxt team.

“The reason that Nuxt and Next — in my understanding — have the results that they do is that they are the oldest frameworks on that list, and so therefore, they have a huge number of websites which are out there, many of which were created quite some time in the past, and don’t use best practices for modern web development,” Roe told The New Stack. “That’s not necessarily a reflection on the framework. It’s a reflection on the body of websites that are out there.”

For example, Nuxt was completely rewritten last year with modern web practices, but there’s no way to separate out that data, he added.

Astro, a new framework, seems to perform better in the graph, but also draws on a smaller body of websites, Roe pointed out.

Performance is very important to the Nuxt framework, he added.

“The Google Chrome team works directly with framework authors, so they work directly with Next.js and they work directly with us. I also happen to be a Google developer expert in web performance,” he said. “So I care a lot about performance.”

Next.js is maintained by Vercel. The team declined an interview but referred The New Stack to several posts Vercel has written on the topic, including How React 18 Improves Application Performance and Improving INP with React 18 and Suspense.

Interaction to Next Paint

The existing metric, First Input Delay, reports the responsiveness of the first time a user interacts with the page, according to a post by Annie Sullivan, senior staff software engineer at Google, and Rick Viscomi, a staff DevRel engineer and web performance lead for Google. So the first interaction is not necessarily representative of all interactions on the page afterward, they wrote. Plus, First Input Delay only measures the amount of time the browser had to wait before beginning to handle the first interaction, they added.

They contend that INP is a more accurate metric because it takes all interactions into account.

“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,” Sullivan and Viscomi wrote. “These implementation details make INP a much more comprehensive measure of user-perceived responsiveness than FID.”

But it’s also worth noting that JavaScript can impact INP.

“Keep in mind that, by default, JavaScript is single-threaded,” the Vercel post noted. “If you’re loading a large JS script, nothing else can happen on your page until the main thread is idle — even reacting to a user’s click on a plain HTML link. Improving INP means improving how quickly this main thread can respond to user interaction.”

Preparing for INP

There are ways to lower INP with React, such as selective hydration with Suspense, the Vercel team noted, adding that these techniques can also improve other metrics — such as FID, Total Blocking Time (TBT), and Time to Interactive (TTI).

Since the main threads must be idle in order to process event handlers, other options for improving Interaction to Next Paint include:

• Using CSS instead of JavaScript for animations, since a separate thread handles CSS;
• Throttling or debouncing events that may be called repeatedly by user input; and
• Reducing the DOM size so the browser doesn’t have to recalculate too many elements on each render.

Likewise, “inline SVGs can be especially troublesome if you have too many or if they end up in your client-side JS bundle (for example, by inlining them in JSX),” Vercel wrote. “You may need [to] reference them in a tag or look into alternate ways of rendering them, such as keeping them in React Server Components.”

If there’s a complex application, use “web workers to arbitrarily execute JavaScript on separate threads, keeping the main thread open for user input,” wrote Vercel.

Vercel CTO Malte Ubl and Content Engineer Alice Alexandra Moore also recently wrote a post on How Core Web Vitals affect SEO, which touches on how Vercel can help with core web vitals.