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.

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

Le Early Hint ou comment précharger les assets d’u... Peut-être avez-vous déjà entendu parler du Early Hint ? Ou peut-être du code HTTP 103 ? Cette fonctionnalité, en cours de standardisation pa...
Traffic Limiter : pour activer le système de déles... En période de soldes ou pendant le Black Friday / Cyber Monday, une page de débordement - ou système de délestage - permet de définir un nom...
Les sites qui semblent s’être préparés et ceux qui... Dans le premier volet de notre dossier spécial soldes 2019, nous avons dressé un état des lieux de la vitesse de chargement des sites du sec...
Etat des lieux de la web performance des retailers Le 1er jour des soldes, Fasterize a inévitablement enregistré un trafic record. Cela-dit, alors que certains sites e-commerce ont enregistré...