Carga diferida para mapas

Si la página tiene un mapa interactivo de Yandex o Google, entonces la velocidad de carga puede demorar unos segundos, y es genial arruinar el informe de PageSpeed ​​de Google .



En este artículo, describiré un ejemplo de optimización de una conexión de mapa Yandex, donde se cargará de manera perezosa cuando pase el cursor del mouse.



1. Primero, creemos un mapa de Yandex ( aquí ) y obtengamos un script, algo como esto:

<script type="text/javascript" 
        charset="utf-8" 
        async 
        src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>

2. En nuestro sitio, escribiremos un contenedor para el bloque de tarjetas:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>
</div>

Y los estilos para nuestra imagen estática (es más fácil hacerlo con cualquier captura de pantalla):

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

3. Lo más interesante es escribir código JavaScript que rastreará los eventos de pasar el mouse o hacer clic en la pantalla táctil del teléfono y reemplazará la imagen estática con un mapa interactivo:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//  ,    
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

4. ¡Beneficio! ¡Tu sitio ahora se carga mucho más rápido!



PD: Este método también se puede adaptar para otros objetos que no requieren JS y CSS, por lo que la velocidad de carga de la página puede ser inferior a un segundo.