Webpack5で、style.cssとインラインスタイルシートでは、どちらが速いか、高得点になるかを試してみた。条件は下記。
- ホームページのソースの量は、ほとんどなし。
- fontawesomeを使う。
- サーバーは忍者ツールズの無料ホームページ。
- 審査はグーグルのPageSpeed Insights。
まずは、style.css。style.cssとmain.jsに分割される。
結果は、62点。
次にインラインスタイルシート。webpack5でmain.jsにcssも全てバンドルされる。
結果は、50点。
忍者ツールズの無料ホームページは、広告用のjsファイルがついてくるので、それが遅延の原因になっている可能性があるな。だから、忍者ツールズの無料ホームページでは、jsファイルとcssファイルは別にしたほうがいいのだろう。
【後日談】
http://toushin.konjiki.jp/ というサイトで試してみたら、jsファイルとcssファイルを分割したほうが遅かった。