【CWV】Googleデベロッパーツールで表示速度低下の原因調査

WEBサイトにおいてページの表示速度はユーザーの離脱率を抑える上で重要な要素です。
更に、Core Web Vitals（コアウェブバイタル）がGoogleのランキング要因に組み込まれる事が2021年5月に決まっており、サイトの表示速度が検索順位に反映されることが決まっています。
WEBサイトの表示速度は様々なツールで計測できます。
しかし、表示速度が遅い場合に具体的にまず何をすれば効果的なのかがわからない場合が多いと思います。
今回は、表示速度を改善するメリットとCore Web Vitals（コアウェブバイタル）との関連性の解説、表示速度が遅い場合にまずやるべき原因の調査方法を「Googleデベロッパー・ツール」を利用して説明したいと思います。
更に、その原因の対象案をいくつかご紹介させていただきます。

WEBサイトの表示速度を改善するのメリット

WEBサイトの表示速度が早い場合、以下のようなメリットがあります。

ユーザーの離脱率・直帰率の低下

WEBページを表示する際、なかなかページが表示されないサイトだった経験がある方も多いと思います。
その際、ブラウザを閉じてしまったという方も居るのではないでしょうか？
せっかく、Googleの検索順位を上げたとしてもこのようにユーザーを逃してしまうのは大きな機会損失ではないでしょうか。

これは体感だけの話ではありません。
2017年2月にGoogleが公表したデータに、「ページが完全に表示されるまでに3秒以上かかると、53%の直帰する」「表示速度が1秒から7秒に落ちると直帰率が113%上昇」という内容が有りました。
WEBページの表示速度が遅い場合、直帰率が高くなるのです。
直帰率が高いくなるという事は、離脱率も同様に高くなってしまいます。

つまり、WEBサイトの表示速度を改善する事で離脱率と直帰率を低下させる事が可能です。

検索順位の下落を防ぐ

Googleのアップデートにスポードアップデートと呼ばれるアップデートが有りました。
PC版は2010年以降に、モバイル版は2018年の7月以降に適応されました。
このスピートアップデートは、“ページスピードが著しく遅い場合、ランキングが低くなることもある”という事をGoogleが発言しています。
スピードアップデートの仕様は以下となっています。

• スピードアップデートは本当に遅いサイトだけに影響する
• スピードアップデートの影響を受けたサイトは、段階的に改善できる
• サイトが十分に速いのであれば、それ以上に速くしても何も変わらない

これらの内容から、スピードアップデートは読み込みが非常に遅いページに適応されるペナルティのようなものだと判断できます。
つまりページの読み込みに数十秒かかるくらいでなければ、対応可能な範囲で速度を改善すればよいということになります。

Core Web Vitals（コアウェブバイタル）に対する対策

最近、SEOの話をする上でよく聞く単語となったCore Web Vitals（コアウェブバイタル）。
実はWEBページの表示速度もCore Web Vitals（コアウェブバイタル）に関係があるのです。
Core Web Vitals（コアウェブバイタル）がGoogleのランキング要因に組み込まれる為、ページ表示速度もランキング要因に組み込まれるという解釈ができます。
スピードアップデートでは著しく表示速度の遅いページに対するペナルティが課せられましたが
Core Web Vitals（コアウェブバイタル）ではよりページの表示速度を厳密にランキングに反映する可能性が高いです。
詳細を次の項目にて説明いたします。

WEBサイトの表示速度改善がCore Web Vitals（コアウェブバイタル）に与える影響

Core Web Vitals（コアウェブバイタル）は以下の指標を組み合わせたものが土台となっています。

LCP（Largest Contentful Paint ）

読み込み時間

FID（First Input Delay ）

インタラクティブ性

CLS（Cumulative Layout Shift ）

ページコンテンツの視覚的な安定性

これら3つはすべてWEBサイトの表示速度に関係してきます。

LCP（読み込み時間）

こちらは単純にページ読み込みが完了するまでの時間となっています。
今回の対策を入れてページ表示速度が改善された場合、こちらの指標のスコアが上がるでしょう。

FID（インタラクティブ性）

こちらはユーザーが最初にページを操作しようとするまでにどれくらいの時間がかかるかとなっています。
以前のサイト表示速度は一番最初の読み込みが完了したら表示が完了したと見られていました。
なので、HTML自体には何も書かれておらず、JavaScript等でページ表示後にメインのコンテンツを読み込むようなサイトも多く見受けられました。
しかし、Core Web Vitals（コアウェブバイタル）がランキング要因に入る事でこの方法ではサイトの表示速度が良いという状態ではなくなりました。
ですので、今回挙げたような根本的な表示速度改善が必要となってくるのです。

CLS（ページコンテンツの視覚的な安定性）

こちらはページの内容の見た目が安定しているかどうかです。
この内容だけですと表示速度には関係がなさそうですが、読み込みに時間のかかる画像が1つでもあると読み込むまでの間表示が崩れた状態となります。
この場合CLSのスコアが悪くなる為、Core Web Vitals（コアウェブバイタル）をランクング要因にした場合順位が下落していく可能性があります。
その為、CLSのスコアが悪くならないようにサイト全体で表示速度を改善する必要があるのです。

Webの表示速度を確認するためのチェックツール

WEBサイトの表示速度が離脱率・直帰率、検索順位下落対策、Core Web Vitals（コアウェブバイタル）への影響等様々な意味を持つということがわかりました。
しかし、自分の運用しているサイトがどの程度の表示速度なのかわからない方も多いと思います。
この項目では、WEBサイトの表示速度を確認するためのチェックツールをご紹介します。

ページスピードインサイト

こちらは、Googleが提供しているツールで、検索窓にURLを入力すると現状のパフォーマンスと、パフォーマンス改善のために何をすればよいかヒントを与えてくれるツールです。
なお、このツールで出てくる項目については以下のコラムで解説していますので、ご参照下さい。

PageSpeed Insights（ページスピードインサイト）の見るべきポイント！改善方法も解説！

Google Analytics

Google Analyticsを導入しているならば、Google Analyticsにも「ページ速度」についての情報があります。ここではサイトのページを表示するまでにどのくらいかかったのか表示されます。
異なるページや過去の表示速度も見ることが出来るので、是非チェックすると良いです。

Test My Site（テストマイサイト）

Test My Siteは2017年6月に公開されたモバイルサイトの速度をチェックできるツールです。

使い方は、先ほどご紹介した「ページスピードインサイト」と同様、検索窓にチェックしたいモバイルサイトのURLを入力して実行するだけです。

チェックは2019年4月現在4Gネットワーク環境下での速度のようです。

Googleデベロッパー・ツール

Googleデベロッパー・ツールでもチェックすることが可能です。
このコラムの「Googleデベロッパー・ツールを使った原因の特定方法」で詳しく使い方を説明しています。
Googleデベロッパー・ツールは他のツールに比べヨリ専門的な内容が見れるようになっています。

WEBサイトの表示速度が遅くなる、よくある原因

WEBサイトの表示速度が遅い原因としてよくあるのが以下となります。

• 読み込んでいる画像の量が多い、サイズが大きい
• 読み込んでいる画像が404である
• 読み込んでいるJSやCSSのライブラリの量が多い、サイズが大きい

それぞれ詳しく解説していきます。

読み込んでいる画像の量が多い、サイズが大きい

表示しているページで、沢山の画像やサイズの大きい画像を使用している場合に表示速度が遅くなります。
これは画像が文字に比べてサイズが大きい為です。
近年WEBサイトがリッチ化している為画像を沢山使用する事が多く、解像度の高い（サイズの大きい）画像を使う機会も多いです。
その為、この原因が表示速度を改善する上で一番最初に疑うべきものとなります。

読み込んでいる画像が404である

表示しているページで、使用している画像が404となっている場合はレスポンスが返ってくるまでに時間がかかる場合があります。
その為、存在しない画像などはすべて除去しておいたほうが良いでしょう。
また、HTML上にはなくてもCSSから読み込んでいる画像が404の場合があります。
この場合もページの表示速度が遅くなる原因となりますので対処を行ったほうが良いです。

読み込んでいるJSやCSSのライブラリの量が多い、サイズが大きい

表示しているページで、複雑な動きや見た目を表現する際にJQuery等の外部のライブラリを読み込んで使用していると思います。
ライブラリはページ表示時にすべて読み込まれてしまう為、読み込む不ライブラリが増えると対象ページのHTMLや画像が少なくても表示速度が遅くなる場合があります。

Googleデベロッパー・ツールを使った原因の特定方法

前項で上げました、表示速度を遅くする原因を見つける為にはGoogleChromeに標準で搭載されているGoogleデベロッパー・ツールを使用します。
Googleデベロッパー・ツールはGoogleChromeでF12を押すと以下のようなウインドウが表示されます。
これが「Googleデベロッパー・ツール」です。

Googleデベロッパー・ツールはWEBサイトの様々な解析やデバッグ等を行えますが、今回は表示速度改善の為の使い方を解説いたします。
表示速度改善の場合はNetWorkタブをクリックします。

その後、表示速度を改善したいページを表示します。
既に表示されている場合はリロードを行ってください。

次に画面の項目の見方を説明します。

Time列

Timeの列はそのファイルが読み込まれるまでにかかった時間を表示しています。
こちらはms(ミリ秒)単位で表示されており、1000msが1s(秒)となっています。
つまり、この項目の数字が多ければ多いほどそのファイルが表示速度を遅くしている原因となります。

Type列

Typeの列はファイルの種類です。
この列にかかれている文字列が画像の拡張子（jpegやgif）の場合そのページの表示速度を遅くしているのは画像が原因となります。
stylesheetやScriptと書かれていた場合はCSSやJSのファイル（ライブラリ）読み込みに時間がかかっています

Status列

Statusの列はファイルの読み込みが正常に行われたかを確認できます。
この項目が200ではないものは正常に読み込まれていない為確認が必要でしょう。
404の場合タイムアウトとなることもある為、読み込み時間が沢山かかっている事が多い為注意が必要です。

Name列

最後にName列は読み込んでいるファイルのファイル名、もしくはURLとなります。
ここまで上げてきた項目を確認し原因であるファイルに検討がついた場合はこのName列のファイル名を確認しましょう。

これでそのページの表示速度の遅くなっている原因ファイルが特定できたかと思います。
1つのファイルの読み込み速度が遅いという場合以外にも、読み込んでいるファイルが大量にある為
それぞれの読み込み速度はそこまで遅くない場合もトータルの読み込み時間が長くなっている場合もあります。
また、見に覚えの無いファイルが読み込まれているのを見つけた場合は、無駄な読み込みを減らすために読み込まないようにしましょう。

それぞれの原因の対処方法

ここまでで、表示速度が遅くなる原因が特定できたかと思います。
ここからはその原因に合わせて対処方法の案を上げていきたいと思います。
一般的にページの読み込みは2.5秒以内に完了すると良いと言われています。

画像の量が多い場合の対象方法

ファイルサイズの大きい画像や読み込みに時間のかかる画像はないが、普通くらいの速度で画像が沢山読み込まれている場合は、画像の遅延読み込みを行うと良いと思います。
これは、ページ表示時にはすべての画像を読み込まずユーザーがスクロールしていくことで順次画像が読み込まれるようになります。
その為、初回の読み込み時間が大幅に削減できます。
画像の遅延読み込みはWordPress5.5バージョン以降ではIMGタグにloading=”lazy”を入れるだけでも実現できます。
過去のバージョンでもプラグイン等を利用する事で実現できます。
また、1ページに無理にすべての画像を入れずにページネーションを作ったり等サイトの設計自体を変えなければならない場合が出てくるかもしれません。

画像のサイズが大きい場合の対処方法

いくつかの画像ファイルのサイズが大きい、もしくは読み込みに時間がかかっている場合はその画像ファイルを対処したほうが良いです。
まず、画像ファイルをもっと圧縮できないかを確認しましょう。
もし、その画像をメインとして扱う場合はページ読み込み時はサムネイルを表示し、JavaScript等でクリック時に大きいサイズの画像が表示されるようにする等の工夫も効果があります。

ライブラリの量やサイズに問題があった場合の対処方法

読み込んでいるCSSやJavaScriptファイルに問題があった場合、対処は難しいです。
もしもう使っていないファイルであれば消すだけで問題解決しますが、大抵の場合は利用中だと思います。
ヘッダーはサイト内で共通のものを使っている場合がおおいですが、その際使用していないページでもライブラリが読み込まれている事があります。
この場合は読み込むライブラリをページ毎に制御するようにしましょう。
また、1つの機能を実装するのにそれぞれ別のライブラリを使っている場合、ライブラリは複数の機能を持っているものがほとんどである為無駄が多い場合があります。
可能であれば使用する外部ライブラリを減らし、独自で必要な部分だけを用意する必要が出てくるかもしれません。