WEBサイトの表示速度の改善、Googleデベロッパー・ツールで原因を探す、Core Web Vitals(コアウェブバイタル)との関連性

Webサイト制作
サイト制作
2021.02.24
2021.02.26
WEBサイトの表示速度の改善、Googleデベロッパー・ツールで原因を探す

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

WEBサイトの表示速度を向上させるメリット、改善方法、おすすめ計測ツール等はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Time列

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

Time列

Type列

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

Type列

Status列

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

Status列

Name列

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

Name列

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

また、見に覚えの無いファイルが読み込まれているのを見つけた場合は、無駄な読み込みを減らすために読み込まないようにしましょう。

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

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

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

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

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

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

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

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

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(コアウェブバイタル)がランキング要因に導入される事で、表示速度の対策を行っていないサイトに差をつけるチャンスだと思います。
これを機会に運営しているサイトが読み込んでいる画像やライブラリの確認してみると良いでしょう。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)