All About Performance

and other stuff by Taras Glek

Making Pages Load Faster

I am not a web developer. I often learn about modern web dev tricks/trends by noticing how they impact overall Firefox performance. I prefer learning about perf topics from well-written blog posts. Bryan of Google page speed team blogged on optimizing pageload speeds on mobile. The advice is good, but I have two minor warnings about it.

Suggestion to use requestAnimationFrame to delay loading resources is a good one. There is a gotcha: if you do something expensive in the requestAnimationFrame handler, it’ll delay your first page draw (requestAnimationFrame fires as the browser prepares to paint. It’s an ok place to start network requests, etc). If you do something expensive, use a chained requestAnimationFrame. Firefox recently started using a similar trick to display the UI faster in bug 715402.

The suggestion to split up stylesheets is also good, but risky. I’ve seen this before, but I did not understand why websites sprinkled <link rel="stylesheet"> throughout the page bodies. This can significantly degrade pageload times by causing redundant page restyles and reflows. Reflows can take hundreds of milliseconds on slow mobile devices, doing them multiple times is bad. Make sure to run your pages through a profiler (or time the difference between relevant requestAnimationFrame callbacks). I saw a bad case of this in bug 718864.

Comments