【ページスピード高速化】実現するための基礎知識・改善方法を解説
ページスピードとは、Webページが表示されるまでのスピードのことです。
どれだけ魅力的なサービスや商品を載せたWebサイトでも、クリックしてから表示されるのに時間がかかると、ユーザーは簡単に離脱してしまいます。
Webサイトを訪れたユーザーに商品やサービスに魅力を持ってもらう上で、ページスピードの高速化は必要不可欠です。
そこで今回は、ページスピードを高速化させるための基礎知識や改善方法を解説します。
本記事のターゲット
- Webサイトのページスピードを高速化したい人
- ページスピードの基礎知識を身に付けたい人
本記事で解決する疑問
- ページスピードを高速化しなければならない理由を知りたい
- 現在のページスピードを測定したい
本記事では、以下のポイントについて解説します。
- ページスピードを高速化しなければならない理由
- ページスピードが与える影響
- ページスピードの改善方法
ページスピードを高速化しなければならない理由
ページスピードは、Google検索結果の表示順位や、Webサイトを訪れたユーザーの離脱率に影響します。
ここからは、ページスピードを高速化しなければならない理由について詳しく解説します。
Google検索結果の表示順位が下がるに影響する
ページスピードは、Googleの検索結果の表示順位に影響を与えます。
インターネット検索をするには複数のツールがありますが、現在は多くの人がGoogleを利用しています。Googleは、ページの読み込み速度が順位決定の指標に含まれると明言しており、Google検索結果の表示順位を上げるために、ページスピードの高速化は重要な要因の一つとなります。
参考：Google「ページの読み込み速度をモバイル検索のランキング要素に使用します」
読み込みが遅いとユーザーが離脱する
ページスピードはWebサイトを訪れたユーザーの離脱率にも影響します。
Googleの調査では、ページ表示速度が遅くなると直帰率が増加することがわかりました。つまりページスピードを高速化することは、ユーザーの離脱率を下げ、Webサイトで商品やサービスの訴求がしやすくなるということです。
加えてページの表示速度が遅く、ユーザビリティが低くなることで、コンバージョン率が低下する可能性もあります。ユーザーの離脱率やコンバージョン率の低下を防ぐためにも、ページスピードの高速化が重要です。
参考：Google「New Industry Benchmarks for Mobile Page Speed – Think With Google」
ページスピードに影響する要因
ページスピードは、ネットワーク処理やレンダリング処理、サーバー処理などの要因に大きな影響を受けます。ここからは、ページスピードに影響する要因について、それぞれ詳しく解説します。
ネットワーク処理（通信回数・通信量）
ネットワーク処理とは、Webサイト内で発生する通信回数や通信量などが、Webサイト自体に与える影響のことです。
通信回数や通信量が多くなるほどバックエンドの処理能力が必要となりますが、対応できる通信量や通信回数を超えてしまうとページスピードが低下してしまいます。
HTML内で外部ファイルとして読み込んでいるCSSファイルやJava Scriptファイルは、その数だけ通信が発生しています。また、動画などファイルサイズの大きいデータは1回あたりの通信量も増えます。無駄な通信を削減することで、通信回数や通信量などの負荷を減らし、ページスピードが低下するリスクを下げることができます。
また、ページスピードが以前よりも低下していると感じる場合は、バックエンドの処理能力が通信回数や通信量に対応しているかを確認しましょう。
レンダリング処理（描画）
レンダリング処理とは、サーバーから届いたデータを画面に表示するための処理のことです。
サーバーから送られたデータを画面に表示する処理するためには、バックエンドで複雑な作業をしなければなりません。レンダリング処理が複雑であればあるほど、バックエンドの作業にも負荷がかかり、その分ページスピードが遅くなります。
大きなサイズの画像や過度なアニメーションなどでページ内のコンテンツの容量が大きくなってしまうと、それだけ処理に時間がかかってしまいます。詳しい対策は下記のPageSpeed Insightsの評価項目の改善方法にて解説しています。
サーバー処理（データ生成）
サーバー処理とは、Webページに載せるための情報を集めてデータを生成する処理のことです。Webページに載せるための情報が多かったり、生成するデータが複雑だとページスピードが低下します。
サーバー処理によるページスピードの低下を改善するためには、余計な処理を行わないようサーバーをプログラミングするなどの方法があります。
しかし、レンタルサーバーの場合はサーバー処理を編集することはできないため、サイト構築の時点で高速なサーバーを選択する必要があります。
ページスピード測定ツール「Page Speed Insights」
現在のWebサイトのページスピードがどれくらいであるかを知ることで、改善が必要か否かを判断しやすくなります。
測定には、ページスピード測定ツールを使うと便利です。ページスピード測定ツールは様々なものがありますが、代表的なツールとして知られているのがGoogleの「Page Speed Insights」です。
ここからは、Googleの「Page Speed Insights」の概要を解説します。
Page Speed Insightsの使い方
Page Speed Insightsは、測定したいWebサイトのURLを入力するだけでそのWebサイトのページスピードを測定できます。URLを入力するだけでスピードを測定できる利便性の高さと、競合他社と比較できるツールであることから多くの人が利用しています。
Page Speed Insightsの使い方はシンプルです。上記で述べた通り、Page Speed Insightsにアクセスし、測定したいWebサイトのURLを入力して分析のボタンをクリックするだけです。簡単にページスピードが測定でき結果は数値で表示されるため、SEOの専門的な知識がなくても現在のページスピードのレベルを判断できます。
Page Speed Insightsのスコア
Page Speed InsightsにアクセスしてURLを入力すると、測定結果がスコアとして表示されます。スコアは100点満点で、PCサイトは50点以上、モバイルサイトは40点程度を目指すとよいでしょう。
なお、Page Speed Insightsは調査する度に数値が多少変わることがあります。点数が低くても実際に閲覧して問題ない速度のサイトもあるので、遅いと感じたら原因を確認する目的などで活用してみましょう。
Page Speed Insightsの測定結果に表示される指標
Page Speed Insightsの測定結果は、単に100点満点のスコアのみが表示されるわけではなく、「実際のユーザーの環境で評価する（フィールドデータ）」と、「パフォーマンスの問題を診断する（ラボデータ）」の2つの見方でページスピードを評価できます。
まず、「実際のユーザーの環境で評価する」で表示される項目と、各項目の指標は以下の通りです。
| 項目 | 内容 |
|---|---|
| FCP（First Contentful Paint） | ページの読み込みを開始してから、ページ内のコンテンツが表示されるまでにかかった時間 |
| FID（First Input Delay） | ユーザーがリンクをクリックまたはタップしてから、ブラウザーが処理を開始するまでにかかった時間 |
| LCP（Largest Contentful Paint) | ページ内で最も大きな画像や動画、テキストが表示されるまでにかかった時間 |
| CLS（Cumulative Layout Shift） | クリックまたはタップをしたタイミングで表示されたWebページのレイアウトがどの程度ズレていたのか |
これらの項目は緑、橙、赤の3種類の色を使ったバロメーターで表示されます。緑は良好、橙は改善が必要、赤は不良を意味します。
次に、「パフォーマンスの問題を診断する」で表示される項目と、各項目の指標は以下の通りです。
| 項目 | 内容 |
|---|---|
| FCP（First Contentful Paint） | ページの読み込みを開始してから、ページ内のコンテンツが表示されるまでにかかった時間 |
| LCP（Largest Contentful Paint) | ページ内で最も大きな画像や動画、テキストが表示されるまでにかかった時間 |
| CLS（Cumulative Layout Shift） | クリックまたはタップをしたタイミングで表示されたWebページのレイアウトが、どの程度ズレていたのか |
| TTI（Time to Interactive） | Webページを開いてから、操作が完全にできるようになるまでにかかった時間 |
| TBT（Total Blocking Time） | ユーザー入力の応答(クリックやタップなど)がブロックされている時間の合計 |
| SI（Speed Index） | ページを読み込み始めてから、コンテンツが視覚的に表示されるまでにかかった時間 |
測定結果は、「実際のユーザーの環境で評価する」と同様の基準で表示されます。
PageSpeed Insightsの評価項目の改善方法
Page Speed Insightsの評価は、以下の8通りの方法で改善できます。
- リソースを圧縮する
- 画像を最適化する
- リンク先ページのリダイレクトを使用しない
- ブラウザのキャッシュを活用する
- レンダリングを妨げる・JavaScriptを削除する
- 圧縮を有効にする
- サーバーの応答時間を短縮する
- スクロールせずに見える範囲のコンテンツのサイズを削減する
それぞれの改善方法について詳しく解説します。
リソースを圧縮する
リソースの圧縮とは、余分なスペースや改行、インデントといった不要なデバイスを削除してファイルの容量を小さくすることです。圧縮することでレンダリング処理が速くなり、ページスピードの向上につながります。
リソースの圧縮は、オンライン上の圧縮ツールでも対応できます。
画像の最適化する
画像の最適化とは、Webサイトに使用している画像のフォーマットや圧縮率を適正にすることです。
PageSpeed Insightsの測定完了画面の下部にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」のリンクから、最適化されたリソースをダウンロードすることができます。
リンク先ページのリダイレクトを使用しない
リンク先ページのリダイレクトが複数使用されていると、ページスピードが低下します。無駄なリダイレクトが無いかを確認し、可能な限りリンク先ページのリダイレクトは避けましょう。
ブラウザのキャッシュを活用する
ブラウザのキャッシュ期間が明示的に設定されていれば、ブラウザがリソースをキャッシュでき、ページスピードが短縮されます。
ブラウザのキャッシュ期間を明示的に設定する際は、サーバ側でExpiresを設定しましょう。Googleは1週間以上を推奨していますが、ページの性質や運用面を考慮して最適な期間を設定すると良いでしょう。
ただし、キャッシュなどは間違って使用すると、更新がなかなか反映されないなどのリスクがあるため注意しましょう。
レンダリングを妨げる JavaScriptを削除する
不要なJavaScriptは、レンダリングを妨げてページスピードの低下につながります。
CSSやJavaScriptなどは、HTML内にインラインで記述することで修正できます。
圧縮を有効にする
リソースの圧縮を有効にする方法もあります。
リソースの圧縮を有効にする際はHTTP圧縮を設定したり、azon CloudFrontなどのCDNを使いましょう。
サーバーの応答時間を短縮する
HTMLをサーバーから読み込むまでの時間を短縮する方法も有効です。
ただし、サーバーの応答時間が遅い原因は、CMSの問題やサーバースペックの問題など多岐にわたり、要因を見つけて改善するためには専門的な知識が必要です。
サーバーの応答時間を短縮するためには、インフラエンジニアなど専門知識をもつ担当者に任せることをおすすめします。
スクロールせずに見える範囲のコンテンツサイズを削減する
スクロールせずに見える範囲(ファーストビュー)のコンテンツサイズを削減すること有効です。
ファーストビューのデータが膨大すぎると、その分ページスピードが低下します。
サイドカラムよりもメインカラムを先に読み込む構造にしたり、画像を最適化することでファーストビューのデータ量を抑えましょう。
具体的にはGoogleによる解説をご参照ください。
まとめ
今回は、ページスピードの重要性などについてまとめました。
ページスピードは、SEO的にもユーザビリティ的にも重要な項目のひとつです。
ですが、ページスピードのみを重視した結果、サイトを本来の目的を見失っては本末転倒です。
ユーザーにとって必要なサイト・コンテンツなのか？
こちらが欠けていれば、ページがいくら早くても意味はありません。
ページスピードにこだわるあまり、必要な項目や情報、またそのWebサイトの良さを削ってしまわないように気をつけましょう。
ページスピードが遅すぎるなどで気になった方は、まずはページスピード測定ツールで現在のページスピードを調べ、必要に応じてご紹介した改善方法を実践してみましょう。
この記事の執筆者
TANE-be編集部
大阪・京都にあるWebサイト制作の株式会社TANE-beのスタッフが編集。