Cómo leer un resultado de page speed
Un resultado de page speed muestra más que puntuaciones. Debajo de los indicadores de puntuación hay paneles que explican por qué la página fue rápida o lenta: qué elemento fue el Largest Contentful Paint, qué se movió, qué scripts ocuparon la CPU y en qué orden se cargó cada solicitud. Esta guía recorre cada panel y te dice qué hacer con lo que ves.
Un panel solo aparece cuando la ejecución tiene datos para él. Por ejemplo, una ejecución sin datos de desplazamientos de diseño no tiene la tarjeta Elementos que se desplazaron.
Reproducción de la carga de la página
Junto a los indicadores de puntuación, la última captura de la página está en un pequeño reproductor. Haz clic en ella para reproducir la carga de la página y ver cuándo aparece el contenido. El icono de ampliar (Ver captura completa) abre la última captura a tamaño completo.
Úsalo como comprobación rápida antes de leer números. Si la página se queda en blanco mucho tiempo, o un banner aparece tarde y empuja el contenido hacia abajo, lo ves aquí.
Diagnóstico de rendimiento
La sección Diagnóstico de rendimiento lee la traza de Lighthouse de esta ejecución y muestra qué la frenó. Tiene hasta cuatro tarjetas.
Elemento de Largest Contentful Paint
Esta tarjeta nombra el elemento que fue el Largest Contentful Paint (LCP) y muestra su fragmento HTML. También recorta la captura de la página alrededor del elemento y dibuja un recuadro sobre él. El valor junto al título es el tiempo de LCP.
En Desglose del LCP, el tiempo de LCP se divide en cuatro fases, cada una con su tiempo y su porcentaje:
| Fase | Qué cubre | Si se lleva la mayor parte |
|---|---|---|
| Tiempo hasta el primer byte | Hasta que llega el primer byte del HTML | Acelera el servidor: caché, una CDN, menos redirecciones |
| Retraso en la carga del recurso | Desde ese primer byte hasta que el navegador empieza a cargar el recurso del LCP, como la imagen principal | Haz que el recurso se encuentre pronto: ponlo en el HTML, precárgalo, no uses carga diferida |
| Tiempo de carga del recurso | La descarga del recurso del LCP | Hazlo más pequeño: comprime la imagen, usa un formato moderno, sirve el tamaño adecuado |
| Retraso en el renderizado del elemento | Desde que el recurso está listo hasta que el elemento se pinta | Reduce el CSS y JavaScript que bloquean el renderizado y las tareas largas del hilo principal |
Un elemento de texto no tiene recurso que descargar, así que casi todo su tiempo está en la primera y la última fase. Más sobre la métrica en Largest Contentful Paint (LCP).
Elementos que se desplazaron
Los cinco elementos que más sumaron al Cumulative Layout Shift (CLS), el mayor primero. Cada fila muestra el elemento, su selector CSS y su puntuación de desplazamiento. La puntuación usa los umbrales de Core Web Vitals: por debajo de 0,1 es buena, desde 0,1 necesita mejorar y desde 0,25 es mala. Si nada se movió, la tarjeta dice No se registraron desplazamientos de diseño.
Soluciones típicas: da a las imágenes, vídeos, anuncios e inserciones un ancho y un alto o un espacio reservado. No insertes banners ni otro contenido encima de lo que ya está en pantalla.
Tiempo de CPU por script
Los cinco scripts que más tiempo de CPU usaron en el hilo principal, con su host y una barra para compararlos. Otros (sin atribuir) es trabajo que Lighthouse no puede asignar a un solo script.
El trabajo del hilo principal es lo que sube el Total Blocking Time. Si un host de terceros encabeza la lista, comprueba si esta página necesita ese script o cárgalo más tarde. Si es tu propio bundle, divídelo y aplaza el código que la primera vista no necesita.
Peso de la página
El tamaño total transferido y el número de solicitudes. Debajo, una barra y una lista reparten el peso por tipo de recurso (Documento, Script, CSS, Imagen, Fuente, Multimedia, Otro), cada uno con su tamaño, solicitudes y porcentaje. La última línea muestra cuánto vino de terceros, por ejemplo "Terceros: 1.2 MB en 40 solicitudes (35 % del peso)".
Las imágenes y los scripts suelen ser la mayor parte. Para recibir una alerta cuando la página crezca, pon un presupuesto en Page Weight (KB) o Requests. Consulta Presupuestos de rendimiento.
Cascada de solicitudes
La Cascada de solicitudes lista cada solicitud que hizo la página, en el orden en que empezaron. La línea bajo el título da el número de solicitudes y el tamaño transferido.
Los tiempos son de la carga real, sin limitación. Pueden ser más cortos que las métricas de laboratorio limitadas de los indicadores. Usa la cascada para ver el orden de las solicitudes y qué esperó a qué, no para tiempos absolutos.
Lo que ves:
- Tira de imágenes: capturas de la página mientras cargaba, en la misma escala de tiempo que la cascada. El primer fotograma en el First Contentful Paint o después lleva la etiqueta FCP, y el primero en el Largest Contentful Paint o después, la etiqueta LCP. Pasa el ratón por un fotograma para trazar su momento como una línea sobre la cascada.
- Filtro por tipo: un chip para Todo y uno para cada tipo de recurso de la página, con su número. Haz clic en un chip para ver solo ese tipo.
- Marcadores: líneas verticales para First Contentful Paint, Largest Contentful Paint y Evento load. La leyenda da sus tiempos.
- Filas: cada solicitud muestra el nombre del archivo, el host, la prioridad del navegador (de Máxima a Mínima), el código de estado cuando no es 200 y el tamaño transferido. La parte clara de la barra es la espera antes de que empezara la solicitud. La parte sólida es la solicitud en sí. Pasa el ratón por la barra para ver su inicio y su fin.
- Bloquea el renderizado: la solicitud retrasó el primer pintado, por ejemplo una hoja de estilos o un script síncrono en el head.
- Precarga: la página pidió la solicitud pronto con un enlace
rel="preload". - No cargado: la solicitud nunca terminó. Estaba en la lista Bloquear solicitudes de la prueba o falló en la red.
La lista empieza con las primeras 30 solicitudes. Haz clic en Mostrar las N solicitudes debajo de la lista para ver el resto, y en Mostrar menos para plegarla de nuevo.
Cómo usarla:
- Mira lo que carga antes del marcador de FCP. Cada solicitud con Bloquea el renderizado ahí retrasa el primer pintado. Pon el CSS crítico en línea y añade
deferoasynca los scripts que no necesitan bloquear. - Busca el recurso del LCP, a menudo una imagen. Si empieza tarde, tras una cadena de CSS y scripts, precárgalo. Cuando lleve la etiqueta Precarga, comprueba que ahora empieza cerca del principio.
- Filtra por Script para ver cuántos scripts cargan y desde qué hosts.
- Un tramo largo sin solicitudes nuevas suele significar que el hilo principal está ocupado. Compáralo con Tiempo de CPU por script.
Tiempo de respuesta del servidor (TTFB)
Las tarjetas de métricas del resultado incluyen Tiempo de respuesta del servidor (TTFB): el tiempo que tardó el servidor en empezar a enviar el documento HTML principal. Como las demás tarjetas, muestra el valor Último y la Mediana. Los valores buenos son de 0,8 segundos o menos. Por encima de 1,8 segundos son malos. Los gráficos de historial también tienen un gráfico Tiempo de respuesta del servidor (TTFB), que incluye ejecuciones antiguas.
Un TTFB lento retrasa todas las demás métricas, porque nada puede empezar antes de que llegue el HTML. Revisa la caché del servidor, las consultas lentas a la base de datos, una CDN delante del sitio y las redirecciones.
En el informe PDF
El informe imprimible incluye el Diagnóstico de rendimiento y la Cascada de solicitudes. En el PDF la cascada lista todas las solicitudes, no solo las primeras 30, y omite los chips de filtro y los botones. Consulta Informes PDF con tu marca.