資料ダウンロード

サイト表示速度の計測方法と改善策、SEOへの影響を解説

2024年09月03日

Webサイトの表示速度は、ユーザー体験とSEOの両面において非常に重要な要素です。
極端に表示速度が遅いサイトは、ユーザー離脱率が高まり、検索エンジンの評価に影響する傾向にあります。
本コラムでは、Webサイトの表示速度を改善するための方法とその効果、計測ツール等について詳しく解説します。ページ速度に課題をお持ちの方や、改善を検討されている方などぜひ参考にご覧ください！

サイト表示速度の重要性とSEOへの影響
サイトの表示速度を測定する「計測ツール」
PageSpeedInsightの評価指標と詳細
サイトの表示速度を改善するための手法

サイト表示速度の重要性とSEOへの影響

Googleをはじめとする検索エンジンでは、ページの表示速度が検索順位ランキングを決定する要素の一つとして位置付けられています。サイトの表示スピードが極度に遅いとユーザー離脱や満足度の低下に繋がりますし、問い合わせの獲得や商品購入などサイトからの成果やUX上でも悪い影響を及ぼします。そのため、立ち上げ時やリニューアル、コンテンツ更新のタイミングなど、定期的にサイトの表示速度をチェックすることが重要です。

表示速度の改善で得られるメリット

表示速度を改善することで、以下のメリットが期待できます。

検索順位の上昇: Googleの検索アルゴリズムに合致し、より高い検索順位を獲得できる可能性が高まります。ユーザー体験の向上: ページの表示が速くなることで、ユーザーはストレスなく情報を閲覧できます。

滞在時間の増加: ユーザーがサイトに滞在する時間が長くなり、ページビュー数やエンゲージメント率の向上につながります。

コンバージョン率の向上: 商品購入やサービス申し込みといったコンバージョンにつながる可能性が高まります。

ブランドイメージの向上: 迅速な応答性のあるサイトは、企業の信頼性や専門性を高める印象を与えます。

サイトの表示速度を測定する「計測ツール」

ここでは、Googleから提供されている表示速度を測定する無料ツールについて紹介します。

PageSpeed Insights 　

Googleが提供する無料のオンラインツールで、任意のURLのページ読み込み速度を測定します。モバイルとデスクトップの両方のスコアを確認でき、改善点を提示してくれます。計測する際に入力したurlについて、サイト全体のパフォーマンスを計測できるという特徴があります。

Lighthouse 　

こちらも、Googleが無料で提供するChromeの拡張ツールで、Chrome DevToolsに搭載されています。ページの品質を測定できます。パフォーマンス、アクセシビリティ、PWA（プログレッシブウェブアプリ）、SEO、ベストプラクティスといった様々な側面を評価します。

PageSpeedInsightの評価指標と詳細

Page Speed Insightでは「実際のユーザーの環境で評価する」「パフォーマンス問題を診断する」の２項目でページの表示速度を評価します。

それぞれの項目での評価指標について説明します。

実際のユーザー環境で評価する

Largest Contentful Paint (LCP)：メインコンテンツが表示されるまでの時間を表す指標です。※1

First Input Delay (FID) : 最初に行った操作に対する応答時間を表す指標。※2

Cumulative Layout Shift (CLS) : 意図しないレイアウトのズレを数値化し、視覚的な安定性を表す指標。※3

First Contentful Paint (FCP) : Webページ内のコンテンツが最初に表示されるまでの指標。

Interaction to Next Paint (INP) : ユーザーが行ったアクションに対する、視覚的な反応が発生するまでの時間を表す指標。

Time to First Byte (TTFB):サーバーの応答時間を表す指標。

パフォーマンス問題を診断する

First Contentful Paint (FCP) : ※2と同じ

Largest Contentful Paint (LCP) : ※1と同じ

Total Blocking TIme (TBT) : メインスレッドがブロックされている時間を表す指標。

Cumulative Layout Shift (CLS) : ※3と同じ

Speed Index : ページが見える形で表示されるまでの時間の指標。

PageSpeedInsightでは、これらの指標に基づき評価を行います。また不合格の評価指標から、改善策を洗い出すことが可能です。

サイトの表示速度を改善するための手法

ここからは、表示速度を改善するための手法について具体的に解説します。

画像の最適化　

サイズを圧縮：画像のサイズを圧縮することで、ファイルサイズを削減できます。　
フォーマットの変更：最適な画像フォーマットに変更します。
※フォーマットによって、ファイルサイズや画質が異なります。　
遅延読み込みの設定：遅延読み込みとは、画面表示に必要な画像以外は、ユーザーがその画像のある部分までスクロールしたときに初めて読み込むという手法です。　
画像サイズの指定：imgタグ（画像を読み込むタグ）に幅と高さを指定します。

CSSとJavaScriptの最適化　

Minify（ミニファイ）：CSSやJavaScriptのコードから、実行に不要な空白や改行、コメントなどを削除し、ファイルサイズを縮小する処理のことです。　
バンドル：複数のCSSファイルやJavaScriptファイルを1つのファイルに結合する処理のことです。　
Defer（遅延読み込み）：Deferとは、JavaScriptの読み込みを遅延させる処理のことです。レンダリングのブロックを防ぐことでページの表示速度を向上させることができます。

HTMLの最適化　

不要なコードの削除：表示に直接影響を与えないにも関わらず、ファイルサイズを増加させる要素がいくつか存在します。これらの不要なコードを削除することで、ファイルサイズを縮小できます。　
構造の見直し：適切な構造にすることで、レンダリング時間を短縮することができます。

Webフォントの最適化

font-displayプロパティの利用：font-displayプロパティを使用することで、フォントの読み込みと表示に関する挙動を制御できます。　
フォントのプリロード：重要なフォントを優先的に読み込むことができます。　
フォントファイルの圧縮：フォントファイルの容量をおよそ80%ほどに削減できる。

サーバーの最適化

CDNの利用: Content Delivery Network (CDN) を利用することで、コンテンツを世界中に分散配置されたサーバーから配信し、ユーザーへの応答速度を向上させます。
HTTP/2の利用: HTTP/2は、複数のリソースを同時に読み込むことができ、表示速度を向上させます。ブラウザキャッシュの有効活用: ブラウザキャッシュの設定を最適化することで、再訪時の読み込み時間を短縮できます。