Google Maps : le guide pour 100 % de vitesse

Impact de Google Maps sur vos Core Web Vitals

Les raisons d'intégrer Google Maps sur une page ne manquent pas. C'est très pratique pour situer votre entreprise, par exemple. Mais il y a un piège : Google Maps n'est pas aussi rapide qu'on l'attendrait d'un service Google. En réalité, la carte plombe lourdement la vitesse de votre page.

Elle me fait perdre 14 % sur mon score parfait de 100 %. Voici son impact sur mes résultats Google Lighthouse :

1. First Contentful Paint + 0,8 sec. Le premier affichage intervient près d'une seconde plus tard, car Google Maps perturbe le chargement de la page.
2. Speed Index + 3,1 sec. Le Speed Index a triplé à cause du rendu de la carte et du blocage du main thread.
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. Google Maps repose lourdement sur JavaScript : il faut plus de 6 secondes pour pouvoir interagir avec la page. Lighthouse a depuis remplacé le TTI par le Total Blocking Time, mais la cause racine reste la même : le JavaScript de Google Maps bloque le main thread et dégrade votre Interaction to Next Paint (INP).
5. Total Blocking Time + 320 ms. Google Maps bloque le main thread pendant 320 ms. C'est exactement ce qu'il faut éviter.
6. Avertissement « Remove unused JavaScript ». Pour couronner le tout, vous héritez d'un avertissement indiquant qu'une grande partie du JavaScript de Google Maps n'est pas utilisée. Allez expliquer ça à un client.

Vous pensez peut-être à charger la carte en lazy loading avec l'attribut d'iframe loading="lazy". Cela fonctionne très bien sur les navigateurs modernes, avec une couverture mondiale de 95 %. Mais pour une performance maximale, c'est insuffisant. Chrome commence à charger les iframes en lazy loading environ 1 250 px sous le viewport sur une connexion rapide, et 2 500 px sur une connexion lente. Si votre carte se trouve à proximité de la zone visible, elle se chargera dès le rendu initial de la page et entrera en compétition avec vos ressources critiques. Pour obtenir un impact réellement nul, il vous faut une façade : ne chargez absolument rien tant que l'utilisateur n'interagit pas avec la carte.

Étape 1 : cartes statiques

L'option la plus simple consiste à utiliser une carte statique. Au lieu d'une carte interactive, vous affichez une simple image de la carte. L'avantage : une image charge beaucoup plus vite. L'inconvénient : impossible d'interagir avec elle. Vous ne pouvez ni zoomer, ni faire défiler, ni naviguer.

Nous allons commencer par une carte statique. Nous la convertirons ensuite en carte interactive, sans impacter la vitesse de la page.

Il existe plusieurs façons d'intégrer une carte statique sur une page. Des outils comme Static Map Maker peuvent vous aider, mais ils nécessitent une clé d'API. Je vais vous montrer comment récupérer l'image d'une carte statique manuellement.

1. Intégrez la carte sur votre page

Placez la carte sur votre page. Rendez-vous sur Google Maps, cherchez un lieu et cliquez sur « Partager » > « Intégrer une carte ». Copiez le code et collez-le sur votre page. Faites ensuite un clic droit sur la page et sélectionnez « Inspecter ». L'inspecteur d'éléments de la console de développement s'affiche. Repérez 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 notre objectif est la vitesse, nous allons utiliser le format WebP, nettement 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 : transformer l'image statique en carte interactive

La carte statique garantit qu'aucune vitesse n'est perdue au chargement de la page. Cela signifie qu'au départ, nous n'avons pas encore de carte Google interactive. Plus tard, nous remplacerons la carte statique en arrière-plan par une carte interactive, une fois que la page aura terminé son rendu et son affichage. Deux méthodes sont possibles : remplacer la carte statique dès le survol de la souris, ou attendre que le navigateur soit inactif.

3. Placez l'image statique dans un placeholder

Pour que la carte s'affiche parfaitement sur mobile comme sur desktop, nous utiliserons cette astuce CSS qui préserve les proportions de la carte, quelle que soit la taille d'écran du visiteur. Cela réserve l'espace nécessaire et évite tout layout shift (CLS) lors du chargement de la carte interactive. Nous ajoutons ensuite un attribut data-src au conteneur, qui servira d'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 un peu de style dans votre feuille de style. Comme vous le voyez, nous utilisons l'image statique comme image d'arrière-plan et appliquons un padding supérieur de 76,25 % pour obtenir le bon ratio d'aspect. La carte finale sera positionnée en absolute sur toute la largeur et toute 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 à la première interaction

C'est ici que tout se joue. Sans ce bout de JavaScript, la carte reste une simple image statique. Ce script attache (puis retire) un event listener sur le conteneur placeholder et attend l'événement « mouseover » (le survol de la carte à la 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 son image d'arrière-plan. Utilisez ce code pour précharger l'image statique : <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, précharger l'image de substitution fait gagner près d'une seconde sur le LCP.

Étape 2b : remplacer l'image statique automatiquement

S'il est très probable que le visiteur interagisse avec la carte, mieux vaut ne pas attendre l'événement mouseover. Dès que le navigateur est inactif, commencez à injecter la carte dans la page. Le fonctionnement est quasiment le même que précédemment. Vous pouvez même combiner les deux.

4b. Chargez la carte interactive automatiquement

Nous utilisons ici l'événement « load ». Cet événement est un signal émis par le navigateur dès que la page a fini de charger. Il ne reste plus qu'à convertir la carte statique en carte interactive ! Pour d'autres techniques similaires, 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

En appliquant l'une de ces techniques, vous constaterez que la page charge avec un score Lighthouse de 100 % et un score PageSpeed Insights de 100 %, tout en conservant l'intégralité des fonctionnalités de Google Maps !

D'après le Web Almanac 2025, 91 % des pages contenant des iframes sont encore totalement dépourvues d'attribut loading. La grande majorité des intégrations Google Maps se chargent donc sans la moindre optimisation. L'approche par façade vous donne une nette longueur d'avance.

Pour vérifier que vos modifications améliorent réellement l'expérience utilisateur, mettez en place un outil de Real User Monitoring. Les scores en lab data sont utiles pour le débogage, mais ce sont les field data issues de véritables visiteurs que Google prend en compte pour le classement.

Bon courage pour accélérer Google Maps. Vous avez besoin d'aide ? Contactez-moi !