ページ表示速度の改善方法9選、遅くなる原因、指標、ツールを解説

スマートフォンやデジタルカメラで撮影した画像や、画像サイトからダウンロードした画像は、容量が大きくなりがちです。
このようなファイルサイズが大きい画像を使用していると、読み込みに時間がかかり、Webサイトの表示速度が遅くなってしまいます。
画像のリサイズや圧縮を行ったり、画像を減らしたりして、Webサイトを早く読み込めるよう対策しましょう。

外部ファイルには、JavaScriptやCSSなどが該当します。
Javascriptはプログラミング言語のひとつで、UIを良くするためほとんどのWebサイトで使用されています。
また、Webページの表示スタイルや文字のデザインを指定する言語が「CSS（Cascading Style Sheets）」です。
これらの言語を使用して、Webサイトの動きやレイアウトの指定、文字の装飾などを行えば行うほど、ファイルが増えていきます。
ファイルが増えると読み込みに時間がかかるようになり、Webサイトの表示速度が遅くなるのです。
不要なファイルを削除したり、圧縮したりすることで、読み込み時間の改善ができます。

WebサイトにはGoogle Analyticsの計測タグや分析ツールのタグなど、さまざまなタグが埋め込まれていることが少なくありません。
アクセスや効果を計測するためにはタグが必要不可欠ですが、必要か不要かを確認し整理しなければページ表示速度に悪影響を及ぼします。
「タグマネージャー」を活用し、Webサイトに埋め込むタグを整理し、管理しやすくしましょう。

ページの表示速度が遅ければ遅いほど直帰率が上昇し、その結果コンバージョン率も下がる可能性が高くなります。
直帰率が高いということは、自社サイトに訪問したもののサイト内の別のページに訪問してもらえていないということです。
Googleがディープラーニングを用いて算出した、ページ表示速度が遅くなるにつれて直帰率がどのように変化するのかを示したデータがあります。

・表示速度が1秒から3秒に落ちると、直帰率は32%上昇
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇
・ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる

出典：海外SEO情報ブログ「表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命」

上記のデータはスマートフォンのものですがパソコンでも同じ傾向になると予想されます。

このように、ページの表示速度の遅さはユーザーの直帰率と深い関係があり、遅ければ遅いほどユーザーが自社サイトに訪問したり滞在したりする機会を失っているといえるでしょう。

Googleは「スピードアップデート」と呼ばれる、ページ表示速度を表示順位の評価要素に加えることを発表しています。
そのため、ページの表示速度が遅いとGoogleが低い評価をするアルゴリズムとなっており、検索エンジンでの表示順位が下がってしまうのです。
表示順位が下がれば、そのぶんユーザーがアクセスする機会も減り、Webサイトの価値は下がってしまうでしょう。
Googleではページの表示順位と検索順位について、以下のように記載しています。

Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. ・・・why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

和訳：より高速なサイトは幸せなユーザーを生み出し、社内調査では、サイトの反応が遅いと、訪問者がそこで過ごす時間が少なくなることがわかりました。（中略）そのため、検索ランキングではサイトの速度を考慮に入れることにしました。さまざまなソースを使用して、他のサイトと比較したサイトの速度を決定します。

出典：Google検索セントラルブログ「Using site speed in web search ranking」

ページの表示速度が遅いことは、直帰率やコンバージョンに影響を及ぼします。
後述する「ページの読み込み表示速度を確認するツール」と「ページの表示速度を改善する具体的な方法5つ」を確認し、速度の改善を行いましょう。

Page Speed InsightsはGoogleが提供している無料ツールです。

測定したいページのURLを入力するだけで、パソコンとスマートフォン両方のページが表示される速度を同時に測定できます。
具体的な表示速度を測定するのではなく、ページの表示速度や体感速度を100点満点の点数で評価し、改善が必要な箇所を提示してくれるため、効率よく改善できるでしょう。
スコアは3段階で評価され、100点に近いほど、高評価となります。

・90～100点 Good（緑色）
・50～89点 Medium（黄色）
・0～49点　Low（赤色）

PageSpeed Insightsと同じように、Googleアナリティクスを使っても簡単にページの表示速度を計測することができます。
Googleアナリティクスを導入しているなら、確認したいページURLを1つずつ入力することなく、さらにすべてのページを確認できるため、おすすめです。

・サイト内の平均読み込み速度を確認する手順
レポート画面より「行動」〉「サイトの速度」〉「概要」

・ページごとの読み込み速度を確認する手順
レポート画面より「行動」〉「サイトの速度」〉「ページ速度」

PageSpeed Insightsと同様に、ページの読み込み速度が速い場合は緑色、サイト内平均より遅い場合は赤色で表示されます。

Chromeデベロッパーツールは、Chromeブラウザを使用しているときに「Ctrl（Commnd）+Shift（Option）+I」のショートカットキーで起動することができます。
Chromeデベロッパーツール起動後［Lighthouse］から［Generate report］をクリックすると、表示速度の診断が可能です。
Chromeデベロッパーツールで正確な表示速度を計測するためには、左上のリロードボタンをクリックしキャッシュを削除したあと、「Ctrl（Commnd）+R」のショートカットキーでページを読み込みます。
キャッシュを削除し再度ページを読み込むと、下部にページの読み込み速度が表示されるため、確認してください。
Chromeデベロッパーツールは表示速度の診断以外にも、ソースコードの確認やユーザーエージェント、位置情報を疑似的に変更する際にも活用できるでしょう。

Test My Siteは2017年にリリースされた、Googleが提供しているツールです。
実際の表示速度の数値だけでなく、ユーザーの離脱率や同一業界内の平均速度との比較、ビジネスやWebサイトの費用対効果も確認できます。
表示速度が遅いことによるユーザーの離脱率を、Googleが実際に使用している指標に基づいて算出することにより、費用対効果を割り出しているのです。
あらゆる分析が可能なため、Webサイトの改善に有効活用できるでしょう。
Test My Siteが計測可能なのはスマートフォンページのみですが、計測したいページがスマートフォンに最適化されているかどうか、モバイルフレンドリーに対応しているかチェックできるのはメリットです。
Test My Siteを利用するにはまずメールアドレスを入力します。
入力したメールアドレス宛に詳細が送られるため、チェックが完了するまで少し時間がかかるでしょう。

GTmetrix（ジーティーメトリックス）は表示速度の表示だけでなく、表示が遅いファイルの特定や改善ポイントなど、Pagespeed Insightsと同じように速度改善に役立つ情報を取得できます。
また、無料の会員登録をすれば、表示速度の履歴を確認可能です。

HTTP/2に対応することで、表示速度を改善することができます。
Webサイトを構成している画像やJavaScript、CSSなどのファイルを1つ読み込むごとに、HTTPリクエストが1回増えます。
そのため、読み込むファイル数が多ければ多いほど表示速度が遅くなってしまうのです。
HTTP1.1では、リクエストが完了するまで他のリクエストを待機させる特徴があり、リクエストが増えただけリクエストの渋滞が起きてしまい、表示速度が遅くなるというデメリットがありました。
近年、デザインや機能、Web広告などWebサイトが多様化したことで、多くのリクエストを処理できる必要性が出てきたことから、HTTP/2が登場したのです。
HTTP/2は、リクエストを同時に処理できるようにしたことで、HTTP1.1で問題となっていたリクエストの渋滞を緩和できるようになりました。
しかし、HTTP/2を実装するには開発者ではないと困難なため、付き合いのある開発者に依頼できるかどうか確認する必要があります。

「PHP」で動いているWebサイトなら、バージョンアップすることで処理速度が改善され、Webサイトの表示速度が速くなります。

最新の対応バージョン (現在は7.4) にアップグレードすると、以前のバージョンに比べてパフォーマンスが最大で3倍〜4倍向上します。
出典：WordPress.org「PHP バージョンの更新」

このように、バージョンアップをすれば、表示速度の高速化をはじめ大幅なパフォーマンス向上が期待できるのです。
PHPのバージョンアップ時は、エラーが起きることも少なくありません。
バージョンアップ前に、「自社サイトや使用しているプラグインが最新のPHPに対応しているか」「キャッシュ系プラグインのような、バージョンアップ時にエラーが起きやすいプラグインはないか」を確認しましょう。

WordPressやプラグインはPHPで動いています。
そのため、バージョンアップすることで処理速度が速くなり、表示速度が改善できるでしょう。
WordPressとプラグインのバージョンアップは、Webサイトの表示速度の高速化以外にも、「パフォーマンス向上」「最新のセキュリティに対応している」といったメリットがあります。

JavaScriptが増えたり、複数のファイルに分かれていると、通信回数が増えページの表示速度が遅くなります。
そのため、複数のJavaScriptを1つのファイルにまとめる「バンドリング」を行うと、通信回数を減らし表示速度の改善が期待できるのです。
また、JavaScriptのファイルサイズを圧縮する「gzip圧縮」を行うことでも表示速度が改善されます。
「gzip圧縮」はJavaScriptだけでなく、HTMLやCSSにも有効で、コードに含まれる余分な改行や不要なコメントアウトを削除することで、ファイルサイズを軽量化するものです。
Webサイトといった大規模なファイルを1つひとつ手作業で対応すると膨大な時間がかかり、非効率といえます。
以下のような自動圧縮ツールを活用すれば、効率的に圧縮ができるでしょう。

《自動圧縮ツールの例》
JavaScript専用「Closure Compiler」「UglifyJS」
JavaScript以外にも使用可「cssnano」「csso」「html-minifier」

ページ表示速度に大きく影響する画像のファイルサイズを小さくし、ファイル容量を軽量化することで、表示速度の改善が可能です。
例えば以下の方法があります。
・PNG、JPEG、GIF、SVGといった適切なファイルフォーマットで保存する
・画像のリサイズを行う

また、画像の圧縮にはさまざまな種類の無料ツールがあり、例えば以下のようなものがあります。

《画像の圧縮ツール例》
・Save for Web
・Adobe Photoshop
・OptiPNG
・JPEG Optimizer
・JPEG Mini
・ImageRecycle

プログレッシブ画像はプログレッシブJPEGともいい、Webサイト上の画像を表示しやすいサイズで読み込んだ後、本来の画素数で画像を読む込む形式のことです。
一旦大きいピクセルで読み込み、粗くぼやけたような画像の大まかな輪郭を表示し、次第に鮮明に読み込んでいきます。
プログレッシブ画像では大まかな画像イメージが表示できるため、読み込み遅延時に起きやすいコンテンツの配置ズレも起きません。
プログレッシブ画像を活用すれば、ファイルサイズを抑えることができ、Webサイトの読み込み速度が速くなります。「Optimizilla」や「Compress-Or-Die」などのツールを使用すれば、プログレッシブ画像に変換できます。

サーバーの性能を高めると表示速度改善に効果的です。
サーバーとひとことで言っても、回転速度やメモリ数などさまざまあり、以下のように性能の種類によって異なります。

・回線速度の数値が大きいほど表示速度が速い
・メモリ数の数値が大きいほど処理が速い
・CPUのコア数が大きいほど処理が速い
・HDDとSSDを比べると、SSDのほうが処理が速い

性能以外でも、回線を複数ユーザーで共有している「共有サーバー」ではなく「専用サーバー」を選ぶのも、表示速度改善方法のひとつです。

CDNは「Content Delivery Network」の頭文字を取った言葉で、Webコンテンツを効率よく高速で配信できるように設計されたネットワークです。
CDNを導入すれば、アクセスが集中したり、コンテンツ容量が大きくなったりした場合でも、Webサイトの表示や配信に支障が起きにくくなります。
サーバーの負荷軽減だけでなく、ホームページの表示速度も高速化するのが、CDNのメリットです。
WordPressといったサーバへの負荷が高いツールを使用したWebサイト運営や、大容量になりがちな動画を掲載するなら、CDNが有効でしょう。

ブラウザのキャッシュを用いると、不審な通信を減らすことができるため、表示速度の改善につながります。
ブラウザのキャッシュが活用されていないと、同一ページにアクセスした際に同じ情報をリクエスト後、ダウンロードしなければならず、表示速度が遅くなるのです。
Googleはキャッシュ期間については、以下が推奨されています。

・キャッシュ期間は少なくとも 1 週間に設定
・静的アセットや更新頻度の低いアセットについては最大で 1 年間に設定

参考：PageSpeed Tools「ブラウザのキャッシュを活用する」

キャッシュしてよいかどうかや、キャッシュの有効期限などを設定し、表示速度の改善につなげましょう。

詳しくはPageSpeed Tools「ブラウザのキャッシュを活用する」確認ください。

Lazy Loadは、GitHubで公開されている、画像の遅延読み込みを行うJavaScriptライブラリです。
ブラウザは通常、HTMLに含まれるimgタグの画像ファイルを、漏れなくすべて読み込みます。
つまり、どれだけ長いWebサイトでも、ユーザーがほとんど閲覧しない画像でも、すべて読み込んでしまうのです。
Lazy Loadを活用すれば、「閲覧範囲内にある最低限必要な画像のみ読み込む」ため、Webサイト表示の高速化が実現できます。
Lazy Loadを導入するには、以下の手順を踏みましょう。

1 Lazy LoadのscriptタグをWebサイトに設置
2 「class=”lazyload”」と「data-src属性」をimgタグに記述
3 最後に、lazyload()関数を呼び出して終了

LCPはLargest Contentful Paintの頭文字をとったもので、「最も大きなコンテンツの絵」の意味です。
画像や動画、背景画像など、ブラウザで表示されるページ内のメインとなるファイルがユーザーに認識される程度に表示されるまでの時間を秒数(s)で表し、値が小さければ小さいほどUXが良いと判断します。

FIDはFirst Input Delayの頭文字をとったもので、「最初に感じる遅れ」を意味します。
ユーザーがページに流入して表示されるまでにかかった時間を計り、ユーザーが一番初めに感じるサイトの印象を数値化するものです。
ミリ秒(ms)で表し、値が小さければ小さいほどUXが良いとされます。

CLSはCumulative Layout Shiftの頭文字をとったもので、「累積レイアウト変更」の意味です。
ユーザーがサイトを見たとき文字と画像が重なったり、広告がズレてしまい誤ってタップしてしまったりと、ユーザーが意図していないのにズレる現象がどのぐらい起きたのかを計測します。
影響を受けた範囲の大きさと表示距離をもとに、ページ表示の安定性を「レイアウトシフトスコア」と呼ばれる独自のスコアで評価したものです。
値が小さければ小さいほどUXが良いとされています。

また、Googleは2021年5月より検索結果の表示順位を決める指標にCore Web Vitals（以下、コアウェブバイタル）も含めると発表しました。
コアウェブバイタルがSEO指標に導入されたことで、ページの表示速度が遅いために、検索順位が下がる可能性もあるでしょう。
自社のWebサイトを効果的に運用するためにも、コアウェブバイタルを理解し、Webサイト改善に役立てていくことが求められます。

参考：Google Developers「サイトの健全性を示す重要指標」

コアウェブバイタルについて詳しくはこちらを参照ください。コアウェブバイタル3つの指標LCP/FID/CLSとは？改善方法まで網羅