【ページの表示速度改善】ファーストビューのCSSのインライン
Webコンサルタントの松崎です。 これまで「表示速度の改善はユーザーへの配慮で一番大事です」というテーマで、「画像の軽量化のやり方」や「次世代画像形式WebP・AVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」、「Webフォントの見直し」、「遅延読み込みのやり方」、「ファイルサイズの圧縮」、「キャッシュを活用する設定」など、ホームページの表示速度を改善するための具体的な方法をご紹介してきました。 今回は「ファーストビューのCSSのインライン設定」について解説します。 [data-toc]{background:#ffffffd9;border:1px solid var(--color-border-medium-emphasis,#08121a4d);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px 16px}[data-toc] h2,[data-toc] ol,[data-toc] p{margin:0}[data-toc] .toc-header{align-items:center;display:flex;font-weight:700;gap:12px}:is([data-toc] .toc-header) h2{color:var(--color-text-medium-emphasis,#08121abd);font-size:.875em}[data-toc] .toc-empty-message{color:var(--color-text-low-emphasis,#08121a9c);font-weight:400}:is([data-toc] .toc-empty-message) p{font-size:.75em}[data-toc] ol{list-style:none;padding:0}:is([data-toc] ol) .last.collapse a{border:none}:is([data-toc] ol) a{border-bottom:1px solid var(--color-surface-tertiary,#08121a14);display:block;font-size:.75em;padding:6px 0;-webkit-text-decoration:none;text-decoration:none}[data-toc] .h4,[data-toc] a{color:var(--color-text-medium-emphasis,#08121abd)}[data-toc] .h2{font-weight:700}[data-toc] .h3{font-weight:400;margin-left:8px}[data-toc] .h4{font-weight:400;margin-left:16px}[data-toc] [role=button][aria-expanded]{align-items:center;display:flex;font-size:.75em;font-weight:700;gap:4px;justify-content:center;padding:4px 0;text-align:center;-webkit-text-decoration:none;text-decoration:none}[data-toc] [role=button][aria-expanded=true]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20.97 14.55c0 .26-.1.51-.29.71a.996.996 0 0 1-1.41 0l-7.29-7.29-7.29 7.29a.996.996 0 1 1-1.41-1.41l7.29-7.29c.78-.78 2.05-.78 2.83 0l7.29 7.29c.19.19.28.44.28.7'/%3E%3C/svg%3E")}[data-toc] [role=button][aria-expanded=false]:after,[data-toc] [role=button][aria-expanded=true]:after{background:var(--object-low-emphasis,#08121a9c);content:"";display:block;height:1rem;mask-size:contain;width:1rem}[data-toc] [role=button][aria-expanded=false]:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M3.05 9.45c0-.26.1-.51.29-.71a.996.996 0 0 1 1.41 0l7.29 7.29 7.29-7.29a.996.996 0 1 1 1.41 1.41l-7.29 7.29c-.78.78-2.05.78-2.83 0l-7.29-7.29c-.18-.19-.28-.44-.28-.7'/%3E%3C/svg%3E")}[data-toc]:has([role=button][aria-expanded=false]) .last:not(.collapse) a{border:none}[data-toc]:has([role=button][aria-expanded=false]) .collapse{display:none}[data-toc]:not(:has([role=button][aria-expanded])):not(:has(.collapse)) .last a{border:none}:is([contenteditable=true],.no-js,#no-js) [data-toc] .collapse{display:revert!important} 目次 ファーストビューとCSSの関係 CSSがレンダリングをブロックする理由 ファーストビューCSSのインライン化とは 例：通常のCSSファイルの読み込み方法 例：CSSをインライン化 インライン化のメリット 初期表示の高速化 ユーザーの使いやすさ向上 SEO評価の向上 インライン化の実装方法 1. 手動での実装 2. 自動抽出ツールを使う方法 3. WordPressプラグインを使う方法 4. Webサーバーの機能を使う方法 非同期CSSの読み込み方法 media属性を利用する方法 preload属性を利用する方法 実装時の注意点 インラインCSSのサイズ 異なるデバイスへの対応 キャッシュとの関係 メンテナンス面 ユーザーを待たせない思いやり CSSのインライン化でユーザーの使いやすさを向上 ページを開いた最初の画面（ファーストビュー）に必要なCSSだけを直接HTMLに埋め込むことで、表示速度を大幅に改善できる方法を見ていきましょう。ページをスムーズに表示させるこの設定について詳しく説明します。 ファーストビューとCSSの関係 あなたは、ホームページにアクセスした際に最初に目に入る部分「ファーストビュー」がとても大切だということを知っていますか。 ファーストビューとは、ページを開いたときにスクロールせずに見える範囲のことです。ユーザーの「第一印象」を決める部分で、そのホームページを見続けるかどうかをユーザーは直感的に判断します。 そして、そのファーストビューのレイアウトや見せ方を設定するのがCSSファイルで、通常、ホームページ全体のデザインを作る時に細かく設定されます。HTMLファイルとは別の外部ファイルとして作成され、HTML内の<head>タグ内で読み込まれます。 <head> <link rel="stylesheet" href="style.css"> </head> このような形でCSSファイルを読み込む場合、ブラウザはHTMLを解析する過程でCSSファイルをダウンロードし、解析が完了するまでページのレンダリング（描画）を一時停止します。 これが「レンダリングブロック」と呼ばれるページの読み込みが遅くなる問題です。 CSSファイルが大きかったり、通信環境が遅かったりすると、ユーザーは白い画面を長時間見て待たされることになります。 CSSがレンダリングをブロックする理由 なぜCSSはレンダリングをブロックするのか。 それは、ブラウザがページを正確に表示するために、全てのスタイル情報を先に把握しておく必要があるからです。 ブラウザはHTMLをもとに「DOMツリー」と呼ばれる構造を作り、CSSから「CSSOMツリー」というスタイル情報を作成します。そして、この2つのツリーを組み合わせて「レンダリングツリー」を構築し、画面に描画を行います。 もしCSSの読み込みを待たずにHTMLだけで描画してしまうと、後からCSSが適用されたときにレイアウトが大きく変更されてしまうことがあります。これを「FOUT（Flash of Unstyled Text）」といい、ユーザーの使いやすさを著しく低下させる要因となります。 なので、ブラウザはCSSの読み込みと解析が完了するまで、画面に何も表示しないようになっています。 ファーストビューCSSのインライン化とは ファーストビューの表示に必要な最小限のCSSのみを抽出し、HTMLファイルの<head>タグ内に直接記述（インライン化）する方法です。 例：通常のCSSファイルの読み込み方法 <head> <link rel="stylesheet" href="style.css"> </head> 例：CSSをインライン化 <head> <style> /* ファーストビューに必要な最小限のCSSをここに記述 */ header { background-color: #fff; } .main-visual { height: 400px; } /* 以下、ファーストビューに必要なCSSを続ける */ </style> <!-- 残りのCSSは非同期で読み込む --> <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"> </head> このようにすることで、ファーストビューの表示に必要なCSSはHTMLと一緒に読み込まれるため、外部ファイルをダウンロードする待ち時間がなくなります。さらに、ファーストビュー以外のCSSは非同期で読み込むため、初期表示を妨げません。 これは「クリティカルCSS」や「クリティカルレンダリングパス最適化」とも呼ばれる方法です。 インライン化のメリット ファーストビューのCSSをインライン化するメリットはいくつかあります。 初期表示の高速化 最も大きなメリットは、初期表示が高速化することです。 外部CSSファイルをダウンロードして解析する時間が削減されるため、ユーザーは素早くコンテンツを見ることができます。 スマホ環境や通信速度の遅い環境では非常に効果的です。 例えば、3G回線では外部CSSファイルのダウンロードに数秒かかることもありますが、インライン化により瞬時に表示が可能になります。 ユーザーの使いやすさ向上 スムーズな表示は、ユーザーの使いやすさ向上につながります。 Googleの調査によると、ページの読み込みが3秒を超えると53%のユーザーが離脱するとされています。初期表示が速くなれば、離脱率の低下や滞在時間の延長が期待できます。 また、ファーストビューが素早く表示されることで、ユーザーはすぐに情報を得たり、操作を始めたりすることができます。待ち時間の減少はストレスの減少につながります。 SEO評価の向上 Googleは「Page Experience」という指標を検索ランキングの要素として導入しており、その中の重要な要素として「Core Web Vitals」があります。中でも「LCP（Largest Contentful Paint）」という指標は、ページの主要なコンテンツが表示されるまでの時間を測定しています。 ファーストビューCSSのインライン化はLCPの改善に直結するため、SEO効果の向上も期待できます。 インライン化の実装方法 それでは、実際にどのようにファーストビューCSSをインライン化するのか、いくつかの方法を見ていきましょう。 1. 手動での実装 一番基本的な方法は、ファーストビューに必要なCSSを手動で抽出し、HTMLの<head>タグ内にインラインで記述する方法です。 【実装手順】 1ファーストビューの範囲を決定する（例：デスクトップで1366×768px、モバイルで375×667px内に表示される部分） 2ファーストビューに表示される要素に必要なCSSを特定し、抽出する 3抽出したCSSを`<head>`タグ内の`<style>`タグ内に記述する 4残りのCSSファイルは非同期で読み込むように設定する <head> <!-- ファーストビューに必要なCSS --> <style> header { background-color: #fff; padding: 10px 0; } .logo { width: 120px; height: auto; } .main-visual { height: 400px; background: url('hero.jpg') center/cover; } /* 以下、ファーストビューに必要なCSS */ </style> <!-- 残りのCSSを非同期で読み込む --> <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="style.css"></noscript> </head> これは簡単な方法ですが、適切なCSSの選定が難しく、ホームページの更新のたびに手動でインライン部分も更新する必要があるため、運用面での手間がかかります。 2. 自動抽出ツールを使う方法 ファーストビューに必要なCSSを手動で特定するのはすごく手間がかかります。そこで、自動的に抽出してくれるツールを利用する方法があります。 【代表的なツール】 Critical Path CSS Generator 「Critical Path CSS Generator」というオンラインツールを使うと、URLと全体のCSSを入力するだけで、ファーストビューに必要なCSSを自動的に抽出してくれます。 使い方 1「Critical Path CSS Generator」のサイトにアクセスする 2解析したいホームページのURLを入力 3そのホームページで使用しているCSSをすべて貼り付ける 4「Create Critical Path CSS」ボタンをクリック 5生成されたクリティカルCSSをコピーして、HTMLの`<head>`タグ内に貼り付ける Critical（Node.jsモジュール） Node.jsを使っている場合は、「Critical」というモジュールを使うことで、ビルドプロセスの一部としてクリティカルCSSの抽出を自動化できます。 const critical = require('critical'); critical.generate({ base: 'dist/', src: 'index.html', dest: 'index-critical.html', inline: true, width: 1300, height: 900, }); このようにして、ビルド時に自動的にクリティカルCSSを抽出してインライン化できます。 3. WordPressプラグインを使う方法 WordPressを使っている場合は、専用のプラグインを利用してクリティカルCSSの実装を簡単に行うことができます。 WP Critical CSS 「WP Critical CSS」は、CriticalCSS.comのサービスと連携して、WordPressサイトの各ページに自動的にクリティカルCSSを生成し適用するプラグインです。 【使い方】 WordPressの管理画面からプラグインをインストールして有効化する CriticalCSS.comのAPIキーを取得して設定する プラグインの設定画面から、どのようにクリティカルCSSを生成するかを設定する 自動的に各ページにクリティカルCSSが適用される Autoptimize 「Autoptimize」は、CSSやJavaScriptの最適化を行うプラグインですが、クリティカルCSSの機能も備えています。 【使い方】 WordPressの管理画面からAutoptimizeをインストールして有効化する 設定画面で「CSS Options」を開く 「Inline and Defer CSS」を有効にする 「Add Critical Path CSS」に、ファーストビューに必要なCSSを記述する 設定を保存すると、自動的にクリティカルCSSが適用される 4. Webサーバーの機能を使う方法 一部のWebサーバーでは、クリティカルCSSを自動的に生成・適用する機能を提供しています。 例えば、Google の PageSpeed Module は、Nginx や Apache などの Web サーバー向けのモジュールで、「prioritize_critical_css」というフィルターを使ってクリティカルCSSを自動的に処理してくれます。 非同期CSSの読み込み方法 ファーストビューCSSをインライン化した場合、残りのCSSファイルは非同期で読み込むことが重要です。 非同期で読み込むことで、初期表示が妨げられることなく、スクロールした時に必要なスタイルが適用されるようになります。 CSSファイルを非同期で読み込む方法はいくつかありますが、以下は一般的な方法です。 media属性を利用する方法 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="style.css"></noscript> この方法では、`media="print"`を指定することで、ブラウザは初期表示時にはこのCSSを印刷用と判断して非同期で読み込みます。そして、読み込みが完了したら`onload`イベントで`media="all"`に変更し、すべての表示に適用されるようにします。 <noscript>グ内のコードは、JavaScriptが無効な環境でも正しくCSSが読み込まれるようにするための対策です。 preload属性を利用する方法 <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="style.css"></noscript> rel="preload" as="style"を指定することで、ブラウザにリソースを先読みさせつつ、レンダリングをブロックしないようにします。そして、読み込みが完了したらonloadイベントでrel="stylesheet"に変更し、スタイルシートとして適用されるようにします。 実装時の注意点 ファーストビューCSSのインライン化を実装する際には、いくつかの注意が必要です。 インラインCSSのサイズ インラインCSSのサイズが大きすぎると、HTMLファイルのサイズが肥大化し、初期読み込み時間が増加してしまいます。一般的には、インラインCSSは14KB以下に抑えることが推奨されています。 これは、TCPの初期ウィンドウサイズが約14KBであり、これを超えるとサーバーとブラウザ間で追加の往復通信が必要になるためです。 異なるデバイスへの対応 ファーストビューの範囲は、デスクトップとモバイルで大きく異なります。そのため、レスポンシブデザインのホームページでは、どのデバイスを基準にファーストビューを定義するかを検討する必要があります。 一般的には、モバイルファーストの考え方に基づき、モバイル表示のファーストビューを優先することが多いですが、ユーザー層によっては、デスクトップを基準にすることも考えられます。 キャッシュとの関係 インラインCSSはHTMLファイルの一部となるため、HTMLファイルがキャッシュされない限り、毎回ダウンロードされることになります。一方、外部CSSファイルは一度ダウンロードされるとブラウザにキャッシュされ、次回のアクセス時には再ダウンロードが不要になります。 そのため、長期的にはファーストビューCSSのインライン化よりも、適切なキャッシュ設定の方が効果的な場合もあります。両方のアプローチをバランスよく組み合わせることが重要です。 メンテナンス面 インラインCSSは外部ファイルと比べてメンテナンス性が低下する傾向があります。特に手動で実装する場合は、ホームページの更新のたびにインラインCSSも更新する必要があり、運用コストが増加します。 自動化ツールやプラグインを活用することで、この問題をある程度軽減できますが、根本的な解決にはなりません。 ユーザーを待たせない思いやり ファーストビューCSSのインライン化も、表示速度改善の技術的な最適化でですが、それは「ユーザーを待たせない」という思いやりの表れです。 私たちが日常生活でお店に入るとき、入り口が汚れていたり、ドアが重くて開けにくかったりすると、そのお店に対する印象が悪くなりますよね。ホームページも同じです。初めて訪れたユーザーが、長い時間白い画面を見せられるだけでは、不信感や不快感を持ってしまいます。 今、瞬間的なコンテンツとの接触がSNSで当たり前となり、人が待てる時間はとても短くなっています。なので、ほんの数秒の遅さでビジネスの成否がわかれいます。それもあなたのの知らないところで。 ファーストビューを素早く表示することは「ユーザーをお待たせしない」という姿勢の表れであり、ユーザーの接客で最低限必要な取り組みです。 表示速度の改善は、ユーザーに優しい親切なWebサイトにするための取り組みの中でも重要な要素です。目に見えないところでの努力が、ユーザー満足度と成果の両方を高めることできます。 CSSのインライン化でユーザーの使いやすさを向上 ファーストビューCSSのインライン化は、ホームページの初期表示速度を大幅に改善する効果的な方法です。 外部CSSファイルのダウンロードと解析によるレンダリングブロックを解消することで、ユーザーは素早くコンテンツを閲覧できるようになります。 実装方法には、手動での実装、自動抽出ツールの利用、WordPressプラグインの活用、Webサーバー機能の使用など、様々なアプローチがあります。自分のホームページの特性や技術的な制約に合わせて、最適な方法を選ぶことが大切です。 また、インラインCSSのサイズ、デバイス対応、キャッシュとの関係、メンテナンス性などの注意点も考慮しながら実装することが重要です。 ファーストビューCSSのインライン化を適切に実施することで、ユーザー体験の向上、SEO効果の改善、コンバージョン率の向上など、多くのメリットが期待できます。ユーザーを待たせない、思いやりのあるホームページ作りに、ぜひ取り入れてみてください。 ホームページの表示速度でお悩みの方、表示が遅いけどどうしていいかわからない方は、ユーザーファーストの改善を徹底して行う当社Webコンサルティングを是非ご検討ください。 ユーザーファーストの視点で、快適なホームページづくりをお手伝いします。 初回相談は無料です。 いつでもお気軽にお問い合わせください。 ご相談・お問合せ｜中小企業のホームページ制作・webコンサルなら流楽お問合せ・ご相談は、お見積り前からしっかりとサポート致します。www.ryu-raku.co.jp
