Le mobile first est l’héritier de la pensée « amélioration progressive » : délivrons très rapidement la promesse initiale, chargeons les fonctionnalité supplémentaires après et en fonction des capacités du client. Cela oblige à se poser la vraie question : quelles sont les priorités de chaque page ?
Cela s’intègre parfaitement avec un processus de conception moderne où designer et intégrateur web passent pas mal de temps l’un à côté de l’autre pour fignoler les maquettes sur les mobiles.
Après avoir fait du JavaScript lors du dernier cours, on passe à quelque chose de plus léger avec les performances web. Vaste sujet. J’ai donné les grands principes lors du premier cours sur le web mobile et je leur ai demandé de venir avec un site d’exemple à analyser. J’ai pour ma part choisi celui de Bertrand Billard car il y a presque tous les éléments réunis pour montrer ce qu’il ne faut pas faire (à moins que vous ne souhaitiez faire subir un ironman à votre navigateur, huhu).
Premier outil indispensable, l’onglet réseau des outils du navigateur. Il permet de voir tout ce qu’il se passe pour votre configuration. (Mal)heureusement, beaucoup de vos utilisateurs n’ont pas la chance d’avoir une machine/connexion aussi performante (cache). Second outil, WebPageTest qui donne d’autres informations et qui permet de choisir le navigateur et la connexion.
Ces deux outils devraient suffire à alimenter la discussion pour un cours de 4 heures. Il sera question de compression, de workflows, de mesures, de minification, de chemin critique, de latence, de polices, de requêtes tierces, d’expérience utilisateur, de bande passante, de cache, de sprites, de rendu, de stratégie, etc. Ce sera l’occasion de leur présenter le livre d’Éric sur la performance web qui donne les directives suivantes :
- Réduire le nombre de requêtes HTTP
- Réduire le poids des composants
- Améliorer la parallélisation des téléchargements
- Améliorer le ressenti utilisateur
- Améliorer l’applicatif et les temps de traitement
On terminera peut-être avec quelques outils comme lazyload, picturefill, fastclick ou instantclick que j’ai mis en place sur ce site. Mais je ne veux pas non plus tomber dans la micro-optimisation, il s’agit plutôt de connaître les grands principes ET surtout de les appliquer.
