◀ 6.

CSSの遅延読み込みで高速化｜クリティカルCSS・media・preloadの使い方

▶
編集
この記事の要点
  • CSSの遅延読み込みとは、画面の初期表示に不要なスタイルシートを後回しで読み込み、レンダリングブロックを減らして表示を高速化する手法です。
  • CSSは標準でレンダリングブロックリソースとなるため、すべてを同期読み込みすると初回描画（FCP・LCP）が遅れます。
  • 主な方法は「クリティカルCSSのインライン化」「media="print"トリック」「rel="preload"」の3つで、用途に応じて使い分けます。
  • loading="lazy"は<img>・<iframe>用の属性で、CSS自体には使えません。両者は区別して扱います。
  • 遅延しすぎるとスタイル適用が遅れてレイアウトが崩れ、CLS（レイアウトのずれ）が悪化することがあります。範囲を見極めるのが重要です。

CSSの遅延読み込みとは、ページの初期表示に必要のないスタイルシートを後から読み込ませることで、レンダリングブロックを減らして表示速度を高める手法です。重要な部分だけを先に適用し、残りは描画が始まってから読み込ませることで、ユーザーが最初の画面を見るまでの時間を短縮します。

なぜCSSの遅延読み込みが必要か

ブラウザはHTMLを解析する途中で<link rel="stylesheet">に出会うと、そのCSSをダウンロード・解析し終えるまで描画を止めます。これを「レンダリングブロック」と呼びます。CSSはデフォルトでレンダリングブロックリソースとなるため、ファイルが大きかったり数が多かったりすると、その分だけ初回描画が遅れます。

表示速度はGoogleの評価指標であるCore Web Vitalsにも関わります。特にLCP（Largest Contentful Paint：主要コンテンツが表示されるまでの時間）はレンダリングブロックの影響を受けやすく、CSSの読み込みを最適化するとLCPやFCP（First Contentful Paint）の改善につながります。これらはユーザー体験の指標であり、SEO上も無視できません。

そこで、ファーストビュー（最初に表示される画面領域）に必要なスタイルだけを優先的に適用し、それ以外のCSSは遅延させる、という考え方が有効になります。

主な手法

1. クリティカルCSSのインライン化 + 残りを遅延

ファーストビューの表示に必要な最小限のスタイル（クリティカルCSS）を<head>内に<style>で直接書き込み、それ以外のCSSは後から読み込ませます。インライン化したCSSは外部リクエストが発生しないため、即座に適用されます。

<head>
  <style>
    /* ファーストビューに必要な最小限のスタイルだけを書く */
    header { background:#fff; height:60px; }
    h1 { font-size:24px; margin:0; }
  </style>
  <!-- 残りのCSSは後述の手法で遅延読み込み -->
</head>

効果は大きい一方、どこまでをクリティカルとするかの抽出が手間です。criticalやpenthouseといったツールで自動抽出する方法もあります。

2. media属性トリック（media="print" + onload）

media属性に印刷時のみ適用されるprintを指定すると、ブラウザはそのCSSをレンダリングブロックしない「低優先度」のリソースとして扱います。読み込みが完了した時点でonloadによりmediaをallへ書き換え、画面表示に適用させます。追加のJavaScriptを書かずに済む、よく使われる手法です。

<link rel="stylesheet" href="/css/app.css"
      media="print" onload="this.media='all'">

<!-- JSが無効な環境向けのフォールバック -->
<noscript>
  <link rel="stylesheet" href="/css/app.css">
</noscript>

JavaScriptが無効だとスタイルが適用されないため、<noscript>で通常の<link>を併記しておくのが定石です。

3. rel="preload" as="style"

rel="preload"はリソースを早めにダウンロードさせる指示ですが、それ自体ではスタイルを適用しません。ダウンロード後にonloadでrelをstylesheetへ切り替えることで適用します。優先的に取得しておきたいCSSに向いています。

<link rel="preload" as="style" href="/css/app.css"
      onload="this.rel='stylesheet'">

<noscript>
  <link rel="stylesheet" href="/css/app.css">
</noscript>

4. <link rel="stylesheet"> の配置を見直す

手法を増やす前に、まず外部CSSの<link>を本当に必要な分だけに整理することも効果があります。基本は<head>内に置きますが、特定のページでしか使わないCSSは分割して、そのページだけで読み込むようにすると、ほかのページのブロック時間を減らせます。未使用CSSの削減（Coverageツールで確認可能）も合わせて検討します。

5. 画像のloading="lazy" / content-visibility:auto（関連する高速化）

CSSそのものではありませんが、表示高速化の関連手法として覚えておくとよいものです。loading="lazy"は<img>・<iframe>専用の属性で、画面外の画像読み込みを遅らせます。CSSの<link>には使えない点に注意してください。content-visibility:autoは画面外要素の描画を後回しにするCSSプロパティで、長いページの初期描画を軽くできます。

<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

/* CSS側 */
.section-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* 高さの目安を与えCLSを防ぐ */
}

手法の比較

手法 効果 対応・前提 注意点
クリティカルCSSのインライン化 大（初回描画を即適用） 追加JS不要。抽出ツール推奨 抽出が手間。HTMLが肥大化しやすい
media="print" + onload 中〜大 主要ブラウザで利用可 JS無効時は<noscript>が必要
rel="preload" as="style" 中（取得を前倒し） 主要ブラウザで利用可 多用すると優先度が分散
img loading="lazy" 中（画像分の通信を節約） img / iframe 限定 ファーストビューの画像には使わない
content-visibility:auto 中（描画コスト削減） 対応ブラウザが必要 サイズ指定がないとCLSの原因に

PageSpeed・SEOへの効果と注意

これらの手法はPageSpeed Insightsなどで指摘される「レンダリングを妨げるリソースの除外」の改善に直結し、LCPやFCPのスコア向上が期待できます。表示速度はランキング要因の一つでもあるため、SEOの観点でもプラスに働きます。

ただし効果を過信せず、適用範囲には注意が必要です。特に避けたいのが、遅延しすぎてレイアウトのずれ（CLS）を招くケースです。

よくある落とし穴
  • ファーストビューに必要なスタイルまで遅延させると、未スタイル状態が一瞬表示され（FOUC）、その後ガクッと配置が変わってCLSが悪化します。
  • 遅延対象を増やしすぎると、かえって読み込みのタイミングがばらつき、体感速度が悪くなることがあります。
  • content-visibility:autoにcontain-intrinsic-sizeを指定し忘れると、要素の高さが0と見積もられスクロール位置やレイアウトがずれます。
  • 変更後は必ず実機・実ブラウザで表示崩れがないか確認し、PageSpeed Insightsの数値だけで判断しないようにします。

よくある質問

Q. CSSにloading="lazy"を付ければ遅延できますか？
A. できません。loading="lazy"は<img>と<iframe>専用の属性で、<link rel="stylesheet">には効果がありません。CSSを遅延させるには、本記事のmedia="print"トリックやpreloadを使います。

Q. どの手法を選べばよいですか？
A. まずファーストビューのクリティカルCSSをインライン化し、残りをmedia="print"トリックで遅延させる組み合わせが扱いやすく効果も高めです。優先取得したい特定CSSがあればpreloadを併用します。いずれの場合も<noscript>のフォールバックを忘れないようにします。

Q. 遅延読み込みでSEO順位は必ず上がりますか？
A. 必ず上がるわけではありません。表示速度は評価要素の一つにすぎず、コンテンツの質など他の要因の影響が大きい場面も多くあります。遅延化はあくまでユーザー体験と速度改善の手段と捉え、過度な期待はしないのが現実的です（2026年時点）。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. タイトルにキーワードを盛り込む
  2. SSL化
  3. scriptタグの記載場所
  4. サイトの引越し
  5. サイトマップとRSS/Atom
  6. CSSの遅延読み込み処理
  7. PageSpeed Insights
  8. Google Search Console
  9. Bing Webmaster Tools
2026-06-12 13:40:45 atom 130

人気ページ

最近更新/作成されたページ