WordPressでレンダリングブロックリソース(CSS・JavaScript)を排除してページ表示速度を改善する方法

WordPressユーザーなら、サイトのパフォーマンス向上を最優先課題の一つとして考えることを強くおすすめします。読み込みの速いページを訪問者に提供できれば、検索エンジンの順位向上、トラフィックの増加、そして優れたユーザー体験の実現につながります。

サイト最適化の重要なステップが、Google PageSpeed Insights、GTmetrix、Pingdom Website Speed Testなどの計測ツールを使ったページ分析です。これらのサービスは、URLのパフォーマンスを評価し、ページサイズや読み込みにかかる時間を確認できます。

さらに、これらのツールは単に分析するだけでなく、読み込み時間を短縮するために何を改善すべきかも教えてくれます。たとえば「未使用のCSSを削除せよ」「画像を軽量化せよ」といったアドバイスが表示されることがあります。

その中でも頻繁に表示されるのが「WordPressのレンダリングブロックリソースを排除せよ」という指摘です。本記事では、レンダリングブロックリソースとは何かを解説し、それを取り除くことでページの表示速度をどう改善できるかを紹介します。

WordPressにおけるレンダリングブロックリソースとは?

サイト最適化とは、要するにウェブページをいかに素早く訪問者へ届けるかという課題です。典型的なページには、さまざまな要素が含まれています。

誰かがあなたのサイトのページにアクセスすると、ブラウザはページのコードを上から下へ処理していきます。これは一般に「ページのレンダリング」と呼ばれます。

この処理の途中で外部のCSSファイルやJavaScriptファイルへの呼び出しが見つかると、ブラウザはレンダリングを一時停止し、それらのファイルをダウンロードしてから処理を再開しなければなりません。こうしたリソースは、レンダリングプロセスを妨げるため「レンダリングブロック(描画阻止)」とみなされます。

レンダリングブロックリソースは、ブラウザがユーザーにメインコンテンツを表示するまでの時間を長引かせます。これはGoogleが「First Meaningful Paint(FMP)」と呼ぶ、重要なパフォーマンスおよび検索順位の指標に直結します。

なお、テキストや画像はレンダリングブロックにはなりません。また、すべてのCSSやJavaScriptファイルがブロック要因になるわけでもありません。ページのレンダリングを遅らせるのは、主に容量の大きいCSS・JavaScriptファイルです。

WordPressでレンダリングブロックリソースを特定する方法

WordPressのレンダリングブロックリソースは、パフォーマンス計測ツールを使えば簡単に特定できます。調べたいページのURLを入力するだけです。

Google PageSpeed Insightsでは、レンダリングブロックリソースがページの初回描画にどれだけ時間を追加しているかが表示されます。その下には、各リソースのURLとファイルサイズの内訳が示され、これらを排除した場合にどれだけ速くなるかも確認できます。

GTmetrixでも、各レンダリングブロックリソースのファイルサイズやダウンロード所要時間が一覧表示されます。

Pingdom Website Speed Testにはレンダリングブロック専用のセクションはありませんが、「File Requests」エリアからページを遅くしている原因を把握できます。

ここではアイコン、フォント、JavaScriptファイルといったレンダリングブロックリソースが確認でき、各リソースのURL・ファイルサイズ・ダウンロード時間が表示されます。File Requestsエリアは、どの画像が読み込み時間を増大させているかを見るのにも役立ちます。

WordPressはサイト全体でさまざまなCSSやJavaScriptファイルを読み込むため、すべてのレンダリングブロックリソースを検出するには、複数ページでテストを実行することが重要です。たとえば、ホームページ、ブログ一覧、ブログ記事、固定ページ、お問い合わせページなど、主要なページで計測するとよいでしょう。

クリティカルリソースの特定

リソースが「クリティカル(重要)」とみなされるのは、ページの初回描画に必要不可欠な場合です。それ以外のリソースは非クリティカルと判断されます。

クリティカルリソースを特定する最も手軽な方法の一つが、Chrome DevToolsの「Coverage(カバレッジ)」タブの活用です。初回のページ表示に実際に必要だったコードの割合が正確に可視化され、クリティカルなスタイルは緑色、非クリティカルなスタイルは赤色で表示されます。

下のスクリーンショットでは、WordPress.orgにおいて、レンダリングブロック対象のCSS・JavaScriptファイル内のコードの大部分が実際には使われていないことがわかります。多くのWordPressサイトでは状況はさらに深刻で、カバレッジテストでは使用率0%のファイルが複数検出されることも珍しくありません。

インライン呼び出しでWordPressのレンダリングブロックCSSを排除する

Googleは、レンダリングブロックリソースから重要なコードをすべて取り出し、HTMLページ内にインラインで記述することを推奨しています。ページの初回描画に不可欠なスタイルはheadセクション内のstyleブロックで定義でき、重要なJavaScript関数はscriptタグでページ内に直接記述できます。

ただし、テーマやプラグイン経由でCSSやJavaScriptが追加されるWordPressのような動的プラットフォームでは、クリティカルなスタイルを手作業で移動するのは現実的でない場合があります。そこで多くのWordPressユーザーは、NitroPackやCritical CSSなどのサービスを利用し、クリティカルなスタイルシートを自動的に抽出してheadセクション内にインライン表示させています。

サイトのスタイルが小さなCSSファイルに分かれている場合は、WordPressプラグイン「Asset CleanUp」を使って、小さなスタイルシートの内容を自動的にインライン化できます。

Async・DeferでWordPressのレンダリングブロックJavaScriptを排除する

WordPressのレンダリングブロックJavaScriptは、「Async」と「Defer」という2つの手法で排除できます。どちらの方法も、ファーストビュー領域のCSSやJavaScriptファイルがバックグラウンドでダウンロードされている間も、ブラウザがページのレンダリングを続行できるようにするものです。

ページによってはAsyncとDeferのどちらが適しているかが異なるため、両方を試してより良い結果をもたらす方を選ぶのが理想です。とはいえ、どちらを使ってもページの読み込み時間は短縮されます。

AsyncとDeferは、WordPressのパフォーマンス系プラグインを使えばサイト全体に一括適用できます。

私自身のブログでは、「Async JavaScript」というプラグインを使ってページのJavaScriptをdeferしています。Autoptimizeの開発者Frank Goossens氏が手がけたこのプラグインは、重要度の低いJavaScriptファイルにAsyncやDeferを適用でき、jQueryファイルに対して個別の設定を行うことも可能です。

また、セットアップウィザードがGTmetrix上で複数回テストを実行し、あなたのサイトに最適な設定を導き出してくれます。

私がAsync JavaScriptを選んだ理由は、サイト全体にAsyncまたはDeferを自動適用してくれる点です。これは間違いなく、WordPressのレンダリングブロックリソースを排除する最も簡単な方法ですが、「HTTP/2 Push Preload」というプラグインを使えば、さらに良い結果が得られる可能性もあります。

Chromeのカバレッジツールや、GTmetrix・Google PageSpeed Insightsなどの計測サービスでレンダリングブロックリソースを特定したら、HTTP/2 Push Preloadを使えばファイル単位でAsyncとDeferを適用できます。

各ファイルごとにAsyncとDeferのパフォーマンスを検証する手間を惜しまなければ、リソースごとに最適な手法を見つけられます。その結果、ページ読み込み時間をより大きく短縮できるでしょう。

どのプラグインでAsyncとDeferを適用する場合でも、設定後に必ずサイトのデザインを確認し、表示が崩れていないかチェックしてください。

このトピックについてより詳しく知りたい方は、「WordPressでDeferとAsyncを使ってJavaScriptの解析を遅延させる方法」という記事も参考にしてください。

まとめ

WordPressのレンダリングブロックリソースは、ページの読み込み時間を大幅に増加させます。すべてのリソースがダウンロードされ実行されるまで訪問者には真っ白な画面が表示されるため、サイトのユーザー体験にも悪影響を及ぼします。

Chromeのカバレッジツールや、Google PageSpeed Insights・GTmetrixなどのサービスを使えば、レンダリングブロックリソースは簡単に特定できます。その後、Async JavaScriptやHTTP/2 Push PreloadといったWordPressプラグインを活用すれば、これらのリソースを効果的に排除できます。

最後までお読みいただきありがとうございました。

Kevin