Guía para Google Maps con 100% de PageSpeed

Impacto de Google Maps en la puntuación de Lighthouse

Hay muchas razones para integrar un mapa de '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 es un gran consumo de PageSpeed.
Cuesta un 14% de mi puntuación perfecta del 100% en PageSpeed. Hace esto con mis estadísticas de Lighthouse  de Google

1. First Contentful Paint + 0.8 s . El primer pintado se ejecuta casi un segundo más tarde porque Google Maps interfiere con la carga de la página.
2. Speed Index + 3.1 s Speed ​​index se triplicó debido al renderizado del mapa y el bloqueo del hilo principal
3. Largest Contentful Paint + 0.8 s. El Largest Contentful Paint se retrasa 0.8 segundos, al igual que el First Contentful Paint.
4. Time to Interactive + 6.5s . Debido a que Google Maps depende en gran medida de JavaScript que debe ejecutarse, tarda más de 6 segundos en interactuar con la página.
5. Total Blocking Time + 320ms . Google Maps bloquea el hilo principal con 320ms. Eso es exactamente lo que no queremos.
6. Advertencia de eliminar JavaScript no utilizado . Para colmo, obtienes otra advertencia de que no estás utilizando grandes partes del JavaScript de Google Maps. Intenta explicarle eso a un cliente.

Tu primer pensamiento podría ser cargar los mapas en modo 'lazy' con el atributo iframe   loading="lazy" . Desafortunadamente, eso a menudo tiene poco sentido. Los iFrames diferidos vía loading = "lazy" todavía son descargados y ejecutados temprano por los navegadores. Así que necesitamos idear algo más inteligente.

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 hacer zoom, desplazarte o navegar. 

Comenzaremos con un mapa estático. Más tarde podemos convertir este mapa estático en un mapa interactivo que no interfiera con el PageSpeed.

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

1 - coloca los mapas en tu página.

Coloca el mapa en tu página. Ve a Google Maps, encuentra 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'. Ahora verás el inspector de elementos de la 'dev console' de tu navegador. Ahora encuentra el código del iframe, haz clic derecho en él y selecciona 'capture node screenshot'.

2. Convierte la carpeta estática al formato WebP.

La imagen del mapa que acabas de descargar está en formato png. Como buscamos velocidad de página, usaremos el formato WebP, mucho más rápido. Puedes convertir tu imagen en línea en ezgif  o puedes convertirla tú mismo con la herramienta cwebp:  cwebp -q 60 image.png -o image.webp.

Paso 2 - Convierte la imagen del mapa estático en un mapa interactivo

El mapa estático asegura que no se pierda PageSpeed durante la carga de la página. Al cargar la página, esto significa que aún no tenemos un mapa de Google interactivo. En algún momento después de la carga de la página, reemplazaremos los mapas estáticos en segundo plano con un mapa interactivo. Haremos esto después de que la página haya sido renderizada y pintada. Esto se puede hacer de 2 maneras. La primera forma es reemplazar el mapa estático tan pronto como pases el ratón sobre él. La segunda es reemplazar los mapas estáticos una vez que el navegador esté inactivo.

3. Coloca la imagen de los mapas estáticos en un 'marcador de posición' especial

Dado que queremos que nuestro mapa se vea bien tanto en móviles como en escritorio, usaremos este  truco CSS  donde las proporciones del mapa son siempre correctas independientemente del tamaño de pantalla del visitante. Ahora añadimos un atributo data-src al contenedor que usaremos más tarde como la url fuente para el mapa de Google.

Primero coloca el contenedor de mapas 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 del mapa estático como imagen de fondo y aplicamos un relleno del 76.25% en la parte inferior para un formato de mapa 16:9. 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 eventlistener 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.

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

5. Precargar la imagen de fondo (opcional)

Si el mapa de Google es inmediatamente visible en el viewport, a menudo es una idea inteligente 'precargar' la imagen del mapa de fondo. Usa este código para precargar la imagen de los mapas estáticos  <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 de marcador de posición acelera el LCP en casi un segundo.

Paso 2b - Reemplazar la imagen de los mapas estáticos automáticamente

Cuando hay una alta probabilidad de que el visitante interactúe con el mapa, podría 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 que el anterior. Incluso puedes combinar ambos.

4b - carga el mapa interactivo automáticamente

Usaremos el 'load event' aquí. El evento load es una señal que tu navegador envía tan pronto como la página ha terminado de cargar. ¡Entonces convertimos los mapas estáticos en el mapa interactivo!

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

El resultado

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

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