Hi 🙋‍♀️about me 😎posts 📚

Next.js で Critial CSS を適応する

tl;dr

  • next.config.jsexperimental: { 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 な記述がされるようになる。