BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Next.js 11 Released with New Script and Image Loading Strategies

Next.js 11 Released with New Script and Image Loading Strategies

This item in japanese

The Next.js team recently released Next.js 11. The new version strives to improve actual and perceived performance for developers and end-users (start-up time, third-party scripts loading, image and placeholder loading). Next.js v11 also provides an experimental codemod that migrates a Create React App application to Next.js.

The Next.js team achieved a better experience for developers by means of a new Babel loader for webpack that reduces start-up time.

Developers may now improve loading performance by specifying one of three possible loading strategies for third-party scripts (analytics, ads, A/B testing, social sharing widgets). Each third-party script may be loaded before the page is interactive (beforeInteractive), after the page is interactive (afterInteractive), or when the page is idle (lazyOnLoad). Third-party scripts that are not immediately necessary (social media widgets) may thus be appropriately delayed. A custom <Script> component implements the script loading strategies as follows:

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

The Next.js team reports having changed the default loading strategy to defer (from preload or async) to reduce the developer burden. The Google Chrome team described some challenges linked to the preload resource hint as follows:

While usage of preload for critical resources can result in an improvement in a loading metric, it is a major foot gun and comes at a significant cost to the developer. Preloading can devolve into re-creating and maintaining roughly the natural loading sequence of the browser, but entirely manually. This is further exacerbated by a severe issue in Chrome.

Facebook reported using a similar set of loading strategies in his redesign of the facebook.com site. Facebook uses specific APIs to import dependencies according to whether they impact above-the-fold content (importForDisplay) or not (importForAfterDisplay). A/B testing is additionally supported with an importCond API.

The Next.js team additionally strives to improve the user experience with a custom <Image> component. In v11, the Image component will automatically fetch the image dimensions when used as follows:

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

The Image component also supports blur-up placeholders that may reduce perceived loading time.

Fetching image dimensions ahead of time and placeholder display, when combined, reduce Cumulative Layout Shift (CLS) while providing for better perceived user experience. CLS is one of the Core Web Vitals metrics that Google has been using since May as a signal for its ranking algorithm.

The sizeable market share that Google holds in search is possibly a considerable factor pushing websites towards reviewing their performance across Google’s self-defined metrics. The same reason may also explain the reported increase in applications migrating from Create React App to Next.js in order to optimize their web performance. Next.js v11 introduces an experimental codemod that supports such migrations:

npx @next/codemod cra-to-next

Next.js is open-source software available under the MIT license. Contributions are welcome via the Next.js GitHub repo following the Next.js contribution guidelines and code of conduct.

Rate this Article

Adoption
Style

BT