SEO
2021.08.19 (木)
ページ表示速度の改善方法9選、遅くなる原因、指標、ツールを解説
Webページの読み込み速度は、Webサイトにとって重要な要素のひとつです。
Webページの読み込み速度が遅いと、ユーザーがストレスを感じ離脱率や直帰率が高くなるデメリットがあります。
また、Webページの読み込み速度はGoogleの検索結果の順位にも影響するため、Webサイトの表示スピードを高速化することが重要です。
この記事ではWebサイトの表示速度が遅くなる3つの要因から、Webサイトの表示スピードを上げる方法まで詳しく紹介します。
▼目次
ページ読み込みのメカニズム
なぜページの表示速度に差が出るのでしょうか。
ページ表示速度について理解するために、ページが読み込まれるメカニズムについて解説します。
ユーザーがブラウザを開きWebサイトのURLを入力した場合を例に挙げて説明します。
◆Webページが読み込まれるメカニズム
・URLを入力すると、IPアドレスを取得するためにDNSリクエストが送信され、ドメインネームプロバイダーに通信される
・取得したIPアドレスにアクセスすることでURL元のサーバーにたどり着くことができる
・サーバーからHTMLを受け取り、ブラウザがHTMLを読み込むことでDOM(ドキュメントオブジェクトモデル)に変換する
・DOM変換時にWebページを構成する全ての情報を得ることは難しいため、画像や動画、CSS、JavaScriptといった追加のリソースをサーバーにリクエストし、Webページをすべて表示しようと試みる
・追加のリソースをサーバーにリクエストした後、取得したり処理する過程でサイトの読み込み速度が低下しやすくなる
ページの読み込み速度を低下させる原因は、例えば以下のようなものがあります。
・画像:容量の大きな画像はページの読み込み速度を低下させる大きな要因
・サーバー
・アプリやプラグインなどサードパーティスクリプト
・リダイレクトなどのアクセス工程
このように、Webページを表示する過程で、リクエストを送ったり画像や動画などの情報を処理する際にページの表示速度が遅くなりやすいのです。以下で原因について詳しく解説します。
サイトの表示速度が遅くなる要因
Webサイトの表示速度が遅くなる要因はさまざまで、要因によって対処方法も異なります。
Webサイトの表示速度が遅くなる主な要因は以下の3つです。
1)画像が重い
2)外部ファイルが多い
3)効果計測タグが多すぎる
CSSやJavaScriptなどの専門知識が必要となる場合は、エンジニアやデザイナーに対応を依頼することがあるかもしれません。
目的や方法を正しく共有するためにも、Webサイトの表示速度が遅くなる要因をしっかり理解しておきましょう。
画像が重い
スマートフォンやデジタルカメラで撮影した画像や、画像サイトからダウンロードした画像は、容量が大きくなりがちです。
このようなファイルサイズが大きい画像を使用していると、読み込みに時間がかかり、Webサイトの表示速度が遅くなってしまいます。
画像のリサイズや圧縮を行ったり、画像を減らしたりして、Webサイトを早く読み込めるよう対策しましょう。
外部ファイルが多い
外部ファイルには、JavaScriptやCSSなどが該当します。
Javascriptはプログラミング言語のひとつで、UIを良くするためほとんどのWebサイトで使用されています。
また、Webページの表示スタイルや文字のデザインを指定する言語が「CSS(Cascading Style Sheets)」です。
これらの言語を使用して、Webサイトの動きやレイアウトの指定、文字の装飾などを行えば行うほど、ファイルが増えていきます。
ファイルが増えると読み込みに時間がかかるようになり、Webサイトの表示速度が遅くなるのです。
不要なファイルを削除したり、圧縮したりすることで、読み込み時間の改善ができます。
効果計測タグが多すぎる
WebサイトにはGoogle Analyticsの計測タグや分析ツールのタグなど、さまざまなタグが埋め込まれていることが少なくありません。
アクセスや効果を計測するためにはタグが必要不可欠ですが、必要か不要かを確認し整理しなければページ表示速度に悪影響を及ぼします。
「タグマネージャー」を活用し、Webサイトに埋め込むタグを整理し、管理しやすくしましょう。
ページ表示速度が遅いことによるデメリット
ページ表示速度が遅いことによる主なデメリットは次の2つです。
1)直帰率が上昇し、コンバージョン率が下がる
2)検索順位が下がる
1)直帰率が上昇し、コンバージョン率が下がる
ページの表示速度が遅ければ遅いほど直帰率が上昇し、その結果コンバージョン率も下がる可能性が高くなります。
直帰率が高いということは、自社サイトに訪問したもののサイト内の別のページに訪問してもらえていないということです。
Googleがディープラーニングを用いて算出した、ページ表示速度が遅くなるにつれて直帰率がどのように変化するのかを示したデータがあります。
・表示速度が1秒から3秒に落ちると、直帰率は32%上昇
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇
・ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる出典:海外SEO情報ブログ「表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命」
上記のデータはスマートフォンのものですがパソコンでも同じ傾向になると予想されます。
このように、ページの表示速度の遅さはユーザーの直帰率と深い関係があり、遅ければ遅いほどユーザーが自社サイトに訪問したり滞在したりする機会を失っているといえるでしょう。
2)検索エンジンでの表示順位が下がる
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つ」を確認し、速度の改善を行いましょう。
ページの表示速度が早いことによるメリット
ページ表示速度が早ければ早いほど多くのページをクロールすることができ、SEOの評価に影響を与え、検索結果の表示順位向上が期待できます。
ページ表示速度とクローラーについての質問に対する、Googleのジョンミューラー氏の見解を一部翻訳したものが以下です。
サーバーに実装されたDRが、レンダリングリソースを管理するためにクローラーへの応答が遅くなる場合、Googleのページ速度評価に影響しますか?
一般的にはそうではありません。ただし、クロールを高速化するために、できるだけ早くその応答を取得しようとしています。クロールが速くなればなるほど、クロールできる量も増えます。出典:Twitter
また、Search Engine Roundtable内でGoogleのジョンミューラー氏は次のようにも述べています。
単にクロールが早くなるようなページの読み込み速度の改善だけでなく実際のユーザーに対して含めて様々な観点から評価する出典:Search Engine Roundtable ”Upcoming Google Speed Update Will Look More Closely At Page Speed Variations”
このように、ページスピードアップデート後にはアップデート前と異なる要素を重要視するようになるため、ただ単に表示速度を改善するのではなく、ユーザーにとって有益となる表示速度の改善が求められるようになったのです。
ページの表示速度の改善は、クロールすることができるページ数を増やし、サイトのSEO評価向上につながるメリットがあります。
ページの読み込み表示速度を確認するツール5選
自社ページの読み込み表示速度が速いのか遅いのかは、ツールを使えば簡単に計測することができます。
ページの読み込み表示速度を確認するツールは主に以下の5つです。
・PageSpeed Insights
・Googleアナリティクス
・Chromeデベロッパーツール
・Testmysite
・Gtmetrix
基本的に無料ですので、まずは試しに使用してみるといいでしょう。
Page Speed Insightsでページの表示速度を点数化
Page Speed InsightsはGoogleが提供している無料ツールです。
測定したいページのURLを入力するだけで、パソコンとスマートフォン両方のページが表示される速度を同時に測定できます。
具体的な表示速度を測定するのではなく、ページの表示速度や体感速度を100点満点の点数で評価し、改善が必要な箇所を提示してくれるため、効率よく改善できるでしょう。
スコアは3段階で評価され、100点に近いほど、高評価となります。
・90~100点 Good(緑色)
・50~89点 Medium(黄色)
・0~49点 Low(赤色)
Googleアナリティクスで平均の表示速度をさくっと解析
PageSpeed Insightsと同じように、Googleアナリティクスを使っても簡単にページの表示速度を計測することができます。
Googleアナリティクスを導入しているなら、確認したいページURLを1つずつ入力することなく、さらにすべてのページを確認できるため、おすすめです。
・サイト内の平均読み込み速度を確認する手順
レポート画面より「行動」〉「サイトの速度」〉「概要」
・ページごとの読み込み速度を確認する手順
レポート画面より「行動」〉「サイトの速度」〉「ページ速度」
PageSpeed Insightsと同様に、ページの読み込み速度が速い場合は緑色、サイト内平均より遅い場合は赤色で表示されます。
Chromeデベロッパーツールで具体的な施策をみる
Chromeデベロッパーツールは、Chromeブラウザを使用しているときに「Ctrl(Commnd)+Shift(Option)+I」のショートカットキーで起動することができます。
Chromeデベロッパーツール起動後[Lighthouse]から[Generate report]をクリックすると、表示速度の診断が可能です。
Chromeデベロッパーツールで正確な表示速度を計測するためには、左上のリロードボタンをクリックしキャッシュを削除したあと、「Ctrl(Commnd)+R」のショートカットキーでページを読み込みます。
キャッシュを削除し再度ページを読み込むと、下部にページの読み込み速度が表示されるため、確認してください。
Chromeデベロッパーツールは表示速度の診断以外にも、ソースコードの確認やユーザーエージェント、位置情報を疑似的に変更する際にも活用できるでしょう。
Test My Siteであらゆる分析が可能
Test My Siteは2017年にリリースされた、Googleが提供しているツールです。
実際の表示速度の数値だけでなく、ユーザーの離脱率や同一業界内の平均速度との比較、ビジネスやWebサイトの費用対効果も確認できます。
表示速度が遅いことによるユーザーの離脱率を、Googleが実際に使用している指標に基づいて算出することにより、費用対効果を割り出しているのです。
あらゆる分析が可能なため、Webサイトの改善に有効活用できるでしょう。
Test My Siteが計測可能なのはスマートフォンページのみですが、計測したいページがスマートフォンに最適化されているかどうか、モバイルフレンドリーに対応しているかチェックできるのはメリットです。
Test My Siteを利用するにはまずメールアドレスを入力します。
入力したメールアドレス宛に詳細が送られるため、チェックが完了するまで少し時間がかかるでしょう。
GTmetrixで表示速度の履歴や問題のファイルを特定
GTmetrix(ジーティーメトリックス)は表示速度の表示だけでなく、表示が遅いファイルの特定や改善ポイントなど、Pagespeed Insightsと同じように速度改善に役立つ情報を取得できます。
また、無料の会員登録をすれば、表示速度の履歴を確認可能です。
ページの表示速度を改善する具体的な方法9選
ページの表示速度を改善するための具体的な方法を9つ紹介します。
・HTTPリクエストの回数を減らす
・PHPのバージョンアップ
・WordPress、プラグインのバージョンアップ
・ファイルを圧縮、軽量化する
・画像を圧縮、軽量化する
・プログレッシブ画像を活用する
・サーバーの性能を高める
・ブラウザのキャッシュを用いる
・Lazy Load(遅延読み込み)を活用する
HTTPのリクエスト回数を少なくする
HTTP/2に対応することで、表示速度を改善することができます。
Webサイトを構成している画像やJavaScript、CSSなどのファイルを1つ読み込むごとに、HTTPリクエストが1回増えます。
そのため、読み込むファイル数が多ければ多いほど表示速度が遅くなってしまうのです。
HTTP1.1では、リクエストが完了するまで他のリクエストを待機させる特徴があり、リクエストが増えただけリクエストの渋滞が起きてしまい、表示速度が遅くなるというデメリットがありました。
近年、デザインや機能、Web広告などWebサイトが多様化したことで、多くのリクエストを処理できる必要性が出てきたことから、HTTP/2が登場したのです。
HTTP/2は、リクエストを同時に処理できるようにしたことで、HTTP1.1で問題となっていたリクエストの渋滞を緩和できるようになりました。
しかし、HTTP/2を実装するには開発者ではないと困難なため、付き合いのある開発者に依頼できるかどうか確認する必要があります。
PHPをバージョンアップさせる
「PHP」で動いているWebサイトなら、バージョンアップすることで処理速度が改善され、Webサイトの表示速度が速くなります。
最新の対応バージョン (現在は7.4) にアップグレードすると、以前のバージョンに比べてパフォーマンスが最大で3倍〜4倍向上します。
出典:WordPress.org「PHP バージョンの更新」
このように、バージョンアップをすれば、表示速度の高速化をはじめ大幅なパフォーマンス向上が期待できるのです。
PHPのバージョンアップ時は、エラーが起きることも少なくありません。
バージョンアップ前に、「自社サイトや使用しているプラグインが最新のPHPに対応しているか」「キャッシュ系プラグインのような、バージョンアップ時にエラーが起きやすいプラグインはないか」を確認しましょう。
WordPress、プラグインをバージョンアップさせる
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(コンテンツデリバリネットワーク)を導入する
CDNは「Content Delivery Network」の頭文字を取った言葉で、Webコンテンツを効率よく高速で配信できるように設計されたネットワークです。
CDNを導入すれば、アクセスが集中したり、コンテンツ容量が大きくなったりした場合でも、Webサイトの表示や配信に支障が起きにくくなります。
サーバーの負荷軽減だけでなく、ホームページの表示速度も高速化するのが、CDNのメリットです。
WordPressといったサーバへの負荷が高いツールを使用したWebサイト運営や、大容量になりがちな動画を掲載するなら、CDNが有効でしょう。
ブラウザのキャッシュを用いる
ブラウザのキャッシュを用いると、不審な通信を減らすことができるため、表示速度の改善につながります。
ブラウザのキャッシュが活用されていないと、同一ページにアクセスした際に同じ情報をリクエスト後、ダウンロードしなければならず、表示速度が遅くなるのです。
Googleはキャッシュ期間については、以下が推奨されています。
・キャッシュ期間は少なくとも 1 週間に設定
・静的アセットや更新頻度の低いアセットについては最大で 1 年間に設定
参考:PageSpeed Tools「ブラウザのキャッシュを活用する」
キャッシュしてよいかどうかや、キャッシュの有効期限などを設定し、表示速度の改善につなげましょう。
詳しくはPageSpeed Tools「ブラウザのキャッシュを活用する」確認ください。
Lazy Load(遅延読み込み)を活用する
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()関数を呼び出して終了
現在Googleが重要視する指標3つのコアウェブバイタル
いくつかあるウェブバイタルのなかでも、Googleが発表したWebページUXの重要指標である「LCP」「FID」「CLS」の3つを「コアウェブバイタル」といいます。
この3つの指標を改善していくことはユーザービリティの向上やSEOにも関係するため、理解し自社サイトの改善に役立てましょう。
LCP
LCPはLargest Contentful Paintの頭文字をとったもので、「最も大きなコンテンツの絵」の意味です。
画像や動画、背景画像など、ブラウザで表示されるページ内のメインとなるファイルがユーザーに認識される程度に表示されるまでの時間を秒数(s)で表し、値が小さければ小さいほどUXが良いと判断します。
FID
FIDはFirst Input Delayの頭文字をとったもので、「最初に感じる遅れ」を意味します。
ユーザーがページに流入して表示されるまでにかかった時間を計り、ユーザーが一番初めに感じるサイトの印象を数値化するものです。
ミリ秒(ms)で表し、値が小さければ小さいほどUXが良いとされます。
CLS
CLSはCumulative Layout Shiftの頭文字をとったもので、「累積レイアウト変更」の意味です。
ユーザーがサイトを見たとき文字と画像が重なったり、広告がズレてしまい誤ってタップしてしまったりと、ユーザーが意図していないのにズレる現象がどのぐらい起きたのかを計測します。
影響を受けた範囲の大きさと表示距離をもとに、ページ表示の安定性を「レイアウトシフトスコア」と呼ばれる独自のスコアで評価したものです。
値が小さければ小さいほどUXが良いとされています。
また、Googleは2021年5月より検索結果の表示順位を決める指標にCore Web Vitals(以下、コアウェブバイタル)も含めると発表しました。
コアウェブバイタルがSEO指標に導入されたことで、ページの表示速度が遅いために、検索順位が下がる可能性もあるでしょう。
自社のWebサイトを効果的に運用するためにも、コアウェブバイタルを理解し、Webサイト改善に役立てていくことが求められます。
参考:Google Developers「サイトの健全性を示す重要指標」
コアウェブバイタルについて詳しくはこちらを参照ください。コアウェブバイタル3つの指標LCP/FID/CLSとは?改善方法まで網羅
まとめ ユーザーに不快感を与えないサイトをつくる
ページの表示速度が遅いと、ユーザーは離脱しやすくなり、コンバージョン数の低下や検索結果の表示順位の低下につながります。
表示速度が改善できれば、検索順位への影響だけでなく、ユーザーの満足度を高めることにつながるでしょう。
そうすれば、自社サイトのリピーターとなったり、口コミによる新たなファンが獲得できるかもしれません。
まずは改善の余地があるのかどうかを知るために、自社サイトの表示速度を把握するところから始めてみましょう。
ページの表示速度が遅いままでは、ユーザーにとって見づらい・操作しづらいサイトになっているだけでなく、SEOにもマイナスの影響を与えているかもしれません。
Webサイトの高速化はDreamLabまで
また、ページの表示速度はGoogleの検索順位ランキングに影響を与えることが見込まれています。そのため、Webサイトの表示順位向上のために、Webサイトの高速化も視野に入れるべきでしょう。
「ページの表示速度が遅くて困っている」「ページスピードを速くしたい」とお悩みの方は、DreamLabへご相談ください。
多くのWebサイトの改善を行ってきた弊社のノウハウを生かして、ページの表示速度だけでなくさまざまな視点から、効果的なアドバイスと改善を行います。
以下、詳細な案内ページです。ご確認ください。
AIがあなたにオススメの記事を表示しています
-
2021.12.27
canonical(カノニカル)によるURLの正規化とは?SEOの評価をアップさせる方法
-
2020.07.07
SEOの要「E-A-T」とは?E-A-Tへの対応方法も含めて解説
-
2021.03.30
SEOのキーワードの探し方とは?コツやツールなどをご紹介します
-
2021.12.20
67語掲載!Webマーケティング用語集とSEO用語集まとめ
-
2022.01.07
被リンクの購入は意味があるのか?ペナルティやSEO効果について解説