Googleマップ 100% page speed ガイド

Arjen Karel
linkedin

超高速マップの要約

残念ながら、Googleマップは Lighthouse スコアに対してほとんど敬意を払っていません。iFrame、さまざまな JavaScript ファイル、スタイルシートが Google によって挿入され、すべてページのレンダリングをブロックします。

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

Googleマップを埋め込み、それでも 100% の page speed insights と lighthouse スコアを達成する最良の方法は、プレースホルダー画像を使用し、訪問者がマップを操作したときにのみ置き換えることです。

その方法を紹介します！

Lighthouse スコアに対する Googleマップの影響

'Googleマップ' の地図をページに埋め込む理由はたくさんあります。たとえば、会社の場所を表示するのに最適です。
しかし、落とし穴があります。 Googleマップは、Google のサービスから期待されるほど高速ではありません。実際、ページ上の Googleマップは pagespeed の大きな浪費です。
これは私の完璧な 100% page speed スコアの 14% を犠牲にします。これは私の Google lighthouse 統計で行われます

First contentful paint + 0.8 sec . Googleマップがページの読み込みを妨害するため、最初の描画はほぼ 1 秒遅れて実行されます。
Speed index + 3.1 sec Speed index マップのレンダリングと main thread のブロックにより 3 倍になりました
Largest contentful paint + 0.8 sec. 最大コンテンツ描画は、最初のコンテンツ描画と同様に 0.8 秒遅れます。
Time to interactive + 6.5sec . Googleマップは実行する必要のある javascript に大きく依存しているため、ページとの対話に 6 秒以上かかります。
Total blocking time + 320ms . Googleマップは main thread を 320ms ブロックします。これはまさに私たちが望まないことです。
未使用の JavaScript を削除する警告 . さらに悪いことに、Googleマップの javascript の大部分を使用していないという別の警告が表示されます。それを顧客に説明してみてください。

initial page speed for google maps

最初の考えは、iframe 属性 loading="lazy" を使用してマップを 'lazy' 読み込みすることかもしれません。残念ながら、これは多くの場合ほとんど意味がありません。loading = "lazy" で延期された iFrames は、ブラウザによって依然として早期にダウンロードされ実行されます。したがって、もっと賢い方法を考える必要があります。

ステップ 1 - 静的マップ

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

静的マップから始めます。後で、pagespeed を妨げないインタラクティブなマップにこの静的マップを変換できます。

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

1 - ページにマップを配置します。

ページにマップを配置します。Googleマップに移動し、場所を見つけて、共有 > 地図を埋め込むをクリックします。コードをコピーしてページに貼り付けます。次に、ページを右クリックして '検証' を選択します。ブラウザの 'dev console' の要素インスペクターが表示されます。次に iframe コードを見つけ、右クリックして 'capture node screenshot' を選択します。

2. 静的フォルダを WebP 形式に変換します。

今ダウンロードしたマップ画像は png 形式です。page speed を目指しているため、はるかに高速な WebP 形式を使用します。 ezgif でオンラインで画像を変換するか、ツール cwebp を使用して自分で変換できます： cwebp -q 60 image.png -o image.webp。

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

静的マップにより、ページの読み込み中に page speed が失われないことが保証されます。ページの読み込み時には、まだインタラクティブな Googleマップがないことを意味します。ページの読み込み後のどこかの時点で、背景の静的マップをインタラクティブマップに置き換えます。これは、ページがレンダリングおよび描画された後に行います。これは 2 つの方法で行うことができます。最初の方法は、マウスをその上に置くとすぐに静的マップを置き換えることです。2 つ目は、ブラウザがアイドル状態になったらすぐに静的マップを置き換えることです。

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

モバイルとデスクトップの両方でマップを適切に表示したいため、訪問者の画面サイズに関係なくマップの比率が常に正しいこの CSS トリックを使用します。次に、後で Googleマップのソース URL として使用する data-src 属性をコンテナに追加します。

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

スタイルシートにスタイルを追加します。ご覧のとおり、静的マップ画像を背景画像として使用し、16:9 のマップ形式に対して下部に 76.25% のパディングを適用しています。最終的なマップは、静的マップの幅と高さ全体に絶対的な位置を持ちます。

#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' イベント（静的マップの上にマウスを置いたとき）を待機して、インタラクティブマップをコンテナに挿入します。

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

5. 背景画像のプリロード（オプション）

Googleマップがビューポートにすぐに表示される場合は、背景マップ画像を 'プリロード' するのが賢明な考えです。このコードを使用して静的マップ画像をプリロードし <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> 、ページの <head>の可能な限り早い段階に配置します。この例の場合、プレースホルダー画像をプリロードすると、LCP がほぼ 1 秒高速化されます。

ステップ 2b - 静的マップ画像を自動的に置き換える

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

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

ここでは 'load event' を使用します。load event は、ページの読み込みが完了するとすぐにブラウザが送信するシグナルです。次に、静的マップをインタラクティブマップに変換します！

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