Introduction

This article uses this blog site, which is built with Next.js and delivered through Cloudflare CDN, as a case study to document its optimization process. For more in-depth and authoritative guidelines, please consult the following link

Web Vitals  |  Articles  |  web.dev

Essential metrics for a healthy site

https://web.dev/articles/vitals

 

The specific solutions provided may be subject to limitations due to the underlying framework, website architecture, or my technical level. Your understanding is appreciated, and feel free to point out any inaccuracies.

The significance of optimization varies

There is a complete difference between reducing 10ms and 1000ms of page loading time with the same amount of work. Over-optimization will reduce the efficiency of development.

Whether to follow the guidelines

Not following some guidelines has little to no negative effect, but some can even result in noticeable delay.

Any optimization methods should ultimately be guided by experiments and actual statistical data.

Install and configure bundle-analyzer 

npm: @next/bundle-analyzer

Use `webpack-bundle-analyzer` in your Next.js project. Latest version: 15.1.6, last published: 11 days ago. Start using @next/bundle-analyzer in your project by running `npm i @next/bundle-analyzer`. There are 217 other projects in the npm registry using @next/bundle-analyzer.

https://www.npmjs.com/package/@next/bundle-analyzer#installation

 

Run ANALYZE=true yarn build to inspect the bundle size

💡

Each rectangle represents a module or dependency, and its size reflects the relative footprint in the bundle. The larger the rectangle, the more space the module occupies in the final build, vice versa

Optimization of the Clerk dependency size

• Analysis: Clerk  is an optional feature in the project, but it is currently statically imported, which means it gets bundled regardless of whether it’s used.

• Solution: Use on-demand dynamic import, i.e., load it conditionally based on configuration settings such as environment variables.
Optimizing: Lazy Loading
Lazy load imported libraries and React Components to improve your application's loading performance.

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

 

Optimizing the Namespace Object

• Analysis: The namespace object holds resources used for dynamic imports. Its large size results from numerous theme-related modules that could potentially be switched to. Even if they aren't included in the final bundle, the reference mappings alone occupy significant space.

• Solution: Remove theme-related resources that are not meant to be used, and consider discarding them entirely.

Dynamic Imports and Lazy Loading

• Basic dynamic import
This involves converting static imports into dynamic imports, but the module will still be loaded regardless.
Example: <ComponentA />

• Conditional dynamic import
This converts static imports to dynamic imports that load only when certain conditions are met.
Example: {showMore && <ComponentB />}

<input
  type="text"
  placeholder="Country search..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Dynamically load libraries
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // Fake analytics hit
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

A Practical Note on Optimizing Core Web Performance Indicators Using Next.js and Cloudflare

Webpage Core Performance Optimization Guide and Practical Implementation Records

Main Reference Not available