cssファイルを一つにまとめてサイトを高速化しよう
この度、サイトの高速化を実施することになり、画像遅延読み込みやjsファイルの非同期読み込みなど様々な対応を行いました。
その中で最も効果があった対応策は「cssファイルを一つにまとめる」というものでしたので、ここに記録しておこうと思います。
本当はcssファイルは分けておきたいのだが、、、
普段、私がwebサイトを作成する時には、機能やかたまりごとにcssファイルを分けて実装しているのですが、これには下のような理由があります。
- コンポーネントととしての再利用性を高める
- ファイル名を名前空間として利用し、クラス名の重複を防ぐ
- ファイル単位で責任範囲を区切り、問題発生時の改修効率を上げる
作り手の目線だけで考えるとcssを分けた方が良いのですが、パフォーマンスが出ないのでは元も子もありません。ということでcssファイル（今回はcssファイル14個）を一つにまとめました。
パフォーマンスの測定はgoogleが提供するツールであるhttps://developers.google.com/speed/pagespeed/insights/を利用します。
修正前後のパフォーマンスの比較を行った結果は次のようになります。
cssファイルを一つにまとめる前
cssファイルを一つにまとめた後
cssファイルは「レンダリングを妨げるリソース」に該当しますので、ファイルを一つにまとめたことによってこの項目が改善されていることがわかります。
全体の速度スコアも20点以上の大幅な増加となりました。
cssファイルを一つにまとめるとサイトは高速化される
cssファイルを一つにまとめることは、サイト高速化に大きく貢献することがわかりました。
開発効率や再利用性など様々なことを考えると、cssファイルは分けておきたいのですが、今後はファイルを一つにまとめてサイト構築を行っていこうと思います。今日はこれにて。