Webサイトの表示速度を改善しようとPageSpeed Insightsを試したものの、うまく成果につながらないと感じている方も多いのではないでしょうか。そのような場合は、レンダリングを妨げるリソースの設定を見直すことで、改善できるかもしれません。
この記事では、レンダリングを妨げるリソースの除外の意味から、WordPressで簡単にできる具体的な解決策まで解説します。プラグインやテーマの設定を見直すだけで、PageSpeed Insightsのスコアアップと快適なサイト表示を実現できます。
レンダリングを妨げるリソースとは
まず、「レンダリングを妨げるリソース」という言葉を分解して考えてみましょう。
- レンダリング：ブラウザがWebページを画面に描画（表示）すること
- リソース：ページを表示するために必要な部品（CSSやJavaScriptファイルなど）
Webページの表示は、家を建てるプロセスに例えられます。HTMLが設計図、CSSがデザイン、JavaScriptが機能を担います。
壁紙が決まらず内装工事が進まない状況と同じく、CSSやJavaScriptの読み込み待ちでページ表示が止まってしまうのが「レンダリングを妨げる」状態です。
レンダリングを妨げるリソースになる条件
すべてのCSSやJavaScriptファイルが、必ずしもレンダリングを妨げるわけではありません。問題となるのは主にページの初期表示、つまりユーザーが最初に目にする画面（ファーストビュー）を描画するために、先に読み込む必要があるとブラウザが判断するファイルです。
具体的には、以下のような条件に当てはまるものが該当します。
- HTMLの<head>タグ内で読み込まれているCSSファイル
- <head>タグ内で読み込まれている、asyncやdefer属性がついていないJavaScriptファイル
上記のファイルは、ブラウザがページの骨格であるHTMLを読み進める途中で、その処理を中断させてしまいます。この一時停止が、レンダリングブロック、つまり表示遅延の直接的な原因です。
Lighthouseがレンダリングブロックと判定する条件
PageSpeed Insightsの診断エンジンであるLighthouseは、以下の特定の条件に当てはまるリソースをレンダリングブロックとして具体的に指摘します。これにより、どのファイルを最適化すべきかを正確に把握できます。
| リソースの種類 | Lighthouseがレンダリングブロックと判定する条件 |
| スクリプト （<script src=”…”>） | ・HTMLの<head>セクション内にある ・defer 属性がない ・async 属性がない |
| スタイルシート （<link rel=”stylesheet”>） | ・disabled 属性がない ・media 属性の値が、ユーザーのデバイスタイプに一致する |
つまり、ページの表示に直接関係なさそうな印刷用のCSSなどを除き、<head>内で特別な設定なしに読み込まれているCSSやJavaScriptは、ほぼすべてが指摘の対象となり得るでしょう。
レンダリングを妨げるリソースの具体例
実際のWordPressサイトでは、どのようなファイルがレンダリングを妨げるリソースとして指摘されやすいのでしょうか。以下に代表的な例をまとめました。
| リソースの種類 | 具体例 | 備考 |
| CSSファイル | ・WordPressテーマの基本スタイルシート （style.css） ・プラグインが追加するデザイン用のCSSファイル ・Google FontsなどのWebフォントを読み込むためのCSS | サイト全体のデザインやプラグインの機能に関わるため必須ではあるものの、読み込み方の工夫が必要である |
| JavaScriptファイル | ・WordPress本体に標準で含まれるjQuery ・お問い合わせフォームやスライダーなどのプラグインが追加するJavaScriptファイル ・広告やアクセス解析用の外部スクリプト | ページの動的な機能や、外部サービスとの連携を制御する |
これらのファイルは、読み込むタイミングや方法を最適化することで、表示速度を改善できます。
レンダリングを妨げるリソースの確認方法
改善作業を始める前に、まずはWebサイトのどこに問題があるのかを正確に把握することが重要です。そのために、Googleが無料提供するPageSpeed InsightsとChrome内蔵のLighthouseを使います。初心者の方は、まずPageSpeed Insightsから試してみましょう。
PageSpeed Insightsでの確認手順
PageSpeed Insightsを使えば、誰でも簡単にサイトの問題点を発見できます。
- PageSpeed Insightsのサイトにアクセスする
- WebサイトのURLを入力し、「分析」ボタンをクリックする
- 分析結果が表示されたら、ページを下にスクロールし、「診断」セクションの中にある「レンダリングを妨げるリソースの除外」という項目を探す
- 「レンダリングを妨げるリソースの除外」をクリックすると、原因となっているCSSやJavaScriptファイルの一覧がURLとともに表示される
ここに表示されたファイルが、今回対処すべきターゲットです。各ファイルがページの表示速度をどれくらい遅らせているかの目安時間も確認できるため、改善の優先順位を判断するのにも役立ちます。
Lighthouse（Chrome DevTools）での確認方法
より詳細な分析を行いたい場合は、Chromeブラウザの開発者ツール（DevTools）内にあるLighthouseが便利です。
- Google Chromeで診断したいWebサイトを開く
- F12キー（Macの場合は Command+Option+I）を押して、デベロッパーツールを開く
- 上部のタブから「Lighthouse」を選択する
- 「ページ読み込みの分析」ボタンをクリックして診断を開始する
- 分析後、PageSpeed Insightsと同様にレポートが表示されるため、「レンダリングを妨げるリソースの除外」の項目で詳細を確認する
Lighthouseでは他のパフォーマンス指標との関連性など、より技術的な情報も得られるため、原因を深く探りたい場合に役立ちます。
レンダリングを妨げるリソースの改善策3ステップ
原因となっているファイルを特定できたら、いよいよ改善作業に入ります。これから行う対策は専門的に聞こえるかもしれませんが、考え方は非常にシンプルです。
- 仕分ける
- ページ表示にすぐ必要なものと、後で読み込んでも良いものを区別する
- 最優先で処理する
- すぐ必要なものは、HTMLファイルに直接書き込むなどして最速で読み込ませる
- 後回しにする
- 後で読み込んでも良いものは、ページの表示が終わった後に読み込ませるか、不要なら削除する
この3つのステップを踏むことで、ブラウザの作業を邪魔することなく、スムーズにページを表示させることができます。具体的な方法について見ていきましょう。
ステップ1：クリティカルリソースと非クリティカルリソースを分ける
まず、Webサイトで読み込んでいるリソースを2種類に仕分けします。
- クリティカルリソース：ページの初期表示（ファーストビュー）に不可欠なリソース
- 非クリティカルリソース：スクロールしないと見えない部分や、すぐには使わない機能のリソース
例えば、サイトのヘッダーロゴやナビゲーションメニューのスタイルは、クリティカルです。一方で、フッター部分のデザインや、記事の途中にあるスライダーの機能などは、非クリティカルといえます。
ブラウザに「まずクリティカルなものだけを最優先で処理して」と指示することで、ユーザーの体感速度を大幅に向上させることができます。
ステップ2：クリティカルCSSをインライン化する
次に、仕分けたクリティカルリソースの扱い方です。特にCSSについては、インライン化という手法が非常に効果的です。
インライン化とは、外部のCSSファイルをわざわざ読みに行くのではなく、HTMLファイルの中に直接CSSコードを書き込んでしまう手法を指します。これにより、ブラウザは別途CSSファイルを取りに行く手間が省け、最速でページの表示を開始できます。
ただし、インライン化するのはファーストビューに必要な最小限のCSS（クリティカルCSS）だけにしましょう。コードが長すぎると、逆にHTMLファイル自体の読み込みが遅くなるため注意が必要です。
ステップ3：非クリティカルJS・CSSは非同期化・遅延読み込み・削除する
ファーストビューに不要な非クリティカルリソースは、ページの表示を妨げないように読み込み方を工夫します。主な手法は以下のとおりです。
| 手法 | 説明 | 主な対象 |
| 非同期読み込み （async） | ページの骨組み（HTML）の読み込みと並行してファイルをダウンロードする。 ダウンロードが完了次第、ページの処理を中断してスクリプトを即時に実行する | 外部の広告スクリプトなど、実行順序が重要でないJavaScriptファイル |
| 遅延読み込み （defer） | ページの骨組みの読み込みと並行してダウンロードし、骨組みの読み込みがすべて完了してからスクリプトを実行する | jQueryなど、他の機能の土台となるJavaScriptファイル |
| 削除 | Webサイトで使用していない機能のCSSやJavaScriptは、原因となっているプラグイン自体を停止・削除する | 現在使っていないプラグインのCSS・JavaScriptファイル |
上記の手法を適切に使い分けることで、ページの初期表示速度を改善できます。
【実践編】WordPressでレンダリングを妨げるリソースを解決する3ステップ
ここからは、WordPressサイトで実際に行う改善手順を解説します。専門知識がなくても取り組めるように、以下の3つのステップで進めます。
ステップ1：定番プラグイン「Autoptimize」でJS・CSSを自動最適化
手軽で効果的な方法が、最適化プラグイン「Autoptimize」を利用することです。このプラグインが、これまで説明してきたJavaScriptやCSSの圧縮、結合、読み込み順の調整などを自動で行います。
まずはWordPressの管理画面から「プラグイン」>「新規追加」と進み、「Autoptimize」で検索してインストール・有効化してください。有効化後、管理画面の「設定」>「Autoptimize」から設定画面を開きます。
次に「JavaScript、CSS & HTML」タブにある「JavaScript オプション」セクションで「JavaScriptコードを最適化」にチェックを入れます。
これだけで、複数のJavaScriptファイルが1つにまとめられ（連結）、不要な空白などが削除（圧縮）されてファイルサイズが小さくなる仕組みです。
同様に「CSS オプション」セクションで「CSSコードを最適化」にチェックを入れます。こちらもCSSファイルが連結・圧縮され、読み込みが効率化されます。
設定を変更したら、必ず画面下部の「変更を保存してキャッシュを削除」ボタンを押してください。その後、シークレットモードなどでサイトを開き、表示が崩れていないか確認しましょう。
もし表示がおかしくなった場合は、チェックを一つずつ外して原因を特定するか、設定を一度元に戻してください。特定のプラグインのファイルが最適化と相性が悪いことが原因である可能性があります。
ステップ2：プラグインで解決しない特定リソースへの対処法
Autoptimizeを導入しても、PageSpeed Insightsでまだいくつかのリソースが指摘されることがあります。特に「Google Fonts」や「jQuery」は、多くのWebサイトで共通の原因となりやすいため、個別に対策しましょう。
Google Fontsの読み込みを最適化する
Google Fontsは、手軽に美しいフォントを導入できる便利なサービスですが、外部のGoogleサーバーからフォントデータを読み込むため、その通信がレンダリングブロックの原因となります。
Autoptimizeの設定画面「追加」タブにある「Googleフォント」の項目で、「結合とリンクを head に配置」または「結合とインライン化」を選択すると最適化できます。まずはここから試してみるのが簡単でおすすめです。
他にも、お使いのテーマ（特にCocoonやSWELL）にフォント読み込みの最適化機能がある場合は、プラグインの設定と重複しないよう、テーマ側の設定を優先するのが良いでしょう。
jQueryを遅延読み込み（defer）する
jQueryは、多くのWordPressプラグインやテーマが動作の土台として利用している非常に重要なライブラリです。しかし、通常は<head>内で読み込まれるため、強力なレンダリングブロック要因となります。
これを解決する有効な手段が「遅延読み込み（defer）」です。ページの表示に必要なすべての処理が終わった後にjQueryを読み込む方法で、表示速度とサイトの機能性を両立させることができます。
この設定はAutoptimizeだけでは難しいため、追加で「Async JavaScript」のようなプラグインを導入し、jQueryに defer 属性を付与する設定を行うのが一般的です。
ただし、設定を誤るとサイトが正しく動作しなくなるリスクもあるため、バックアップを取ったうえで慎重に作業してください。
ステップ3：人気テーマの設定を見直す【Cocoon / SWELL】
人気テーマには、サイト高速化のための機能が標準で搭載されています。プラグインとテーマの機能が重複すると、かえって問題が起きることもあるため、Webサイトのテーマ設定を一度確認しましょう。
Cocoonの場合
「Cocoon設定」>「高速化」タブに、CSSやJavaScriptの縮小化、遅延読み込みといった項目があります。Autoptimizeをメインで使う場合は、Cocoon側の設定はオフにして、最適化をプラグインに一本化するのがおすすめです。
SWELLの場合
「SWELL設定」>「高速化」タブで、CSSのキャッシュやJavaScriptの遅延読み込みなど、高度な設定が可能です。SWELLは非常に高機能なため、まずはテーマの機能を最大限活用し、それでも改善しきれない部分をAutoptimizeで補う、という使い分けが良いでしょう。
Webサイトの状況に合わせて、テーマの機能とプラグインのどちらで最適化を行うか、方針を一つに絞ることが重要です。
【応用編】画像リソースの最適化で表示速度をさらに改善
CSSやJavaScriptのレンダリングブロックを解消できたら、次はページの表示速度に大きく影響する画像の最適化にも挑戦しましょう。
画像のファイルサイズを小さくしたり、読み込み方を工夫（遅延読み込み）したりすることで、PageSpeed Insightsのスコアをさらに向上させ、ユーザーの体感速度を劇的に改善できます。
特に画像が多いサイトでは、AIを活用した画像最適化サービス「Imgix」のようなツールの導入が非常に効果的です。Imgixは画像の圧縮や次世代フォーマットへの変換を自動で行い、サイト全体のパフォーマンスを底上げしてくれるツールです。
例えば、URLにパラメータを付けるだけで、圧縮や最適フォーマットの配信、リサイズまでリアルタイムに処理できます。画像を1枚用意すれば、ページやデバイスごとに必要なサイズを生成でき、複数バリエーションの作成・管理が不要になります。
さらにCDNキャッシュで高速配信を実現できるため、表示体験の改善と運用工数の削減に直結するでしょう。
まとめ レンダリングを妨げるリソースを減らし、表示速度をアップさせよう
今回は、レンダリングを妨げるリソースの除外と、WordPressでの具体的な解決策を紹介しました。
初心者の方は、まずAutoptimizeを導入し、基本設定を試してみてください。多くの場合、これだけで改善が期待できます。
プラグイン追加やテーマ更新時には、再度PageSpeed Insightsでスコアを確認しましょう。快適なサイト表示は、読者満足度とSEO評価の両方を向上させます。
