Aunque el objetivo de todos es reducir el presupuesto de rendimiento web, sigue siendo necesario utilizar servicios de terceros. Al utilizar estos servicios, el "Búsqueda DNS"Los tiempos pueden consumir una parte importante del presupuesto, dependiendo de la cantidad de servicios. Estas cargas afectan varios aspectos de la velocidad de la página, incluido First Contentful Paint (FCP).
El objetivo de estos dos conceptos es optimizar los tiempos de conexión de terceros. Antes de comprender las diferencias entre estos dos conceptos, es necesario comprender qué sucede exactamente cuando se realiza una solicitud de un tercero:
- El dominio se resuelve para obtener una dirección IP.
- Se establece una conexión con el servidor.
- La conexión está cifrada para garantizar la seguridad.
Esta jerarquía se repite para cada conexión de terceros. Aquí es donde entra en juego la diferencia entre preconexión y DNS-prefetch.
- Preconexión: Garantiza que los tres pasos mencionados anteriormente estén preconfigurados.
- Captura previa de DNS: Sólo sirve para convertir el nombre de dominio a una dirección IP en el primer paso.
Como puedes ver, la preconexión es más completa y beneficiosa. Sin embargo, todo tiene un costo. El uso de preconexión para todas sus conexiones podría afectar negativamente la optimización de su página. Por lo tanto, yDebes usar preconnect solo para conexiones críticas y usar dns-prefetch para todas las demás conexiones de terceros.
Resumen de uso
Dada la información anterior, aquí hay un resumen rápido de su uso:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Compatibilidad del navegador
Al analizar su uso, también es importante mencionar la compatibilidad del navegador. Estos dos conceptos estrechamente relacionados son ampliamente compatibles con los navegadores modernos, pero su uso no se superpone por completo. Preconnect es compatible con aproximadamente el 97% de los navegadores, mientras dns-prefetch es compatible con el 83% de los navegadores (a junio de 2024).
Contribución al presupuesto de rendimiento web
- Preconnect puede proporcionar una mejora total de la velocidad de 100-500ms.
- DNS-Prefetch puede acelerar cada conexión al 20-120ms.
Planeamos realizar nuestras propias pruebas para proporcionar ejemplos locales más satisfactorios.
Por último, me gustaría recomendar y dar crédito al blog de Ceyhun Enki Aksan, que contribuyó enormemente a mi comprensión mientras preparaba este artículo: Blog de Ceyhun Enki Aksan.
