Profiling Web Page Loading Performance

Blackfire is not only a profiler to analyze software application performance, but also a great call-graph visualization tool that lets you analyze almost any kind of data.

After reading the post about Hacking Blackfire I decided to use Blackfire to analyze web page loading performance. After all, profiling the application backend can save you milliseconds, whereas frontend optimization can save you seconds.

The HAR format

HAR, which stands for HTTP Archive, is a standardized JSON-based format to log collected data about interactions with websites. This format is mostly used by HTTP monitoring tools and browsers to import/export information about web page loading.

In order to analyze the web page loading performance of a page, you first need to get its HAR file. If you use Google Chrome browser, open the Network panel of the Inspector and right click on it to Save as HAR with Content:

If you use Firefox, install the NetExport extension for Firebug, which has been published by the same developer who originally created the HAR format.

In case your browser doesn’t support to export HAR files, use the free WebPageTest.org service to load your page and click on Export HTTP Archive (.har) link.

Transforming HAR files into Blackfire compatible files

Blackfire can’t process HAR files, but it accepts Callgrind profiles, Xhprof profiles and its own proprietary format. The latter is the simplest one to generate, because is a text-based format which describes the nodes and edges of the profile being analyzed. Read this blog post to learn more about the Blackfire format syntax.

Therefore, before analyzing web page loading performance in Blackfire, we must transform the HAR file into the Blackfire format. Both formats are simple enough to create your own conversion script, but in case you need it, this is the har2blackfire.php script that I used:

$ php har2blackfire.php symfony.com.har
The Blackfire dump file has been successfully generated in profile.bk

Analyzing web page loading performance

Then, upload the profile.bk file to Blackfire. To make it work, you just need to install the Blackfire CLI tool.

Then, execute the following command and select the slot where you want to store it:

$ blackfire upload profile.bk

That’s it! Click on the URL displayed by the blackfire upload command and you’ll see the full analysis of your web page loading performance. The following image shows the profile of symfony.com homepage and you can also access to the publicly shared profile:

The provided har2blackfire.php script groups requests by host, but you can tweak the script to group them by type (CSS, JavaScript, Web Fonts, etc.), host type (internal or external hosts), resource size (small, medium, large), etc.