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:
Busca el nombre de dominio y resuélvelo en una dirección IP.
Establece una conexión con el servidor.
Encripta la conexión por seguridad.
En cada uno de estos pasos, el navegador envía datos a un servidor, y este último envía una respuesta. Ese viaje, desde el origen hasta el destino y de ida y vuelta, se denomina ida y vuelta.
Según las condiciones de la red, un solo recorrido de ida y vuelta puede tardar bastante tiempo. El proceso de configuración de la conexión puede incluir hasta tres viajes de ida y vuelta y más en casos no optimizados.
Si te encargas de todo esto de antemano, 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 por prever qué conexiones necesitará una página, pero no pueden predecirlas de manera confiable. La buena noticia es que puedes darles una pista (recurso 😉).
Si agregas rel=preconnect a <link>, se informa al navegador que tu página pretende establecer una conexión con otro dominio y que deseas que el proceso se inicie 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. Estas proporcionan la información acerca de lo que esperas que suceda, pero, en última instancia, depende del navegador decidir si se ejecutarán o no. Configurar y mantener una conexión abierta lleva demasiado trabajo, por lo que el navegador podría optar por ignorar las sugerencias de recursos o ejecutarlas parcialmente según la situación.
Informar al navegador 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 estableciendo conexiones tempranas con orígenes externos importantes. Estas cantidades pueden parecer pequeñas, pero marcan una diferencia en la forma en que los usuarios perciben el rendimiento de las páginas web.
Casos de uso de rel=preconnect
Saber de dónde, pero no qué se recuperan
Debido a las dependencias con control de versiones, a veces te encuentras en una situación en la que sabes que solicitarás un recurso de una CDN en particular, pero no la ruta exacta para ese recurso.
El otro caso común es cargar imágenes desde una CDN de imágenes, en la que la ruta de acceso exacta de una imagen depende de consultas de medios o de verificaciones de funciones del entorno de ejecución en el navegador del usuario.
En estas situaciones, si el recurso que recuperarás es importante, querrás ahorrar tanto tiempo como sea posible mediante la preconexión al servidor. El navegador no descargará el archivo hasta que tu página lo solicite, pero al menos puede gestionar los aspectos de conexión con anticipación, lo que evita que el usuario espere varias idas y vueltas.
Transmisión de contenido multimedia
Otro ejemplo en el que quizás desees ahorrar algo de tiempo en la fase de conexión, pero no necesariamente comenzar a recuperar contenido de inmediato, es cuando se transmite contenido multimedia desde un origen diferente.
Según el modo en que tu página maneje el contenido transmitido, tal vez sea conveniente que esperes hasta que las secuencias de comandos se hayan cargado y estén listas para procesar la transmisión. La preconexión te ayuda a reducir el tiempo de espera a un solo viaje de ida y vuelta una vez que tengas todo listo para comenzar a recuperar datos.
Cómo implementar rel=preconnect
Una forma de iniciar un preconnect es agregar una etiqueta <link> al <head> del documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La preconexión solo es eficaz para dominios que no sean el de origen, por lo que no debes usarla para tu sitio.
También puedes iniciar una preconexión 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 realizará la búsqueda de DNS.
Resuelve el nombre de dominio de forma anticipada con rel=dns-prefetch
Recuerdas los sitios por sus nombres, pero los servidores los recuerdan por sus direcciones IP. Es por eso que 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 (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 de terceros, preconectar todos ellos es contraproductivo. La sugerencia preconnect se usa mejor solo para las conexiones más críticas. Para el resto, usa <link rel=dns-prefetch> a fin de 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. Para ello, agrega una etiqueta <link> al <head> del documento.
<link rel="dns-prefetch" href="http://example.com">
La compatibilidad de los navegadores con dns-prefetch es ligeramente diferente de la compatibilidad de preconnect, por lo que dns-prefetch puede funcionar como resguardo en navegadores que no admiten preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Para implementar la técnica de resguardo de forma segura, usa etiquetas de vínculo independientes.
<link rel="preconnect dns-prefetch" href="http://example.com">La implementación del resguardo de
dns-prefetch en la misma etiqueta <link> provoca un error en Safari en el que se cancela preconnect.
Efecto en el Largest Contentful Paint (LCP)
El uso de dns-prefetch y preconnect permite que los sitios reduzcan el tiempo que tardan en conectarse con otro origen. El objetivo final es minimizar el tiempo de carga de un recurso desde otro origen tanto como sea posible.
En lo que respecta al Procesamiento de imagen con contenido más grande (LCP), es mejor que los recursos sean detectables de inmediato, ya que los candidatos de LCP son partes fundamentales de la experiencia del usuario. Un valor de fetchpriority de "high" en los recursos de LCP puede mejorar aún más este resultado, ya que indica la importancia de este recurso para el navegador para que pueda recuperarlo antes.
Cuando no es posible hacer que los elementos LCP sean detectables 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 cuando se cargue la página), puedes usar preconnect en recursos de origen cruzado para reducir el impacto del descubrimiento tardío del recurso tanto como sea posible.
Además, preconnect es menos costoso que preload en términos de uso de ancho de banda, pero igualmente no sin sus riesgos. Al igual que con las sugerencias de preload excesivas, las sugerencias de preconnect excesivas aún consumen ancho de banda en lo que respecta a los certificados TLS. Ten cuidado de no preconectarte a demasiados orígenes, ya que esto puede generar contención en el ancho de banda.
Conclusión
Estas dos sugerencias de recursos son útiles para mejorar la velocidad de las páginas cuando sabes que pronto descargarás algo de un dominio de terceros, pero no sabes la URL exacta del recurso. Algunos ejemplos son 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 mide siempre el impacto en el mundo real.