Advanced Performance Audits With DevTools

Recently, I’ve spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model1, and spelunking deep into each app, the findings have been fascinating.

I’ve written up case study documents for each, incorporating all the findings:

  1. Illustrated diagnoses for the poor performance
  2. What actions the developer should take
  3. How Chrome’s tooling should improve
  4. Questions and insights for the rendering engine (Blink)

In this doc, we look at the scrolling of CNET, input latency on CNET, some very interesting challenges on the responsive, and infinite scroll on Google Play’s desktop site.

The intended audience is browser engineers and performance-minded frontend developers. It’s fairly advanced, but I’m spelunking deep to identify how the sites butt heads with the browser APIs and architecture.

Lastly, we’re using this research to improve Chrome DevTools and what you hear from Chrome.

Wikipedia eng team scrutinizing their performance millisecond by millisecond. (Yes, it’s a long paper printout of the Chrome DevTools timeline flamechart 🙂

(BTW, use this link to view the same doc but with comments enabled)

1 – More on this performance model later. Stay tuned.