Google Maps : guide pour un score de 100% en PageSpeed

Impact de Google Maps sur vos Core Web Vitals

Il existe de nombreuses raisons d’intégrer Google Maps sur votre page. C’est idéal pour afficher la localisation de votre entreprise, par exemple. Mais il y a un inconvénient. 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 à la vitesse de page.

Il coûte 14% de mon score parfait de 100% en PageSpeed. Voici l’impact sur mes statistiques Google Lighthouse :

1. First Contentful Paint + 0,8 sec. Le premier affichage se produit près d’une seconde plus tard parce que Google Maps interfère avec le chargement de la page.
2. Speed Index + 3,1 sec. Le Speed Index a triplé en raison du rendu de la carte et du blocage du thread principal.
3. Largest Contentful Paint + 0,8 sec. Le Largest Contentful Paint est retardé de 0,8 seconde, tout comme le First Contentful Paint.
4. Time to Interactive + 6,5 sec. Comme Google Maps repose fortement sur JavaScript, il faut plus de 6 secondes pour interagir avec la page. Lighthouse a depuis remplacé le TTI par le Total Blocking Time, mais la cause profonde est la même : le JavaScript de Google Maps bloque votre thread principal, nuisant à votre Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps bloque le thread principal pendant 320ms. C’est exactement ce que nous ne voulons pas.
6. Avertissement de suppression du JavaScript inutilisé. Pour couronner le tout, vous recevez un avertissement supplémentaire indiquant que vous n’utilisez pas de grandes parties du JavaScript de Google Maps. Essayez d’expliquer cela à un client.

Votre premier réflexe serait peut-être de charger les cartes en mode « lazy » avec l’attribut iframe loading="lazy". Cela fonctionne effectivement dans les navigateurs modernes avec 95% de couverture mondiale. Mais pour une performance maximale, ce n’est pas suffisant. Chrome commence à charger les iframes lazy environ 1 250px sous le viewport sur les connexions rapides et 2 500px sur les connexions lentes. Si votre carte se trouve près de la zone visible, elle se chargera quand même pendant le rendu initial de la page et entrera en compétition avec vos ressources critiques. Pour un impact véritablement nul, vous voulez une façade : ne rien charger du tout tant que l’utilisateur n’interagit pas réellement avec la carte.

É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 n’utilisez qu’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 allons commencer par une carte statique. Plus tard, nous pourrons convertir cette carte statique en une carte interactive qui n’interfère pas avec la vitesse de la page.

Il existe plusieurs façons de placer une carte statique sur votre page. Il existe 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 manuellement une image de carte statique.

1. Placez la carte 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. Faites ensuite un clic droit sur la page et sélectionnez « inspecter l’élément ». Vous verrez alors l’inspecteur d’éléments de la « console de développement » de votre navigateur. Trouvez maintenant le code de l’iframe, faites un clic droit dessus et sélectionnez « capture node screenshot ».

2. Convertissez l’image 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, nous utiliserons le format WebP, beaucoup plus rapide. Vous pouvez convertir votre image en ligne sur ezgif ou la convertir vous-même avec l’outil cwebp : cwebp -q 60 image.png -o image.webp.

Étape 2 : Convertir l’image statique en carte interactive

La carte statique garantit qu’aucune vitesse de page n’est perdue lors du chargement. Au chargement de la page, cela signifie que nous n’avons pas encore de carte Google interactive. À un moment donné après le chargement, nous remplacerons la carte statique en arrière-plan par une carte interactive. Nous le ferons après que la page a été rendue et affichée. Cela peut être fait de 2 façons. La première consiste à remplacer la carte statique dès que vous survolez la souris dessus. La seconde est de remplacer la carte statique une fois que le navigateur est inactif.

3. Placez l’image statique dans un conteneur de substitution

Comme 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. Cela réserve de l’espace pour la carte et empêche le layout shift (CLS) lorsque la carte interactive se charge. 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 la carte 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 styles. Comme vous pouvez le voir, nous utilisons l’image statique de la carte comme image d’arrière-plan et appliquons un padding de 76,25% en haut pour le bon rapport d’aspect. La carte finale aura une position absolue sur toute la largeur et la hauteur de la carte statique.

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

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

C’est ici 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 substitution et attend l’événement « mouseover » (lorsque vous survolez la carte statique avec votre souris) pour injecter la carte interactive dans le conteneur.

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. Préchargez l’image d’arrière-plan (optionnel)

Si la carte Google est immédiatement visible dans le viewport, il est souvent judicieux de précharger l’image d’arrière-plan de la carte. Utilisez ce code pour précharger l’image statique de la carte : <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 substitution accélère le LCP de près d’une seconde.

Étape 2b : Remplacer automatiquement l’image statique

Lorsqu’il y a une forte probabilité 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. Chargez 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 se charger. Ensuite, nous convertissons la carte statique en carte interactive ! Pour plus de techniques comme celle-ci, consultez 16 méthodes pour différer le JavaScript.

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

Le résultat

Si vous appliquez l’une de ces techniques, vous constaterez 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 !

Selon le Web Almanac 2025, 91% des pages contenant des iframes n’ont toujours pas d’attribut loading. Cela signifie que la grande majorité des intégrations Google Maps se chargent sans aucune optimisation. L’approche façade vous place largement en avance.

Pour vérifier que vos modifications améliorent réellement le user experience, mettez en place du Real User Monitoring. Les scores en laboratoire sont utiles pour le débogage, mais ce sont les données terrain issues de vrais visiteurs que Google utilise pour le classement.

Bonne chance pour accélérer Google Maps. Besoin d’aide ? Alors contactez-moi !