mobilefirst

En terme de stratégie mobile-first, la performance est souvent un point qui est peu ou pas abordé. Cela vient souvent d’une mauvaise compréhension des contraintes apportées par les réseaux mobiles et la puissance des téléphones.

Pourtant la performance mobile est primordiale : 71% des mobinautes s’attendent à ce qu’une page web se charge au moins aussi rapidement sur mobile que sur ordinateur (contre 58% en 2009) et 46% estiment que les sites se chargent généralement plus lentement sur mobile que sur ordinateur.
Pour 60% des mobinautes, une page web doit se charger en moins de 3 secondes sur un mobile.
Alors comment gagner en performance et dépasser ces contraintes ?

En stratégie mobile, la loi du “Less is more” est la clé !
De la même manière qu’il est primordial de réduire son message à l’essentiel sur les pages mobiles, il est impératif d’arbitrer l’ajout d’éléments secondaires sur une page : font, tracking analytics, A/B testing, publicité et boutons sociaux. Chacun de ces éléments va avoir un coût en terme de performance.
J’ai préparé pour vous trois contenus complémentaires sur la performance mobile qui m’ont inspiré dans ma course à la performance :

Breaking the 1000ms ‘Time to Glass’ Mobile Barrier

Présentation d’Ilya Grigorik Cette présentation d’Ilya Grigorik rappelle les fondamentaux en terme de contrainte réseau mobile et de chemin critique de rendu de la page. Ilya Grigorik est un expert webperf de chez Google qui intervient sur ce sujet dans de nombreuses conférences.
En savoir plus >>

 

Le web mobile et la performance

(article, 20min)

Le web mobile et la performance Jean Pierre Vincent a listé un ensemble de recommandations techniques à appliquer à son site mobile. La seconde partie sur “l’arsenal technique” est particulièrement intéressante. Il aborde la notion de “Less is more”, de chargements des fonts, de l’impact des scripts tiers ainsi que des différents caches.
En savoir plus >>

 

Perf audit: Loading performance

(billet Github, 10min)

Billet Github de Paul Irish Paul Irish (expert chez Google) a détaillé dans ce billet son audit performance du site mobile de Reddit. Il présente de nombreux outils qui lui permettent de traquer des problèmes javascript, mémoires et réseaux. Cela démontre la complexité actuelle des sites mobiles et l’expertise nécessaire pour obtenir de bonnes performances.
En savoir plus >>

Pour ma part voici mes 3 optimisations mobiles préférées (celles qui, selon moi, ont généralement le plus de bénéfices) :

  1. l’optimisation des images : par là j’entends la compression et le redimensionnement des images en fonction du device,
  2. l’inlining du CSS critique pour raccourcir le chemin critique,
  3. et pour finir, les classiques mais efficaces DeferJS et lazyloading.

J’espère que ces quelques éléments vous permettront de mieux aborder la performance mobile pour cette fin d’année souvent chargée en trafic.
N’hésitez pas à réagir via les commentaires ci-dessous !

Anthony Barre.