google_maps_lazy

仕事内容 - saitodev.co


当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、

このGoogle Mapsの出力によって、


google_maps_lazy_res


PageSpeed Insightsの結果が80点台になっていました。

今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。



遅延出力する前に記載されていたコードは、

<iframe src="https://www.google.com/maps/embed?pb={省略}" style="border: 0;" allowfullscreen="" width="400" height="300" frameborder="0"></iframe>

でした。


この個所を

<span id="lazy_google_map">地図を表示</span>

に変更し、HTMLの末尾に

<script>
setTimeout(function(){
	var mapArea = document.getElementById('lazy_google_map');
	mapArea.innerHTML = "";
	var iframe = document.createElement('iframe');
	iframe.src = 'https://www.google.com/maps/embed?pb={省略}';
	iframe.width = 400;
	iframe.height = 300;
	iframe.frameborder = "0";
	iframe.style = "border:0";
	iframe.allowfullscreen = true;
	mapArea.appendChild(iframe);
}, 3000);
</script>

3秒後に指定の個所にGoogle Mapsのiframeタグを挿入するコードを作成して挿入した後、再びPageSpeed Insightsで確認してみたところ、


google_maps_lazy_res2


PageSpeed Insightsのスコアは100になりました。