Cuando un navegador solicita un recurso de un servidor (de un tercero), el nombre de dominio de ese origen cruzado debe resolverse en una dirección IP antes de que el navegador pueda emitir la solicitud. Este proceso se conoce como resolución de DNS. Si bien el almacenamiento en caché de DNS puede ayudar a reducir esta latencia, la resolución de DNS puede agregar una latencia significativa a las solicitudes. Para sitios web que abren conexiones a muchos terceros, esta latencia puede reducir significativamente el rendimiento de carga.
dns-prefetchayuda a los desarrolladores a enmascarar la latencia de resolución de DNS. El elemento HTML<link> ofrece esta funcionalidad a través de un valor de relatributodns-prefetch de . Luego, el dominio de origen cruzado se especifica en el atributo href :
Sintaxis
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
Ejemplos
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
Debe colocar dns-prefetchsugerencias en el <head>elemento cada vez que su sitio haga referencia a recursos en dominios de origen cruzado, pero hay algunas cosas que debe tener en cuenta.
Mejores prácticas
Hay 3 cosas principales a tener en cuenta:
Por un lado , dns-prefetchsolo es efectivo para las búsquedas de DNS en dominios de origen cruzado , así que evite usarlo para apuntar a su sitio o dominio. Esto se debe a que la IP detrás del dominio de su sitio ya se habrá resuelto cuando el navegador vea la sugerencia.
En segundo lugar , también es posible especificar dns-prefetch(y otras sugerencias de recursos) como un encabezado HTTP utilizando el campo Enlace HTTP :
Link: <https://fonts.googleapis.com/>; rel=dns-prefetchTercero , considere emparejar dns-prefetchcon la preconnectpista. Si bien dns-prefetchsolo realiza una búsqueda de DNS, preconnectestablece una conexión con un servidor. Este proceso incluye la resolución de DNS, así como el establecimiento de la conexión TCP y la realización del protocolo de enlace TLS , si un sitio se sirve a través de HTTPS. La combinación de los dos brinda la oportunidad de reducir aún más la latencia percibida de las solicitudes de origen cruzado . Puede usarlos juntos de manera segura así:
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
preconnectsugerencia se usa mejor solo para las conexiones más críticas. Para los demás, solo use <link rel="dns-prefetch">para ahorrar tiempo en el primer paso: la búsqueda de DNS.La lógica detrás del emparejamiento de estas sugerencias se debe a que la compatibilidad con dns-prefetch es mejor que la compatibilidad con preconexión. Los navegadores que no son compatibles con la preconexión aún obtendrán algún beneficio adicional al recurrir a dns-prefetch. Debido a que esta es una función HTML, es muy tolerante a fallas. Si un navegador no compatible encuentra una sugerencia de dns-prefetch, o cualquier otra sugerencia de recurso, su sitio no se romperá. Simplemente no recibirá los beneficios que proporciona.
Algunos recursos, como las fuentes, se cargan en modo anónimo. En tales casos, debe establecer el atributo crossorigin con la sugerencia de preconexión. Si lo omite, el navegador solo realizará la búsqueda de DNS.
