Orígenes de preconexión

Silktide comprueba si tu página podría cargarse más rápido indicando al navegador, desde el principio, a qué otros servidores va a necesitar acceder en breve. Abrir esas conexiones antes hace que los archivos de terceros empiecen a descargarse antes.

Antes de que un navegador pueda descargar nada de un servidor nuevo —un servicio de fuentes, una , un proveedor de analítica— debe resolver la dirección del servidor, abrir una conexión y negociar el cifrado. Esa preparación requiere varios viajes de ida y vuelta por la red y, normalmente, el navegador solo la inicia cuando descubre por primera vez un archivo que necesita de ese servidor, lo cual puede ocurrir tarde durante la carga de la página.

Por qué es importante

Preparar la conexión a un solo servidor puede costar cientos de milisegundos en una conexión móvil, y una página típica se comunica con varios servidores de terceros. Cuando esa preparación empieza tarde —porque el archivo que la necesita está referenciado en lo profundo de una hoja de estilos o un script—, el retraso afecta directamente al contenido visible, como fuentes e imágenes.

Una pista de preconexión desplaza este coste al mismo inicio de la carga, donde se solapa con el trabajo que el navegador ya estaba realizando. Es una línea de por servidor, sin cambios visuales en la página.

Cómo solucionarlo

Añade una pista preconnect en el <head> de tu página para cada servidor importante que informe la comprobación:

<!-- Abre la conexión antes de que el navegador descubra que la necesita -->
<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>

Incluye el atributo crossorigin para los servidores que lo requieran; las fuentes siempre lo hacen.
Haz preconexión solo con los servidores que importan para la página visible, como donde residen tus fuentes, imágenes o scripts críticos. Cada conexión abierta consume recursos del dispositivo del visitante, así que unas pocas pistas ayudan y decenas perjudican.
Para servidores menos importantes, rel="dns-prefetch" es una pista más barata que solo realiza por adelantado la resolución de la dirección (DNS).

Cómo lo prueba Silktide

Cargar la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
Identificar los servidores desde los que la página descarga en los que la preparación de la conexión retrasó la descarga y no había ninguna pista de conexión temprana.
Informar de cada servidor con el tiempo estimado que ahorraría una pista de preconexión.
Calificar la página por el ahorro total estimado: en torno a 100 milisegundos baja la nota, y 200 milisegundos o más se considera deficiente.

Solución de problemas

He añadido la pista pero el hallazgo sigue apareciendo

Comprueba la dirección exacta: la pista debe coincidir con el servidor del que realmente provienen los archivos, incluido el protocolo y cualquier subdominio (https:\/\/fonts.gstatic.com no es https:\/\/fonts.googleapis.com). Las fuentes también necesitan crossorigin en la pista; sin él, el navegador abre un tipo de conexión incorrecto y luego la descarta.

¿Debería hacer preconexión con todos los servidores de terceros?

No. Los navegadores limitan cuántas conexiones tempranas atienden, y cada una consume recursos en el dispositivo del visitante. Reserva la preconexión para los pocos servidores cuyos archivos determinan lo que los visitantes ven primero.