Abra el panel de red, recargue y mire la FORMA antes de leer nada. Cuatro formas cubren casi toda página lenta, y cada una apunta a un sitio distinto.
1. Una barra larga arriba, y luego todo lo demás
El propio documento se llevó casi todo el tiempo. Eso es tiempo de servidor, y nada relacionado con imágenes o scripts lo va a cambiar. Vaya a medir el TTFB.
2. Una escalera
Cada petición empieza cuando termina la anterior. Algo solo se descubre después de que otra cosa haya cargado: una hoja de estilos que importa otra, o un script que inserta un script. Cada peldaño es una ida y vuelta completa.
<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>3. Un muro, y luego una cola larga
Todo arranca a la vez y unos pocos tardan muchísimo más. Esos pocos suelen ser de terceros: un script de analítica, un widget de chat, una fuente de otro dominio. Su servidor está bien y la página sigue sin estarlo.
4. Un hueco grande antes del primer pintado
Los bytes llegaron y no se dibujó nada. CSS que bloquea el dibujado, o una fuente esperando a intercambiarse. Mire el tamaño de la primera hoja de estilos y font-display.
@font-face { font-display: swap; }Las tres columnas que merece leer
- Waiting (TTFB): el servidor pensando.
- Content Download: los bytes moviéndose. Grande aquí significa que el archivo es demasiado grande.
- Queueing / Stalled: la espera de una conexión. Que aquí sea grande en HTTP/1.1 es la razón de que exista HTTP/2.
