表示速度がなぜ重要か
ホームページの表示速度は、ユーザー体験とSEOの両方に大きな影響を与えます。遅いサイトは訪問者を逃し、検索順位も下がる可能性があります。
表示速度と離脱率の関係
ページの読み込みに時間がかかると、訪問者は待ちきれずに離脱します。
| 表示時間 | 離脱への影響 |
|---|---|
| 1〜3秒 | 許容範囲 |
| 3〜5秒 | 離脱率が上昇し始める |
| 5秒以上 | 大幅に離脱率が上昇 |
Googleの調査によると、モバイルでの読み込み時間が3秒を超えると、53%のユーザーが離脱するとされています。
SEOへの影響
Googleは表示速度を検索ランキングの要因の一つとしています。特にモバイルでの速度が重視されており、遅いサイトは検索順位で不利になります。
ビジネスへの影響
| 影響 | 内容 |
|---|---|
| 機会損失 | 予約・問い合わせにつながらない |
| 信頼性低下 | 「古い」「いい加減」という印象 |
| 競合への流出 | 離脱して競合サイトへ |
表示速度の測定方法
まず、現在の表示速度を測定しましょう。
Google PageSpeed Insights
Googleが提供する無料の速度測定ツールです。
使い方
- PageSpeed Insights（https://pagespeed.web.dev/）にアクセス
- サイトのURLを入力
- 「分析」をクリック
スコアの見方
| スコア | 評価 |
|---|---|
| 90〜100 | 良好（緑） |
| 50〜89 | 改善が必要（黄色） |
| 0〜49 | 不良（赤） |
モバイルとパソコン両方のスコアが表示されます。店舗HPはモバイルを重視しましょう。
Core Web Vitals
Googleが重視する3つの指標です。
| 指標 | 内容 | 目安 |
|---|---|---|
| LCP | 最大コンテンツの表示時間 | 2.5秒以内 |
| INP | 操作への応答時間 | 200ms以内 |
| CLS | 視覚的な安定性 | 0.1以下 |
その他の測定ツール
| ツール | 特徴 |
|---|---|
| GTmetrix | 詳細な分析レポート |
| WebPageTest | 様々な条件でテスト可能 |
| Chrome DevTools | ブラウザ内蔵の開発ツール |
表示速度が遅くなる原因
表示速度を遅くする主な原因を理解しましょう。
画像の問題
画像サイズが大きすぎる スマホカメラで撮影した画像をそのまま使用すると、数MBのファイルになり、表示が遅くなります。
画像形式が最適でない 古い形式（BMP、非圧縮PNG）は重くなりがちです。
画像が多すぎる ページに大量の画像があると、読み込みに時間がかかります。
コードの問題
不要なスクリプト 使っていないJavaScript、CSS が読み込まれている。
レンダリングブロック HTMLの解析を止めるスクリプトがある。
外部リソースが多い 他のサイトからの読み込み（フォント、SNSウィジェットなど）が多い。
サーバーの問題
サーバーの応答が遅い 安価なサーバーや海外サーバーは応答が遅いことがあります。
CDNを使用していない 世界中のサーバーから配信する仕組み（CDN）がないと、遠方のユーザーは遅くなります。
改善方法
具体的な改善施策を紹介します。
画像の最適化
ファイルサイズの圧縮 画質を保ちながらファイルサイズを削減します。
| ツール | 特徴 |
|---|---|
| TinyPNG | PNG、JPEG を圧縮 |
| Squoosh | Google製、詳細設定可能 |
| ImageOptim | Mac用アプリ |
適切なサイズへのリサイズ 表示サイズに合わせて画像をリサイズします。
- 幅1200〜2000px程度あれば十分
- スマホ表示用は幅600〜800px程度
次世代フォーマットの使用 WebP形式を使用すると、同じ画質でファイルサイズを削減できます。
遅延読み込み（Lazy Load） 画面に表示されるまで画像を読み込まない設定です。
コードの最適化
不要なプラグイン・スクリプトの削除 使っていない機能は削除しましょう。
JavaScript の遅延読み込み ページの表示に必須でないスクリプトは後から読み込むようにします。
CSS の最適化 使っていないスタイルを削除、ファイルを圧縮します。
キャッシュの活用
ブラウザキャッシュ 一度読み込んだファイルをブラウザに保存し、再訪問時に高速化します。
CDNの活用 CloudflareなどのCDNを使用すると、世界中のサーバーからコンテンツを配信でき、高速化します。
HP作成サービスでの改善
HP作成サービスを使用している場合、自分でできる改善は限られますが、以下は可能です。
| 対策 | 方法 |
|---|---|
| 画像圧縮 | アップロード前に圧縮 |
| 不要な要素削除 | 使っていないセクション、ウィジェットを削除 |
| 外部埋め込み削減 | 動画、SNSウィジェットを減らす |
| シンプルなデザイン | 複雑なアニメーションを避ける |
改善の優先順位
限られたリソースで改善する場合の優先順位です。
最優先（効果大、作業量小）
-
画像の圧縮・リサイズ
- 最も効果が大きい
- 比較的簡単に実施可能
-
不要な要素の削除
- 使っていないプラグイン、ウィジェット
- 重いアニメーション
次に優先（効果中、作業量中）
-
遅延読み込みの設定
- 画像の lazy load
- スクリプトの defer / async
-
キャッシュ設定
- ブラウザキャッシュ
- CDNの導入
余裕があれば（効果中〜大、作業量大）
-
コードの最適化
- CSS、JavaScript の圧縮
- 不要なコードの削除
-
サーバーの改善
- より高速なサーバーへ移行
- サーバー設定の最適化
継続的な監視
速度は一度改善して終わりではなく、継続的に監視しましょう。
定期的なチェック
- 月1回程度、PageSpeed Insightsでチェック
- 新しいページ追加時にチェック
- 画像追加時にサイズを確認
Search Consoleでの確認
Google Search Console の「ウェブに関する主な指標」で、Core Web Vitals の状況を確認できます。問題があるページが表示されます。
アラート設定
一部の監視ツールでは、速度が低下した際にアラートを送る設定ができます。
表示速度の改善は、ユーザー体験とSEOの両方に効果があります。特に画像の最適化は、比較的簡単に大きな効果が得られるため、まずはそこから始めましょう。
関連記事
