Si eres uno de esos a los que la velocidad de carga de tu web le obsesiona de manera psicótica (como yo), habrás notado que Google Analytics y Google Tag Manager tienen un cierto impacto en el tiempo de carga y tu trastorno obsesivo compulsivo te obliga a Optimizar Google Analytics todo lo posible.

Cómo optimizar la carga de Google Analytics o Google Tag Manager

Para optimizar la carga de Google Analytics y Google Tag Manager, lo que tenemos que hacer es preconectar con los dominios de los que vamos a descargar los recursos necesarios. Para eso, utilizaremos DNS-Prefetch y Preconnect en la cabecera de nuestro HTML (entre las etiquetas <head> y </head>).

Aquí te dejo el código listo para copiar y pegar:

<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link href="https://www.google-analytics.com" rel="preconnect" crossorigin>
<link href="https://www.googletagmanager.com" rel="preconnect" crossorigin>

Para que sirve la cabecera DNS-Prefetch

DNS-prefetch es un intento del navegador de obtener las DNS de un dominio antes de que se soliciten los recursos de ese dominio. Por ejemplo, sería un intento del navegador de obtener las DNS de google, al cargar una fuente desde google fonts.

Para que sirve la cabecera Preconnect

La cabecera preconnect sirve para comunicarle al navegador que vamos a conectar con un dominio (normalmente externo) y que queremos que vaya estableciendo una conexión para que después resulte más rápido hacer peticiones.

¿Que diferencia hay entre DNS-Prefetch y Preconnect?

La diferencia entre dns-prefetch y preconnect es que dns-prefetch sólo hará la búsqueda de DNS, mientras que preconnect hará la búsqueda de DNS, la negociación de TLS y el handshake (apretón de manos) de TCP. Esto significa que evita 2 RTT (viajes de ida y vuelta) adicionales una vez que el recurso está listo para ser descargado.

Una diferencia entre ellos, es que DNS-Prefetch tiene un poco menos de soporte entre los navegadores que Preconnect:

80.63% – https://caniuse.com/#feat=link-rel-dns-prefetch
89.49% – https://caniuse.com/#feat=link-rel-preconnect

Porque DNS-Prefetch y Preconnect ayudan a Optimizar Google Analytics y Google Tag Manager

Cuando medimos la velocidad de carga de una página, una de las partes que influyen, son los tiempos que se tardan en conectar a los recursos externos. Si cada vez que necesitamos un recurso tenemos que esperar a que se conecte antes de empezar a descargarlo, hacemos más larga la espera.

Por ejemplo, cuando llamas por teléfono, tienes que esperar mientras suenan los tonos, cuantos más tonos, más esperas. Con DNS-Prefetch y Preconnect, es como si ya hubiera hecho los tonos para cuando quieres hablar.