【実践解説】CSSインライン化とは？表示速度改善の方法と効果を実測データで解説

【実践解説】CSSインライン化とは？表示速度改善の方法と効果を実測データで解説

Webサイトの表示速度を改善する方法として注目されているのが、「CSSのインライン化」です。

CSSファイルを外部から読み込むのではなく、必要なスタイルをHTML内に直接記述することで、レンダリングを妨げる要因を減らし、LCPやFCPの改善につなげられます。

一方で、すべてのCSSをインライン化すると、HTMLの肥大化や保守性の低下といった課題も発生します。

この記事では、CSSインライン化の仕組みやメリット・デメリット、実装方法に加え、実際の検証結果を交えながら効果を詳しく解説します。

CSSインライン化とは

CSSインライン化とは、Webページの表示に必要なCSS（スタイルシート）を、外部ファイルとして読み込むのではなく、HTML内の<style>タグに直接記述する手法のことです。

通常、ブラウザは外部CSSの読み込みと解析が完了するまで画面の描画を待機するため、表示速度が低下する場合があります。

そこで、ファーストビューに必要なCSSだけをHTML内に埋め込み、残りのCSSを後から読み込むことで、ページの表示開始を早めることができます。

特に、LCP（Largest Contentful Paint）やFCP（First Contentful Paint）といったCore Web Vitalsの改善に効果が期待できるため、LPやECサイト、SEOを重視するWebサイトで広く活用されています。

CSSインライン化の仕組み

CSSインライン化の仕組みは、ブラウザが外部CSSファイルを取得する前に、HTML内に記述されたスタイル情報を読み込み、画面の描画を開始できるようにすることです。

通常、ブラウザはHTMLを解析しながら外部CSSを読み込みますが、その処理が完了するまで画面表示が遅れる場合があります。

そこで、ファーストビューに必要なスタイルだけを<style>タグ内に記述することで、レンダリングブロックを回避し、ページの表示速度を向上させます。

近年は、必要最小限のCSSのみをインライン化し、それ以外のCSSを非同期で読み込む方法が一般的になっています。

外部CSSとの違い

外部CSSとは、HTMLとは別のCSSファイルをサーバーから読み込む方式のことです。

複数のページで同じデザインを利用できるため、管理や更新がしやすく、ブラウザのキャッシュも活用できます。

一方、CSSインライン化では、スタイル情報をHTML内に直接記述するため、外部ファイルを取得する通信が不要になり、表示速度の改善が期待できます。

ただし、すべてのCSSをインライン化するとHTMLの容量が大きくなり、管理が複雑になる可能性があります。

そのため、現在は重要なCSSだけをインライン化し、それ以外は外部CSSとして管理する方法が主流です。

クリティカルCSSとの違い

クリティカルCSSとは、ユーザーが最初に目にするファーストビューの表示に必要なスタイルだけを抽出したCSSのことです。

一方、CSSインライン化は、そのCSSをHTML内に埋め込む手法そのものを指します。

つまり、クリティカルCSSは「対象となるCSS」であり、CSSインライン化は「実装方法」という違いがあります。

現在の表示速度改善では、クリティカルCSSを抽出し、その内容をインライン化する方法が広く採用されています。

これにより、必要なデザインを素早く表示しながら、ページ全体の読み込み負荷を抑えることができます。

CSSインライン化の実装方法

CSSインライン化には、HTML内に直接CSSを記述する方法と、ファーストビューに必要なスタイルだけを抽出して埋め込む方法があります。

それぞれにメリットとデメリットがあり、サイトの規模や目的によって適した方法は異なります。

ここでは、代表的な2つの実装方法と、それぞれを採用するべきケースについて解説します。

HTMLに直接記述する方法

HTMLに直接記述する方法は、<style>タグを利用してCSSをHTML内に埋め込む方法です。

ブラウザは外部CSSを読み込む必要がなくなるため、通信回数を削減でき、ページの描画を素早く開始できます。

特に、ランディングページ（LP）やキャンペーンページなど、ページ数が少なくデザインの変更頻度が低いサイトで効果を発揮します。

HTMLに直接記述する記載例

<style>
.hero {
  font-size: 32px;
}
</style>

この方法は、CSSの容量が小さく、管理するページ数が限られている場合に適しています。

一方で、大規模なサイトではHTMLの肥大化やメンテナンス性の低下につながるため、必要最小限の範囲に限定して利用することが重要です。

クリティカルCSSのみを抽出する方法

クリティカルCSSのみを抽出する方法は、ファーストビューの表示に必要なスタイルだけをHTML内へ埋め込み、それ以外のCSSを後から読み込む手法です。

ページの表示に必要なデザインを優先的に適用できるため、LCPやFCPの改善が期待できます。

クリティカルCSSのみ抽出する方法

<style>
.header {
  height: 80px;
}

.hero {
  background: #fff;
}
</style>

また、HTMLの肥大化を抑えながら、外部CSSのキャッシュも活用できる点が大きなメリットです。

この方法は、ECサイトやメディアサイト、SaaSサービスなど、多くのページを運用している場合に適しています。

表示速度と保守性のバランスが取りやすいため、現在のWebサイトでは最も広く採用されている方法の一つです。

【検証】CSSインライン化で表示速度はどれくらい改善するのか

検証した動画もありますので、こちらも是非ご覧ください。

検証条件

項目

内容

計測環境

Chrome DevTools

通信速度

Fast 4G

デバイス

モバイル環境

比較対象

外部CSSとインラインCSS

検証URL

https://landinghub.sakura.ne.jp/to/cssinline/

上記の環境下で検証を実施します。

またstyle.cssのファイルは、差がわかりやすいように3.2MBと大きい容量のファイルを用意しています。

ビフォーのページはheadでstyle.cssを通常通り読み込ませます。

下記画像はビフォーのページのHTML

アフターのページはファースビューでの読み込みが必要な分のスタイルシートをhead内に記載します。

下記画像はアフターのページのHTML

上記のようにheadに直接書き込んでいます。

また、style.cssのファイルは「media="print" onload="this.media='all'"」を追加し、非同期読み込みで読み込ませるようにします。

【比較結果】CSSインライン化前後の変化

CSSのインライン化を実施して、それぞれ下記の変化を比較させていただきました。

LCP数値の変化

LCPの変化も大きな変化が出ました。

結果としては

CSSをインライン化させる前のLCP：4.16

CSSをインライン化させた後のLCP：2.44

となりました。

style.cssの容量がかなり大きいので差もかなり出ているということにもなりますが、容量の大きいものであればCSSのインライン化でLCPの数値効果も十分に期待できることがわかります。

また、ファイルの読み込み順番や読み込み時間を見るウォーターフォールで確認すると下記のような変化があることがわかります。

インライン化なしの左側のページは、HTMLの次にstyle.cssが読み込まれていますが、インライン化して非同期読み込みを実施した右側のページでは、遅れて読み込みが始まっていることがわかります。

それでも、ファーストビューに必要なCSSをインライン化させているため、ファーストビュー表示に影響はありません。

レンダリングブロックを削減できる

こちらの動画で読み込まれている箇所を見ていただければ一目瞭然です。

左側（インライン化なし）のページは白い画面が表示され遅れて表示されていることがわかります。

これは重いスタイルシートの読み込みに時間がかかり、レンダリングブロックが発生し、bodyの読み込みまでに時間がかかっているのが理由です。

右側（インライン化あり）のページはすぐファーストビュー表示されていることがわかります。

重いスタイルシートは非同期読み込みを行っていて、headにファーストビューに必要なインライン化させたCSSが先に読み込まれるためているため、レンダリングブロックを発生させずにファーストビューを素早く表示させていることになります。

CSSインライン化のメリット

CSSインライン化の最大のメリットは、ページの表示速度を向上させやすい点にあります。

メリットをまとめると下記のようなポイントが挙げられます。

  • レンダリングブロックを減らせる
  • HTTPリクエスト数を削減できる
  • FCP（First Contentful Paint）を改善しやすい
  • LCP（Largest Contentful Paint）を改善しやすい
  • ファーストビューを素早く表示できる
  • モバイル環境でも効果を発揮しやすい
  • Core Web Vitalsの改善につながる
  • ユーザー体験（UX）の向上が期待できる
  • 離脱率の改善につながる
  • SEO評価の向上が期待できる

通常、ブラウザは外部CSSを読み込み、解析が完了してから画面の描画を開始します。

そのため、CSSファイルの容量が大きい場合や通信環境が不安定な場合は、表示速度が低下することがあります。

一方、必要なCSSをHTML内に直接記述することで、ブラウザはすぐにスタイルを適用できるようになります。

その結果、FCPやLCPの改善につながり、ユーザー体験の向上や離脱率の低下、SEO評価の向上も期待できます。

CSSインライン化のデメリット

CSSインライン化には表示速度を改善しやすいというメリットがある一方で、注意すべき点もあります。

CSSインライン化の主なデメリットをまとめると下記です。

  • HTMLファイルの容量が大きくなる
  • ブラウザのキャッシュを利用しにくくなる
  • CSSの重複が発生しやすくなる
  • 保守や運用が複雑になる
  • ページ数が多いサイトでは管理コストが増加する
  • デザイン変更時の修正範囲が広くなる
  • インライン化する範囲の選定が難しい
  • すべてのページで同じ効果が得られるとは限らない
  • 実装方法によってはHTMLの可読性が低下する
  • 過度なインライン化によって、かえって表示速度が低下する場合がある

特に、すべてのCSSをHTML内に埋め込むと、HTMLファイルの容量が大きくなり、かえって読み込み時間が長くなる可能性があります。

また、複数のページで同じスタイルを利用している場合は、ページごとに同じCSSを記述することになり、保守性が低下する原因にもなります。

さらに、ブラウザのキャッシュを活用しにくくなるため、大規模なWebサイトでは慎重な設計が必要です。

そのため、現在はファーストビューに必要なクリティカルCSSのみをインライン化する方法が一般的になっています。

CSSインライン化が効果的なケース

スタイルシートが1つにまとまっていて容量が大きい場合は、CSSインライン化の効果を得やすいケースの一つです。

ブラウザは通常、CSSファイルのダウンロードと解析が完了するまで画面の描画を開始できないため、容量が大きいほど表示開始が遅くなる傾向があります。

特に、共通CSSにページごとで使用しないスタイルまで含まれている場合は、必要以上のCSSを読み込むことになります。

このような場合は、ファーストビューに必要なクリティカルCSSのみをHTML内へインライン化し、残りのCSSを後から読み込むことで、表示速度やLCP・FCPの改善が期待できます。

インライン化するべきCSS

  • ヘッダー
  • ヒーローエリア
  • ファーストビュー
  • フォント設定
  • レイアウト設定

インライン化しないほうがよいCSS

  • アニメーション
  • フッター
  • モーダル
  • スライダー
  • 下層ページ専用CSS

DevToolsで確認するポイント

Performanceタブ

Chrome DevToolsのPerformanceタブでは、CSSインライン化によってページの表示速度がどのように変化したのかを詳しく確認できます。

特に注目したいのは、LCP（Largest Contentful Paint）の指標です。

CSSをインライン化すると、レンダリングを妨げる処理が減少するため、LCPの短縮が期待できます。

また、タイムラインを確認することで、描画処理が開始されたタイミングや、スタイルの適用にどれくらい時間がかかっているのかを把握できます。

改善前後のデータを比較することで、インライン化の効果をより正確に判断できるでしょう。

Networkタブ

Chrome DevToolsのNetworkタブでは、CSSインライン化によって通信状況がどのように変化したのかを確認できます。

特に注目したいのは、CSSファイルのリクエスト数や転送量、読み込み順序、ウォーターフォールの表示です。

通常、外部CSSを利用している場合は、HTMLの読み込み後にCSSファイルの取得が始まり、その完了を待ってから描画処理が行われます。

一方、CSSをインライン化すると、外部CSSへの依存が減るため、描画開始までの時間を短縮できます。

改善前後のリクエスト数や読み込み時間を比較することで、インライン化による効果を視覚的に確認しやすくなります。

Coverageタブ

Chrome DevToolsのCoverageタブでは、読み込まれたCSSのうち、実際に使用された部分と未使用の部分を確認できます。

大規模なWebサイトでは、共通CSSや外部ライブラリの影響によって、ページ内で利用されていないスタイルが大量に含まれているケースも少なくありません。

未使用のCSSが増えるほど、ダウンロードや解析にかかる時間も長くなります。

Coverageタブを利用すれば、どのCSSが必要で、どのCSSが不要なのかを把握しやすくなります。

そのため、ファーストビューに必要なクリティカルCSSを抽出し、インライン化する際の判断材料として活用できます。

CSSインライン化のよくある質問（FAQ）

CSSをすべてインライン化してもよいですか？

基本的にはおすすめできません。すべてのCSSをHTML内に埋め込むと、HTMLファイルの容量が大きくなり、ブラウザのキャッシュも利用しにくくなるためです。

また、複数のページで同じスタイルを使用している場合は、ページごとに同じCSSを記述することになり、保守性が低下する原因にもなります。

そのため、現在はファーストビューの表示に必要なクリティカルCSSのみをインライン化し、それ以外のCSSは外部ファイルとして読み込む方法が一般的です。

インラインCSSの適切な容量は何KBですか？

適切な容量に明確な基準はありませんが、一般的には5KBから20KB程度が目安とされています。

重要なのは、容量そのものではなく、ファーストビューの表示に必要なスタイルだけを含めることです。

必要以上に多くのCSSをインライン化すると、HTMLの容量が増え、かえって表示速度が低下する可能性があります。

まずはCoverageタブで使用状況を確認し、必要なスタイルだけを抽出することをおすすめします。

WordPressでも利用できますか？

はい、WordPressでもCSSインライン化を利用できます。テーマファイルに直接記述する方法のほか、表示速度改善プラグインを利用する方法もあります。

特に、クリティカルCSSを自動的に生成する機能を備えたプラグインを利用すれば、専門的な知識がなくても導入しやすくなります。

ただし、テーマの更新時に設定が上書きされる場合があるため、事前にバックアップを取得しておくことが大切です。

Core Web Vitalsに効果はありますか？

はい、CSSインライン化はCore Web Vitalsの改善に効果が期待できます。

特に、LCP（Largest Contentful Paint）やFCP（First Contentful Paint）の改善につながりやすい点が特徴です。

レンダリングを妨げる外部CSSの読み込みを減らし、ブラウザが素早く描画を開始できるようになるためです。

ただし、画像の最適化やJavaScriptの遅延読み込みなど、ほかの施策と組み合わせることで、さらに高い効果が期待できます。

Next.jsでも利用できますか？

はい、Next.jsでもCSSインライン化を実装できます。

特に、サーバーサイドレンダリング（SSR）を採用している環境では、クリティカルCSSをHTMLへ埋め込むことで、初期表示の高速化が期待できます。

また、next/scriptやnext/fontなどの機能と組み合わせることで、より効率的な最適化も可能です。

ただし、運用方法によっては構成が複雑になるため、導入前に十分な検証を行うことをおすすめします。

記事を書いた人

LandingHub 編集部

LandingHub 編集部

LandingHub編集部です。 知見を持ったLandingHubスタッフが情報を発信しています。 表示速度に関する価値のある再現性の高いノウハウに関して、技術的な知識の少ない担当者の方でもわかりやすく解説していきます。
コラム一覧に戻る