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>:
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 la página con preconnect
Te recomendamos agregar sugerencias de recursos preconnect o dns-prefetch para establecer conexiones tempranas con orígenes externos importantes.
<link rel="preconnect"> informa al navegador que tu página tiene la intención de establecer una conexión con otro origen y que deseas que el proceso comience lo antes posible.
Establecer conexiones suele llevar mucho tiempo en redes lentas, en especial cuando se trata de conexiones seguras, ya que pueden implicar búsquedas de DNS, redireccionamientos y varios viajes de ida y vuelta al servidor final que controla la solicitud del usuario.
Encargarse de todo esto con anticipación puede hacer que tu aplicación se sienta mucho más rápida para el usuario sin afectar negativamente el uso del ancho de banda. La mayor parte del tiempo que se tarda en establecer una conexión se dedica a esperar, en lugar de intercambiar datos.
Para informar al navegador sobre tu intención, solo debes agregar una etiqueta de vínculo a tu página:
<link rel="preconnect" href="https://example.com">
Esto le permite al navegador saber que la página intenta conectarse a example.com y recuperar contenido desde allí.
Ten en cuenta que, si bien <link rel="preconnect"> es bastante económico, puede ocupar tiempo valioso de la CPU, en especial en conexiones seguras.
Esto es especialmente grave si la conexión no se usa en un plazo de 10 segundos, ya que el navegador la cierra y desperdicia todo el trabajo de conexión inicial.
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 caja de herramientas para los casos extremos, como los siguientes:
- Caso de uso: Saber de dónde se obtienen los datos, pero no qué se recupera
- Caso de uso: Transmisión de contenido multimedia
<link rel="dns-prefetch"> es otro tipo de <link> relacionado con las conexiones.
Esto solo controla la búsqueda de DNS, pero tiene una mayor compatibilidad con los navegadores, por lo que puede servir como un buen resguardo.
Se usa de la misma manera:
<link rel="dns-prefetch" href="https://example.com" />.
Orientación específica para la pila
Drupal
Para agregar las 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.