レンダリングを妨げるリソースの除外の解決策【CSS・JavaScript】

Googleが提供している「PageSpeed Insights」でページスピードを計測すると、改善点としてレンダリングを妨げるリソースの除外という言葉が出てきた方は多いのではないでしょうか。

しかし、これらの言葉が何を意味しているのかが分からず、何から手を付ければ良いのかと頭を悩ませていることでしょう。

そこで本記事では、レンダリングを妨げるリソースの除外の概要を解説するとともに、確認方法や除外方法を解説します。また、WordPressの有用なプラグインもご紹介しますので、ページスピードを上げるためにもぜひ参考にしてください。

レンダリングを妨げるリソースとは

まずは、レンダリングを妨げるリソースとは何かについてご説明します。

レンダリングとは、Google ChromeなどのWebブラウザがHTMLやCSSといったコードを読み取り、ブラウザの画面上にWebサイトとして表示することを指します。

レンダリングが行われる際、WebブラウザはHTMLコードの上に書かれているコードから読み取り、CSSやJavaScriptといった外部ファイルについては、ダウンロードして必要な処理を行います。

このCSSやJavaScriptといった外部ファイルを読み込んで、処理を行なっている間、基本的にはWebブラウザはその次のHTMLファイルの読み込み等を実施しません。

そのため、外部ファイルの数が多かったり、サイズが重かったり、複雑な処理を行なっている場合には、Webブラウザが次のレンダリングに進むことができず（ブロックされ）、Webサイトの表示が遅れてしまう、という現象につながります。

レンダリングを妨げるリソースの概要

先程、レンダリングを妨げるリソースについてご説明しました。そこで、下記2つの注意点も把握しておくことが重要です。

• すべての外部ファイルがレンダリングを妨げているわけではない
• 画像はレンダリングを妨げるリソースにはならない

それぞれ順番に見ていきましょう。

すべての外部ファイルがレンダリングを妨げているわけではない

まず、すべての外部ファイルがレンダリングを妨げているわけではないことを理解しましょう。

たとえば、ページ上部に記述されているCSSを読み込まないと、ユーザーからすれば装飾のないただのHTMLコンテンツとなり、非常に読みづらく不便です。

したがって、主要なCSSであれば、できる限りページの上部で読み込ませることが大切です。

画像はレンダリングを妨げるリソースにはならない

次に、画像はレンダリングを妨げるリソースにはなりません。したがってページスピードが重くならない前提であれば、記述方法を無理に変更する必要はないということです。

ただし、画像はレンダリングを妨げるリソースにならないとは言え、ページスピードを遅延させる大きな原因であることは間違いありません。そのため、外部ツール等を利用して、画像自体を軽量化させる工夫は常に施すことが重要です。

レンダリングを妨げるリソースの確認方法

レンダリングを妨げるリソースは、Googleが提供している「PageSpeed Insights」で確認できます。「PageSpeed Insights」を開き、調査したいページのURLを入力し、まずはスコアを計測しましょう。

その際、改善できる項目に「レンダリングを妨げるリソースの除外」が表示されたら、基本的には改善する必要が出てきます。また同時に改善によって短縮できる時間も調査可能です。

レンダリングを妨げるCSSの除外方法

レンダリングを妨げるリソースの除外の概要をご説明したところで、ここでは具体的に、CSSの除外方法を解説します。下記3つの手順で試してみましょう。

• HTMLのインライン要素としてスタイルを設定する
• 特定の状況でのみ必要となるCSSを指定する
• 残りのCSSリソースを非同期で読み込む

それぞれ順番に解説します。

HTMLのインライン要素としてスタイルを設定する

HTMLのインライン要素としてスタイルを設定します。まずは、ユーザーがスクロールをしなくても閲覧できている部分の、レンダリングに必要となるスタイルを特定します。

その特定できた部分を、HTMLのインライン要素としてスタイルを設定します。

特定の状況でのみ必要となるCSSを指定する

次に、CSSファイルを読み込む「link要素」に対して、「media属性」を付与します。

具体的には、特定の状況、もしくは特定のデバイスにのみ必要なCSSリソースを指定し、その他のCSSは読み込まない設定を加えます。

残りのCSSリソースを非同期で読み込む

最後に、上記から残ったCSSのリソースを、非同期で読み込むよう設定します。非同期、もしくは遅延するJavaScriptとともに記述すれば問題ないでしょう。

レンダリングを妨げるJavaScriptの除外方法

先程、レンダリングを妨げるリソースのCSSに関して説明しました。ここでは、JavaScriptの除外方法を2つご紹介します。

• Async属性の付与
• Defer属性の付与

それぞれ順番に見ていきましょう。

Async属性の付与

Async属性とは、HTML5で新規に導入された属性のことです。非同期で記述されているスクリプトのダウンロードと実行を行うことを指定する属性になります。

ブラウザがJavaScriptをダウンロードしながらHTMLを読み込めるため、ブラウザの一時停止を防ぐことが可能です。

Defer属性の付与

Defer属性とは、src属性にて指定したスクリプトのダウンロード及び実行の遅延を許可する属性のことです。

Defer属性が付与されたスクリプト要素の内容は変更しない旨をブラウザに伝えられるため、結果的にページスピードが高速化することに繋がります。

レンダリングを妨げるリソースの除外に有用なWordPressプラグイン

ここまで、レンダリングを妨げるリソースの除外として、CSSとJavaScriptについて複数の方法を解説しました。しかし、WordPressであれば、これらを解決できる有用なプラグインが2つ存在します。

• Autoptimize + Async JavaScript
• WP Rocket

ここでは、それぞれのプラグインの特徴を簡易的にご説明します。

Autoptimize + Async JavaScript

Autoptimize + Async JavaScriptは、それぞれ同一開発者による無料のプラグインです。それぞれ、下記の手順で設定を進めましょう。

• Enable Async JavaScriptのチェックボックスにチェックを入れる
• Quick Settingsボックスにて、「Apply Async」もしくは「Apply Defer」を選択する
• Autoptimizeの設定画面を開く
• Optimize JavaScript Codeのチェックボックスにチェックを入れる
• Optimize CSS Codeのチェックボックスにチェックを入れる

上記5つの手順を踏めば、基本的にその他の設定をいじる必要はなく、レンダリングを妨げるリソースの除外の問題は解決します。

WP Rocket

WP Rocketは、WordPressの有料キャッシュプラグインで、多くのユーザーに利用されています。下記2つの項目を有効化しましょう。

• CSS Filesの「Optimize CSS delivery」
• JavaScript filesの「Load JavaScript deferred」

なお、Webサイトによっては、Load JavaScript deferredを有効化するとフロントエンドがうまく表示されない問題が発生することがあるようです。そのため、プラグイン導入前に必ずバックアップを取ることを忘れないようにしましょう。

まとめ：レンダリングを妨げるリソースの除外を解決しましょう

本記事では、レンダリングを妨げるリソースの除外の概要や、解決方法を解説しました。レンダリングを妨げるリソースとは、主にCSSやJavaScriptの読み込みに関する問題であり、適切に記述をすることで、ページスピードの高速化を図れます。

また、WordPressであれば解決できるプラグインも存在しますので、まずはWebサイトのCMS等に合わせて、解決策を検討することから始めてみてはいかがでしょうか。

SEOにお困りなら【無料SEO診断】

株式会社デジタルアイデンティティでは、創業から14年以上、SEO対策に注力してきました。
検索エンジンをハックするようなブラックハットな手法に頼ることなく、Googleの推奨に沿ったホワイトハットな手法で上位表示を実現してきました。

そんな弊社のSEOナレッジを50以上の項目に落とし込んだSEO診断を無料でご提供しています！
（毎月先着10社様限定とさせていただいています）

無料SEO診断はこんな方におすすめ！

• SEO対策をどこから始めればいいかわからない…
• 自社でSEO対策をしているが思うように順位が上がらない…
• 他社にSEO対策を依頼しているがセカンドオピニオンが欲しい…
• なぜ競合サイトの検索順位が高いのか知りたい…
• 現在のSEO対策が正しいのか確認したい…

弊社の無料SEO診断でわかること

• 現在のSEO評価
• SEO項目ごとの改善方法
• SEO項目ごとの優先度

正しい現状認識は、SEO対策で効果を出す上で何よりも重要です。

自社のSEO対策について、少しでも気になる方は以下のリンクからお気軽にお申し込みください。

【簡単1分】無料SEO診断に申し込む