Medir el primer pintado en la carga de la página

Evento de primer pintado en Web Page Test

Hace un par de semanas publiqué un tema sobre algunas herramientas disponibles para medir la velocidad de carga de una página web. La herramienta Web Page Test nos ofrece un waterfall o gráfico de carga donde se resaltan los eventos DOMContentLoaded, Load, Document Complete, First Paint (msFirstPaint) y Start Render:

Tipos de eventos en waterfall de Web Page Test

De un test que acabo de realizar de la página inicial de este sitio en esa herramienta vemos el siguiente detalle de esos eventos que se muestran como líneas verticales en el gráfico de carga:

Waterfall en Web Page Test: detalle de eventos

La medida del primer pintado (First Paint) en la carga de una página web es importante pues intenta medir la percepción del usuario acerca de lo rápido que se está cargando la página. Cuánto antes empiece a pintar también antes el usuario notará que algo está sucediendo en la pantalla. Es un objetivo prioritario conseguir que esa medida esté por debajo de un segundo.

El nuevo Timeline en el navegador Chrome 33

Nota de actualización 13 abril 2014 con Chrome 34

Chrome dev tools first paint

En esta nueva versión de Chrome ya se arregló el problema que se comenta en este apartado. En la imagen se observa que empieza el primer pintado a los 624 ms en esa ejecución del Timeline para la página principal de este sitio. Puede ver la captura de pantalla completa.

Web Page Test es una herramienta potente pero sólo la podemos usar con páginas del servidor en producción, es decir, no podemos utilizarla con sitios en desarrollo localhost. Mientras estamos desarrollando nuestra página podemos hacer uso de las herramientas de los navegadores para tener un primer acercamiento en los entornos localhost. En el tema señalado expuse las herramientas del navegador Chrome (versión 32). Allí dije que podíamos usar el Timeline de Chrome para chequear el momento del primer pintado. Entonces echaba de menos que esa herramienta no tuviese una línea vertical para indicar ese evento. Ahora con la nueva versión 33 ya tenemos esa línea vertical verde como verá en la imagen siguiente:

Timeline en las Developers Tools de Chrome 33

Vemos en la imagen la primera línea vertical azul para el evento DOMContentLoaded, luego la línea verde para el primer Paint y finalmente la línea roja para el evento Load. Esa línea verde creo que se corresponde más bien con el momento de finalización del primer pintado de la página, pero no he podido obtener más información sobre esto. No habrá mucha diferencia con el momento de inicio pues normalmente el proceso de pintado no ocupa mucho tiempo (unos 24 ms en esa muestra). En caso de consumir tiempos mucho mayores en este proceso habría que buscar la causa y tratar de solucionarlo. Otra mejora es el gráfico circular con la información adicional del proceso que se expone en el panel Details. Pero en esa información no aparece el tiempo acumulado desde el inicio de la grabación en el cual se inicia el proceso. Vea la siguiente imagen de una captura hecha en la versión 32 de Chrome de una grabación con el Timeline:

Timeline en Developer Tools de Chrome 32

Un mensaje emergente o tooltip nos mostraba los detalles del proceso. Se observa que el proceso Paint se inició a los 861 ms desde el inicio de la grabación. Esa información ahora no la veo en el nuevo Timeline de la versión 33. El único tooltip que observo está sobre los trozos de la barra de CPU. Esta barra muestra los tiempos de uso de la CPU por el navegador Chrome. Con la versión anterior se podía activar a voluntad en las opciones de configuración de la herramienta. Pero ahora en la versión 33 está permanentemente activada:

Timeline en Developer Tools de Chrome 32: Detalles CPU

La información que ahí aparece se refiere a que ese trozo de ejecución de CPU se inició a los 629 ms, pero dentro de ese tramo no sabemos con exactitud cuando se inician cada uno de los procesos representados por las barras horizontales de colores. Sólo podemos estimar el momento usando la regla superior que en esa imagen está graduada en tramos de 100 ms (divisiones verticales con líneas grises). Casualmente en ese test el evento de primer pintado cae cerca de los 700 ms dado que la marca vertical verde está muy cerca de la graduación vertical gris, pero creo que sigue siendo necesario saber ese dato con más exactitud tal como antes lo podíamos comprobar en la versión 32 de Chrome.

En resumen, es un pequeño contratiempo de esta herramienta del que por ahora no he encontrado más información. Pero aún así sigue siendo una herramienta indispensable para la tarea de optimizar nuestras páginas web.