How to use the Firefox Performance tool to test site responsiveness

Web developers looking for site performance issues should be using this tool in the Firefox web developers toolkit.

Firefox is a great web browser for users. It's also one of the best browsers for developers. Why? Because the open source app includes a number of tools specifically designed for developers. These tools include the Page Inspector (used to examine and modify the HTML and CSS of a page), the Web Console (which logs information associated with a web page), and the JavaScript Debugger.

Another tool found within the Web Developer menu is the Performance tool, which gives you insight into your site's responsiveness, JavaScript, and layout performance. This tool also allows you to create a recording or profile of a site over time. Once you stop the recording, you'll be presented with an overview of everything that happened to render the site in the browser. 

SEE: Implementing DevOps: A guide for IT pros (free PDF) (TechRepublic)

From that overview you will gain some much-needed insight to help improve the performance of the website you've developed.

Performance comes with four sub-tools that will be of use:

  1. Waterfall: Shows different operations the browser performs as you use the site being tested.
  2. The Call Tree: Displays JavaScript functions.
  3. The Flame Chart: Shows the JavaScript call stack.
  4. The Allocations view: Shows heap allocations made by your code.

What you'll need

  • An updated version of Firefox

  • A website to test

I'll be demonstrating on the Nightly version of Firefox on Pop!_OS Linux. The platform you use doesn't matter, so long as you have a version of the web browser that includes the Performance tool.

How to start the Firefox Performance tool

The first thing you must do is start the Performance tool. To do this, open Firefox and click on the menu button in the upper right corner. Click Web Developer | Performance. This will open a new pane at the bottom of the browser window (Figure A).

Figure A

performancec.jpg

The Performance tool is open and ready to record.

Next, browse to the site in question and then click the Start Recording Performance button. Once the recording has started, take action within the site you are testing. The Performance tool will then start collecting data (Figure B)

Figure B

performanced.jpg

The Performance buffer has already reached capacity.

The Performance buffer will fill up very quickly. Once it has filled up, it'll begin overwriting earlier data, so you should be certain if you want to keep the first data recorded, to watch the buffer percentage and stop the recording before it reaches 100%. 

Once Performance has stopped recording, it'll display what it discovered. You can then scroll through every record and select an object, which will open the details in a right pane (Figure C).

Figure C

performancef.jpg

The details of a Function Call.

You will see a link within the details (in the instance above, the link is osd.js:1). Click that link to open the Debugger, which will display the code associated with the object you've selected (Figure D).

Figure D

performanceg.jpg

The Firefox Debugger showing code associated with osd.js:1.

You can then go back to the Performance tab to continue combing through every record in your recorded profile. Click on the Call Tree (Figure E) or the Flame Chart to get even more insight into the performance of your code.

Figure E

performancei.jpg

The Call Tree view in action.

If you want to save this profile, click Save in the left sidebar. This will download the profile as a JSON file to your local drive. You can view a saved profile by clicking the Import button (icon directly right of the clock) in the left sidebar. Open the saved JSON file and you can scour through a previously recorded profile.

The Firefox Performance tool is one every web developer should be using to help troubleshoot why a site isn't performing up to your standards. It's easy to use, free, and offers more than enough information for your debugging needs.

Also see

firefoxhero.jpg

Image: Jack Wallen