Guide Google Maps pour un score PageSpeed de 100 %

Impact de Google Maps sur le score Lighthouse

Il y a de nombreuses raisons d'intégrer une carte 'Google Maps' sur votre page. C'est génial pour montrer l'emplacement de votre entreprise par exemple.
Mais il y a un hic. Google Maps n'est pas aussi rapide que ce que l'on pourrait attendre d'un service Google. En fait, Google Maps sur votre page est un véritable frein pour le PageSpeed.
Cela coûte 14 % de mon score parfait de 100 % PageSpeed. Cela affecte mes statistiques Lighthouse  

1. First Contentful Paint + 0,8 s . Le premier affichage se produit presque une seconde plus tard car Google Maps interfère avec le chargement de la page.
2. Speed Index + 3,1 s . Le Speed Index a triplé en raison du rendu de la carte et du blocage du thread principal.
3. Largest Contentful Paint + 0,8 s. Le Largest Contentful Paint est retardé de 0,8 seconde, tout comme le First Contentful Paint.
4. Time to Interactive + 6,5 s . Parce que Google Maps dépend fortement du JavaScript qui doit être exécuté, il faut plus de 6 secondes pour interagir avec la page.
5. Total Blocking Time + 320 ms . Google Maps bloque le thread principal de 320 ms. C'est exactement ce que nous ne voulons pas.
6. Avertissement Remove unused JavaScript . Pour couronner le tout, vous obtenez un autre avertissement indiquant que vous n'utilisez pas de grandes parties du JavaScript de Google Maps. Essayez d'expliquer cela à un client.

Votre première pensée pourrait être de charger les cartes en 'lazy' avec l'attribut iframe   loading="lazy" . Malheureusement, cela n'a souvent que peu de sens. Les iFrames différées via loading = "lazy" sont toujours téléchargées et exécutées tôt par les navigateurs. Nous devons donc trouver quelque chose de plus intelligent.

Étape 1 - Cartes statiques

L'option la plus simple est d'utiliser une carte statique. Cela signifie qu'au lieu d'une carte interactive, vous utilisez uniquement une image de la carte. L'avantage est qu'une image se charge beaucoup plus rapidement. L'inconvénient est que vous ne pouvez pas interagir avec une image. Vous ne pouvez donc pas zoomer, faire défiler ou naviguer. 

Nous commencerons par une carte statique. Plus tard, nous pourrons convertir cette carte statique en une carte interactive qui n'interfère pas avec le PageSpeed.

Il existe plusieurs façons de placer une carte statique sur votre page. Il y a des outils qui vous aideront à le faire comme Static Map Maker,  mais vous avez besoin d'une clé API. Je vais vous montrer comment télécharger une image de carte statique manuellement.

1 - Placez les cartes sur votre page.

Placez la carte sur votre page. Allez sur Google Maps, trouvez un emplacement et cliquez sur partager > intégrer cette carte. Copiez le code et collez-le sur votre page. Maintenant, faites un clic droit sur la page et sélectionnez 'inspecter l'élément'. Vous verrez maintenant l'inspecteur d'éléments de la 'console dev' de votre navigateur. Trouvez maintenant le code iframe, faites un clic droit dessus et sélectionnez 'capture node screenshot'.

2. Convertir le fichier statique au format WebP.

L'image de la carte que vous venez de télécharger est au format png. Comme nous visons la vitesse de page (PageSpeed), nous utiliserons le format WebP, beaucoup plus rapide. Vous pouvez convertir votre image en ligne sur ezgif  ou vous pouvez la convertir vous-même avec l'outil cwebp :  cwebp -q 60 image.png -o image.webp.

Étape 2 - Convertir l'image de carte statique en une carte interactive

La carte statique garantit qu'aucune vitesse de page n'est perdue lors du chargement de la page. Au chargement de la page, cela signifie que nous n'avons pas encore de carte Google interactive. À un moment donné après le chargement de la page, nous remplacerons la carte statique en arrière-plan par une carte interactive. Nous le ferons une fois que la page aura été rendue et affichée. Cela peut se faire de 2 manières. La première consiste à remplacer la carte statique dès que vous passez la souris dessus. La seconde est de remplacer les cartes statiques une fois le navigateur inactif.

3. Placez l'image de la carte statique dans un 'placeholder' spécial

Puisque nous voulons que notre carte soit belle aussi bien sur mobile que sur ordinateur, nous utiliserons cette  astuce CSS  où les proportions de la carte sont toujours correctes quelle que soit la taille de l'écran du visiteur. Nous ajoutons maintenant un attribut data-src au conteneur que nous utiliserons plus tard comme URL source pour la carte Google.

Placez d'abord le conteneur de cartes sur la page :
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Ajoutez du style dans votre feuille de style. Comme vous pouvez le voir, nous utilisons l'image de la carte statique comme image d'arrière-plan et appliquons un padding de 76,25 % en bas pour un format de carte 16:9. La carte finale aura une position absolue sur toute la largeur et la hauteur de la carte statique.

#mymap{\r\n    background: url(/image.webp); \r\n    background-size: cover;\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding-top: 76.25%;\r\n}\r\n#mymap iframe {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 0;\r\n}\r\n

4. Charger la carte interactive lors de la première interaction

C'est là que la magie opère. Sans ce petit morceau de JavaScript, la carte n'est qu'une image statique. Ce JavaScript ajoute (et supprime) un écouteur d'événements au conteneur de remplacement et attend l'événement 'mouseover' (lorsque vous passez votre souris sur la carte statique) pour injecter la carte interactive dans le conteneur.

var map = document.getElementById ('mymap'); \r\nvar maplistner = function (e) { \r\n    var frame = document.createElement ('iframe'); \r\n    frame.src = this.getAttribute ('data-src'); \r\n    map.appendChild (frame); \r\n    map.removeEventListener ("mouseover", maplistner); \r\n}; \r\nmap.addEventListener ('mouseover', maplistner);       \r\n

5. Pré-charger l'image d'arrière-plan (optionnel)

Si la carte Google est immédiatement visible dans la fenêtre d'affichage (viewport), c'est souvent une bonne idée de 'pré-charger' l'image de la carte d'arrière-plan. Utilisez ce code pour pré-charger l'image des cartes statiques  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> et placez-le le plus tôt possible dans le <head>de votre page. Dans cet exemple, le pré-chargement de l'image de remplacement accélère le LCP de près d'une seconde.

Étape 2b - Remplacer automatiquement l'image des cartes statiques

Lorsqu'il y a de fortes chances que le visiteur interagisse avec la carte, il peut être judicieux de ne pas attendre l'événement mouseover. Dès que le navigateur est inactif, commencez à injecter la carte dans la page. Le processus est plus ou moins le même que ci-dessus. Vous pouvez même combiner les deux.

4b - charger la carte interactive automatiquement

Nous utiliserons ici l'événement 'load'. L'événement load est un signal que votre navigateur envoie dès que la page a fini de charger. Ensuite, nous convertissons les cartes statiques en carte interactive !

window.addEventListener('load', \r\n    function(e) {\r\n        var map = document.getElementById ('mymap'); \r\n        var frame = document.createElement ('iframe'); \r\n        frame.src = map.getAttribute ('data-src'); \r\n        map.appendChild (frame); \r\n});      

Le résultat

Si vous appliquez l'une des deux techniques, vous remarquerez que la page se charge avec un score Lighthouse de 100 % et un score PageSpeed Insights de 100 % tout en conservant toutes les fonctionnalités de Google Maps !

Bonne chance pour rendre Google Maps plus rapide. Avez-vous besoin d'aide ? Alors contactez-moi !