Forest header image

Symfony Finland
Random things on PHP, Symfony and web development

Ballpark benchmarking web page load time and "time to first paint"

Time to first paint is the one of the most critical user experience for web sites. Essentially what this means is the moment the user sees something on their screens after following a link. This gives the perception of a fast load time, and first impressions count on the web.

It is essential to understand that not all resources are critical to deliver a fast first paint. Techniques such as inlining critical CSS can be used in conjunction with methods such as BigPipe, Isomorphic Rendering and Lazy Loading to improve the initial load time a web page. There is also a W3C proposal from Baidu for defining First Screen Paint In Advance.

To complement these optimisations, the new version of the HTTP protocol (HTTP/2) has significant improvements that can positively influence the time to first paint, such as streaming data over a single TCP connection, asset priorisation and more. Just serving HTTP/2 is no guarantee of better performance, in fact it can even make it worse in some cases.

You'll probably have dependencies to Analytics and other external scripts and resources which might be blocking and served from slow 3rd party servers, rendering the content you've provided quickly rather useless.Changing latencies and bandwidth over public networks make reliable benchmarking impossible.

Ballpark load time numbers are good start

It is still useful to get some ballpark figures on your load times. You can use services like, PageSpeed Insights and Pingdom Website Speed Test which give you a wealth of information. But if you simply wish to do quick testing on load times, they might be a bit too cumbersome and slow.

Kazuho Oku, the lead developer of H2O, a HTTP/2 capable webserver and other significant Open Source projects has created a quick way to test the essential metrics of a site. The tool is called wpbench and it is just a single HTML page that you upload to the server and then get rought numbers on unload, first-paint and load.

Read the details and download Wpbench from Github. If you wish to try the tool yourself, you can check with these two links, comparing resource loading of HTTP/1.1 and HTTP/2:

Your mileage will vary, but the above links load a large number of images with a delay. There are no third party scripts on the site and browser caching is invalidated using random get parameters.

Read more about load time and browser performance:

Written by Jani Tarvainen on Thursday October 1, 2015
Permalink - Tags: http2, performance, web, webdev

« Symfony and Asset Management - Varnish HTTP/2 with SSL/TLS offloading on H2O »