Web developers looking for site performance issues should be using this tool in the Firefox web developers toolkit.
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:
- Waterfall: Shows different operations the browser performs as you use the site being tested.
- The Allocations view: Shows heap allocations made by your code.
What you’ll need
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).
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).
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).
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).
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.
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.