Google Mapsのページ速度100点ガイド

Arjen Karel
linkedin

超高速マップの概要

残念ながら、Google MapsはLighthouseのスコアを考慮しません。Googleによってiframe、複数のJavaScriptファイル、スタイルシートが挿入され、これらすべてがページのレンダリングをブロックします。

Google Mapsがページに挿入するものを制御することはできません。ページ速度を維持するには、ブラウザがページの重要なコンテンツのレンダリングを完了するまで、マップを読み込ませないようにする必要があります。

PageSpeed InsightsとLighthouseのスコアで100点を達成しつつGoogle Mapsを埋め込む最善の方法は、プレースホルダー画像を使用し、訪問者がマップを操作したときにのみ置き換えることです。これはファサードパターンと呼ばれ、YouTubeの埋め込みにも同様に有効です。

その具体的な方法を解説します。

最終査読: 2026年2月 Arjen Karel

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

ページにGoogle Mapsを埋め込む理由は多数あります。会社の所在地を示すのには最適です。しかし、Googleのサービスから期待するほど速くありません。実際、ページにGoogle Mapsを配置すると、ページ速度が大きく低下します。

完璧な100点のページ速度スコアのうち14%が失われます。私のLighthouseデータへの影響は以下の通りです。

First Contentful Paint + 0.8秒。 Google Mapsがページの読み込みを妨げるため、最初の描画が1秒近く遅れます。
Speed Index + 3.1秒。 マップのレンダリングとmain threadのブロックにより、Speed Indexが3倍になりました。
Largest Contentful Paint + 0.8秒。 First Contentful Paintと同様に、Largest Contentful Paintも0.8秒遅延します。
Time to Interactive + 6.5秒。 Google MapsはJavaScriptに大きく依存しているため、ページを操作できるようになるまで6秒以上かかります。その後LighthouseではTTIがTotal Blocking Timeに置き換えられましたが、根本的な原因は同じです。Google MapsのJavaScriptがmain threadをブロックし、Interaction to Next Paint (INP)を悪化させます。
Total Blocking Time + 320ms。 Google Mapsはmain threadを320msブロックします。これは絶対に避けるべき事態です。
「使用していない JavaScript の削減」の警告。 極めつけに、Google MapsのJavaScriptの大半を使用していないという警告が表示されます。これを顧客に説明するのは困難です。

Lighthouse score showing the impact of Google Maps on page speed

最初に思いつくのは、iframeの属性にloading="lazy"を追加して、マップをlazy loadingすることかもしれません。これは最新のブラウザでは実際に機能し、世界の95%のブラウザでサポートされています。しかし、パフォーマンスを最大化するには不十分です。Chromeは、高速回線ではviewportの約1,250px下、低速回線では2,500px下からlazy iframeの読み込みを開始します。マップが可視領域の近くにある場合、ページの初期レンダリング中に読み込まれ、重要なリソースと競合します。影響を完全にゼロにするには、ファサードが必要です。ユーザーが実際にマップを操作するまで何も読み込まないようにします。

ステップ1：静的なマップ

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

まずは静的なマップから始めます。後ほど、この静的なマップを、ページ速度に影響を与えないインタラクティブなマップに変換します。

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

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

ページにマップを配置します。Google Mapsを開いて場所を検索し、「共有」から「地図を埋め込む」をクリックします。コードをコピーしてページに貼り付けます。次に、ページを右クリックして「検証」を選択します。ブラウザのdev consoleの要素インスペクタが表示されます。iframeのコードを見つけ、右クリックして「ノードのスクリーンショットをキャプチャ」を選択します。

Taking a screenshot of a Google Maps iframe in Chrome DevTools

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

ダウンロードしたマップ画像はPNG形式です。ページ速度を重視するため、より高速なWebP形式を使用します。画像はezgifなどのオンラインツールで変換するか、cwebpツールを使用して自分で変換することもできます：cwebp -q 60 image.png -o image.webp。

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

静的なマップにより、ページ読み込み時のページ速度の低下を防ぐことができます。つまり、読み込み時点ではインタラクティブなGoogle Mapsはまだ存在しません。読み込み後の任意のタイミングで、バックグラウンドで静的なマップをインタラクティブなマップに置き換えます。これはページのレンダリングと描画が完了した後に行います。これには2つの方法があります。1つは、マウスをホバーした瞬間に静的なマップを置き換える方法です。もう1つは、ブラウザがアイドル状態になったときに置き換える方法です。

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

モバイルとデスクトップの両方でマップを美しく表示させるため、訪問者の画面サイズに関わらず常に正しい比率を保つCSSテクニックを使用します。これによりマップのスペースが確保され、インタラクティブなマップが読み込まれる際のCumulative Layout Shift (CLS)を防ぎます。コンテナにはdata-src属性を追加し、後でGoogle MapsのソースURLとして使用します。

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

スタイルシートでスタイルを追加します。静的なマップ画像を背景画像として使用し、正しいアスペクト比を維持するために上部に76.25%のpaddingを適用します。最終的なマップは、静的なマップの幅と高さ全体に対して絶対配置されます。

#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がなければ、マップは単なる静止画像のままです。この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するには、このコードを使用します：<link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin>。これをページの<head>内のなるべく早い位置に配置します。この例では、プレースホルダー画像を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とPageSpeed Insightsのスコアが100点になります。

100% Lighthouse score with Google Maps using the facade pattern

2025 Web Almanacによると、iframeを使用するページの91%にはloading属性が設定されていません。つまり、大多数のGoogle Mapsは全く最適化されずに読み込まれています。ファサードのアプローチを採用すれば、圧倒的優位に立つことができます。

変更によって実際のUXが向上したことを確認するには、Real User Monitoringを導入してください。lab dataはデバッグに有用ですが、Googleがランキングの評価に使用するのは、実際の訪問者から収集したfield dataです。

Google Mapsの高速化をぜひ実践してください。サポートが必要な場合はご連絡ください。

About the author

Arjen Karel is a web performance consultant and the creator of CoreDash, a Real User Monitoring platform that tracks Core Web Vitals data across hundreds of sites. He also built the Core Web Vitals Visualizer Chrome extension. He has helped clients achieve passing Core Web Vitals scores on over 925,000 mobile URLs.

見張るのをやめた瞬間にパフォーマンスは劣化します。

監視、バジェット、運用プロセスまで組みます。一時的な修正と本当の解決の差はここです。

一度お話ししませんか

Core Web Vitals Google Maps 100% PageSpeed ガイド