Guida a Google Maps con page speed al 100%

Impatto di Google Maps sui Core Web Vitals

Ci sono ottimi motivi per inserire Google Maps in una pagina, ad esempio mostrare la sede dell'azienda. Ma c'è un problema: Google Maps non è veloce quanto ti aspetteresti da un servizio Google. Anzi, inserirlo nella pagina è una vera zavorra per la page speed.

Fa perdere il 14% del punteggio perfetto di 100% sulla page speed. Ecco cosa succede alle metriche di Google Lighthouse:

1. First Contentful Paint + 0,8 sec. Il first paint ritarda di quasi un secondo perché Google Maps interferisce con il caricamento della pagina.
2. Speed Index + 3,1 sec. Lo Speed Index triplica a causa del rendering della mappa e del blocco del main thread.
3. Largest Contentful Paint + 0,8 sec. Il Largest Contentful Paint subisce un ritardo di 0,8 secondi, esattamente come il First Contentful Paint.
4. Time to Interactive + 6,5 sec. Dato che Google Maps fa un uso intensivo di JavaScript, servono oltre 6 secondi per poter interagire con la pagina. Lighthouse ha poi sostituito il TTI con il Total Blocking Time, ma la causa alla radice è la stessa: il JavaScript di Google Maps blocca il main thread e danneggia l'Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps blocca il main thread per 320 ms: l'esatto opposto di ciò che vogliamo.
6. Avviso «Remove unused JavaScript». Come se non bastasse, compare un altro avviso che segnala che gran parte del JavaScript di Google Maps non viene utilizzato. Prova a spiegarlo a un cliente.

La prima idea potrebbe essere caricare la mappa in modalità lazy con l'attributo iframe loading="lazy". Funziona nei browser moderni, con una copertura globale del 95%. Ma per ottenere le massime prestazioni non basta. Su connessioni veloci Chrome inizia a caricare gli iframe lazy a circa 1.250 px sotto la viewport, e a 2.500 px su connessioni lente. Se la mappa si trova vicino all'area visibile, verrà comunque caricata durante il rendering iniziale della pagina ed entrerà in competizione con le risorse critiche. Per un impatto davvero pari a zero serve una facade: non caricare assolutamente nulla finché l'utente non interagisce con la mappa.

Step 1: mappe statiche

L'opzione più semplice è usare una mappa statica: invece di una mappa interattiva, usi solo un'immagine della mappa. Il vantaggio è che un'immagine si carica molto più rapidamente. Lo svantaggio è che con un'immagine non puoi interagire: niente zoom, scroll o navigazione.

Iniziamo con una mappa statica. Più avanti la convertiremo in una mappa interattiva senza sacrificare la page speed.

Ci sono diversi modi per inserire una mappa statica nella pagina. Esistono strumenti come Static Map Maker, ma richiedono una chiave API. Ti mostro come scaricare a mano l'immagine di una mappa statica.

1. Inserisci la mappa nella pagina

Inserisci la mappa nella pagina. Vai su Google Maps, cerca una posizione e fai clic su Condividi > Incorpora una mappa. Copia il codice e incollalo nella pagina. Ora fai clic con il tasto destro sulla pagina e seleziona «Ispeziona elemento». Si aprirà l'inspector degli elementi nella dev console del browser. Ora individua il codice dell'iframe, fai clic con il tasto destro e seleziona «Cattura screenshot del nodo».

2. Converti l'immagine statica nel formato WebP

L'immagine della mappa appena scaricata è in formato PNG. Dato che l'obiettivo è la page speed, usiamo il formato WebP, molto più veloce. Puoi convertire l'immagine online su ezgif oppure convertirla tu stesso con lo strumento cwebp: cwebp -q 60 image.png -o image.webp.

Step 2: converti l'immagine statica in una mappa interattiva

La mappa statica garantisce di non perdere velocità durante il caricamento della pagina. Al momento del caricamento iniziale, questo significa non avere ancora una mappa Google interattiva. In un secondo momento sostituiremo la mappa statica in background con una mappa interattiva. Lo faremo dopo che la pagina avrà completato rendering e paint. Ci sono 2 modi per farlo: sostituire la mappa statica non appena si passa il mouse sopra l'immagine, oppure sostituirla quando il browser è in idle.

3. Inserisci l'immagine statica della mappa in un placeholder

Dato che la mappa deve vedersi bene sia su mobile che su desktop, usiamo questo trucco CSS che mantiene sempre le proporzioni corrette, a prescindere dalle dimensioni dello schermo del visitatore. Questo riserva lo spazio necessario per la mappa ed evita il layout shift (CLS) quando la mappa interattiva viene caricata. Aggiungiamo poi un attributo data-src al container: lo useremo più avanti come URL sorgente per la mappa di Google.

Per prima cosa posiziona il container della mappa nella pagina:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Aggiungi qualche regola nel foglio di stile. Come puoi vedere, usiamo l'immagine statica della mappa come immagine di sfondo e applichiamo un padding superiore del 76,25% per ottenere il corretto aspect ratio. La mappa finale avrà posizionamento assoluto su tutta la larghezza e l'altezza della mappa statica.

#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. Carica la mappa interattiva alla prima interazione

Questo è il passaggio fondamentale. Senza questo piccolo script JavaScript, la mappa resta solo un'immagine statica. Questo JavaScript aggiunge (e poi rimuove) un event listener al container placeholder e attende l'evento 'mouseover' (il passaggio del mouse sulla mappa statica) per iniettare la mappa interattiva nel container.

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. Esegui il preload dell'immagine di sfondo (opzionale)

Se la mappa di Google è subito visibile nella viewport, spesso è un'ottima idea fare il preload dell'immagine di sfondo della mappa. Usa questo codice per il preload dell'immagine statica della mappa: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> e posizionalo il prima possibile nell'<head> della pagina. In questo caso di esempio, il preload dell'immagine placeholder velocizza il LCP di quasi un secondo.

Step 2b: sostituisci l'immagine statica della mappa in automatico

Se è molto probabile che il visitatore interagisca con la mappa, conviene non aspettare l'evento mouseover. Non appena il browser è in idle, avvia l'iniezione della mappa nella pagina. La procedura è pressoché identica a quella descritta sopra. Puoi anche combinare entrambi i metodi.

4b. Carica la mappa interattiva automaticamente

Qui useremo l'evento 'load'. Il load event è un segnale inviato dal browser non appena la pagina ha completato il caricamento. A quel punto trasformiamo la mappa statica in mappa interattiva! Per altre tecniche simili, consulta 16 metodi per differire 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);
});      

Il risultato

Applicando una di queste tecniche noterai che la pagina carica con un punteggio di 100% su Lighthouse e 100% su PageSpeed Insights, mantenendo intatte tutte le funzionalità di Google Maps!

Secondo il Web Almanac 2025, il 91% delle pagine con iframe non ha ancora alcun attributo loading. Questo significa che la stragrande maggioranza degli embed di Google Maps carica senza alcuna ottimizzazione. L'approccio con facade ti porta nettamente avanti.

Per verificare che le modifiche migliorino davvero l'esperienza degli utenti reali, imposta il Real User Monitoring. I dati di lab data sono utili per il debug, ma Google usa i field data dei visitatori reali per il ranking.

Buon lavoro per velocizzare Google Maps. Ti serve una mano? Contattami!