Google Chrome Summit: Tooling Techniques

In his presentation at the Google Chrome Dev Summit in Mountain View CA, Colt McAnlis walked through performance tools on the Web. Here are my notes from his talk:

If you are not busy optimizing your Web site for the next 5 billion people coming online through mobile, you are wasting your time.

What you can measure you can optimize.

There are three steps to performance: measure (gather data), look for insights in the data, take action on the issues you find. The most important part of this loop is repeating it. You probably have lots of performance problems and need to tackle many things.

There is no longer a single pillar of performance. We have three considerations: network, render, and compute.

Load time is not a good measure of network. There are many dependent parts. Critical path is a better way to think about network performance. It is the time required to paint the first pixels on your screen.

Critical path dependencies include requests, HTML, CSS, etc. We need to reduce the complexity of asset dependency & the number of assets. Compression is next: how small can you make your assets smaller. Reduce number of requests and size of those requests.

Painting content on a Web page requires DOM changes which causes pages to repaint. Too many paints can make pages feel janky. You can use the Dev Tools Timeline to see where paints happen and how long they take.

A Javascript CPU profile shows you where all your calls are going for a given frame. It shows you which functions are taking time and what is created in each frame.

With performance tools, you can see what is happening in your code. Use tools, not rules to figure out how to optimize your applications on the Web.