xavier collantes

NextJS Web App Optimizations

By Xavier Collantes

1/26/2024

Metrics

Large contentful paint - Largest image visible to user when loading a page.

According to the maker of the most popular web application, chances a user will leave increases 32% when loading of a page goes from 1 second to 3 seconds.

https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/page-load-time-statistics

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.

https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight#how-to-reduce-payload-size

Chrome Browser DevTools

Chrome DevTools: Lighthouse

Open Devtools panel
Go to Lighthouse
Run Analysis

Chrome DevTools: Performance

Open Devtools panel
Go to Performance
See an analysis of the loading of each page

https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation

Screenshots.

Capture full size screenshots with the DevTools: Open DevTools > Click on top right button menu on rendered page > Capture full page screenshot

NextJS

NextJS Bundle Analyzer.

Shows how large the packages are in your deps.

1const withBundleAnalyzer = require("@next/bundle-analyzer")({
2  enabled: process.env.ANALYZE === "true",
3})
4
5/** Listing of domains allows for calls to external source. */
6module.exports = withBundleAnalyzer({
7  transpilePackages: ["@stripe/firestore-stripe-payments"],
8

snippet hosted withby Xavier

NPM dependencies

Use depcheck.

Shell

1npm install -g depcheck
2npm install -g depcheck typescript
3npx depcheck
4

snippet hosted withby Xavier

Use dynamic imports.

Default NextJS will split code based on components needed for the route.

Use const BigComponent = dynamic(() => import("../bigcomponent")) when you do not need a dependency right away to avoid loading all dependencies.

1const ContentForm = dynamic(
2  () => import("./components/Content").then((component) => component.Function),
3  {
4    loading: () => <Loading />,
5    ssr: false,
6  }
7)
8

snippet hosted withby Xavier

Export the non-default component
Show a loading bar while components load
Disable Server-side rendering to include only on the client

Dynamic import with ES2020 also works with NextJS: const Component = (await import("comp.js")).default

Use dynamic importing carefully since there are cases where you do not want the content to be delayed on loading. For example, a metric used by Google is LCP which will count the time the largest image becomes renders to the user.

These metrics must not be ignored since a low SEO score from Google means less likely the page will be shown to users.