Chargement paresseux des cartes

Si la page a une carte Yandex ou Google interactive, la vitesse de chargement peut prendre quelques secondes et c'est génial de ruiner le rapport Google PageSpeed .



Dans cet article, je vais décrire un exemple d'optimisation d'une connexion de carte Yandex, où elle sera chargée de manière paresseuse lorsque vous passez le curseur de la souris.



1. Tout d'abord, construisons une carte Yandex ( ici ) et obtenons un script, quelque chose comme ceci:

<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. Sur notre site, nous écrirons un conteneur pour le bloc carte:

<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>

Et les styles de notre image statique (il est plus facile de le faire avec n'importe quelle capture d'écran):

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

3. La chose la plus intéressante est d'écrire du code JavaScript qui suivra les événements de survol de la souris ou de clic sur l'écran tactile du téléphone, et de remplacer l'image statique par une carte interactive:

<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. Profitez! Maintenant, votre site se charge beaucoup plus rapidement!



PS: Cette méthode peut également être adaptée pour d'autres objets qui ne sont pas requis JS et CSS, en raison desquels la vitesse de chargement de la page peut être inférieure à une seconde.