Preconectarse a los orígenes requeridos
Published on • Updated on
La sección Oportunidades de tu informe Lighthouse enumera 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
Considera agregar preconnect o dns-prefetch para establecer conexiones tempranas con orígenes de terceros importantes.
El <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 usualmente implica un tiempo considerable en redes lentas, especialmente 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 maneja la consulta del usuario.
Hacer todo esto con anticipación puede hacer que tu 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 dedica a esperar, en lugar de intercambiar datos.
Informar al navegador de tu intención es tan simple como agregar una etiqueta de enlace a tu 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 a example.com y recuperar contenido desde allí.
Ten en cuenta que, si bien <link rel="preconnect"> es bastante barato, aún puede consumir un valioso tiempo de CPU, particularmente en conexiones seguras. Esto es especialmente negativo ya que si la conexión no se usa en 10 segundos, el navegador la cerrará, desperdiciando todo el trabajo de la conexión inicial.
En general, intenta usar <link rel="preload">, ya que es un ajuste de rendimiento más completo, pero mantén <link rel="preconnect"> en tu cinturón de herramientas para casos específicos como:
<link rel="dns-prefetch"> es otro tipo de <link> relacionado con las conexiones. Esto solo maneja la búsqueda de DNS, pero tiene un soporte de navegador más amplio, por lo que puede servir como una buena alternativa. Se usa exactamente de la misma manera:
<link rel="dns-prefetch" href="https://example.com" />.Orientación de recursos tecnológicos específicos
Drupal
Utiliza un módulo que admite sugerencias de recursos de agentes de usuario para que puedas instalar y configurar sugerencias de recursos de preconexión o de captación previa de DNS.
Magento
Modifica el diseño de tus temas y agrega sugerencias de recursos de preconexión o de captación previa de DNS.
Recursos
Updated on • Improve article