CSSを軽量化してWebサイトのパフォーマンスを向上させる方法

CSSを軽量化する理由は？

CSSの軽量化とは、カスケーディングスタイルシート（CSS）ファイルのサイズを縮小し、読み込みを高速化するものです。CSSの軽量化は、ブラウザの解釈に影響を与えることなく、CSSマークアップから不要な文字やスペースをすべて削除することで機能します。

CSSファイルには、HTMLの要素のフォーマット手順が記述されています。軽量な服を着るとジョギングが速くなるように、CSSファイルの読み込みを高速化することで、Webページ全体の読み込みも速くなります。高速な読み込みは、ユーザーエクスペリエンスとSEOのスコアを向上させ、ページスピードの改善は、コンバージョン率の向上にも貢献します。

以下に、数行のコードと、それを読む開発者向けのコメントのシンプルなスタイルシートを示します：

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

CSSを軽量化すると、圧縮された1行になり、コメントも削除されます：

p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;} 

このテキストは人間にとって読みにくいものですが、ブラウザは前者と後者どちらもまったく同じように読み込んで解釈します。軽量化バージョンは、スペースを取らないため、より速く読み込まれるという利点があります。

ページが描画される仕組み

ブラウザがWebページを表示するためには、Webページにどのような要素（テキスト、画像、その他のマルチメディアなど）があり、すべてがページ上のどこに配置されているかを知る必要があります。建設業者が建設を始める前に建物の設計図が必要なように、ブラウザがページの描画を始める前にはWebページの「設計図」が必要です。

ブラウザは、WebページのHTMLファイルを受け取ると、ドキュメントオブジェクトモデル（DOM）ツリーと呼ばれるものを構築し始めます。これは、ページ上のすべての要素のざっくりとした構成図やスケッチのようなものです。また、ブラウザは、<style>タグとリンクされたCSSファイルをすべて解析してCSSOMツリーを構築し、すべてのページ要素がどのようにスタイル付けされるかをマッピングします。

最後に、ブラウザはDOMとCSSOMを組み合わせて「レンダーツリー」を作成します。レンダーツリーが作成されたあとで、ようやくブラウザによるページの描画が開始されます。これが開始されるまで、ユーザーは真っ白な画面を見ていることになります。

つまり、ブラウザがCSSのダウンロードと読み込みを終えるまで、ページを表示することはできません。

CSSがWebページの表示をブロックする原因は？

Web開発において、エンドユーザーにページを表示する前に読み込まなければならない要素や機能は、「レンダーブロッキングリソース」と呼ばれます。CSSはそのようなリソースです。レンダーブロッキングリソースは、可能な限り素早く読み込めるように最適化する必要があります。

大きなレンダーブロッキングリソースはダウンロードに時間がかかるため、ブラウザが待機することになり、文字通りページがブロックされ、ユーザーからは何も処理されていないように見えます。このような遅延は、しばしばユーザーのページ離脱の原因となります（「直帰」）。

また、特に、コアウェブバイタル（Googleがページのパフォーマンスを測定するために使用する指標）のページの最大の要素の読み込み時間を測定するLargest Contentful Paint（LCP）にも影響を与えます。コアウェブバイタルのスコアが悪いと、Googleが検索結果でページを下位に表示するため、ページ全体の訪問者が減ってしまう可能性があります。

CSSを軽量化する方法

幸いなことに、CSSには多くの軽量化ツールが用意されています。おそらく最も便利な方法は、Webサイトのコンテンツをキャッシュして配信するサービスであるコンテンツ配信ネットワーク（CDN）に組み込まれている軽量化ツールを使用することです。CDNは、さらにパフォーマンスを高めるために、軽量化サービスを提供できるものである必要があります。

Cloudflare CDNには、Cloudflare Auto Minifyが付属しています。サイト所有者は、CloudflareのダッシュボードからCSSファイル（JavaScript、HTMLファイル）を選択して軽量化することができます。

CSSの軽量化と圧縮の違いは？

どちらもファイルサイズを小さくするという目的は同じですが、CSSの軽量化とCSSの圧縮は技術的に異なります。軽量化は、コメントや文字を削除してコードを変更します。圧縮は、圧縮アルゴリズム（gzipなど）を使うことでファイルサイズを小さくするもので、実際にファイルの内容を変更するものではありません。

CSSの軽量化のデメリットは？

軽量化されたCSSは可読性が低いことが多いため、開発者が手作業でCSSマークアップのバグを特定して修正することが困難になる可能性があります。

また、CSSの軽量化だけでは、Webサイトのパフォーマンスの向上に十分だとは言えません。CSSの軽量化はWebサイトにミリ秒単位での改善をもたらすかもしれませんが、Webサイトの運営者は画像の最適化やブラウザのHTTPキャッシュなど、さらなるパフォーマンス向上のための追加のアクションを実施する必要があります。

CSSの軽量化とJavaScriptの軽量化の比較

JavaScriptの軽量化もCSSの軽量化とコンセプトは同じですが、実行可能なJavaScriptコードが対象となります。.jsファイルからコメント、スペース、その他の余分な文字が削除され、読み込みと実行を高速化することができます。JavaScriptとCSSの軽量化は、どちらもWebサイトの読み込みを高速化し、ユーザーのエンゲージメント向上やオーガニックトラフィックの増加につながります。

Webサイト運営者は、Cloudflare CDNを利用してCSSとJavaScriptの両方を最小化することができます。利用可能なCloudflareプランについてはこちらを参照してください。