When we speak about mobile-first, we usually forget to mention performance.
This comes from a misunderstanding of mobile networks restrictions and mobile power.

Nevertheless, mobile performance is crucial: 71% of mobile users expect a web page to load at least as fast on mobile as on computer (versus 58% in 2009) and 46% consider that websites usually are slower on mobile than on computer.
60% of mobile users think that a web page should load in less than 3 seconds on a mobile.
So how can we improve performance and go beyond the constraints of a mobile world?

In mobile strategy, “Less is more” is the key!
In the same way it’s important to shrink our message to essentials, it’s important to manage additions of secondary elements on a web page: fonts, analytics tracking, A/B test, advertising and social widgets. In fact, each of these elements will have a cost in terms of performance.
Please find herewith three contents on mobile performance that has been greatly inspiring in my performance race:

Breaking the 1000ms ‘Time to Glass’ Mobile Barrier

Présentation d’Ilya Grigorik This presentation from Ilya Grigorik reminds you the fundamental constraints in terms of mobile network and critical path rendering of the page. Ilya Grigorik is a web performance guru at Google and talk about these topics in many conferences.


Web on mobile and performance

(French article, 20min)

Le web mobile et la performance Jean Pierre Vincent lists a couple of recommendations to apply to its mobile website. The second part, about “technical arsenal”, is particularly interesting. He writes about the concept of “less is more”, fonts loading, impact of third-party scripts and differences in caches.


Performance audit: Loading performance

(Github note, 10min)

Billet Github de Paul Irish Paul Irish (expert at Google) details in this post its performance audit of Reddit mobile website. He introduces many tools to track down javascript, memory and network issues. This shows the current complexity of mobile websites and the expertise to get good performance.

According to me, these are my 3 favorite mobile optimizations (the ones that usually have the most benefits):

  1. Image optimizations: I mean compression and resizing images depending on the device,
  2. Critical CSS inlining to reduce the critical path,
  3. and last but not least : Defer JS and lazyloading.

I hope these elements will help you in your mobile performance (specially in this end of the year!).
Feel free to give feedbacks with the comments below!

Anthony Barre.


Read also:

Hello SMX Paris !