Obtén más información sobre las sugerencias de recursos rel=preconnect y rel=dns-prefetch y cómo utilizarlas.
Antes de que el navegador pueda solicitar un recurso a un servidor, debe establecer una conexión. Establecer una conexión segura implica tres pasos:
Busca el nombre de dominio y resuélvelo en una dirección IP.
Configura una conexión con el servidor.
Encripta la conexión por motivos de seguridad.
En cada uno de estos pasos, el navegador envía datos a un servidor y este último devuelve una respuesta. Ese viaje, de origen al 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 implicar hasta tres recorridos de ida y vuelta, y más en casos no optimizados.
Encargarse de todo eso de antemano hace que las aplicaciones parezcan 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 intentan anticipar al máximo qué conexiones necesitará una página, pero no pueden predecirlas todas de manera confiable. La buena noticia es que puedes darles una pista (el recurso 😉).
Si agregas rel=preconnect a una <link>, le informarás al navegador que tu página pretende establecer una conexión con otro dominio y que deseas 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ó para el momento en que el navegador los solicite.
Las sugerencias de recursos reciben su nombre porque no son instrucciones obligatorias. Proporcionan la información sobre lo que te gustaría que suceda, pero, en última instancia, depende del navegador decidir si las ejecutarás. Configurar y mantener una conexión abierta implica mucho trabajo, por lo que el navegador podría optar por ignorar las sugerencias de recursos o ejecutarlas parcialmente según la situación.
Para 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 cifras 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 desde dónde, pero no qué recuperas
Debido a las dependencias con control de versiones, a veces se encuentra en una situación en la que sabe que solicitará un recurso a una CDN en particular, pero no la ruta de acceso 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 consultas de medios o verificaciones de funciones del entorno de ejecución en el navegador del usuario.
En estas situaciones, si el recurso que recuperarás es importante, debes ahorrar tanto tiempo como sea posible con una conexión previa al servidor. El navegador no descargará el archivo hasta que tu página lo solicite, pero al menos puede manejar los aspectos de conexión con anticipación, lo que evita que el usuario tenga que esperar varias idas y vueltas.
Transmisión de contenido multimedia
Otro ejemplo en el que se recomienda ahorrar 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 cómo maneje tu página el contenido transmitido, te recomendamos que esperes hasta que se carguen las 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 recorrido de ida y vuelta cuando tengas todo listo para comenzar la recuperación.
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 conexión previa solo es efectiva para dominios que no sean el 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 esos casos, debes configurar 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. 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 de terceros, conectar todos ellos previamente es contraproducente. La sugerencia preconnect se usa mejor solo para las conexiones más críticas. Para todo lo demás, 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: se agrega 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 funcionar como resguardo 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> provoca un error en Safari en el que se cancela preconnect.
Efecto en el Procesamiento de imagen con contenido más grande (LCP)
Usar 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 minimizar el tiempo de carga de un recurso desde otro origen lo más posible.
En lo que respecta a Largest Contentful Paint (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 fetchpriority de "high" en los recursos de LCP puede mejorar aún más esto, ya que indica la importancia de este recurso para el navegador de modo que pueda recuperarlo con anticipación.
Cuando no es posible hacer que los recursos de 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 no se conocerá el recurso exacto hasta más adelante en la carga de la página), puedes usar preconnect en recursos de origen cruzado para reducir el impacto de la detección tardía del recurso tanto como sea posible.
Además, preconnect es menos costoso que preload en términos de uso de ancho de banda, pero no carece de riesgos. Como sucede con las sugerencias de preload excesivas, las sugerencias de preconnect excesivas siguen consumiendo 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 provocar contención del ancho de banda.
Conclusión
Estas dos sugerencias de recursos son útiles para mejorar la velocidad de la página cuando sabes que pronto descargarás algo de un dominio de terceros, pero no sabes la URL exacta del recurso. Los ejemplos 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.