Lazy Loading Google Maps

 Lazy Loading Google Maps a Theory

Lazy Loading is a technique that allows you to load Google Maps only when the user scrolls to the position on the page where that map is embedded. This helps improve your website performance and your site’s web vitals score as the heavy JavaScript code that loads Google Maps is not loaded until the user scrolls to the map.

Earlier, websites had to use the Intersection Observer API to gradually load maps and images as they become visible on the screen. This is no longer the case as most modern browsers now support the loading attribute on the img and <iframe> elements.

Simply add loading='lazy' to the IFRAME element and browser will defer loading of Google Maps that are off-screen until the user scrolls near them. A similar technique can be used to embed Instagram videos and photos.

Comments