Obtén información sobre las sugerencias de recursos rel=preconnect y rel=dns-prefetch, y cómo usarlas.
Antes de que el navegador pueda solicitar un recurso de un servidor, debe establecer una conexión. Para establecer una conexión segura, se deben seguir tres pasos:
Buscar el nombre de dominio y resolverlo en una dirección IP
Configurar una conexión al servidor
Encriptar la conexión por seguridad
En cada uno de estos pasos, el navegador envía un fragmento de datos a un servidor, y el servidor envía una respuesta. Ese recorrido, desde el origen hasta el destino y de regreso, se denomina viaje de ida y vuelta.
Según las condiciones de la red, un solo viaje de ida y vuelta puede tardar una cantidad de tiempo considerable. El proceso de configuración de la conexión puede implicar hasta tres viajes de ida y vuelta, y más en casos no optimizados.
Si te ocupas de todo eso con anticipación, las aplicaciones se sentirán mucho más rápidas. En esta publicación, se explica cómo lograrlo con dos sugerencias de recursos: <link rel=preconnect> y <link rel=dns-prefetch>.
Establece conexiones tempranas con rel=preconnect
Los navegadores modernos hacen todo lo posible para anticipar qué conexiones necesitará una página, pero no pueden predecirlas todas de manera confiable. La buena noticia es que puedes darles una sugerencia (de recursos 😉).
Si agregas rel=preconnect a un <link>, se le informa al navegador que tu página tiene la intención de establecer una conexión con otro dominio y que te gustaría que el proceso comience lo antes posible. Los recursos se cargarán más rápido porque el proceso de configuración ya se completó cuando el navegador los solicita.
Las sugerencias de recursos reciben su nombre porque no son instrucciones obligatorias. Proporcionan la información sobre lo que te gustaría que sucediera, pero, en última instancia, depende del navegador decidir si las ejecuta. Configurar y mantener una conexión abierta es mucho trabajo, por lo que el navegador puede optar por ignorar las sugerencias de recursos o ejecutarlas parcialmente según la situación.
Informar al navegador sobre tu intención es tan simple como agregar una etiqueta <link> a tu página:
<link rel="preconnect" href="https://example.com">
Puedes acelerar el tiempo de carga entre 100 y 500 ms si estableces conexiones tempranas con orígenes externos importantes. Estos números pueden parecer pequeños, pero marcan una diferencia en la forma en que los usuarios perciben el rendimiento de la página web.
Casos de uso de rel=preconnect
Saber de dónde, pero no qué estás recuperando
Debido a las dependencias versionadas, a veces terminas en una situación en la que sabes que solicitarás un recurso de una CDN en particular, pero no la ruta exacta para él.
El otro caso común es cargar imágenes desde una CDN de imágenes, en la que la ruta exacta de una imagen depende de las consultas de medios o de las verificaciones de funciones del entorno de ejecución en el navegador del usuario.
En estas situaciones, si el recurso que recuperarás es importante, te recomendamos que te conectes previamente al servidor para ahorrar la mayor cantidad de tiempo posible. El navegador no descargará el archivo hasta que tu página lo solicite, pero, al menos, puede controlar los aspectos de la conexión con anticipación, lo que evita que el usuario espere varios viajes de ida y vuelta.
Medios de transmisión
Otro ejemplo en el que es posible que quieras ahorrar tiempo en la fase de conexión, pero no necesariamente comenzar a recuperar contenido de inmediato, es cuando transmites contenido multimedia desde un origen diferente.
Según cómo maneje tu página el contenido transmitido, es posible que quieras esperar hasta que se carguen tus secuencias de comandos y estén listas para procesar la transmisión. La conexión previa te ayuda a reducir el tiempo de espera a un solo viaje de ida y vuelta una vez que estés listo para comenzar a recuperar.
Cómo implementar rel=preconnect
Una forma de iniciar una preconnect es agregar una etiqueta <link> al <head> del documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La conexión previa solo es eficaz para dominios que no sean el dominio de origen, por lo que no debes usarla para tu sitio.
También puedes iniciar una conexión previa a través del encabezado HTTP Link:
Link: <https://example.com/>; rel=preconnect
Algunos tipos de recursos, como las fuentes, se cargan en modo anónimo. Para ellos, debes establecer el atributo crossorigin con la sugerencia preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Si omites el atributo crossorigin, el navegador solo realiza la búsqueda de DNS.
Resuelve el nombre de dominio con anticipación con rel=dns-prefetch
Recuerdas los sitios por sus nombres, pero los servidores los recuerdan por direcciones IP. Por eso existe el sistema de nombres de dominio (DNS). El navegador usa DNS para convertir el nombre del sitio en una dirección IP. Este proceso, la resolución de nombres de dominio, es el primer paso para establecer una conexión.
Si una página necesita establecer conexiones con muchos dominios externos, la conexión previa de todos ellos es contraproducente. La sugerencia preconnect se usa mejor solo para las conexiones más críticas. Para el resto, usa <link rel=dns-prefetch> para ahorrar tiempo en el primer paso, la búsqueda de DNS, que suele tardar entre 20 y 120 ms.
La resolución de DNS se inicia de manera similar a preconnect: agregando una etiqueta <link> al <head> del documento.
<link rel="dns-prefetch" href="http://example.com">
La compatibilidad del navegador con dns-prefetch es ligeramente diferente de la compatibilidad con preconnect, por lo que dns-prefetch puede servir como alternativa para los navegadores que no admiten preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch en la misma etiqueta <link> causa un error en Safari en el que se cancela preconnect.
Efecto en Largest Contentful Paint (LCP)
El uso de dns-prefetch y preconnect permite que los sitios reduzcan la cantidad de tiempo que se tarda en conectarse a otro origen. El objetivo final es que el tiempo para cargar un recurso desde otro origen se minimice lo más posible.
En lo que respecta a Largest Contentful Paint (LCP), es mejor que los recursos se puedan detectar de inmediato, ya que los candidatos a LCP son partes fundamentales de la experiencia del usuario. Un fetchpriority valor de "high" en los recursos de LCP puede mejorar aún más esto, ya que indica la importancia de este activo para el navegador, de modo que pueda recuperarlo con anticipación.
Cuando no es posible hacer que los recursos de LCP se puedan detectar de inmediato, un vínculo preload (también con el valor fetchpriority de "high") permite que el navegador cargue el recurso lo antes posible.
Si ninguna de estas opciones está disponible (porque el recurso exacto no se conocerá hasta más adelante en la carga de la página), puedes usar preconnect en recursos de origen cruzado para reducir el impacto del descubrimiento tardío del recurso lo más posible.
Además, preconnect es menos costoso que preload en términos de uso de ancho de banda, pero no está exento de riesgos. Al igual que con las sugerencias preload excesivas, las sugerencias preconnect excesivas aún consumen ancho de banda en lo que respecta a los certificados TLS. Ten cuidado de no conectarte previamente a demasiados orígenes, ya que esto puede causar una contención de ancho de banda.
Conclusión
Estas dos sugerencias de recursos son útiles para mejorar la velocidad de la página cuando sabes que descargarás algo de un dominio externo pronto, pero no conoces la URL exacta del recurso. Entre los ejemplos, se incluyen las CDN que distribuyen bibliotecas, imágenes o fuentes de JavaScript. Ten en cuenta las restricciones, usa preconnect solo para los recursos más importantes, confía en dns-prefetch para el resto y siempre mide el impacto en el mundo real.