Next.js 製ブログページのパフォーマンスを向上させるために実施したこと

はじめに

▼After

バージョン情報

• React：17.0.2
• Next.js：10.2.2
• react-syntax-highlighter：15.4.3

原因

また使用されていない JavaScript のファイルも配信されていました。

Webpack Bundle Analyzer で容量を確認

改善策

• 巨大なバンドルサイズを細かく分割
• 不要なシンタックスハイライトの CSS ファイルを読み込まない

import { Prism as SyntaxHilighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import vscDarkPlus from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus';

For optimal bundle size for rendering ASAP, there's a async version of prism light & light.
This versions requires you to use a bundler that supports the dynamic import syntax, like webpack.
This will defer loading of refractor (17kb gzipped) & the languages, while code splits are loaded the code will show with line numbers but without highlighting.
引用：react-syntax-highlighter Async Build | GitHub

実際に、改善した後にバンドルサイズを @next/bundle-analyze で確認してみると、下図のように全体の容量は微増していますが、チャンクファイルが細かく分割されていることがわかります。

最後に

参考文献

• Next.js で作ったブログのパフォーマンス改善
• Next.js ブログの最適化 - the2g
• Web 版 WINTICKET のパフォーマンスを改善してきた | CyberAgent Developers Blog