Guía para lograr un 100% en PageSpeed con Google Maps

Impacto de Google Maps en los Core Web Vitals

Hay muchas razones para incrustar Google Maps en una página. Por ejemplo, es perfecto para mostrar la ubicación de tu empresa. Pero hay un problema: Google Maps no es tan rápido como cabría esperar de un servicio de Google. De hecho, es un auténtico lastre para la velocidad de la página.

Me cuesta un 14% de mi puntuación perfecta del 100% en velocidad. Esto es lo que le hace a mis estadísticas de Google Lighthouse:

1. First Contentful Paint + 0,8 s. El primer paint se retrasa casi un segundo porque Google Maps interfiere en la carga de la página.
2. Speed Index + 3,1 s. El Speed Index se triplicó debido al renderizado del mapa y al bloqueo del main thread.
3. Largest Contentful Paint + 0,8 s. El Largest Contentful Paint se retrasa 0,8 segundos, igual que el First Contentful Paint.
4. Time to Interactive + 6,5 s. Como Google Maps depende en gran medida de JavaScript, pasan más de 6 segundos hasta que se puede interactuar con la página. Desde entonces, Lighthouse ha sustituido el TTI por el Total Blocking Time, pero la causa de raíz es la misma: el JavaScript de Google Maps bloquea el main thread y perjudica tu Interaction to Next Paint (INP).
5. Total Blocking Time + 320 ms. Google Maps bloquea el main thread durante 320 ms. Eso es exactamente lo que no queremos.
6. Aviso 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.

Quizá pienses en cargar el mapa con lazy loading mediante el atributo loading="lazy" del iframe. De hecho, funciona en navegadores modernos con una cobertura global del 95%. Pero para lograr el máximo rendimiento, no basta. Chrome empieza a cargar iframes con lazy loading a unos 1.250 px por debajo del viewport en conexiones rápidas, y a 2.500 px en conexiones lentas. Si el mapa está cerca del área visible, se cargará igualmente durante el renderizado inicial y competirá con los recursos críticos. Para lograr un verdadero impacto cero, necesitas un facade: no cargues absolutamente nada hasta que el usuario interactúe con el mapa.

Paso 1: mapas estáticos

La opción más sencilla es usar un mapa estático. Esto significa que, en lugar de un mapa interactivo, solo usas una imagen del mapa. La ventaja es que una imagen carga mucho más rápido. La desventaja es que no puedes interactuar con ella: no puedes hacer zoom, scroll ni navegar.

Empezaremos con un mapa estático. Más adelante podremos convertirlo en un mapa interactivo que no interfiera en la velocidad de la página.

Hay varias formas de colocar un mapa estático en la página. Existen herramientas que te ayudan a hacerlo, como Static Map Maker, pero necesitas una API key. Te mostraré cómo descargar a mano la imagen de un 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 un 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 en la consola de desarrollo del navegador. Localiza el código del iframe, haz clic derecho sobre él y selecciona 'Capture node screenshot'.

2. Convierte la imagen estática a formato WebP

La imagen del mapa que acabas de descargar está en formato PNG. Como buscamos la máxima velocidad, usaremos el formato WebP, que es mucho más rápido. Puedes convertir la 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 en un mapa interactivo

El mapa estático garantiza que no se pierda velocidad durante la carga de la página. En el momento de la carga, esto significa que todavía no tenemos un mapa de Google interactivo. Más adelante sustituiremos en segundo plano el mapa estático por un mapa interactivo. Lo haremos una vez que la página se haya renderizado y pintado. Esto se puede hacer de 2 formas. La primera consiste en sustituir el mapa estático en cuanto pasas el ratón por encima. La segunda es sustituir el mapa estático una vez que el navegador esté idle.

3. Coloca la imagen estática del mapa en un placeholder

Como queremos que el mapa se vea bien tanto en móvil como en escritorio, usaremos este truco de CSS para que las proporciones del mapa sean siempre correctas, sin importar el tamaño de pantalla del visitante. Esto reserva espacio para el mapa y evita cualquier layout shift (CLS) cuando cargue el mapa interactivo. Ahora añadimos un atributo data-src al contenedor, que luego usaremos como 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 a tu hoja de estilos. Como ves, usamos la imagen estática del mapa como imagen de fondo y aplicamos un padding superior del 76,25% para mantener la relación de aspecto correcta. El mapa definitivo tendrá posicionamiento absoluto 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 en la primera interacción

Aquí está la clave. Sin este pequeño fragmento de JavaScript, el mapa es solo una imagen estática. Este JavaScript añade (y elimina) un event listener en el contenedor del placeholder y espera al 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 queda visible de inmediato en el viewport, suele ser una buena idea precargar la imagen de fondo del mapa. 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 la página. En este ejemplo, precargar la imagen del placeholder acelera el LCP casi un segundo.

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

Si es muy probable que el visitante interactúe con el mapa, conviene no esperar al evento mouseover. En cuanto el navegador esté idle, empieza a inyectar el mapa en la página. El proceso es prácticamente el mismo que el anterior. Incluso puedes combinar ambos.

4b. Carga el mapa interactivo automáticamente

Aquí usaremos el evento 'load'. El evento load es una señal que emite el navegador en cuanto la página termina de cargar. ¡Ahí es cuando convertimos el mapa estático en interactivo! Para conocer 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 alguna de estas técnicas, verás que la página carga con una puntuación del 100% en Lighthouse y del 100% en PageSpeed Insights, ¡y mantiene toda la funcionalidad de Google Maps!

Según el Web Almanac de 2025, el 91% de las páginas con iframes todavía carece por completo del atributo loading. Esto significa que la gran mayoría de los embeds de Google Maps cargan sin ningún tipo de optimización. El enfoque con facade te sitúa muy por delante.

Para comprobar que tus cambios mejoran realmente la experiencia del usuario, configura Real User Monitoring. Las puntuaciones de lab data son útiles para depurar, pero lo que Google utiliza para el ranking son los field data de visitantes reales.

¡Mucha suerte acelerando Google Maps! ¿Necesitas ayuda? ¡Ponte en contacto conmigo!