ブログで Tailwind CSS を使うのをやめました ## 目次 1.
[なぜ？](#loc-1)
1. [FCP, LCP を改善したかった](#loc-2) 2. [ビルドプロセスに npm が入ってくる問題](#loc-3) 2. [やったこと](#loc-4) 3. [効果](#loc-5) ## なぜ？ ### FCP, LCP を改善したかった 従来のブログでは `/assets/build/tailwind.css` から minify された Tailwind CSS 全体を読み込んでいましたが、これが [FCP (First Contentful Paint)](https://web.dev/articles/fcp?hl=ja) や [LCP (Largest Contentful Paint)](https://web.dev/articles/lcp?hl=ja) のスコアを悪化させている可能性がありました。 ファーストビューに必要な CSS だけをブロッキングで読み込んで、それ以外の CSS は遅延読み込みすることで、FCP や LCP のスコアを改善できると考えたために、どうにかして Tailwind CSS を分割できないかと考えました。 それよりかは、Tailwind CSS を使わずに、必要なスタイルだけを手書きで書く方が効果的だと判断しました。 ### ビルドプロセスに npm が入ってくる問題 Tailwind CSS に現状 Rust 製の代替がないため、Tailwind CSS を使う場合はビルドプロセスに npm や Node.js が入ってきてしまいます。 ブログの他の部分は Rust と Typst で完結しているため、ビルドプロセスに npm や Node.js が入ってくるのは避けたかったです。 今も結局 [esbuild](https://esbuild.github.io) を JavaScript の minify に使ってしまっているのでビルドプロセスに npm が入ってくるのは避けられていないけど。 ## やったこと [`/assets/css/critical.css`](https://github.com/waki285/rodin/blob/main/static/css/critical.css) にファーストビューに必要なスタイルだけを書き、その他のスタイルは [`/assets/css/lazy.css`](https://github.com/waki285/rodin/blob/main/static/css/lazy.css) に置きました。 `/static/css/critical.css` は HTML の `` 内でブロッキングで読み込み、`/static/css/lazy.css` は `media="print"` と `data-unblock-css=1` を指定し最初は適用されないようにし、 ```js const links=[...document.querySelectorAll('link[data-unblock-css="1"]')]; links.forEach(l => { const enable= () => { l.media='all'; }; l.addEventListener('load', enable, { once:true }); requestAnimationFrame(() => { if (l.sheet) enable(); }); }); ``` を実行して遅延読み込みするようにしました。 ## 効果 Lighthouse で FCP と LCP のスコアが改善した…はず。実行前のスコアを忘れたのでわからない。