ページスピードのスコアを落とさずサイトにGoogleマップを埋め込む方法

web技！
サイト作成の困りごとをサクッと解決
所長

Googleマップの埋め込み機能というのをご存じでしょうか。
すでにご存じの方も多くいらっしゃる事でしょうが、今回のテーマで述べる理由によって使用していない、または消極的にリンクで済ませていたりはしていませんでしょうか？
実にもったいない。
Googleマップはiframeで埋め込んでこそ華！
自分のページ内で表示されたマップをフリック、スワイプ、拡大縮小、マウスでぐりぐり動かせるのが醍醐味なんじゃありませんか。

ぽんきちくん あ、ちょっとわかるかも…

だろう？
それなのに何故埋め込みが微妙とされるのか。
具体的に言うとページの初回読み込み速度が遅くなります。
故にPageSpeed Insightsのスコアが減少します。
故にページの評価が下がります。
故に…以下略。
SEO（Search Engine Optimization）を意識し始めると、いろいろな事が脳裏に浮かんで来るので結局やめちゃうんですよね。
でもど～しても使いたい。
そしてSEOにも配慮したい。
…
…
できるよ。
そう、JavaScriptならね。

注：今後Googleアルゴリズムのアップデートによって評価基準が変更される可能性があります。あくまで参考程度に留めていただきますようお願いします。

１．Googleマップの埋め込みかたおさらい

まずGoogleマップを埋め込む方法についておさらいをしておきましょう。
このへんはネットに情報が溢れていますのでさらっと流します。
お題は何でも良くて、お店の詳細だとかストビュー、ピンを立てただけのプレーンなマップなどが考えられますが、今回は便宜的にルート検索の結果を埋め込んでみましょう。
※PCでの操作を想定しています

Googleマップ埋め込み方1
Googleマップ埋め込み方2
Googleマップ埋め込み方3
  1. 画面左上のハンバーガーメニュー（3本線）を開く
  2. 開いたメニュー中ほどにある「地図を共有または埋め込む」を選択
  3. 共有の詳細画面がポップアップ
  4. 初期状態では「リンクを送信する」タブが選択されているので「地図を埋め込む」タブを改めて選択
  5. HTMLをコピー
  6. 記事に貼り付け

以上です。
ちなみに吐き出されたコードは以下のとおり。 

<iframe src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d1416.648914097596!2d133.53411556546695!3d35.390993405413695!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x355661b85aaffaf5%3A0x22865fd782f84c65!2z5aSp54uX6Iy25bGL44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx!3m2!1d35.391371299999996!2d133.53368899999998!4m5!1s0x355661b8c8658897%3A0xfc82cded98966378!2z6YeR6ZaA44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx77yZ!3m2!1d35.3898675!2d133.536107!5e1!3m2!1sja!2sjp!4v1755564164647!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

少しだけわかりやすくするために並べ替えると、こうなります。 

<iframe
  width="600"
  height="450"
  style="border:0;"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen=""
  loading="lazy"
  src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d1416.648914097596!2d133.53411556546695!3d35.390993405413695!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x355661b85aaffaf5%3A0x22865fd782f84c65!2z5aSp54uX6Iy25bGL44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx!3m2!1d35.391371299999996!2d133.53368899999998!4m5!1s0x355661b8c8658897%3A0xfc82cded98966378!2z6YeR6ZaA44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx77yZ!3m2!1d35.3898675!2d133.536107!5e1!3m2!1sja!2sjp!4v1755564164647!5m2!1sja!2sjp">
</iframe>

このまま埋め込んでもよいのですが、少しダサいですし、いらんパラメータも邪魔でしたので、あくまで一例として以前私は以下のように装飾して使用していました。
各種パラメータの紹介やスタイルの説明については本題から外れますので割愛します。 

<style>
.map{
  width:100%;
  height:350px;
  border-radius:8px;
  border:none;
  }
</style>

<iframe
  class="map"
  loading="lazy"
  src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d1416.648914097596!2d133.53411556546695!3d35.390993405413695!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x355661b85aaffaf5%3A0x22865fd782f84c65!2z5aSp54uX6Iy25bGL44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx!3m2!1d35.391371299999996!2d133.53368899999998!4m5!1s0x355661b8c8658897%3A0xfc82cded98966378!2z6YeR6ZaA44CB44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx77yZ!3m2!1d35.3898675!2d133.536107!5e1!3m2!1sja!2sjp!4v1755564164647!5m2!1sja!2sjp">
</iframe>

すると次のような結果になります。

Googleマップ埋め込み結果（pc）
PC
Googleマップ埋め込み結果（mobile）
mobile

具体的な使用感については、よかったらこちらのリンクで試してみてください。
▶金門狭堰堤大山最古の近代砂防堰堤
それでは次へ進みます。

２．Googleマップ埋め込みの問題点

次、Googleマップを埋め込む事により発生する問題点について掘り下げます。
冒頭にて、

  • 読み込みが遅くなることによってページの評価が下がる

と述べました。
実際にはセキュリティ上のリスクなど他にもありますが、今回はGoogleマップの埋め込みに限定したお話ですので、あくまでSEO上のデメリットのみ考えたいと思います。
で、読み込みが遅くなるといってもどれぐらい遅くなるのでしょうか。
まず何もいじっていないプレーンなコードを2つ埋め込んだ場合の計測結果は以下のようになります。

PageSpeed Insightsの計測結果、改善前（mobile）
mobile
PageSpeed Insightsの計測結果、改善前（pc）
PC
PageSpeed Insightsの計測結果、改善前のエラー1
低評価例1
PageSpeed Insightsの計測結果、改善前のエラー2
低評価例2

言うてもloading="lazy"（遅延読み込み）が最初から入っていますので、壊滅的なスコアというほどではありません。
が、「低評価例1、2」に示すように緊急性の低いJavaScriptが実行されていたりGoogleマップに対するリクエストが走っていたりして、

  1. 効率的なキャッシュ保存期間を使用する
  2. ネットワークの依存関係ツリー
  3. 使用していない JavaScript の削減

このあたりでスコアが下がっています。
結局、”改善の余地がある”というのが実情です。

３．JavaScriptで遅延させる

それでは対策を行っていきます。
見出しのとおりJavaScriptを使用します。

  1. srcではなくdata-src属性にGoogleマップの埋め込みURLを入れておく
  2. スクロールしたら即発火する以下のようなスクリプトを仕込む
    1. ・data-srcを持つiframeを全部拾う
    2. ・iframeのIDを記録して二重ロードを防ぐ
    3. ・data-srcの値をsrcに代入
  3. 操作が行われていない状態ではiframeが不完全なので実行されない
  4. Googleが評価するのは操作が行われていない状態のページなのでバッチリ☆

作戦としては以上。
スクリプトは以下のようになります。 

※スタイルシート
<style>
.map{
  width:100%;
  height:350px;
  border-radius:8px;
  border:none;
  }
</style>

※アイフレーム１
<iframe
  id="map1"
  class="map"
  frameborder="0"
  loading="lazy"
  title="金門狭堰堤下流方面へのルート"
  data-src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d1463.0857398014075!2d133.53337985216467!3d35.3909876823561!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x355661b85aaffaf5%3A0x22865fd782f84c65!2z5aSp54uX6Iy25bGL!3m2!1d35.391371299999996!2d133.53368899999998!4m5!1s0x35566121ecf35f6d%3A0x148fba37c769e1a!2z44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGxIOS4iuODr-OCv-ODqg!3m2!1d35.3901987!2d133.534906!5e1!3m2!1sja!2sjp!4v1700575374902!5m2!1sja!2sjp">
</iframe>

※アイフレーム２
<iframe
  id="map2"
  class="map"
  frameborder="0"
  loading="lazy"
  title="金門狭堰堤上流方面へのルート"
  data-src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d2532.710308794678!2d133.53248068192764!3d35.39092632452974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x355661b85aaffaf5%3A0x22865fd782f84c65!2z5aSp54uX6Iy25bGL!3m2!1d35.391371299999996!2d133.53368899999998!4m5!1s0x355661b8c8658897%3A0xfc82cded98966378!2z44CSNjg5LTMzMTgg6bOl5Y-W55yM6KW_5Lyv6YOh5aSn5bGx55S65aSn5bGx77yZIOmHkemWgA!3m2!1d35.3898675!2d133.536107!5e1!3m2!1sja!2sjp!4v1700577869387!5m2!1sja!2sjp">
</iframe>

※スクリプト
<script>
(function(){
  const iframes = document.querySelectorAll('iframe[data-src]');
  const loadedSet = new Set();

  function loadVisibleIframes() {
    iframes.forEach(iframe => {
      const id = iframe.id;
      if (!loadedSet.has(id) && window.scrollY > 0) {
        iframe.src = iframe.dataset.src;
        loadedSet.add(id);
      }
    });

    if (loadedSet.size === iframes.length) {
      window.removeEventListener('scroll', onScroll);
    }
  }

  function onScroll() {
    loadVisibleIframes();
  }

  window.addEventListener('DOMContentLoaded', () => {
    if (window.scrollY > 0) {
      loadVisibleIframes();
    } else {
      window.addEventListener('scroll', onScroll, { passive: true });
    }
  });
})();
</script>

コピペOKです。
いちおう使い方と注意点を書いておきます。

  1. ・JavaScriptを記事内で使用できないサービスがあります
    こちらにまとめてあります
  2. ・「※コメント」は消して使ってください
  3. ・cssはみなさん秘伝のタレをお持ちでしたらもちろんそちらをお使いください
  4. ・マップは例として2つ使用していますが1つでも100個でも大丈夫です
  5. ・マップのidは1つずつ別の名前にしなければなりません
  6. ・Googleマップ側でコードを生成した段階ではタイトルがありませんので適当に考えて入れてください
  7. ・生成コードのsrc内URL+パラメータをdata-srcへコピペ
  8. ・JavaScriptの部分は記事内でなるべく最後の方にあるのが望ましいですが、1年ぐらいして「あれ、これなんだっけ？」ってことになってもアレですので、iframeの直後で良いと思います

４．効果測定

JavaScriptで遅延読み込みさせたのち、改めてPageSpeed Insightsにて計測を行ってみた結果がこちら。

PageSpeed Insightsの計測結果、改善後（mobile）
mobile
PageSpeed Insightsの計測結果、改善後（pc）
PC
mobile ： 6ポイント
PC ： 5ポイント

それぞれ改善しています。
たかが数ポイント。
されど数ポイントです。
以上、ページスピードのスコアを落とさずにGoogleマップを埋め込む方法でした。
それではさようなら。

ー おしまい ー