A short while ago I saw this great video on Youtube about web page performance on mobile browsers by Colt McAnlis, a developer advocate at Google which was held at HTML5 DevConf in San Francisco.

For those of you who don’t have time to watch the entire talk, I would like to briefly summarize what has been said, as I consider some of the points very useful in order to improve page load times on smartphones.

First of all, we can roughly split up the topic into three pillars of web performance:

  • Network performance
  • Render performance
  • Compute performance

In the network performance part, Colt talks about the following three aspects:

  • Why is mobile slower: As a matter of fact, cell phones are just a HAM radio operator and only enabling a network connection can take up to 1-2 seconds, which compared to the 3s tolerance before 50% of users abandon your page leaves you with 1s for your page to load.
  • The trouble with images: Many pages still download full-sized images on mobile devices and the compression is not optimal, we should start establishing new formats such as the web-p format.
  • Your content is too raw-large: A lot of websites still serve their CSS and JS files uncompressed, although it is easy to set up compression and it saves the user a lot of bandwidth.

In the render performance part, he covers the following topics:

  • What’s your render-weight? It’s actually quite important to have in mind the rendering mechanisms of browsers. Though being very advanced you should consider what happens in the background when using CSS features like border-radius or box-shadow. More about this topic can be found in his article on HTML5 Rocks
  • The trouble with images #2: Apart from downloading massive image data, a browser also has to deal with decoding and resizing them. This can take a significant amount of time and should be tackled with responsive image techniques such as Picture Fill by Scott Jehl
  • Reflows are the devil: This refers to scripts that redraw elements depending on specific page dimensions. As an example, Colt shows a script that redraws everything on the page piece by piece, which leads to the problem that with every loop the browser waits for the page height to be calculated before it goes into the next iteration. Something which leads to very poor performance.

In the compute performance part, Colt talks mainly about the following issue:

  • Static memory javascript: Due to its dynamic nature, javascript allows us to define variables wherever and whenever we want. This leads to the problem that the garbage collecter, which takes care of freeing up memory in a predefined interval which we have no control over, causes little performance delays whenever it does its job. This can be during a mouse click, while scrolling or during an animation. In order to prevent this from happening, we should predefine ALL our variables beforehand by calculating the max footprint of our applications.
  • This can be achieved with the help of Chome’s built-in developer tools which can be found in the profile tab and allow you to measure CPU as well as memory performance of your javascript code.

Last but not least, Colt has put together a checklist for the mobile web which summarizes the above-mentioned performance issues:

  • Use advanced data-compression for image transfer
  • Use proper xfer protocols for fast-as-possible speeds
  • Batch network communication through the radio
  • Reduce page render-weight
  • Reduce image-resizs times by scaling down images for mobile
  • Batch reads/writes to the DOM
  • Move towards static-memory usage patterns
    • Know your growth rate
    • Know your max memory footprint
    • Preallocate