薬機法ライティングの4つのコツ。初心者が抑えるべきポイントは？
薬機法
アダムテクノロジーズ運営チーム
レンダリングを妨げるリソースの除外の解決策【CSS・JavaScript】
Googleが提供している「PageSpeed Insights」でページスピードを計測すると、改善点としてレンダリングを妨げるリソースの除外という言葉が出てきた方は多いのではないでしょうか。しかし、これらの言葉が何を意味しているのかが分からず、何から手を付ければ良いのかと頭を悩ませていることでしょう。
そこで本記事では、レンダリングを妨げるリソースの除外の概要を解説するとともに、確認方法や除外方法を解説します。また、WordPressの有用なプラグインもご紹介しますので、ページスピードを上げるためにもぜひ参考にしてください。
目次
表示
閉じる
レンダリングを妨げるリソースとは
まずは、レンダリングを妨げるリソースの除外についてご紹介します。簡単にご説明すると、Webブラウザは、Webサイトを上から順番に読み込む仕組みになっています。スクロールするごとに、下に表示されているコンテンツを読み込んでいきますが、その際にCSSやJavaScriptが表示されると、それらをダウンロードする処理を始めます。ダウンロード処理をしている時間は、ユーザーからすればスクロールが一時停止されている状態となるため、無駄に処理を待つ時間が発生します。これがレンダリングを妨げるリソースの概要です。
また、Webブラウザは<head>タグ内を処理する際、すべての記述の処理が完了するまでレンダリングをしない仕組みになっているため、読み込みに時間がかかるCSSやJavaScriptが記述されているほど時間がかかります。
つまり、レンダリングを妨げるリソースの除外とは、上記のCSSやJavaScriptを除外したり、より早く処理を行ってもらうための対策のことを指します。
レンダリングを妨げるリソースの概要
先程、レンダリングを妨げるリソースについてご説明しました。そこで、下記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対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
【弊社実績】
