Maximize LCP with Next.js portal site: Reduction of unused JavaScript and SEO effect by dynamic imports

Website display speed not only determines the comfort of the user experience (UX), but is also an important evaluation factor in Google's search ranking algorithm (Core Web Vitals).

In particular, a site like ZeroTools, which aggregates over 200 different tools into a single portal, faced a unique challenge: The wide variety of JavaScript packages used by each tool (ONNX Runtime, PDF-lib, Tesseract.js, etc.) significantly slows down the initial display.''

In this article, we will explain an approach that dramatically reduces unused JavaScript by utilizing the Next.js feature dynamic imports and improves the initial page display speed indicator LCP (Largest Contentful Paint) to the maximum.

§1. Performance bottleneck occurring on the portal site

Before optimization, LCP was detected extremely slow in the Lighthouse report at a maximum of 7.9 seconds. The main causes were the following three points.

1. Loading "Unused JavaScript":

When loading the top page or a specific tool page, heavy JS modules for other tools not used on that page (e.g. image compression library, PDF manipulation tool, etc.) were bundled and downloaded to the browser at the same time.

2. Rendering block for third-party ads (Google AdSense):

While parsing the initial HTML, heavy AdSense scripts were executed immediately and occupied (blocked) the browser's main thread for several seconds.

3. Lazy loading of LCP images (processing result previews, etc.):

loading="lazy" was set for the main image, which should be loaded with the highest priority during initial rendering, and the browser was delaying downloading the image.

§2. Three technical approaches that dramatically improved LCP

To resolve these issues, we have made the following improvements to Next.js (App Router) and the build pipeline.

① Code Splitting using next/dynamic

The most effective thing was to convert the component that loads the tool body from static import (import) to asynchronous Dynamic Import all at once.

// 改善前 (静的インポート: 初期ロードJSに含まれてしまう)
// import JSONFormatter from "@/components/tools/json-formatter"

// 改善後 (動的インポート: ページ遷移・ロード後に非同期で読み込まれる)
import dynamic from "next/dynamic"

const JSONFormatter = dynamic(
  () => import("@/components/tools/json-formatter").then((mod) => mod.JSONFormatter),
  {
    loading: () => <div className="h-40 flex items-center justify-center text-muted-foreground text-sm">読み込み中...</div>
  }
)

With this change, when a user opens a specific tool page (e.g. /tools/json-formatter), only the JS required for that tool will be loaded (lazy loading).

As a result, the total amount of unnecessary JavaScript was reduced by over 270KB, and the main thread compilation and hydration load was dramatically reduced.

**Note: If you use the ssr: false option in Next.js App Router's server component (page.tsx), an error will occur during Turbopack build, so ssr: false is not used in the server component, and the design is to perform mount control (Client-side boundaries) within the component. *

② Third-party JS loading delay (Lazy Load)

The Google AdSense loading strategy has been changed to strategy="lazyOnload", which executes most lazily, using the <Script> component of Next.js.

import Script from "next/script"

// ページの主要リソースがすべて読み込まれたアイドル状態の時に初めてロードされる
<Script
  src="https://pagead2.googlesyndication.com/.../show_ads.js"
  strategy="lazyOnload"
  crossOrigin="anonymous"
/>

This prevents advertising heavy JS from interfering with the thread before initial rendering and hydration is complete, and also avoids a race error (TypeError: window.__chromium_devtools_metrics_reporter).

③ Priority loading of images (Priority Hints)

loading="lazy" has been removed from the preview image tag that becomes an LCP element when the tool is executed, and fetchPriority="high" and loading="eager" have been added.

The browser will recognize this as the most important image'' and will download the resource first in the network queue.

§3. Impact on SEO and user behavior

These performance improvements will dramatically increase your Lighthouse score.

• Reduced bounce rate: Since the time from opening the page to becoming operable is "less than 1 second", the risk of users leaving without waiting for the tool to load (bounce) can be reduced to almost zero.
• Good impact on Google search ranking: LCP and CLS (Layout Shift), which are important metrics of Core Web Vitals, will be judged as "Good", which will increase your evaluation from search crawlers and greatly contribute to higher rankings.

§summary

Performance optimization for useful tool portals is all about controlling which code is loaded and when.

ZeroTools will continue to provide a comfortable and safe tool experience by ensuring that the display speed does not decrease no matter how many functions are added.