Les applications HTML5 sont réputées lentes. C’est effectivement souvent le cas. Pourtant ce n’est pas une fatalité. Avec quelques bons conseils et beaucoup de noeuds au cerveau, il est possible d’avoir des applications HTML5 réactives sur mobile.
Par « application réactive » on entend généralement que l’utilisateur doit avoir du feedback en moins d’une seconde :
Sauf que la plupart des applications utilisent des données provenant d’un serveur.
Et le réseau étant ce qu’il est, difficile d’avoir une application réactive. A vrai dire, si on enlève le temps réseau et serveur, vous n’avez que 200 millisecondes : 
Alors comment on fait?
Voici quelques conseils qui pourront peut-être vous aider…
Changez de framework pour un plus léger !
voir mon autre article à ce sujet si vous l’avez raté.
Méfiez vous de la hype !
Ah ! la magie de CSS3, c’est beau, on peut tout faire ! mais méfiez vous : les dégradés peuvent vous faire ramer, les box-shadow et les border-radius aussi, les flexbox aussi.
Malheureusement tout le monde n’a pas le dernier device à la mode.
Faites attention à vos modification du DOM
Chaque modification du DOM ou d’un style de votre page est couteuse. En effet, le navigateur « repeint » régulièrement votre page en fonction des modifications que vous y apportez. Pensez-y : parfois il vaut mieux par exemple construire une liste d’items en mémoire, hors du DOM, puis les injecter tous d’un coup.
Utilisez une sprite css pour toutes vos images
L’image une fois chargée sera en cache pour toute votre application, les icônes s’afficheront instantanément, ça donne un effet de vitesse indiscutable. Avec un peu de bidouille vous aurez une sprite pour chaque résolution de device.
Et puis il existe des générateurs de sprite.
Déchargez vos images
Sous iOS, les images ne sont pas déchargées de la mémoire du navigateur quand elles sont hors de la zone visible de l’écran. Si vous avez des tonnes d’images, vous pouvez remplacer les sources des images invisibles par un pixel vide, afin de soulager le navigateur. Voir l’article de linkedin sur son fil d’actu HTML5.
Utilisez vanillaJS
Non ce n’est pas un autre framework javascript ! C’est juste du vent. Pour nous rappeler que pour un petite application, rien de tel que le bon vieux javascript.
Utilisez des bouts de css inline
Dans ces slides, Patrick Hamann conseille cette technique pour afficher le début de la page, pendant que le reste se charge.
Après tout, pourquoi pas. Parfois, entre « application qui rame » et « application réactive » il n’y a pas grand chose. C’est aussi de sa présentation que viennent une partie des images plus haut.
Vérifez que vous utilisez bien vos frameworks
Dans ces vieux slides, Paul Irish nous rappelle à l’ordre à travers le temps. Car nous utilisons mal jQuery. Il est fort, Paul.
Aucun commentaire:
Enregistrer un commentaire