¿No sabes qué significa algún término? Consulta el glosario
Qué es «Preconnect» y por qué deberías aplicarlo en tu web
Cuando hablamos de mejorar el rendimiento de tu web, generalmente se ven artículos acerca de minimizar y combinar archivos CSS y JS, activar compresión u optimizar tus imágenes.
Sin embargo, hay muchas pequeñas cosas que puedes hacer además de esas. Una de ellas es hacer preconexiones (en inglés, «preconnect«) en tu web.
¿Qué es la preconexión?
La preconexión le dice al navegador que establezca una conexión temprana con dominios externos, lo que incluye la búsqueda de DNS, el protocolo de enlace TCP y la negociación TLS opcional. Este es el tiempo que ahorrarás al cargar una página. Para ilustrar esto, hagamos una pequeña prueba.
La siguiente captura de pantalla muestra una web normal haciendo tres llamadas a m.stripe.com, fonts.googleapis.com y fonts.gstatic.com. Como puedes ver, la búsqueda de DNS, la conexión inicial y la negociación de SSL se realizan cuando es necesario cargar el recurso, lo cual se produce en una etapa tardía del proceso de carga.
Ahora, si hacemos un «preconnect» a esos recursos externos, obtenemos lo siguiente:
La diferencia es clara, la preconexión permite realizar la búsqueda de DNS, la conexión inicial y la negociación de SSL en segundo plano cuando la página se está cargando, por lo que más adelante en el proceso de carga esas 3 tareas ya estarán realizadas, y lo único que la página necesitará hacer es cargar el contenido real.
El resultado es un mejor tiempo de carga, o en otras palabras, mejorarás el rendimiento de su sitio.
¡No hagas demasiados «preconnect»!
No debes preconectar a todos tus dominios externos.
Puede ser contradictorio, teniendo en cuenta que acabamos de demostrar que la preconexión mejora la velocidad de carga. Sin embargo, debes saber que
- Los navegadores cierran cualquier conexión que no se utiliza en unos pocos segundos.
- Hay un límite del número de conexiones simultáneas en los navegadores.
Por lo tanto, como regla general, solo debes hacer «preconnect» a los 3 o 4 dominios externos más importantes. Preconectarse a todo puede ralentizar tu sitio web.
¿Cómo preconectar a otros dominios?
Siguiendo el ejemplo anterior, el objetivo es introducir las siguientes líneas entre las etiquetas <head> y </head> de tu sitio.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://m.stripe.com">Debes añadir una línea por cada llamada externa. En nuestro caso, implementamos la preconexión a 3 dominios externos.
Si prestas atención a la segunda línea, verás el atributo crossorigin. ¿Cuándo se añade? Cuando los recursos de la conexión se descargan mediante CORS. Si los recursos usan CORS, se necesita crossorigin. Si no se usará CORS, se debe omitir crossorigin. Si no estás seguro, puedes probar con y sin, y comprobar cuál funciona 😉
Para añadir estas líneas, tenemos dos métodos.
1 – Usa un plugin como Head & Footer Code. Instálalo, actívalo, ve a Ajustes y añade el código en la primera casilla.
2 – El método recomendado, pero para usuarios avanzados: edita el archivo functions.php de tu tema hijo y añade el siguiente código.
function shortpixel_preconnect() {
echo '<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://m.stripe.com">';
}
add_action('wp_head', 'shortpixel_preconnect', 0);En esta entrada pueden haber enlaces de afiliado a productos y servicios en los que a veces podrás obtener descuentos si compras algo, y yo, como autor de la entrada, una pequeña comisión. No te preocupes, nunca pagarás de más y nunca verás enlaces de afiliados de algo que yo mismo no utilice o recomiende.
