悩めるWEB担当者様のための最新ノウハウをお届け

Webサイトの表示速度の計測&改善方法を徹底解説!

表示速度

Webページの表示速度が遅いと、どんなデメリットがあるかご存知ですか?
本記事では表示速度がもたらす影響と代表的な表示速度の確認方法であるGoogle PageSpeed Insights、Google Analytics、Chromeデベロッパー・ツールの使い方をご紹介します。
さらに、具体的な表示速度の改善方法に加え、ユーザーの体感速度を向上する最新の技術までを解説します。

>>【大好評】SEOの課題を可視化する独自の診断実施中!無料SEO診断はこちらから

【重要】表示速度は直帰率やCVに影響

2018年にGoogleは、モバイル検索のページ表示速度をランキング要素に加える「スピードアップデート」の正式導入を発表しました。

こちらは、ページの表示速度が遅いと、検索エンジンからの評価が低くなるアルゴリズムであり、すでに表示速度が速い場合に、検索エンジンからの評価が上がるわけではありません。
ページの表示速度が早くても、メリットは特にありませんが、サイトの表示速度があまりにも遅い場合は様々なデメリットがあります。

ページの表示速度が遅いことで生じるデメリット

デメリットとして下記の2つが挙げられます。

  • 競合のサイトと比較した際に不利になる
  • ページの直帰率が上昇する

2010年にGoogleが発表した情報によると「さまざまなソースを使用して、他のサイトと比較したサイトの速度を決定します。」とあります。
つまり、競合のサイトと比較した際に、自社サイトの表示速度が遅いとGoogleのランキング評価で不利になる可能性があるのです。

参照:ウェブマスターセントラルブログ

ページの直帰率が上昇する

直帰率とは、全体のセッション(訪問)のうち、訪問したページしか見なかった確率のことです。

2018年にgoogleは表示速度及び直帰率について下記のように発表しています。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
表示速度が1秒から10秒に落ちると、直帰率は123%上昇する

参照:Think with Google

つまり、ページの表示速度が遅くなるほど、直帰率が上昇するのです。

直帰率が高いとは、ユーザーがアクセスしたものの、他のページに回遊しない確率(=回遊率)が高くなっていることを指しています。

回遊率が上がると以下のような問題が生じてきます。

  • 検索順位の低下
  • PVやセッションの減少
  • ユーザーの満足感、信頼感の低下
  • コンバージョンの低下
  • リピーターの低下

このように、ページの表示速度が遅くなると、検索順位が落ち、PVやセッション数などにも悪影響を与えてしまいます。

とはいえ、現時点で表示速度が遅いサイトは、直帰率やCV(コンバージョン)に影響があるため、次章で紹介する、「表示速度を確認する3つのツール」と「表示速度を改善する方法」で速度改善を検討してみましょう。

表示速度を確認する3つのツール

サイトの表示速度は、無料で簡単に計測が可能です。
本記事では代表的な3つのツールをご紹介します。

  • PageSpeed Insights
  • Google Analytics
  • developr ツール

Page Speed Insightsの使い方

Page Speed Insightsは、Googleが提供しているページパフォーマンスを測定するツールです。URLを入力すると、速度を100点満点で計測し、改善が必要な項目を提案してくれます。

PageSpeed Insights howto

読み込み後、モバイル版、PC版の両方のページ表示速度の測定結果が確認できます。

「モバイル・パソコン」のスコアリング

モバイルのスコア

上記の場合、モバイルのスコアは15点でした。

パソコンのスコア

パソコンでのスコアは59点でした。

スコアは100点満点で赤枠部分に表示されます。100点に近いほど、髙い評価となります。

0~49点は赤(Low)、50~89点は黄色(Medium)、90~100点は緑(Good)、
また色は緑(Good)、黄色(Medium)、赤(Low)の3段階で評価されます。

90点以上はパフォーマンスの髙いページと評価されるので、90点以上を目指せるように改善をしていきましょう。

Google Analyticsの使い方

続いて、Google Analyticsでの計測方法を紹介します。
サイト内の平均読み込み時間は、レポート画面を開き、「行動」→「サイトの速度」→「概要」にて確認できます。

平均読み込み時間

また、ページごとの読み込み時間はレポート画面から、「行動」→「サイトの速度」→「ページ速度」で確認できます。

サイト内平均より遅い場合には、左側に赤色、早い場合には、右側に緑色に表示されます。

各ページの読み込み時間

GAについてより詳しく知りたい方はこちらの記事をご覧ください。

【GAとは?】Googleアナリティクスとは何か分かりやすく解説します!

Chromeデベロッパーツールでの測定方法

Chromeのデベロッパーツールでも表示速度の測定ができます。
デベロッパーツールは、Windowsならctrl + shift + I、Macならcommand +option + iのショートカットキーで起動します。

「Elements」タブにて、コードのデバック処理などをする機会は多いと思いますが、ページの表示速度を確認する際には「Network」タブを開きます。

キャッシュが残っていると正確な表示速度を計測できないため、左上のリロードボタンをクリックし、キャッシュを削除します。

その後、ページを再度読み込みます。(windowsは Ctrl + Rキー、Macは commnd + Rキーがショートカットキーです。)

①キャッシュを削除します。②Ctrl+Rで読み込みます。

下部に表示されるFinishの時間が、ページが完全に表示されるまでの時間です。

表示速度を改善する方法

はじめに紹介したPageSpeed Insightsでは、スコアの他に表示速度を改善するための提案もしてくれます。

この提案を元に具体的に表示速度を改善するための作業を決めていきましょう。

PageSpeed Insightsで表示速度を最適化

今回は、PageSpeed Insightsで提案される項目のうち、ツールなどを使って比較的簡単に対応可能な「画像を最適化する」、「リソースを圧縮する」、「ブラウザのキャッシュを活用する」の3つに絞り、対策を紹介します。

画像を最適化する

画像を最適化しファイルの容量を抑えることで、表示速度の改善が可能です。

適切なファイルフォーマット(PNG、JPEG、GIF、SVG)で保存したり、画像のリサイズを行うことも重要です。

以下のような画像最適化ツールを活用すると、より効率的に最適化できます。

リソースを圧縮する

リソースとは具体的には、「HTML・JavaScript・CSS」などのソースを指します。

HTML、JavaScriptやCSSのコードに含まれる、余分な改行やコメントアウトなどを削除することでファイルサイズが軽くなり、表示速度を改善が可能です。

サイトなど膨大な量のファイルを手作業で修正するのは非効率なので、自動で圧縮してくれるツールを活用すると良いでしょう。

以下のような自動圧縮ツールを活用すると、より効率的に圧縮ができます。

ブラウザのキャッシュを活用する

キャッシュが活用されていない場合、同じページにアクセスした際に、同じ情報をサーバーにリクエストしダウンロードを行っているため、表示速度が遅くなってしまっています。

設定準備

ブラウザのキャッシュを使用するには、「.htaccessファイル」に下記のように記述します。

htacess①

【参考】Googleはキャッシュの有効期限を下記のように設定しています。

  • 静的なリソースのキャッシュの有効期間は 1週間以上
  • 広告やウィジェットなどのサードパーティリソースの場合は、キャッシュの有効期間を 1日以上
  • 最大で 1年間先に設定

参考 ブラウザのキャッシュを活用する

キャッシュを利用できるようにすることで、不要な通信が減り、表示速度が早くなります。

上記の例では、javascript、css、一部の画像について記述していますが、他にも、svg(image/svg+xml)、pdf(application/pdf)、音声(audio/mpeg)、動画(video/mpeg)、フォント(application/x-font-woff)などについても圧縮するファイルを指定することが可能です。

gzip圧縮の設定

gzip圧縮とは、ファイルのサイズを圧縮する方法の一つで、html、css、javascriptなどを圧縮させて表示速度を改善させることができます。

※gzip圧縮をサーバーで行うにはApacheサーバーのmod_deflateが有効になっている必要があります。

gzip圧縮を行うために、「.htaccessファイル」に下記のように記述します。
gzip

見慣れない記述が多く、難しく感じてしまうかも知れませんが、即効性は高いので、今一度設定がなされているかを確認しましょう。

体感速度を改善する方法について

これまでは実際のページの表示速度を改善する方法を紹介してきました。
ここではユーザーの体感速度を改善させる2つの技術について紹介していきます。

体感速度を改善する方法について

AMP(Accelerated Mobile Pages)とは、「モバイルページをより早く表示させるための手法」のことです。
2015年10月、GoogleやTwitterなどがモバイル端末でのユーザー体験向上を目的として、オープンソースプロジェクトを開始しました。

このAMPに対応しているページは、GoogleやTwitterがAMPページをあらかじめキャッシュしています。AMPに対応しているページがクリックされた際に、GoogleやTwitterは元々キャッシュしておいたページを表示します。そのため、通常よりも表示速度が早まるのです。

ページをAMPに対応させるには、必要な動作やタグをHTML上に記述しなければなりません。

HTMLへの記述方法や、AMPについてより詳しく知りたい方はこちらの記事をご覧ください。

【AMP】Googleが推進するAMPとは?概要と対応方法まとめ

SPA(Single Page Application

SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。

ページ内で変更する必要がない部分を再読み込みをしないことで、表示速度を高速化できるのです。

従来のWebアプリケーションの仕組みは、以下のようになっています。

  1. ユーザーが何かしらのアクション(クリックなど)を行う
  2. それを受けてサーバに通信(リクエスト)
  3. サーバ側でHTMLを生成し、ブラウザに返す(レスポンス)
  4. HTMLに反映

このようにページを更新するたびに、変更していない部分までサーバー側で生成し直していました。
そのため処理に時間がかかっていました。

SPAを導入した際のWebアプリケーションの仕組みは以下のとおりです。

  1. ユーザーが何かしらのアクション(クリックなど)を行う
  2. そのアクションに必要な部分のデータだけをサーバに要求
  3. 返ってきたデータをJavaScriptで処理
  4. 処理をHTMLに反映

このようにブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えています。

SPAが導入されているページの例としては、GoogleMapが有名です。マップ上を移動しても、画面が切り替わる(白い画面になる)ことなく、ページが表示され続けます。

一方で、SPAはブラウザ上で行っていた挙動を、JavaScriptで処理するので、どうしても最初にページにアクセスした際のローディングに時間がかかります。そのため、ブログなどの直帰率が高いサイトについてはあまり向いていません。

SPAについてより詳しく知りたい方はこちらの記事をご覧ください。

SPA(Single Page Application)ってなに?

まとめ

本記事では、PageSpeed Insightsなどのツールを用いたページ表示速度の改善方法について紹介いたしました。ページの表示速度が遅いと、ユーザーの離脱率が高まり、CVやPV数も下ってしまいます。
まだ「表示速度」を測定していないのであれば、本日ご紹介させていただいたツールで実際に測定し、改善してみてはいかがでしょうか。

>>ランディングページ改善でCVRアップ?無料LP診断はこちら!

 

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。


広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事

資料請求はこちら! 3分でサービス内容がわかる!デジタルマーケティングの端から端まで支援します!・3分で読める・事例付き・支援内容を網羅 ダウンロードはこちら