Establece una conexión previa con los orígenes requeridos

En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las solicitudes clave que aún no priorizan las solicitudes de recuperación con <link rel=preconnect>:

Captura de pantalla de la auditoría de conexión previa a los orígenes necesarios de Lighthouse

Compatibilidad del navegador

<link rel=preconnect> es compatible con la mayoría de los navegadores. Consulta Compatibilidad del navegador.

Mejora la velocidad de carga de las páginas con la conexión previa

Te recomendamos agregar sugerencias de recursos preconnect o dns-prefetch para establecer conexiones anticipadas con orígenes externos importantes.

<link rel="preconnect"> informa al navegador que tu página desea establecer una conexión con otro origen y que deseas que el proceso comience lo antes posible.

Establecer conexiones, por lo general, consume mucho tiempo en redes lentas, en particular cuando se trata de conexiones seguras, ya que puede incluir consultas de DNS, redireccionamientos y varios viajes de ida y vuelta al servidor final que maneja la solicitud del usuario.

Si te encargas de todo esto de antemano, al usuario le parecerá que la aplicación es mucho más rápida sin afectar el uso del ancho de banda de manera negativa. La mayor parte del tiempo dedicado al establecimiento de la conexión se pasa esperando, en lugar de intercambiar datos.

Informar al navegador tu intención es tan simple como agregar un vínculo o una etiqueta a tu página:

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

Esto le permite al navegador saber que la página desea conectarse a example.com y recuperar contenido desde allí.

Ten en cuenta que, si bien <link rel="preconnect"> es bastante económico, igual puede consumir tiempo de CPU valioso, especialmente en conexiones seguras. Esto es un gran punto en contra si la conexión no se usa dentro de los 10 segundos, ya que el navegador la cierra y se pierde todo ese trabajo de conexión anticipada.

En general, intenta usar <link rel="preload">, ya que es un ajuste de rendimiento más integral, pero mantén <link rel="preconnect"> en tu conjunto de herramientas para casos extremos, como los siguientes:

<link rel="dns-prefetch"> es otro tipo de <link> relacionado con las conexiones. Este parámetro solo se encarga de las consultas de DNS, pero tiene compatibilidad más amplia en los navegadores, por lo que puede ser una reserva útil. Se usa de la misma manera:

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

Orientación específica de la pila

Drupal

Para agregar sugerencias de recursos Preconnect o dns-prefetch, instala y configura un módulo que proporcione elementos para las sugerencias de recursos del usuario-agente.

Magento

Modifica el diseño de tus temas y agrega sugerencias de recursos preconnect o DNS prefetch.

Recursos