検索ブラウザにおいて上位表示を目指すには、ページ表示速度をスコア表示するウェブツール「ページスピードインサイト」を活用することが重要です。
本稿では、ページスピードインサイトの概要と活用メリット、表示速度の改善方法などを詳しく紹介します。
ページスピードインサイトとは
ページスピードインサイトはWebページの表示速度を測定し、独自のスコアとして数値化するWebツールです。正式名称は「Google PageSpeed Insights」で、Google社が提供しています。
WebページのURLを入力するだけで、簡単に表示速度を計測できるのが特徴です。
ほかにも改善ポイントの分析や表示も行えるため、表示速度が低速な場合にはぜひ活用しましょう。
ページ表示の遅延で生じる2つのデメリット
ページ表示の遅延で生じるおもなデメリットには「表示速度が遅いほど直帰率が上昇する」「SEOにもマイナスの影響がある」の2点が挙げられます。ページ表示速度はユーザーの利便性に直接関係する要素の一つなのです。
また、表示速度の遅さはユーザー体験を重視するGoogleにとってマイナス要素でもあるため、SEOの観点からも改善するべきでしょう。
ここではページ表示の遅延で生じるおもなデメリットについて詳しく見ていきます。
1. 表示速度が遅いほど直帰率が上昇
ページの表示速度が遅いほど、自身のサイトに訪問したユーザーが最初のページだけを見て離脱した割合を示す「直帰率」が上がります。表示速度が1秒から3秒の場合、直帰率は約30%、5秒の場合は約90%も上昇するとされているのです。
つまり、表示速度が遅ければ遅いほど見込みユーザーを逃がしていることを意味します。
2. SEOにもマイナスの影響がある
現在のSEO対策においてページ表示速度は重要な指標であり、ページ表示の遅延はSEOにも悪影響を及ぼします。
ウェブページを巡回し、情報をデータベースに登録するGoogleのクローラーがサイトに滞在する時間は決まっているとされており、ページの読み込み速度が遅いと滞在時間内にWebサイトの読み込みが完了しないのです。
読み込みが完了しなければGoogleにサイト情報が登録されず、SEO的にもマイナスの影響を及ぼすため注意しましょう。
ページスピードインサイトで見るべき3つのポイント
ページの表示スピードをスコア化してくれるページスピードインサイトにおいて確認すべき点には、「フィールドデータ」「診断と監査」「ラボデータ」の3つがあります。
ページスピードインサイトではこれらの3つがユーザーにとって適当な設定になっているかを確認でき、具体的かつ効率的な対策の実施が可能です。
ここではページスピードインサイトにおいて確認すべき3つのポイントについて、その内容を詳しく紹介します。
1. ユーザーから実際に取得する「フィールドデータ」
フィールドデータとは、ページを閲覧したユーザーから実際に取得するデータのことです。
ユーザーはそれぞれ異なるデバイスや回線を通じてアクセスします。3Gや4G、5Gといったモバイル回線やWi-Fi、有線LANなど、インターネットの接続回線はさまざまです。
また端末もiPhoneやAndroidなど、ユーザーによって異なります。
ページスピードインサイトは、このように環境が異なるユーザーのデータを集計し、28日間分を累計したデータを表示してくれるのです。
2. 診断と監査
診断と監査の項目についても確認しましょう。診断では該当ページがweb開発にとって適当な設定になっているかを診断して表示してくれます。
オレンジ色で表示される「改善したほうがよい項目」と、赤色で表示される「優先すべき改善案」の2つで診断結果が表示されるので、ページの表示速度を速くするためのヒントとして役立つでしょう。
監査では、それぞれ合格した項目を表示してくれます。監査に合格したものは改善不要な項目として一覧表示してくれるのです。
3. 特定環境で取得する「ラボデータ」
Google社が提供する計測ツールである「LightHouse」が使われるラボデータは、特定の環境において取得したデータを示します。あらゆる環境のデータを取得する「フィールドデータ」とは逆のデータともいえるでしょう。
特定の環境とは自分のパソコンやモバイルなどのことで、改善した事項がすぐに反映されます。
ただし、特定環境でのデータであるため、フィールドデータまでもが改善されるわけではない点を覚えておいてください。
ページスピードインサイトの結果をもとにした改善方法
ページスピードインサイトの結果をもとにした改善方法は、おもに以下の7項目です。
- 使用する画像を最適化する
- CSS・HTML・JavaScriptを縮小する
- サーバーからの応答時間を減らす
- ブラウザのキャッシュ設定を変更する
- 無意味なリダイレクトを使用しない
- 表示コンテンツの優先順位を制限する
- 次世代フォーマットの画像を使用する
それぞれの改善方法について詳しく見ていきましょう。
使用する画像の最適化
画像サイズの警告が表示されている場合は、サイトに使用している画像の最適化を図りましょう。特に解像度の高い画像や容量の大きい画像は、ページの表示速度の遅延を招くため、
ページに掲載する際に圧縮やサイズ変換などを行って画像を最適化します。
画質を下げたくない場合は、圧縮前後のデータを変えることなくデータ量だけを抑えられるデータ圧縮法「ロスレス圧縮」(可逆圧縮)を活用するとよいでしょう。
CSS・HTML・JavaScriptの縮小
CSSやHTML、JavaScriptに関する警告や提案が表示されている場合には、該当するものの縮小を図りましょう。CSSやHTML、JavaScriptはWebサイトの構築に欠かせないものですが、コードの量が多いと読み込むデータ量も増え、それが読み込みスピードにも影響します。
このような場合は、CSSやJavaScriptコードの不要なインデントや改行などを削除してデータ量を圧縮したり減らしたりする「Minify」(ミニファイ)などによる工夫が有効です。
ただし、万が一データが破損してしまったときに備えて、縮小を行う際には事前にバックアップを取っておいてください。
サーバーからの応答時間を減らす
サーバーの読み込み速度に関する提案が表示された場合は、サーバーからの応答時間を減らすとよいでしょう。
サーバーの応答時間が長くなる原因には「サーバーのスペックが低い」「読み込み速度が遅いアプリケーションである」「PHPバージョンが古い」「メモリ不足」などがあります。
メモリ不足やPHPバージョンの古さが原因である場合は高度な知識を要しませんが、専門的な部分が原因の場合は、知識のあるエンジニアによる調査が必要となるでしょう。
ブラウザのキャッシュ設定を変更
ブラウザのキャッシュを活用するという表示が出た場合、ブラウザのキャッシュ設定を変更します。キャッシュとは、訪問したWebページの情報を一時的に保存する機能で、Webページの情報を保存しておくことで、保存情報を用いて素早くページを再表示できます。
一方、キャッシュが保存されていない場合は、アクセスの度にページ情報を読み込むことになるので、ページの表示速度が遅くなりがちです。
キャッシュの保存を許可していない場合や保存期間が短い場合には、設定を変更すると表示速度の改善が期待できます。
無意味なリダイレクトを使用しない
サイト移転やモバイルページ転送、URL変更などの無意味なリダイレクト設定が行われると、その分ページ表示速度が遅くなります。リダイレクトとは、ユーザが来訪したサイトから別のサイトへ自動移動させるための設定です。
モバイル対応でリダイレクト設定を行っている場合は、中間リダイレクトなしの設定や、パソコンとモバイルのいずれにも対応するWebページへのリニューアルも検討しましょう。
表示コンテンツの優先順位を制限
表示コンテンツの優先順位を制限することで、表示速度遅延を軽減することができます。
Webページのすべてのデータを読み込もうとするとその分時間がかかりますが、アクセス時に最初に見える範囲である「ファーストビュー」の表示範囲を制限すれば、ページ速度の改善が可能です。
ただし、この方法はファーストビューが改善されるだけであり、Webページ全体の表示速度を改善することにはならないため注意しましょう。
次世代フォーマットの画像使用
JPEG2000やWebPなどの次世代フォーマットの画像を使用することも表示速度に影響します。これらのフォーマットはページ表示速度を早くするものとして、その使用が推奨されています。
非対応ブラウザへの対応など開発の負担が大きいため、現時点ではいまだJPGやPNGなどの利用が一般的ですが、ページ表示速度を改善したい場合は次世代フォーマットの使用も検討するとよいでしょう。
WebPについては以下の記事で詳しく解説しています。
WebPとその他画像形式の違いとは?3つのメリットと変換方法解説
ページスピードインサイト以外の計測ツール
ここでは、ページスピードインサイト以外の計測ツールである「Test my site」と「ChromeDevTool」をご紹介します。
「Test my site」はモバイルに特化した表示速度計測ツールであり、「ChromeDevTool」はオフラインでも計測できるツールです。
それぞれの特徴を理解したうえで、状況に応じて使い分けましょう。
モバイルのみを測定する「Test my site」
「Test my site」は、モバイルの表示速度のみを計測できるツールです。読み込み速度表示だけではなく、ページ内にあるHTMLやCSSなどのコードボリュームの割合も分析してくれます。
また、おおよその離脱率も把握できるので、ページごとのユーザーの取りこぼしを確認できるでしょう。
ただし、計測結果が入力したメールアドレスに送られる仕様であるため、結果をすぐに確認できない点に注意が必要です。
オフラインでも測定できる「ChromeDevTool」
「ChromeDevTool」はChromeの検証ツールであり、オフラインでも表示速度を計測できるツールです。また、表示速度だけではなく、SEOの対策結果もスコア化して表示してくれます。
ツールを立ち上げる必要がなく、Webサイトの構築中でも表示速度を確認できる点が大きな特長といえるでしょう。
改善点を洗い出しながら効率的にWebページを作成したいという場合は、ぜひ活用してみてください。
ページの読み込み速度の重要性は今後も高まる
ユーザーの利便性やモバイルファーストがSEO評価における重要ポイントとなりつつある昨今、ページ読み込み速度の重要性は今後もさらに高まっていくことでしょう。とはいえ、専門的な内容から取り掛かると、改善が進まない可能性もあります。
まずは、画像の最適化や次世代フォーマットの活用など、手をつけやすい対策から始め、読み込み速度改善を効率的に進めていきましょう。