Guía de Google Maps para un PageSpeed del 100%

Impacto de Google Maps en tus Core Web Vitals

Hay muchas razones para insertar Google Maps en tu página. Es genial para mostrar la ubicación de tu empresa, por ejemplo. Pero hay un inconveniente. Google Maps no es tan rápido como esperarías de un servicio de Google. De hecho, Google Maps en tu página agota bastante el page speed.

Cuesta el 14% de mi puntuación perfecta del 100% en page speed. Esto es lo que hace con mis estadísticas de Google Lighthouse:

1. First Contentful Paint + 0,8 seg. El primer paint se ejecuta casi un segundo más tarde porque Google Maps interfiere con la carga de la página.
2. Speed Index + 3,1 seg. El Speed Index se triplicó debido al renderizado del mapa y al bloqueo del hilo principal.
3. Largest Contentful Paint + 0,8 seg. El largest contentful paint se retrasa 0,8 segundos, al igual que el first contentful paint.
4. Time to Interactive + 6,5 seg. Dado que Google Maps depende en gran medida de JavaScript, toma más de 6 segundos poder interactuar con la página. Desde entonces, Lighthouse ha reemplazado TTI con Total Blocking Time, pero la causa raíz es la misma: el JavaScript de Google Maps bloquea tu hilo principal, perjudicando tu Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps bloquea el hilo principal durante 320 ms. Eso es exactamente lo que no queremos.
6. Advertencia de Remove unused JavaScript. Para colmo, recibes otra advertencia de que no estás usando gran parte del JavaScript de Google Maps. Intenta explicarle eso a un cliente.

Tu primer pensamiento podría ser cargar los mapas de forma 'lazy' con el atributo del iframe loading="lazy". Eso en realidad funciona en navegadores modernos con un 95% de cobertura global. Pero para lograr el máximo rendimiento, no es suficiente. Chrome comienza a cargar iframes lazy aproximadamente 1.250 px por debajo del viewport en conexiones rápidas y a 2.500 px en conexiones lentas. Si tu mapa está cerca del área visible, aun así se cargará durante el renderizado inicial de la página y competirá con tus recursos críticos. Para lograr un impacto verdaderamente nulo, necesitas un facade: no cargar absolutamente nada hasta que el usuario realmente interactúe con el mapa.

Paso 1: Mapas estáticos

La opción más fácil es usar un mapa estático. Esto significa que en lugar de un mapa interactivo, usas solo una imagen del mapa. La ventaja de esto es que una imagen carga mucho más rápido. La desventaja es que no puedes interactuar con una imagen. Así que no puedes acercar el zoom, desplazarte ni navegar.

Empezaremos con un mapa estático. Más adelante podremos convertir este mapa estático en un mapa interactivo que no interfiera con el page speed.

Hay varias formas de colocar un mapa estático en tu página. Existen herramientas que te ayudarán a hacerlo como Static Map Maker, pero necesitas una clave API. Te mostraré cómo descargar a mano una imagen de mapa estático.

1. Coloca el mapa en tu página

Coloca el mapa en tu página. Ve a Google Maps, busca una ubicación y haz clic en compartir > insertar este mapa. Copia el código y pégalo en tu página. Ahora haz clic derecho en la página y selecciona 'inspeccionar elemento'. Verás el inspector de elementos de la consola de desarrollo de tu navegador. Ahora encuentra el código del iframe, haz clic derecho sobre él y selecciona 'capturar captura de pantalla del nodo' (capture node screenshot).

2. Convierte la imagen estática al formato WebP

La imagen del mapa que acabas de descargar está en formato PNG. Como buscamos mejorar el page speed, usaremos el formato WebP, que es mucho más rápido. Puedes convertir tu imagen online en ezgif o puedes convertirla tú mismo con la herramienta cwebp: cwebp -q 60 image.png -o image.webp.

Paso 2: Convierte la imagen estática del mapa en un mapa interactivo

El mapa estático garantiza que no se pierda page speed durante la carga de la página. Durante la carga, esto significa que todavía no tenemos un mapa interactivo de Google. En algún momento después de cargar la página, reemplazaremos el mapa estático en segundo plano con un mapa interactivo. Haremos esto después de que la página se haya renderizado y pintado. Esto se puede hacer de 2 maneras. La primera manera es reemplazar el mapa estático tan pronto como pases el ratón sobre él. La segunda es reemplazar el mapa estático una vez que el navegador esté inactivo.

3. Coloca la imagen estática del mapa en un marcador de posición

Dado que queremos que nuestro mapa se vea bien tanto en móviles como en escritorio, usaremos este truco de CSS donde las proporciones del mapa siempre son correctas independientemente del tamaño de pantalla del visitante. Esto reserva espacio para el mapa y evita el Cumulative Layout Shift (CLS) cuando el mapa interactivo se carga. Ahora añadimos un atributo data-src al contenedor que usaremos más adelante como la URL de origen para el mapa de Google.

Primero coloca el contenedor del mapa en la página:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Añade algo de estilo en tu hoja de estilos. Como puedes ver, usamos la imagen estática del mapa como imagen de fondo y aplicamos un padding del 76,25% en la parte superior para lograr la relación de aspecto correcta. El mapa final tendrá una posición absoluta sobre todo el ancho y alto del mapa estático.

#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. Carga el mapa interactivo durante la primera interacción

Aquí es donde ocurre la magia. Sin este pequeño fragmento de JavaScript, el mapa es solo una imagen estática. Este JavaScript añade (y elimina) un event listener al contenedor del marcador de posición y espera el evento 'mouseover' (cuando pasas el ratón sobre el mapa estático) para inyectar el mapa interactivo en el contenedor.

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. Precarga la imagen de fondo (opcional)

Si el mapa de Google es visible inmediatamente en el viewport, suele ser una buena idea precargar la imagen del mapa de fondo. Usa este código para precargar la imagen estática del mapa: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> y colócalo lo antes posible en el <head> de tu página. En este caso de ejemplo, precargar la imagen del marcador de posición acelera el LCP en casi un segundo.

Paso 2b: Reemplaza la imagen estática del mapa automáticamente

Cuando haya una alta probabilidad de que el visitante interactúe con el mapa, puede ser una buena idea no esperar al evento mouseover. Tan pronto como el navegador esté inactivo, comienza a inyectar el mapa en la página. El proceso es más o menos el mismo de antes. Incluso puedes combinar ambos.

4b. Carga el mapa interactivo automáticamente

Aquí usaremos el evento de carga (load event). El evento de carga es una señal que tu navegador envía tan pronto como la página ha terminado de cargar. ¡Entonces convertimos el mapa estático en el mapa interactivo! Para ver más técnicas como esta, consulta 16 métodos para diferir 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);
});      

El resultado

Si aplicas una de estas técnicas, notarás que la página carga con una puntuación del 100% en Lighthouse y del 100% en PageSpeed Insights mientras conserva toda la funcionalidad de Google Maps.

Según el Web Almanac 2025, el 91% de las páginas con iframes aún carecen por completo de un atributo loading. Eso significa que la gran mayoría de las inserciones de Google Maps cargan sin ninguna optimización en absoluto. El enfoque facade te sitúa muy por delante.

Para verificar que tus cambios realmente mejoran la user experience real, configura un Real User Monitoring. Las puntuaciones de laboratorio son útiles para depurar, pero los datos de campo de los visitantes reales es lo que Google utiliza para el ranking.

Buena suerte haciendo que Google Maps sea más rápido. ¿Necesitas ayuda? ¡Entonces contáctame!