「レンダリングを妨げるリソースの除外」とは、Web ページのレンダリングを妨げる JavaScropt や CSS などの外部ファイルを除外することで、Web サイトの表示速度を改善する手法です。
まず、レンダリングとは Web ページ上の内容を描写することです。
JavaScript や CSS を外部ファイルとして読み込む場合、ページのレンダリングをブロックするため表示速度が遅くなります。

Web の仕様上、ページの読み込みは HTML の1行目から開始します。
そして、順番に読み込んでるときに外部ファイルがある場合、HTML の読み込みを一時停止して外部ファイルの読み取りと実行を行います。
その間 HTML の読み込みが行われないため、表示速度が遅くなります。

一方で、全ての JavaScript や CSS がレンダリングを妨げるわけではありません。
レンダリングを妨げるリソースとして定義される条件については、次のセクションで解説します。

「レンダリングを妨げるリソースの除外」は First Contentful Paint（FCP）と Largest Contentful Paint（LCP）の改善に有効です。

First Contentful Paint（FCP）

FCP とは、Web ページの読み込みが開始されてから、ページ内のいずれかのコンテンツが初めて描画されるまでの時間です。

FCP について詳しく知りたい方は、以下をご覧ください。
【参考】First Contentful Paint（FCP）とは？概要と改善方法を解説
https://fastest.jp/blog/first-contentful-paint/

Largest Contentful Paint（LCP）

LCP とは、Web ページ内の最もファイル容量の大きい画像や動画が表示されるまでの時間です。
LCP は Web サイトがユーザーにとってどれだけ使いやすいかを評価する指標である Core Web Vitals のひとつです。

LCP について詳しく知りたい方は、以下をご覧ください。
【参考】Core Web Vitals の指標 LCP とは？概要から改善方法まで解説
https://fastest.jp/blog/largest-contentful-paint/

レンダリングを妨げるリソースの定義

レンダリングを妨げるリソースとは、Web ページのレンダリングの際に、そのレンダリングを遅らせたり中断させたりする要素を指します。
Web サイトの評価を診断するツールに Lighthouse があります。
Lighthouse はまず、レンダリングを妨げるリソースがある URL を以下の3つの条件で特定します。

・<head>と</head>の中にあり、defer 属性もしくは async 属性を持たない<script>がある
・disabled 属性を持たない<link rel=”stylesheet”>がある
・ユーザーのデバイスに一致する media 属性のない<link rel=”stylesheet”>がある

<head>の中にあり、defer 属性もしくは async 属性を持たない<script>がある

async 属性と defer 属性はそれぞれ<script>に付与することでスクリプトの実行タイミングを指定することができます。

どちらの属性も持たない<script>の場合、Web ページの読み込みを開始し、外部ファイルを発見するとすぐに読み取りと実行を行います。
そのため、スクリプトの実行がレンダリングを妨げる可能性があります。

disabled 属性を持たない<link rel=”stylesheet”>がある

disabled 属性を持たせることで、タグによって関連付けられた外部のシートは読み込まれなくなります。
これにより、デフォルトでシートの読み込みを無効にし、条件によって読み込むシートを切り替えることができます。

ユーザーのデバイスに一致する media 属性のない<link rel=”stylesheet”>がある

media 属性を持たせることで、対象とするデバイスを指定することができます。
これにより外部シートをさまざまなデバイスや画面サイズに適応した状態で読み込むことができます。
media 属性に all を指定することも可能ですが、特定のデバイスでは不要なリソースが実行される可能性があり、表示速度が低下します。
基本的にはデバイスを指定するようにしましょう。

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

レンダリングを妨げるリソースは PageSpeed Insights の改善できる項目で確認できます。

PageSpeed Insights は、Web サイトのページの表示速度の測定や改善点を把握できるツールです。

PageSpeed Insightsの改善できる項目内にあるレンダリングを妨げるリソースの除外

レンダリングを妨げるリソースを特定したら、そのリソースを改善していきます。

レンダリングを妨げるリソースの改善手順

レンダリングを妨げるリソースの改善手順は以下の2ステップです。

・重要なリソースを特定する
・レンダリングを妨げるリソースの除外

重要なリソースを特定する

まず、レンダリングに必要な重要なリソースを Chrome DevTools の[ Coverage ]で特定します。
手順は以下の通りです。

1.Chrome DevTools を開き、「︙」をクリックします。

2. Coverage を選択します。

3.分析されたリソースとリソース内で使用されるコードの量が表示されます。

各行は現在のページに使用されている JavaScript や CSS の URL と URL 内のリソースがどれくらい使用されているかを表しています。
青色のバーが全体のうち使用しているリソースの割合で、赤色のバーが未使用のリソースの割合です。
Web ページのレンダリングに関係のある青色のバーがある URL から重要なリソースを特定します。

レンダリングを妨げるリソースの除外

重要なコードを特定したら、そのコードのレンダリングを妨げるリソースを確認し、除外していきます。
具体的な除外方法については次の章で解説します。

レンダリングを妨げるリソースの除外方法

この章では、「レンダリングを妨げるリソースの除外」方法について解説します。
レンダリングを妨げるリソースとなるのは以下の4つです。

・JavaScript
・CSS
・Google Fonts
・使用していないリソース

JavaScript における除外方法

JavaScript における除外方法は以下の2つがあります。

・async 属性の付与
・defer 属性の付与

async 属性の付与

async 属性を付与された<script>は Web ページの読み込み時、実行可能になった時点でスクリプトを実行します。
この際に JavaScript を非同期でダウンロードするため、ページのレンダリングが妨げられることはありません。

defer 属性の付与

defer 属性を付与された<script>は Web ページの読み込みが完了した時点でスクリプトを実行します。
ページの読み込みとスクリプトの実行がズレて行われるので、レンダリングが妨げられることはありません。

CSS における除外方法

PageSpeed Insights にある通り、レンダリングを妨げるリソースは First Paint を遅延させます。
そのため、CSS においてレンダリングを妨げるリソースを除外する際は First Paint に関係のあるリソースとそうでないリソースを識別する必要があります。
そして、First Paint に関係のあるリソースをインライン化し、First Paint に関係のないリソースはレンダリングを妨げないように非同期化する必要があります。

CSS は以下の手順で除外していきます。

・First Paint に必要なリソースをインライン化する
・First Paint 以外で必要なリソースを非同期化する
・CSS ファイルを圧縮する

First Paint に必要なリソースをインライン化する

外部ファイルを HTML ドキュメントに直接挿入することをインライン化と言います。
First Paint に必要な CSS を特定し、HTML のインライン要素としてスタイルを設定します。

First Paint 以外で必要なリソースを非同期化する

非同期化とは、ある処理を他の処理の完了を待たずに並行して実行できるようにすることを指します。
First Paint 以外で必要なリソースを非同期化することで、レンダリングを妨げることなく処理することができます。

CSS ファイルを圧縮する

CSS のコードを最適化する、あるいは不要な空白や文字を削除することで、CSS ファイルの圧縮が可能です。
ファイル内のすべてのコードを読み込んで実行するため、CSS ファイルを圧縮することで読み込みの時間を短縮できます。

Google Fonts における除外方法

Google Fonts は Web フォントの一種です。
ネットワーク上からフォントデータを読み込んで Web サイトに表示させることができ、異なるデバイスで見ても意図したフォントを見せることができます。
しかし、外部リソースの読み込みによって読み込み時のタスクが増え、レンダリングを妨げるリソースとなってしまいます。

Google Fonts における除外方法は以下の2つがあります。

・Google Fonts を事前読み込みする
・サーバーにアップロードして使用する

Google Fonts を事前読み込みする

Google Fonts を事前に読み込むことで、レンダリングを妨げることなく使用することができます。
例えば、以下のソースコードを使用することで Google Fonts を事前に読み込むことができます。

<link rel="preload" href="Webフォントの外部ファイルのURL" as="style" onload="this.removeAttribute('onload');this.removeAttribute('as');this.rel='stylesheet';">

サーバーにアップロードして使用する

Google Fonts のファイルをサーバーにアップロードし、そこから読み込むという方法があります。
インターネットを経由しないので、レンダリングを妨げることなく使用することができます。

WordPress を使用したレンダリングを妨げるリソースの除外方法

レンダリングを妨げる方法のうち、JavaScript と CSS の除外は WordPress のプラグインを使用することで簡単にできます。
ただし、ソースコードの最適化をした結果正しく動作しなくなる可能性があるので、圧縮する場合は不具合が生じていないか確認する必要があります。

「レンダリングを妨げるリソースの除外」に有用なプラグインは以下の2つです。

・Autoptimize と Async JavaScript
・WP Rocket

Autoptimize と Async JavaScript

Autoptimize と Async JavaScript は、それぞれ同一開発者による無料のプラグインです。
それぞれ、下記の5つのステップを行うことで、「レンダリングを妨げるリソースの除外」が可能です。

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

WP Rocket

WP Rocket は、JavaScript や CSS を圧縮できる有料のプラグインです。

以下の2つを有効化することで、「レンダリングを妨げるリソースの除外」が可能です。

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

まとめ

本記事では、「レンダリングを妨げるリソースの除外」について解説しました。

「レンダリングを妨げるリソースの除外」は、表示速度の改善に役立つ施策です。
しかし、レンダリングを妨げるリソースの特定は専門知識を必要とするため、サイト制作者と相談しながら進めることが重要です。

すぐに改善したい場合は WordPress のプラグインや CSS Minifier のようなソースコード圧縮ツールを使うことをご検討ください。

なお、当社ではページの表示速度の改善を1クリックで行えるランディングページ高速化ツール FasTest（ファーステスト）を開発・販売しています。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。

無料トライアルはこちら

レンダリングを妨げるリソースの除外とは？概要から改善方法まで解説

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

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