（最終更新日：2023年6月21日）
満を持して公開したWebサービスやWebサイト。しかし、なぜかコンバージョン率が芳しくない…。このような経験はありませんか。
コンバージョン率が低下する理由の一つに、ページスピードが遅いことが挙げられます。この記事では、ページスピードとはどのようなものなのか、改善方法と対策についてまとめました。この記事がお役に立ちましたら幸いです。
ページスピードについて
ページスピードとはWebページの表示速度のことで、ユーザーが特定のページのURLにアクセスしてから、そのページのコンテンツがすべてブラウザに表示されるまでの時間のことをいいます。
2017年と2018年のGoogleの調査によると、ページ表示速度が1秒から3秒になると直帰率が32%増加、1秒から6秒になると106%増加、1秒から10秒になると123%増加すると報告されています。また、ページの表示に3秒以上かかると53%のユーザーが離脱してしまうという調査結果があります。
調査結果が示すとおり、Webサイトの表示速度はコンバージョン率に大きく影響します。ページスピードを改善することで、ユーザー体験の改善をはかることができます。
また、検索エンジンからの評価にページの表示速度が考慮されるようになっていることを、Googleは明言しています。ページの表示速度の改善はSEOに好影響を与え、検索上位表示に有利に働きます。
そして「モバイルフレンドリー」なサイトが検索エンジンから高評価となります。
モバイルフレンドリーなサイトとは、スマートフォンでの閲覧に対応したサイトのことを指します。具体的には、以下の3つをクリアしたサイトのことを指します。
- モバイル端末でも見やすい画面構成
- モバイル端末通信速度でもストレスを与えないページ読み込み処理となっていること
- 重たい画像や動画がないこと
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
PageSpeed Insights
Googleが提供する、PageSpeed Insights（略称：PSI）というページスピードの問題点を分析するツールがあります。2021年11月に大幅アップデートされ、使いやすくなりました。
PSIにサイトのURLを入力するだけで、そのページの携帯電話版・デスクトップ版のページスピードと改善点をチェックすることができます。ここからは2023年6月現在のPSIの見方を説明していきます。
実際のユーザーの環境で評価する（フィールドデータ）
分析結果が出て最初に現れる部分です。入力したURLサイトのユーザー体験が良いかどうかを判断します。
ユーザー体験は6つの項目に分けられ、それぞれの表示スピードを見ることができます。また、それぞれの項目の評価が色分けされています。（緑：良い、オレンジ：改善が必要、赤：悪い）
Largest Contentful Paint (LCP)……最も大きいテキストや画像が表示されるまでの時間
First Input Delay (FID)……クリック、ボタンをタップするなどのアクションから反応するまでの時間
Cumulative Layout Shift (CLS)…… ページが表示された後に予期しないレイアウトの崩れがどれくらいあるか
First Contentful Paint (FCP)……テキスト、画像などが表示されるまでの時間
Interaction to Next Paint (INP)……FIDに変わる新しい指標。2024年3月にリリース予定
Time to First Byte (TTFB)……サーバーの応答時間。リクエストしてから最初の1バイトがWebサーバーに届くまでの時間
表示時間や反応時間は短い方が良いとされます。
CLSは、レイアウトがいきなり変わって不便なことが起きていないか、快適にそのページが使えるかを計測します。数値が低いほど良いとされます。
例えば、いきなり文字が移動してしまいどこを読んでいたかわからなくなったり、ボタンをクリックしようとしたときに急に移動してしまい違うところをクリックしてしまった、ということが起きていないかを計測しています。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
パフォーマンスの問題を診断する（ラボデータ）
さまざまな項目ごとにパフォーマンスが良いかどうかを分析し、改善点を教えてくれます。
パフォーマンス
↑左の「パフォーマンス」と書いてあるスコアは、Webページの体感起動速度の世界順位を表しています。100点満点ですと世界トップレベルの速さ、50点以上ならば世界中のWebページの半数よりも速いという評価となります。
ただし、PSIのサーバーは米国にあるため、距離がある分日本のwebサイトは点数が低く出る傾向にあるといわれています。日本のスコアは40点程度が平均的なページスピードと考えられます。
↑ラボデータの項目は5つに分けられます。
First Contentful Paint……テキスト、画像などが表示されるまでの時間
Largest Contentful Paint……最も大きいテキストや画像が表示されるまでの時間
Total Blocking Time……ページのコンテンツが表示されてから操作可能になるまでの時間
Cumulative Layout Shift……ページが表示された後に予期しないレイアウトの崩れがどれくらいあるか
Speed Index……ページのコンテンツが取り込まれてから表示されるまでの時間
↑5つの項目の下には、具体的にどこを改善したらページ速度が速くなるのか、改善点を教えてくれる項目があります。この「改善できる項目」を確認し、改善を行い点数を上げていくのが一般的です。各項目をクリックすると、具体的にどこを直せばいいのか解決策を教えてくれます。
その下の「診断」では、ページがウェブ開発のおすすめの設定にどの程度沿っているかについての情報が表示されています。最後の「合格した監査」には、そのページが合格した監査が表示されています。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
ユーザー補助
従来は「パフォーマンス」のみでしたが、2022年秋頃に項目が3つ増えました。2023年6月現在は、「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」の4項目です。
ユーザー補助は、そのページのアクセシビリティに関する項目です。視力の弱い人や色覚特性に異常がある人、マウスを使わずキーボード操作をする人など、すべての人がコンテンツにアクセスできるようになっているかを診断します。
例えば以下のような項目がないか診断し、結果を教えてくれます。
- Webサイトの読み上げ機能を利用したときに、支障のある部分がないか（画像のalt（代替テキスト）設定など）
- 背景と文字の色が似ていて読みにくくないか
- キーボード操作したときに操作できないボタンやフォーム、リンクがないか
おすすめの方法
おすすめの方法は、そのページのソースコードのセキュリティ面に関する項目です。コードの健全性を診断し、結果を教えてくれます。
例えば、以下のようなチェックが行われます。
- HTTPSで配信しているか
- サポートが切れている古い技術が使用されていないか
- ブラウザにエラーが出ていないか
SEO
SEOは、このページがSEO（検索エンジン最適化）の基本的な推奨事項に沿っているかをチェックする項目です。検索ランキングの順位を上げるためのチェックポイントを診断し、結果を教えてくれます。
例えば、以下のようなチェックが行われます。
- レイアウトシフトが起きる部分や原因がないか
- 文字が小さすぎる部分が多くないか
- ページの説明文（メタディスクリプション）が設定されているか
レイアウトシフトとは、端的にいうと画面が急に変化しないか？ということです。例えば表示されていなかった画像が表示されることでボタンの位置が変わってしまい、押したくないのにボタンを押してしまったという経験はないでしょうか。
このような使いづらい部分はSEOに影響します。画像が表示されても文字の位置が変わらないように設定するなど、ユーザーが快適に使える上質なページを目指し改善することで、検索エンジンに上位表示されやすくなります。
ページスピードの改善方法
PSIでは「改善できる項目」としてGoogleから改善点を教えてくれます。最初にお話ししたように「モバイルフレンドリー」なサイトが高評価となるため、携帯電話版の改善点をチェックし、優先して改善していくことが望ましいです。
改善には2点のアプローチがあります。
- サーバーの設定、構成を見直すことによる改善
- サイトの構成を根本的に見直すことによる改善
サーバーの設定、構成を見直すことによる改善
こちらは対象サイト・システムの仕様変更を行わず、サーバー環境やネットワーク構成を見直すことで改善ができます。システムの保守性や拡張性とは関連が薄いレイヤーでの対策が可能です。サーバーに負荷がかかって、ページスピードが遅くならないような対策をします。
- 保存されている画像の圧縮や変換
- Webサーバーのパラメータチューニング
- CDNの導入によるコンテンツ配信スピードの改善
保存されている画像の圧縮や変換
画像の圧縮や変換は、一番簡単かつ効果の高い施策です。
画像のファイル容量が大きいほど処理に時間がかかるため、ページスピードに影響があります。画像サイズを適切な大きさに圧縮したり、適切な画像フォーマットを利用することでページスピードを速くすることができます。
■ 適切な画像フォーマット例 ■
ロゴマークやアイコンなど、シンプルで色数が少ない画像……PNG、SVG、GIF、WebP
写真などの色数が多い画像……JPG、WebP
背景透過……PNG、WebP
アニメーション……GIF、WebP
PNGもJPGと同等の色数を表現できますが、色数が多くなるとJPGよりもファイル容量が大きくなる場合があります。写真などの色数が豊かな画像はJPGを使うことをおすすめします。
WebP（ウェッピー）は、Googleが開発した次世代画像フォーマットです。画像のサイズを小さく、表示速度を速くできるという特徴があります。背景透過やアニメーションにも対応しているため、画像フォーマットを目的に合わせて変えなくて良いというメリットもあります。
数年前まではWebPに対応しているブラウザが少ないという課題がありました。2023年6月現在はすべての最新バージョンのブラウザで対応しているため、WebPを積極的に活用できそうです。
WordPressを利用している場合は、pngやjpg形式の画像をWebP対応ブラウザにはWebP形式で、非対応ブラウザにはそのまま配信してくれるプラグインがあります。うまく活用してページスピードの改善を行いましょう。
Webサーバーのパラメータチューニング
サーバー側の設定を変更することにより、応答時間を短くしたり、サーバーのパフォーマンスを上げたりすることができます。
パラメータチューニングについて掘り下げると専門的な知識が必要になるため、ここでは割愛します。もし興味がある方は、「nginx パラメータ」や「Apache パラメータ」で検索してみてください。（nginxとApacheはWebサーバーソフトの名称です）
CDNの導入によるコンテンツ配信スピードの改善
静的コンテンツのサイトの場合、CDNの導入がもっとも手軽で効果が高くなります。
CDNとは「コンテンツデリバリーネットワーク」もしくは「コンテンツディストリビューションネットワーク」の略称で、Webコンテンツをより効率的に配信できるよう設計されたネットワークです。
CDNは、世界中に分散されてキャッシュサーバーが配置されています。アクセスがあった地域に一番近い地域のキャッシュサーバーが代理でコンテンツを表示するため、サイトのページ速度を早める効果、負荷を大幅に削減できる効果があります。
サイトの構成を根本的に見直すことによる改善
動的コンテンツの表示処理が重たい場合は「サーバーの設定、構成を見直すことによる改善」はあまり有効ではありません。アプリケーションのチューニング、主にデータベースチューニングが必要となります。プログラムやデータベースの最適化によって、内部処理および表示速度の高速化を目指します。
内部処理で無駄な処理をしていないか、インデックスが適切に貼られているかなどを見直すことによって改善を見込めます。（インデックス…本の索引のようなもの。データベースを高速化するにあたって重要な要素）
- 不要なCSSやJavaScriptを削除する
- 画像の遅延読み込み処理
- サイトのデザインやページ構成を見直す
不要なCSSやJavaScriptを削除する
Webサイトで使っていないCSSやJavaScriptは削除しましょう。不要な内部処理を減らすことによって読み込み時間も削減できるため、ページ速度を早めることができます。
画像の遅延読み込み処理
画像の遅延読み込みとは、最初からすべての画像を読み込ませて表示せずに、ファイル容量の軽いダミー画像を先に表示させ、後から遅れて本来の画像を表示させることです。
ファーストビューのコンテンツだけは先に本来の画像を表示させます。ユーザーがファーストビューを見ている間に他のコンテンツの画像を表示するという仕組みにする処理です。
画像の遅延読み込み処理を行うことで、サイトの最初の表示速度を上げることができます。ユーザー体験向上効果もあり、ページがなかなか表示されないイライラを解決することができます。
サイトのデザインやページ構成を見直す
PSIで画像の読み込み順や「レンダリングを妨げるリソースの除外」を指摘されている場合、サイトのデザインやページ構成を見直す必要があります。現在の動線設計でコンバージョンが取れている場合は、デザインの見直しはUX（ユーザー体験）に大きな影響を与えることとなるため、慎重に検討する必要があります。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
ページスピードの改善の対策の進め方
ここでは、ページスピード改善の具体的な進め方を紹介します。
現状把握
実際にPSIにてURLを入力して、現状のスコアを把握します。TOPページだけではなく、一覧ページや詳細ページなど主要な画面はすべて測定しましょう。PSIの測定値はばらつきがあるので3〜5回程度測定し、平均値をとるのが望ましいです。
改善目標を立てる
PSIで指摘されている問題点が以下の2種類のうち、どちらの対応で改善が見込まれるのかを仕分けしましょう。
①サーバーの設定、構成を見直すことによる改善
②サイトの構成を根本的に見直すことによる改善
①に切り分けられる問題はサイトの仕様やデザイン、導線を変更せずに実施できる対応となるため、スコアが芳しくない場合は積極的に対策を検討しましょう。
②に切り分けられる問題は小手先の対応では解決できませんので、対策を実施するかどうか、どれくらいの予算、期間がかかるかは一概にはいえません。
上記仕訳の上で、「対策する課題」と「対策しない課題」の2つにわけます。
施策を実施する
「対策する課題」に仕分けした課題に対して施策を実施します。社内に専門家がいない場合は開発・保守業者に依頼ください。
もちろん、アクシアでも対応可能です。①の場合、これまでの受注実績としては100万円〜140万円ほどとなっております。（サイト規模によって変動するため、参考程度に留めてください。）
効果を測定する
PSIの分析結果として「対策する課題」が改善されているかを実際に測定し、確認します。改善が見られない、期待していた効果が得られていない場合は、以下の作業を繰り返します。
- 施策が正しいか確認
- 期待する効果が出ない原因を特定
- 再度改善
- 測定する
ページスピードの改善後に必要な対応
ページスピードの改善は、定期的な計測が必要です。
データの蓄積や負荷上昇、仕様変更によるパフォーマンスの劣化(内的要因)
データの蓄積によるレスポンス悪化が起きる場合があります。システムのチューニング、またはサーバーの強化が必要です。不要な過去データを削除するのも解決策の一つです。
アクセス数の増加によるレスポンス悪化が起きることもあります。この場合は原則、サーバーの強化が必要です。例外的に、チューニングにより改善の余地があるのであれば若干の改善が望めますが、根本的な対応ではありません。アクセス増加に対する対策は、基本的にはサーバーをケチらず増強することが王道です。それができないのであれば、アクセス増加に対する機会損失は覚悟してください。
仕様変更によるレスポンス悪化もありえます。この場合、システムのチューニングまたはサーバーの強化が必要です。仕様要求(求めるリアルタイム性など)が高すぎる場合は仕様要求を妥協する方法も検討が必要です。
PSIの評価ロジック変更、評価項目追加による点数の変動(外的要因)
経年とともに評価ロジックが変更になり、同条件であるにも関わらず以前のスコアがでないことがあります。3か月に1回、半年に1回など、定期的に再測定を行うことをお勧めします。性能改善に関しては、アクシアでの保守対応で追加料金にて対応可能です。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
ページスピードとは？まとめ
ページスピードを改善することによって、ユーザーが快適にサイトを閲覧できるようになり、離脱を防ぐことができます。また、SEOに好影響を与え、検索上位表示に優位に働きます。
どんなに良いコンテンツを作っても、ページの表示速度が遅いとユーザーや検索エンジンは見てすらくれません。このため、ページスピードに関する知識は重要と言えます。定期的にページスピードの測定をして改善をはかりましょう。
しかし、ページスピードのスコアにばかり気を取られてしまうと、サイトの根本的な部分が壊れてしまうこともあります。スコアを上げられるだけ上げようとするのではなく、サイトの根本的な部分を壊さないことを最優先にして、問題が起こらない「次第点」のスコアに改善すると言う考え方が一番よいかと思います。
パフォーマンススコアが100点というサイトの多くは、最初から100点を目指して、ページスピードの評価の邪魔になるものを入れずに作っています。サイトを構築する前から「どうすれば良いスコアが出るか」を重きに置いて、最初からページスピードを意識して作るようにすると、良い結果を出すことができます。
サイトの改善を行う場合は重きを置くポイントが変わり、「そのページでやりたいことや、すでにできているページをどこまで崩していいか」がポイントになります。どうしても壊せない部分がでてくるため、どこまでスピードを上げられれば及第点なのかが焦点になってきます。
アクシアでは、ページスピードの調査から改善対応まで、本記事に書かれていることを網羅して承っています。お困りごとがありましたら、お気軽にご相談ください。
最後までお読みいただき、ありがとうございました。
