Google Maps ページスピード100%達成ガイド

Google MapsがCore Web Vitalsに与える影響

ページにGoogle Mapsを埋め込む理由は数多くあります。例えば会社の所在地を示すのにも最適です。しかし、落とし穴があります。Google Mapsは、Googleのサービスに期待されるほど高速ではありません。実際、ページスピードを大幅に低下させる要因になります。

完璧だった100点のスコアから14%も削られました。Google Lighthouseの計測結果は次のとおりです：

1. First Contentful Paint + 0.8秒 Google Mapsがページの読み込みを阻害するため、初回の描画が約1秒遅くなります。
2. Speed Index + 3.1秒 マップのレンダリングとmain threadのブロックにより、Speed Indexが3倍に悪化しました。
3. Largest Contentful Paint + 0.8秒 First Contentful Paintと同様に、Largest Contentful Paintも0.8秒遅延します。
4. Time to Interactive + 6.5秒 Google MapsはJavaScriptへの依存度が高いため、ページを操作できるようになるまでに6秒以上長くかかります。現在LighthouseではTTIがTotal Blocking Timeに置き換えられましたが、根本的な原因は同じです。Google MapsのJavaScriptがmain threadをブロックし、Interaction to Next Paint (INP)を悪化させます。
5. Total Blocking Time + 320ms Google Mapsがmain threadを320msブロックします。まさに避けたい挙動です。
6. 「使用していないJavaScriptの削減」警告 さらに追い打ちをかけるように、Google MapsのJavaScriptの大半が使われていないという警告まで表示されます。クライアントにこれを説明するのは一苦労です。

真っ先に思い浮かぶのは、iframeのloading="lazy"属性でマップをlazy loadingする方法でしょう。世界で95%のブラウザが対応しており、実際に機能します。しかし、パフォーマンスを極限まで高めるには不十分です。Chromeは、高速回線ではviewportの約1,250px手前、低速回線では約2,500px手前の位置でlazy iframeの読み込みを開始します。マップが表示領域の近くにあれば、初期レンダリング時に読み込まれ、重要なリソースと競合してしまいます。影響を完全にゼロにするには、facadeを採用してください。ユーザーが実際にマップを操作するまで、何も読み込ませないようにします。

ステップ1: 静的マップ

最も簡単な方法は、静的マップを使うことです。インタラクティブなマップの代わりに、マップの画像のみを配置します。メリットは、画像の方がはるかに高速に読み込める点です。デメリットは、画像を操作できない点です。ズーム、スクロール、ナビゲーションはできません。

まずは静的マップから始めます。後から、ページスピードを落とさずにこの静的マップをインタラクティブなマップへ変換します。

ページに静的マップを配置する方法はいくつかあります。Static Map Makerのようなツールもありますが、APIキーが必要です。ここでは、手作業で静的マップ画像をダウンロードする方法を解説します。

1. マップをページに配置する

まず、マップをページに配置します。Google Mapsで場所を検索し、「共有」>「地図を埋め込む」をクリックします。コードをコピーしてページに貼り付けてください。次に、ページを右クリックして「検証」を選択します。ブラウザの開発者ツールで要素インスペクタが開きます。iframeのコードを探して右クリックし、「ノードのスクリーンショットをキャプチャ」を選択します。

2. 静的画像をWebP形式に変換する

ダウンロードしたマップ画像はPNG形式です。ページスピードを最優先するため、より高速なWebP形式に変換します。ezgifなどのオンラインツールを使うか、cwebpツールを使ってコマンドで変換してください：cwebp -q 60 image.png -o image.webp。

ステップ2: 静的マップ画像をインタラクティブなマップに変換する

静的マップを使えば、ページ読み込み時のスピード低下を防げます。ただし、この時点ではインタラクティブなGoogle Mapsはまだ動作していません。ページのレンダリングと描画が完了した後、バックグラウンドで静的マップをインタラクティブなマップに差し替えます。これには2つの方法があります。1つ目は、マウスホバー時に差し替える方法です。2つ目は、ブラウザがアイドル状態になったときに差し替える方法です。

3. プレースホルダーに静的マップ画像を配置する

モバイルとデスクトップの双方でマップを適切に表示するため、画面サイズに関係なくアスペクト比を維持できるCSSの手法を使用します。あらかじめ表示領域を確保しておくことで、インタラクティブなマップ読み込み時のlayout shift (CLS)を防ぎます。次に、後からGoogle Mapsの読み込み先URLとして使用するdata-src属性をコンテナに追加します。

まず、ページ上にマップのコンテナを配置します：
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

スタイルシートにCSSを追加します。静的マップ画像を背景画像として設定し、適切なアスペクト比を保つために上部に76.25%のpaddingを適用します。最終的なマップは、静的画像の幅と高さ全体を覆うようにabsoluteで配置されます。

#mymap{
    background: url(/image.webp);
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 76.25%;
}
#mymap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

4. 初回操作時にインタラクティブなマップを読み込む

ここが実装の要です。このわずかなJavaScriptがなければ、マップは単なる静止画にすぎません。スクリプトがプレースホルダーのコンテナにイベントリスナーを登録し、静的マップ上にマウスが乗る「mouseover」イベントを待機します。イベントが発生するとコンテナ内に本物のマップを挿入し、イベントリスナーを解除します。

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. 背景画像をpreloadする（任意）

Google Mapsがviewport内に最初から表示されている場合は、背景のマップ画像をpreloadするのが効果的です。次のコードを使って静的マップ画像をpreloadし、ページの<head>内のできるだけ先頭近くに配置してください：<link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin>。今回の検証環境では、プレースホルダー画像をpreloadすることでLCPが1秒近く高速化されました。

ステップ2b: 静的マップ画像を自動で差し替える

訪問者がマップを操作する可能性が高い場合は、mouseoverイベントを待たない方が賢明です。ブラウザがアイドル状態になり次第、ページへのマップの挿入を開始します。手順は上記とほぼ同じで、両方を組み合わせることも可能です。

4b. インタラクティブなマップを自動的に読み込む

ここでは「loadイベント」を使用します。loadイベントは、ページの読み込みが完了した瞬間にブラウザが発行するシグナルです。このタイミングで静的マップをインタラクティブなマップに変換します。同様のテクニックについては、JavaScriptを遅延させる16の方法を参照してください。

window.addEventListener('load',
    function(e) {
        const map = document.getElementById('mymap');
        const frame = document.createElement('iframe');
        frame.src = map.getAttribute('data-src');
        map.appendChild(frame);
});      

結果

これらの手法のいずれかを適用すれば、Google Mapsの機能をすべて維持したまま、Lighthouseスコア100点、PageSpeed Insightsスコア100点でページを読み込めるようになります。

2025 Web Almanacによると、iframeを使用しているページの91%にはloading属性すら指定されていません。つまり、埋め込まれているGoogle Mapsの大半は、何の最適化もされずに読み込まれています。facadeのアプローチを採用すれば、圧倒的な差をつけることができます。

加えた変更が実際のユーザー体験を向上させているか確認するには、Real User Monitoringを設定してください。lab dataのスコアはデバッグに役立ちますが、Googleが検索順位の決定に使用するのは、実際の訪問者から得られるfield dataです。

Google Mapsの高速化に取り組んでみてください。サポートが必要な場合は、お問い合わせください。