表示に3秒以上かかると半数以上が離脱する

ホテルの公式サイトを開こうとして、なかなかページが表示されない。この「待ち時間」が、予約率に深刻な影響を与えています。旅行者がホテルを比較検討する場面では、表示の遅いサイトは即座に閉じられ、次の候補に移られてしまいます。

53%
表示3秒超で離脱するモバイルユーザー
7%
1秒の遅延によるCVR低下率
2.5秒
Googleが推奨するLCP目標値

出典: Google「Mobile Page Speed Benchmarks」（2023年）、Akamai「State of Online Retail Performance」（2024年）

宿泊施設の公式サイトは、高解像度の写真を多用し、予約エンジンやカレンダーウィジェットなどの外部スクリプトを複数読み込む構造になりがちです。その結果、一般的な企業サイトよりも表示速度が遅くなる傾向があります。

まずはPageSpeed Insightsで現状を把握する

改善の第一歩は、現状の表示速度を数値で把握することです。Googleが無料で提供している「PageSpeed Insights」（PSI）を使えば、自施設の公式サイトの表示速度を簡単に測定できます。

PageSpeed Insightsの見方

PSIにURLを入力すると、モバイルとデスクトップそれぞれのスコア（0〜100）と、改善すべき項目が表示されます。特に注目すべき指標は以下の3つです。

モバイルスコアが特に重要
旅行者の70%以上がスマートフォンでホテルを検索しています。PSIのモバイルスコアがデスクトップスコアより大幅に低い場合は、モバイル環境での改善を最優先で進めてください。Googleの検索ランキングもモバイルファーストインデックスに基づいているため、モバイルの表示速度はSEOにも直結します。

改善の優先順位

表示速度の改善は、効果が大きくて実施しやすいものから順番に進めるのが原則です。以下の優先順位で取り組んでください。

優先度1: 画像の最適化

ホテルサイトの表示速度を最も大きく左右するのは画像です。一眼レフで撮影した高解像度写真をそのままアップロードしている施設は多く、1枚あたり3〜5MBの画像が10枚以上読み込まれているケースも珍しくありません。改善策は3つあります。(1) WebP形式に変換する（JPEGと比較して30〜50%軽量）、(2) 適切なサイズにリサイズする（横幅1200px以下で十分）、(3) 遅延読み込み（lazy loading）を設定し、画面外の画像は後から読み込む。この3点だけで、多くのサイトでLCPが1〜3秒改善します。

優先度2: ブラウザキャッシュの設定

ロゴ、CSS、フォントファイルなど、変更頻度の低いリソースにブラウザキャッシュを設定します。2回目以降のアクセス時にサーバーからの再ダウンロードが不要になり、表示速度が改善します。サーバーの.htaccessファイルやnginxの設定でCache-Controlヘッダーを追加するだけで対応できます。

優先度3: 不要なJavaScriptの削減

アクセス解析タグ、チャットウィジェット、SNSボタン、リターゲティングタグなど、外部のJavaScriptが大量に読み込まれている場合があります。使っていないタグやウィジェットは削除し、残すものはasync属性やdefer属性を追加して非同期読み込みにします。特に予約エンジンのスクリプトが重い場合は、予約エンジン提供元に改善を依頼するか、代替の読み込み方法がないか確認してください。

優先度4: サーバーの応答速度改善

サーバーのレスポンスタイム（TTFB: Time to First Byte）が500ミリ秒を超えている場合は、サーバー側の改善が必要です。共有サーバーで他サイトの影響を受けている、古いPHPバージョンで動いている、データベースのクエリが遅いなどの原因が考えられます。レンタルサーバーのプラン変更、CDN（コンテンツ配信ネットワーク）の導入、PHPのバージョンアップが有効な対策です。

ホテルサイトでよくある表示速度の問題

宿泊施設の公式サイトには、業種特有の速度低下要因があります。

予約エンジンウィジェットの読み込み

ページ上に埋め込まれた予約カレンダーやプラン検索ウィジェットは、外部サーバーからJavaScriptとCSSを読み込みます。これがページ全体の表示を遅延させることがあります。対策として、予約エンジンの読み込みを遅延させる（ユーザーがスクロールした時点で読み込む）、あるいはトップページではウィジェットを埋め込まず、予約ボタンから別ページに遷移させる方法があります。

スライドショーの画像枚数

トップページのメインビジュアルにスライドショーを設置している施設が多いですが、スライドショーの全画像がページ読み込み時に一括ダウンロードされている場合があります。最初の1枚だけを読み込み、残りはスライド遷移時に読み込む設定に変更してください。

Webフォントの読み込み

デザイン性の高い日本語Webフォントを使用している場合、フォントファイルのダウンロードに時間がかかることがあります。font-display: swapを指定して、フォント読み込み完了前はシステムフォントで表示し、読み込み後に切り替える設定にします。

サイト速度改善とAI検索対策、両面からの集客を支援します

AI検索での御施設の推薦状況を無料チェック

無料チェックを申し込む

改善後の効果測定

改善施策を実施したら、効果を数値で確認します。

サイト改修はAI検索対策のチャンスでもある

表示速度の改善のためにサイトのHTML構造を見直す際は、同時に「AI検索エンジンにとって読みやすい構造」になっているかも確認してください。

ChatGPT、Gemini、PerplexityなどのAI検索エンジンは、公式サイトの情報を読み取って旅行者への推薦に利用しています。構造化データ（schema.org）の実装、見出しタグの適切な階層構造、施設の特徴を明確に記述したテキストコンテンツなど、AI検索にとって重要な要素は、サイトの表示速度改善と同時に整備できるものが多いのです。

サイトの表示速度を改善して予約離脱を防ぎながら、AI検索での推薦獲得にも備える。この二兎を追うアプローチが、公式サイトのリニューアルや改修を検討している施設にお勧めです。