【マップ】Googleマップを遅延表示してページの表示速度を改善

Googleマップを遅延表示してページの表示速度を改善します。GoogleマップはGoogle Maps APIを利用せず、通常のiframeタグを埋め込んで表示します。

サンプルデモはこちら（遅延表示あり）
参考（遅延表示なし）

htmlのコードです。外側のクラス名map_wrapのdivタブはレスポンシブ用です。ポイントはクラス名js-mapの空のdivタグにカスタムデータ属性を設定する部分です。属性名はdata-mapとし、Googleマップ埋め込み用のiframeタグをそのまま設定します。ただしレスポンシブ用にwidth=”100%”、height=”auto”に変更しています。

<div class="map_wrap">
<div class="js-map" data-map='<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6991708523014!2d139.70088971555094!3d35.68440863740457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cc6e5e95555%3A0xeabec3409c3087df!2zTlRU44OJ44Kz44Oi5Luj44CF5pyo44OT44Or77yI44OJ44Kz44Oi44K_44Ov44O877yJ!5e0!3m2!1sja!2sjp!4v1602083170798!5m2!1sja!2sjp" width="100%" height="auto" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>'></div>
</div>

続いてCSSのコードです。iframeタグにYoutubeのアスペクト比16:9と同様のレスポンシブ対応をしています。これでスマホ表示でも縦横比が維持されます。（※Googleマップにアスペクト比は関係ありません。）

.map_wrap {
	position: relative;
	padding-top: 56.25%;
}
.map_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

最後にjQueryのコードです。
GoogleマップはsetTimeoutで1秒後の遅延表示にします。dataメソッドでカスタムデータ属性data-mapに設定したGoogleマップ埋め込み用のiframeタグを取得し、afterメソッドでクラス名js-mapの空のdivタグの直後に追加します。

function asyncGoogleMap() {
	$('.js-map').each(function () {
		var map = $(this).data('map');
		$(this).after(map);
	});
}
setTimeout(function() {
	asyncGoogleMap();
}, 1000);

Googleマップの遅延表示ありのページとなしのページをGoogleのPageSpeed Insightsで比較してみます。遅延表示ありのページはモバイルで「次世代フォーマットでの画像の配信」の項目が改善され、わずかながらページの表示速度が速くなっています。