Using the Firefox Profiler for web performance analysis
Nazım Can Altınova�Slides: https://share.firefox.dev/profiler-fosdem-2021
profiler.firefox.com
about:me
Nazım Can Altınova�
Living in Berlin, Germany
Originally from Turkey
Software Engineer at Mozilla,
Performance Tooling team
@canaltinova on Twitter
@canova on GitHub
Agenda
What is a profiler?
Helps developers to analyze performance issues
And gives insight
What is Firefox Profiler?
Old
New
Recording UI
Analysis UI
Capture a performance profile.
Analyze it. Share it.
Make the web faster.
Main advantages
More information with markers, screenshots, network requests, different visualizations and more.
Capture a profile, share with an expert.
How to capture a profile?
1. Go to profiler.firefox.com
2. Follow the instructions
Recording UI
Record with: Ctrl + Shift + 1
Capture with: Ctrl + Shift + 2
How to capture a good profile?
Isolate as much as possible
Make sure you reproduced the results you want
Re-record until you are happy with the profile data
Firefox Profiler analysis UI
Timeline
Range selection
Screenshots in the timeline
Category graph in the timeline
Markers in the timeline
Marker
tooltips
Panels
Sharing a profile
Profile sharing panel
Demo
Thank you
Firefox Profiler Documentation:�https://profiler.firefox.com/docs/
Slides:�https://share.firefox.dev/profiler-fosdem-2021
Matrix channel:�https://chat.mozilla.org/#/room/#profiler:mozilla.org