Analyzing page load performance frame-by-frame

We’ve previously added video profiles in mobile and run them daily with eideticker. Here’s a proof a concept for doing the same thing for tracking page load on desktop.

This works by tagging frames and CPU samples with a frame number. During the analysis we use this information to correlate the video stream with the CPU samples. This lets us take something like a page load, slow it down and watch what we’re executing at each frame.

Take a look at this profile and follow along. I’ll only describe 4 interesting frames but feel free to look at the rest. When seeking with the video the corresponding region will be highlighted in the profile timeline. You can then click on samples in that timeline and they will be selected and appear as green:

• Seek to 4 seconds where the page is requested. This will continue to 5.5 seconds. During this we see a little network activity and a bit of work compositing to update the throbber. This is no surprise since my WiFi signal was poor.
• Seek to 5.5 seconds where the page starts to appear on screen. Lets look closer at the first frame in order.
  1. 20 ms compiling JS
  2. 8 ms executing the JS from the page
  3. 5 ms is spent in Adblock
  4. 11 ms processing styles
  5. 37 ms reflowing the page, 16 ms of which is doing main thread IO loading fonts when calling ‘CGFontCreateWithFontName’.
  6. Negligible time building the display list (profiler sampling rate too high)
  7. 19 ms drawing and compositing
• Seek to 5.9 seconds where we are waiting on the plugin to load. The plugin takes 200ms to load. This means we miss several frames.
• Seek to about 7.3 seconds. During this frame the plugin stream is created. This adds another 100 ms delay.

Video Profile of Page Load

My goal is to start making video capture features into the profiler add-on to make these profiles easier to capture.