Webサイトの表示速度は、ユーザー体験とSEOの両面において非常に重要な要素です。
極端に表示速度が遅いサイトは、ユーザー離脱率が高まり、検索エンジンの評価に影響する傾向にあります。
本コラムでは、Webサイトの表示速度を改善するための方法とその効果、計測ツール等について詳しく解説します。ページ速度に課題をお持ちの方や、改善を検討されている方などぜひ参考にご覧ください！
サイト表示速度の重要性と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は、複数のリソースを同時に読み込むことができ、表示速度を向上させます。 ブラウザキャッシュの有効活用: ブラウザキャッシュの設定を最適化することで、再訪時の読み込み時間を短縮できます。
最後に
＼サイト表示速度の改善についてご気軽にご相談ください／
表示速度の改善は、SEO対策だけでなくビジネス全体の成功に不可欠な要素です。
マイクロウェーブクリエイティブでは、お客様のWebサイトの表示速度を改善し、SEO効果を高めるための様々な施策をご提案いたします。
ページ速度を含めたサイト診断サービスも提供しておりますので、ぜひお気軽にご相談ください！
この記事の著者
マイクロウェーブクリエイティブ フロントエンドグループ
ウェブサイトのトレンドや技術・言語など、経験豊富なフロントエンドエンジニアがサイト構築に役立つ情報を提供します。
