CSS Profiler

Opera has a prototype CSS profiler available that looks interesting that can shed some light on expensive selectors that you may want to optimize.

To use the profiler:

  • First make sure you have downloaded the latest version of Opera
  • Enter opera:config#developerTools in the address bar to open the configuration section
  • Amend the developer tools url to https://dragonfly.opera.com/app/stp-1/profiler/

To bring the profiler up access a page, right click select element (choose anything). Click the red record button to start the profile and refresh the page. Click the record button again to stop the trace.

Opera will then give you a break down of where time was spent rendering. If you click individual style calculation (the orange blocks or the style recalculation section you will receive a detailed breakdown).

Opera CSS Profiler

It’s early days for the profiler but looks really interesting.