Preconnect a los orígenes requerido

En este Tutoriales En Linea les hablaremos de esta metaetiqueta interesante a la hora de que nuestra web cargue más rápido de lo habitual. Es una forma de acelerar las páginas web mediante la resolución previa de DNS. El uso de rel="preconnect" sugiere que un navegador debería resolver el DNS de un dominio específico antes de que sea llamado explícitamente.

Mejore la velocidad de carga de la página con la conexión previa

Considere agregar los  recursos preconnect o dns-prefetch, estos insinúa establecer principios de condiciones con los principales orígenes de terceros.

<link rel="preconnect">

Informa al navegador que su página tiene la intención de establecer una conexión con otro origen, y que desea que el proceso comience lo antes posible.


El establecimiento de conexiones a menudo implica un tiempo significativo en redes lentas, particularmente cuando se trata de conexiones seguras, ya que puede involucrar búsquedas de DNS, redirecciones y varios viajes de ida y vuelta al servidor final que maneja la solicitud del usuario.

Cuidar todo esto con anticipación puede hacer que su aplicación se sienta mucho más ágil para el usuario sin afectar negativamente el uso del ancho de banda. La mayor parte del tiempo para establecer una conexión se pasa esperando, en lugar de intercambiar datos.

Informar al navegador de su intención es tan simple como agregar una etiqueta de enlace a su página:

<link rel="preconnect" href="https://example.com">

Esto le permite al navegador saber que la página tiene la intención de conectarse example.com y recuperar contenido desde allí.

Tenga en cuenta que, si bien <link rel="preconnect"> es bastante barato, aún puede ocupar un valioso tiempo de CPU, especialmente en conexiones seguras. Esto es especialmente malo si la conexión no se usa en 10 segundos, ya que el navegador la cierra, desperdiciando todo ese trabajo de conexión temprana.

En general, intente usarlo <link rel="preload">, ya que es un ajuste de rendimiento más completo, pero tenga <link rel="preconnect"> en cuenta su cinturón de herramientas para casos extremos como:

• Caso de uso: saber de dónde, pero no lo que está obteniendo.
• Caso de uso: Streaming Media.

<link rel="dns-prefetch"> Es otro tipo <link> relacionado con las conexiones. Esto maneja solo la búsqueda de DNS, pero tiene un soporte de navegador más amplio, por lo que puede servir como una buena alternativa. Lo usas exactamente de la misma manera:

<link rel="dns-prefetch" href="https://example.com">.

Mas sobre dns-prefetch...