PageSpeed Insightsで「レンダリングを妨げるリソース」が警告された場合の対処法【JavaScript・CSS編】

PageSpeed Insightsでサイトのスコアを確認したところ、「レンダリングを妨げるリソースの除外」という項目が警告として表示されました。スコアは64/100。この警告を解消することでページのパフォーマンスが大幅に改善できると示されていたので、実際に対処してみました。

ページのレンダリングとは、HTMLや CSS などの記述をブラウザが解析して画面に描画する処理のことです。JavaScriptやCSSファイルがこの処理の途中に割り込むと、描画が一時停止して表示開始が遅れます。私のサイトではスクリプトが2個・CSSが5個の計7ファイルがレンダリングをブロックしていると指摘されていました。

JavaScriptのレンダリングブロックを解消する方法

スクリプトリソースが2個ブロックしているとの警告でした。Googleが案内してくれる対処方法は主に2種類あります。

ひとつ目は、jsファイルの内容をHTMLページ内に直接書き込む「インライン展開」です。外部ファイルへのリクエストがなくなる分だけ速くなりますが、ファイルサイズが大きいと逆効果になるため、小規模なスクリプトに限定した手法です。

ふたつ目は、読み込みタイミングを調整する方法です。scriptタグに async 属性を追加すると、JavaScriptをバックグラウンドで非同期にダウンロードできるため、HTMLの解析をブロックしません。ページの表示完了後にスクリプトを実行させたい場合は defer 属性が適しています。

async属性を付与することで、スクリプトをバックグラウンドでダウンロードしながらHTMLの解析を継続できます。ページのレンダリングをブロックせずにJavaScriptを読み込む標準的な手法です。

2つのjsファイルはいずれも内容が多く、インライン展開は現実的ではないと判断したため、async属性を付与する方法で対処することにしました。WordPressでは直接scriptタグを書き換えにくいため、JavaScriptの読み込みを最適化するプラグインが便利です。当時はHead Cleanerで対処しましたが、現在は長期間更新が止まっており、代わりにAutoptimizeやWP Rocketなど継続的にメンテナンスされているプラグインが広く使われています。

設定後、PageSpeed Insightsからスクリプトリソースのブロック警告が消えたことを確認しました。

CSSのレンダリングブロックを解消する方法

次にCSSリソースが5個ブロックしているという問題に取り組みました。Googleが案内してくれる対処法はJavaScriptと同様で、「インライン展開」が主な方法として紹介されています。ただし、CSSファイルは大規模になりがちなため、全体をインライン化すると逆に読み込みが重くなる場合があります。

CSSのレンダリングブロック解消には、主に次のアプローチがあります。

まず「クリティカルCSS」と呼ばれる手法です。ファーストビューの表示に必要なCSSだけをHTMLのheadにインラインで記述し、残りは非同期で読み込みます。ユーザーが最初に目にする部分の描画を速めつつ、残りのスタイルは後から適用されます。

次に、CSSファイルの圧縮（ミニファイ）です。不要な改行・スペース・コメントを取り除き、ファイルサイズを小さくすることでダウンロード時間を短縮します。WordPressではAutoptimizeなどのプラグインがCSS圧縮を自動で行ってくれます。

実際に対象の5ファイルを確認したところ、3ファイルはすでに圧縮済みで、追加の最適化余地がほとんどありませんでした。残り2ファイルを手動で最適化しましたが、PageSpeed Insightsのスコアに大きな変化は見られませんでした。もともと最適化済みのファイルが多かったためと考えられます。

まとめ

「レンダリングを妨げるリソースの除外」はPageSpeed Insightsで頻繁に指摘される項目です。JavaScriptはasync・defer属性、CSSはクリティカルCSS分離や圧縮が主な対策になります。WordPressを使っている場合は最適化プラグインを活用すると効率的に対処できます。

CSSとJSの遅延読み込みを組み合わせた実践的な手順は「レンダリングを妨げるリソースの除外」の解決方法にもまとめていますので、あわせて参考にしてみてください。