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 con los navegadores.
Mejorar la velocidad de carga de la página con la preconexión
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 pretende establecer una conexión con otro origen y que deseas que el proceso comience lo antes posible.
A menudo, establecer conexiones implica un tiempo significativo en las redes lentas, en especial cuando se trata de conexiones seguras, ya que puede implicar búsquedas de DNS, redireccionamientos y varios viajes de ida y vuelta al servidor final que controla la solicitud del usuario.
Si te encargas de todo esto con anticipación, es posible que la 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 dedicado a establecer una conexión se pasa esperando, en lugar de intercambiar datos.
Informar al navegador tu intención es tan simple como agregar una etiqueta de vínculo a tu página:
<link rel="preconnect" href="https://example.com">
De esta manera, se le indica al navegador que la página pretende conectarse a example.com y recuperar contenido desde allí.
Ten en cuenta que, si bien <link rel="preconnect"> es bastante económico, aún puede consumir tiempo de CPU valioso, en especial en conexiones seguras.
Esto resulta particularmente malo si la conexión no se usa dentro de los 10 segundos,
ya que el navegador la cierra, lo que desperdicia 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 cinturón de herramientas para los casos extremos, como los siguientes:
- Caso de uso: Saber de dónde proviene, pero no saber qué se obtiene
- Caso de uso: Transmisión de contenido multimedia
<link rel="dns-prefetch"> es otro tipo de <link> relacionado con las conexiones.
Este comando controla solo la búsqueda de DNS, pero tiene una compatibilidad más amplia con el navegador, por lo que puede servir como un buen resguardo.
Se usa exactamente de la misma manera:
<link rel="dns-prefetch" href="https://example.com" />.
Orientación específica para pilas
Drupal
Usa un módulo que admita sugerencias de recursos de usuario-agente para instalar y configurar sugerencias de recursos de precarga de DNS o preconexión.
Magento
Modifica el diseño de tus temas y agrega sugerencias de recursos de preconexión o carga previa de DNS.