Webページの表示速度が遅いと、どんなデメリットがあるかご存知ですか?
本記事では表示速度がもたらす影響と代表的な表示速度の確認方法であるGoogle PageSpeed Insights、Google Analytics、Chromeデベロッパー・ツールの使い方をご紹介します。
さらに、具体的な表示速度の改善方法に加え、ユーザーの体感速度を向上する最新の技術までを解説します。
サイトリニューアルを検討されている方は、こちらの記事をご覧ください。
また大規模サイトを運営されている方は以下の記事をご覧ください。
表示速度だけでなくその他のSEOの基礎知識もご紹介しております。
大規模サイトの表示速度高速化は日ごろのSEO施策が重要。続けてやるべき大規模サイトSEOの基礎を学ぶ
【重要】表示速度は直帰率やCVに影響
2018年にGoogleは、モバイル検索のページ表示速度をランキング要素に加える「スピードアップデート」の正式導入を発表しました。
こちらは、ページの表示速度が遅いと、検索エンジンからの評価が低くなるアルゴリズムであり、すでに表示速度が速い場合に、検索エンジンからの評価が上がるわけではありません。
ページの表示速度が早くても、メリットは特にありませんが、サイトの表示速度があまりにも遅い場合は様々なデメリットがあります。
ページの表示速度が遅いことで生じるデメリット
デメリットとして下記の2つが挙げられます。
- 競合のサイトと比較した際に不利になる
- ページの直帰率が上昇する
2010年にGoogleが発表した情報によると「さまざまなソースを使用して、他のサイトと比較したサイトの速度を決定します。」とあります。
つまり、競合のサイトと比較した際に、自社サイトの表示速度が遅いとGoogleのランキング評価で不利になる可能性があるのです。
ページの直帰率が上昇する
直帰率とは、全体のセッション(訪問)のうち、訪問したページしか見なかった確率のことです。
2018年にgoogleは表示速度及び直帰率について下記のように発表しています。
表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
表示速度が1秒から10秒に落ちると、直帰率は123%上昇する
つまり、ページの表示速度が遅くなるほど、直帰率が上昇するのです。
直帰率が高いとは、ユーザーがアクセスしたものの、他のページに回遊しない確率(=回遊率)が高くなっていることを指しています。
回遊率が上がると以下のような問題が生じてきます。
- 検索順位の低下
- PVやセッションの減少
- ユーザーの満足感、信頼感の低下
- コンバージョンの低下
- リピーターの低下
このように、ページの表示速度が遅くなると、検索順位が落ち、PVやセッション数などにも悪影響を与えてしまいます。
とはいえ、現時点で表示速度が遅いサイトは、直帰率やCV(コンバージョン)に影響があるため、次章で紹介する、「表示速度を確認する3つのツール」と「表示速度を改善する方法」で速度改善を検討してみましょう。
表示速度を確認する3つのツール
サイトの表示速度は、無料で簡単に計測が可能です。
本記事では代表的な3つのツールをご紹介します。
- PageSpeed Insights
- Google Analytics
- developr ツール
Page Speed Insightsの使い方
Page Speed Insightsは、Googleが提供しているページパフォーマンスを測定するツールです。URLを入力すると、速度を100点満点で計測し、改善が必要な項目を提案してくれます。
読み込み後、モバイル版、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についてより詳しく知りたい方はこちらの記事をご覧ください。
Chromeデベロッパーツールでの測定方法
Chromeのデベロッパーツールでも表示速度の測定ができます。
デベロッパーツールは、Windowsならctrl + shift + I、Macならcommand +option + iのショートカットキーで起動します。
「Elements」タブにて、コードのデバック処理などをする機会は多いと思いますが、ページの表示速度を確認する際には「Network」タブを開きます。
キャッシュが残っていると正確な表示速度を計測できないため、左上のリロードボタンをクリックし、キャッシュを削除します。
その後、ページを再度読み込みます。(windowsは Ctrl + Rキー、Macは commnd + Rキーがショートカットキーです。)
下部に表示されるFinishの時間が、ページが完全に表示されるまでの時間です。
表示速度を改善する方法
はじめに紹介したPageSpeed Insightsでは、スコアの他に表示速度を改善するための提案もしてくれます。
この提案を元に具体的に表示速度を改善するための作業を決めていきましょう。
PageSpeed Insightsで表示速度を最適化
今回は、PageSpeed Insightsで提案される項目のうち、ツールなどを使って比較的簡単に対応可能な「画像を最適化する」、「リソースを圧縮する」、「ブラウザのキャッシュを活用する」の3つに絞り、対策を紹介します。
画像を最適化する
画像を最適化しファイルの容量を抑えることで、表示速度の改善が可能です。
適切なファイルフォーマット(PNG、JPEG、GIF、SVG)で保存したり、画像のリサイズを行うことも重要です。
以下のような画像最適化ツールを活用すると、より効率的に最適化できます。
リソースを圧縮する
リソースとは具体的には、「HTML・JavaScript・CSS」などのソースを指します。
HTML、JavaScriptやCSSのコードに含まれる、余分な改行やコメントアウトなどを削除することでファイルサイズが軽くなり、表示速度を改善することが可能です。
サイトなど膨大な量のファイルを手作業で修正するのは非効率なので、自動で圧縮してくれるツールを活用すると良いでしょう。
以下のような自動圧縮ツールを活用すると、より効率的に圧縮ができます。
ブラウザのキャッシュを活用する
キャッシュが活用されていない場合、同じページにアクセスした際に、同じ情報をサーバーにリクエストしダウンロードを行っているため、表示速度が遅くなってしまっています。
設定準備
ブラウザのキャッシュを使用するには、「.htaccessファイル」に下記のように記述します。
【参考】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ファイル」に下記のように記述します。
見慣れない記述が多く、難しく感じてしまうかも知れませんが、即効性は高いので、今一度設定がなされているかを確認しましょう。
体感速度を改善する方法について
これまでは実際のページの表示速度を改善する方法を紹介してきました。
ここではユーザーの体感速度を改善させる2つの技術について紹介していきます。
体感速度を改善する方法について
AMP(Accelerated Mobile Pages)とは、「モバイルページをより早く表示させるための手法」のことです。
2015年10月、GoogleやTwitterなどがモバイル端末でのユーザー体験向上を目的として、オープンソースプロジェクトを開始しました。
このAMPに対応しているページは、GoogleやTwitterがAMPページをあらかじめキャッシュしています。AMPに対応しているページがクリックされた際に、GoogleやTwitterは元々キャッシュしておいたページを表示します。そのため、通常よりも表示速度が早まるのです。
ページをAMPに対応させるには、必要な動作やタグをHTML上に記述しなければなりません。
HTMLへの記述方法や、AMPについてより詳しく知りたい方はこちらの記事をご覧ください。
SPA(Single Page Application
SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。
ページ内で変更する必要がない部分を再読み込みをしないことで、表示速度を高速化できるのです。
従来のWebアプリケーションの仕組みは、以下のようになっています。
- ユーザーが何かしらのアクション(クリックなど)を行う
- それを受けてサーバに通信(リクエスト)
- サーバ側でHTMLを生成し、ブラウザに返す(レスポンス)
- HTMLに反映
このようにページを更新するたびに、変更していない部分までサーバー側で生成し直していました。
そのため処理に時間がかかっていました。
SPAを導入した際のWebアプリケーションの仕組みは以下のとおりです。
- ユーザーが何かしらのアクション(クリックなど)を行う
- そのアクションに必要な部分のデータだけをサーバに要求
- 返ってきたデータをJavaScriptで処理
- 処理をHTMLに反映
このようにブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えています。
SPAが導入されているページの例としては、GoogleMapが有名です。マップ上を移動しても、画面が切り替わる(白い画面になる)ことなく、ページが表示され続けます。
一方で、SPAはブラウザ上で行っていた挙動を、JavaScriptで処理するので、どうしても最初にページにアクセスした際のローディングに時間がかかります。そのため、ブログなどの直帰率が高いサイトについてはあまり向いていません。
SPAについてより詳しく知りたい方はこちらの記事をご覧ください。
まとめ
本記事では、PageSpeed Insightsなどのツールを用いたページ表示速度の改善方法について紹介いたしました。ページの表示速度が遅いと、ユーザーの離脱率が高まり、CVやPV数も下ってしまいます。
まだ「表示速度」を測定していないのであれば、本日ご紹介させていただいたツールで実際に測定し、改善してみてはいかがでしょうか。
また、SEO施策でお悩みの方は、一度プロにお任せしてみるのもおすすめです。
SEOコンサルティングに関しては、以下の記事で詳しくご紹介しております。
当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。
広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。
SEOにお困りなら【無料SEO診断】
株式会社デジタルアイデンティティでは、創業から14年以上、SEO対策に注力してきました。
検索エンジンをハックするようなブラックハットな手法に頼ることなく、Googleの推奨に沿ったホワイトハットな手法で上位表示を実現してきました。
そんな弊社のSEOナレッジを50以上の項目に落とし込んだSEO診断を無料でご提供しています!
(毎月先着10社様限定とさせていただいています)
無料SEO診断はこんな方におすすめ!
- SEO対策をどこから始めればいいかわからない…
- 自社でSEO対策をしているが思うように順位が上がらない…
- 他社にSEO対策を依頼しているがセカンドオピニオンが欲しい…
- なぜ競合サイトの検索順位が高いのか知りたい…
- 現在のSEO対策が正しいのか確認したい…
弊社の無料SEO診断でわかること
- 現在のSEO評価
- SEO項目ごとの改善方法
- SEO項目ごとの優先度
正しい現状認識は、SEO対策で効果を出す上で何よりも重要です。
自社のSEO対策について、少しでも気になる方は以下のリンクからお気軽にお申し込みください。