Next.js で Critial CSS を適応する
tl;dr
next.config.jsにexperimental: { optimizeCss: true }を追加するnpm i critters
intro
以前から Next.js の不満点として、Critital CSS に対応していない点が気になっていて、個人的にどう実装しようかとアレコレ考えていたところ、ちょうど PR が merge されていたのを Twitter で見かけたのでこのサイトで試してみた。
https://twitter.com/hdjirdeh/status/1369709676271726599?s=20
Critial CSS とは？
ページ全体のうち、First View (指定した width/height)に収まるだけの領域にレンダリングされうる DOM に適応されている CSS を抜き出し、HTML へと inline style で injection することだ。
そのままでは First View 以下のコンテンツにはスタイルが当たっていないため、残りの CSS は lazy で load する。こうすることで master request である HTML の body size は inline style 分増えてしまうが、CSS がクリティカルパスではなくなるので、全体として FP までの速度が向上する。
Extract critical CSS | web.dev
Before/After
Next.js console log
各ページでどれだけくり抜かれているかが分かる。
適応前
特に最適化はしていないため、Response パネルには HTML の骨組みだけが表示されている。
Doc のサイズはこれくらい。
CSS は preload はされているためリソース読み込み優先度は上がっているものの、クリティカルパス上に存在している。
適応後
Response パネルで確認しても CSS が適応されていることがわかる。
サイズは微増。おそらく console に表示されている内容とあっているはず。
CSS はお決まりの lazy load な記述がされるようになる。
