プロダクトレビューアップデートとは？日本導入時にも焦らない高評価されるレビューの書き方
SEO対策
レンダリングを妨げるリソースの除外の解決策【CSS・JavaScript】
Googleが提供している「PageSpeed Insights」でページスピードを計測すると、改善点としてレンダリングを妨げるリソースの除外という言葉が出てきた方は多いのではないでしょうか。
しかし、これらの言葉が何を意味しているのかが分からず、何から手を付ければ良いのかと頭を悩ませていることでしょう。
そこで本記事では、レンダリングを妨げるリソースの除外の概要を解説するとともに、確認方法や除外方法を解説します。また、WordPressの有用なプラグインもご紹介しますので、ページスピードを上げるためにもぜひ参考にしてください。
この記事の執筆者
アダムテクノロジーズ執行役員
SEOコンサルタント
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
目次
表示
閉じる
レンダリングを妨げるリソースとは
まずは、レンダリングを妨げるリソースの除外についてご紹介します。
レンダリングとは、Google ChromeなどのWebブラウザがHTMLやCSSといったコードを読み取り、ブラウザの画面上にWebサイトとして表示することを指します。
レンダリングが行われる際、WebブラウザはHTMLコードの上に書かれているコードから読み取り、CSSやJavaScriptといった外部ファイルについては、ダウンロードして必要な処理を行います。
このCSSやJavaScriptといった外部ファイルを読み込んで、処理を行なっている間、基本的にはWebブラウザはその次のHTMLファイルの読み込み等を実施しません。
そのため、外部ファイルの数が多かったり、サイズが重かったり、複雑な処理を行なっている場合には、Webブラウザが次のレンダリングに進むことができず（ブロックされ）、Webサイトの表示が遅れてしまう、という現象につながります。
レンダリングを妨げるリソースとは
まずは、レンダリングを妨げるリソースの除外についてご紹介します。
レンダリングとは、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等に合わせて、解決策を検討することから始めてみてはいかがでしょうか。
WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」
WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。
しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。
WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。
「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。
「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。
成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ
