Google PageSpeed Insightsを使用してWordPressサイトのパフォーマンスを計測したことはありますか？ともすると、Googleから「WordPressサイトのレンダリングを妨げるリソースを除外」するように忠告されたのではないでしょうか。今回の記事では、このテーマを扱います。
この時点で、きっと2つの疑問をお持ちでしょう。
- そもそも「レンダリングを妨げるリソース」って？
- WordPressで「レンダリングを妨げるリソースの除外」をするにはどうすればいいの？
この両方の疑問に答えます。具体的には、以下のように話を進めていくことにします。
「レンダリングを妨げるリソースの除外」が意味するものとは？
「レンダリングを妨げるリソース」とは何か、そして、これがサイトの読み込み時間に悪影響を与える理由を理解するために、ウェブブラウザがどのようにウェブページをレンダリングするのか、という基本から始めましょう。
訪問者があなたのサイトに辿り着いた時、その人の使うウェブブラウザは、基本的にあなたのサイトのコードの先頭から確認し、どんどん下へと読み進めます。上から下です。ここまでは、難しいことは何もありませんね？
そのプロセスで、CSSまたはJavaScriptファイルに遭遇すると、それのダウンロードと処理のために、「読み進める」行為が「一時停止」してしまいます。そのようなリソースのダウンロードと解析のために「一時停止」する時間は、本来であれば、より有意義に（ページにアクセスしたときに、すぐにサイトの一部を読み込んで表示するなど）使われるべきでしょう。
極端な例から、これがどのような問題になるのか見てみましょう。
サイトのフッターにお洒落なJavaScript効果があるとします。これの動作には「coolfooter.js」を使用します。そして、このスクリプトは、サイトのコードの上部で参照されるようになっています（実際の効果はフッターにあるので、訪問者がフッターのところまでスクロールするまで、そのデザインは表示されません）。
コードの構造は、大まかに以下のようになります。
- ヘッダーのメタ情報
- js
- スクロールせずに見えるコンテンツのHTML：訪問者がすぐに閲覧できるすべてのコンテンツ（ページを操作する前に表示される部分）
これが問題となる理由は、次のとおりです。
訪問者がサイトにアクセスすると、ブラウザは上から下へと読み込みを始めます。つまり（上の例だと）サイトをスクロールせずに見える部分のコンテンツのHTMLを解析・レンダリングする前に、coolfooter.jsファイルをダウンロード・解析するための待ち時間が発生することになります。
結果的に、スクロールせずに見えるコンテンツのHTMLを表示するのにより多くの時間がかかります。そのような状況で訪問者は「サイトの読み込みが遅い」と感じます。
Googleから「レンダリングを妨げるリソースの除外」が指示されたら、基本的には、こう解釈してください。「サイトのコード上部で、不要なリソースを読み込まないでください。訪問者のブラウザが、スクロールせずに見える部分をダウンロードするのにかかる時間が、長くなってしまいます…」ということです。
そこで、この記事のヒントを活用すれば、ページ上部が先に読み込まれるまで、特定のCSSやJavaScriptリソースの読み込みを遅らせることができるようになります。
レンダリングを妨げるリソースとは
「レンダリングを妨げるリソース」というと、通常、以下の2つが考えられます。
- CSS
- JavaScript
これと同時に、すべてのCSS、JavaScriptファイルがレンダリングを妨げるわけではないので、この点を理解することも重要です。
たとえば、主要なCSSであれば、上部近くで読み込むことが重要です。そうしないと、訪問者に対して、スタイルのないコンテンツのフラッシュ（FOUC）として知られる現象がもたらされてしまいます。
画像はレンダリングを妨げるリソースなのか
答えは「いいえ」—画像はレンダリングを妨げるリソースではありません。ファイルサイズを小さくするために画像を最適化することは重要ですが、画像配信方法の最適化について心配する必要はありません。
サイトにレンダリングを妨げるリソースがあるかどうかテストする方法
Google PageSpeed Insightsを使えば、自分のWordPressサイトに現在、レンダリングを妨げるリソースがあるかどうか確認できます。
テストしたいサイトのURLを入力しましょう。レンダリングを妨げるリソースの問題がある場合、PageSpeed Insightsの「改善できる項目」の下、「レンダリングを妨げるリソースの除外」セクションに各リソースが一覧表示されます。
「レンダリングを妨げるリソース」をどのように「除外」できるのか
心配はご無用です—手動で行う必要はありません。次のセクションでは、「レンダリングを妨げるリソースを除外」できるWordPressプラグインをご紹介します。
ただし、プラグインをただ使うだけでなく、裏でどんなことが行われているのか理解しておくことをお勧めします。
レンダリングを妨げるJavaScriptを除外する方法
レンダリングを妨げるJavaScriptを除外する方法は、いくつもあります。これの詳細は「JavaScriptの解析を遅延させる方法」についての記事で説明していますが、主な方法を掻い摘むと、次のとおりです。
- Async属性 – HTMLパーサー（つまり、訪問者のブラウザなど）が残りのHTMLを解析しながらJavaScriptをダウンロードできるようにします。つまり、ファイルのダウンロード中に解析が完全に停止することを防ぎます。ただし、ひとたびダウンロードすると、スクリプトを実行するためにHTMLパーサーを一時停止します。
- Defer属性 – HTMLパーサーに、残りのHTMLを解析しながらJavaScriptをダウンロードさせ、さらに、HTML解析が完了するまでスクリプトの実行を待ちます。
Growing with the Webによるこのイラストを見ると、2つの違いがよくわかります。
defer属性を使用する利点として、スクリプトがコードに現れる順序で実行されます。
async属性の働きは違います。すべてのJavaScriptリソースにasync属性を適用すると、問題が発生することがあります。というのも、ドキュメントの前の方にあるリソースに依存する他のリソースを頻繁に破損する可能性があるためです。async属性が引き起こす最も一般的な問題は、jquery.jsがドキュメントに追加される前に、破損状態のjQueryリソースの読み込みが試行されることです。
レンダリングを妨げるCSSを除外する方法
スクロールせずに見えるコンテンツをレンダリングするために欠かせないCSSを遅延させないように注意する必要があるため、レンダリングを妨げるCSSを除外するのは少し複雑です。理想的には以下のように行います。
- スクロールせずに見えるコンテンツのレンダリングに欠かせないスタイルを特定し、それのスタイルをHTMLのインライン要素として設定する
- CSSファイルを読み込むlink要素にmedia属性を使用して、条件付きの、つまり、特定のデバイスまたは状況にのみ必要なCSSリソースを指定する
- 残りのCSSリソースは非同期で読み込む必要あり：通常、遅延や非同期のJavaScriptと共に残りのCSSリソースを追加することで実施されます。正直なところ、どんどん込み入った話になります—間違いなくフロントエンドエンジニアの領域です。あなたがフロントエンドエンジニアなら素晴らしいことですが、読者のほとんどの方々は、そうではありません。幸いなことに、今回の記事は、WordPressに関するものです—適切なプラグインを使用すれば、サイトに影響を与えるレンダリングを妨げるJavaScriptやCSSリソースを除外したり、数を大幅に削減したりできます。
WordPressプラグインでレンダリングを妨げるCSSやJavaScriptリソースを除外する方法
WordPressでレンダリングを妨げるリソースを除外する方法を示すために、レンダリングを妨げるCSSとJavaScriptの組み込まれた簡単なテストサイトをご用意しました。2種類のプラグインを使用してレンダリングを妨げるリソースを除外する方法をご説明します。
- Autoptimize + Async JavaScript (無料)
- WP Rocket (有料)
参考までに、CSSとJavaScriptの配信を最適化する前のテストサイトは次のとおりです。
Google PageSpeed Insightsを使用して変更をテストするときの注意点がこちら—Googleはその結果を数分間キャッシュします。素早く以下を行うと…
- 最適化されていないサイトをテスト
- このセクションのプラグインのいずれかを有効化
- サイトをもう一度テスト
…その後、Googleがキャッシュをリセットするまで、最適化されていないサイトの結果が引き続き表示されることになります。ですので「プラグインが機能しなかった」と取り乱す前に、Googleがキャッシュをクリアするまで数分待ちましょう。
Autoptimize + Async JavaScriptプラグインでレンダリングを妨げるリソースを除外する方法
AutoptimizeとAsync JavaScriptは、同一の開発者が公開している2つの無料プラグインです。これらを組み合わせることで、CSSとJavaScriptの両方の配信を最適化できます。
両方のプラグインをインストールしたら、「設定」→「Async JavaScript」に移動して、次の操作を行います。
- 上部にある「Enable Async JavaScript」チェックボックスをオンにする
- 「Quick Settings」ボックスで「Apply Async」または「Apply Defer」を選択
「Async」がサイトで問題を引き起こした場合には「Defer」を試してみるか「jQuery」を除外する（プラグインにはこのオプションあり）ことをお勧めします。
「Async JavaScript」プラグインの設定が終わったら、次は、「設定」→「Autoptimize」に移動して、次の操作を行います。
- 「Optimize JavaScript Code」のボックスにチェックを入れる
- 「Optimize CSS Code」のボックスにチェックを入れる
上級者であれば、追加でJavaScriptやCSSの最適化設定をいじるのもいいでしょう。しかし、ほとんどのサイトはデフォルトのままで問題ありません。
AutoptimizeとAsync JavaScriptの両方を設定した後、テストサイトは PageSpeed Insightsの「レンダリングを妨げるリソースの除外」監査に合格しました。
このようなファイルをもっと削除したい場合には、Autoptimizeを使用して、重要なCSSを手動でインライン化することもできます。ただし、これにはある程度の開発の知識が必要なので、自信がなければやめておきましょう。
必要とあれば、プラグインを個別に使用することもできます。しかし、両プラグインが同じ開発者からのものであり、互いに連携するよう構築されていることを考えると、ほとんどのサイトにとって両者を併用するのが得策です。
WP Rocketでレンダリングを妨げるリソースを除外する方法
WP Rocketは、高い人気を誇る有料のWordPressパフォーマンス＆キャッシュプラグインです。
通常、KinstaでホスティングしているWordPressサイトはキャッシュプラグインを使用できません。これは、高速Nginx FastCGIキャッシュを介してサーバーレベルで既にキャッシュが実装されているためです。
ただし、WP Rocketは特別にKinstaと統合できる仕様で、Kinstaのキャッシュとうまく連携します。WP Rocketは、WordPressサイトでレンダリングを妨げるCSSやJavaScriptリソースを除外するなど、WordPressのパフォーマンスを改善するためにキャッシュ以上のことをこなします。
WP Rocketをインストールして有効化にしたら、「File Optimization」タブに移動します。次に、次の2つのオプションを有効にします。
- 「CSS Files」セクションにある「Optimize CSS delivery」
- 「JavaScript files」セクションにある「Load JavaScript deferred」：「 Safe Mode for jQuery」をオフにして実験することができます。ただし、サイトのフロントエンドで問題が発生した場合には、これが原因の可能性が高いので、Safe Mode for jQueryを再度有効にする必要があります。
これら2つの機能を有効にした後、テストサイトをPageSpeed Insightsでチェックしたところ「レンダリングを妨げるリソースの除外」監査に合格しました。WP Rocketは、Autoptimize ＋ Async JavaScriptよりも多くのレンダリングを妨げるリソースを除外することに成功しています。
以上です。このような手法で、WordPressウェブサイトのレンダリングを妨げるリソースを除外できます！
まとめ
レンダリングを妨げるリソースがあると、ブラウザでスクロールせずに見えるWordPressサイトのコンテンツのレンダリングが遅れます。これは、最初の段階で必要のないファイルがダウンロードされることに起因します。
訪問者に対してページの一部をより速く表示する（読み込みを素早くする）には、その場で必要とされていないリソースの読み込みを遅らせる必要があります。
WordPressでレンダリングを妨げるリソースを除外するには、プラグインが使用できます。
無料の手段が必要であれば、同じ開発者の2つのプラグインであるAutoptimizeとAsync JavaScriptが使用できます。
有料でも問題なければ、WP Rocketがあります。WPRocketはKinstaと相性のいい設計です。そのほか他にも多くの面でWordPressサイトのパフォーマンスの調整ができます。
WordPressのレンダリングを妨げるリソースを除外する方法について、ご質問はございますか？コメント欄でお聞かせください！
コメントを残す