La plupart des développeurs front-end seront familiarisés avec au moins certaines des options disponibles pour améliorer les performances front-end. Les performances dans ce sens ne font pas référence à la vitesse à laquelle une page donnée se charge, mais plutôt à la fluidité et à la réactivité qu’elle ressent lorsqu'un utilisateur l’interagit. Un exemple spécifique serait le taux de trame d'un utilisateur lors du défilement de votre page d'accueil; si elle est constamment élevée, la performance est considérée comme bonne.
Il est possible que vous n'ayez pas déjà eu besoin de résoudre les problèmes de performances auparavant. Peut-être que vous n'avez pas travaillé sur un site qui a souffert de tels problèmes, ou peut-être que supprimer ce petit décalage ou récupérer ces images perdues n'est tout simplement pas au premier rang de vos priorités. Quoi qu'il en soit, avec le nombre croissant d'animations et de styles complexes intégrés aux sites Web modernes, associés à l'adaptation du design réactif, il y a de fortes chances que vous rencontriez des performances mobiles lentes à un moment donné. Cet article suggère quelques éléments à prendre en compte lorsque vous travaillez sur des sites Web et des applications Web qui doivent concilier complexité et performances lorsque vous utilisez des appareils mobiles moins puissants.
? Il fonctionne bien sur mon iPhone 5?
Est-ce vraiment? Eh bien c'est génial! Voici quelques statistiques récentes fournies par W3Schools (à ne pas confondre avec le W3C) qui illustrent les systèmes d'exploitation mobiles les plus actifs.
Évidemment, notre utilisation de ces données est limitée. Ce n'est que explicite sur deux systèmes d'exploitation; iOS et Android. Windows Phone, Blackberry et d’autres systèmes d’exploitation mobiles, encore moins populaires, restent ainsi à l’écart.
Nous pouvons constater que la part de marché d’Android est légèrement supérieure à celle d’iOS. Encore une fois, nous manquons ici de détails spécifiques tels que les numéros de version et les noms de périphériques, mais cela nous donne un bon départ pour déterminer où notre assistance est la plus nécessaire.
Non seulement Android détient la plus grande part de marché des périphériques actifs, il souffre également énormément de la fragmentation des périphériques. Des données récentes montrent qu'en 2013 seulement, 11 868 appareils Android distincts ont été repérés à l'état sauvage (sur un échantillon de 682 000 appareils). Sur ces appareils, huit versions différentes du système d’exploitation Android étaient utilisées.
Le fait est que pour évaluer les performances de votre site, vous devez effectuer des tests sur une gamme appropriée de périphériques. Les appareils ne peuvent être déterminés que par site Web et doivent être basés sur de vraies données sur les visiteurs (si vous en avez la possibilité) qui concernent votre public cible.
Dans un monde parfait, nos sites fonctionneraient de manière fluide sur chaque périphérique. En réalité, cela n’est pas possible en raison des contraintes de temps et de financement habituelles. C'est à vous de décider où tracer la ligne de démarcation et de choisir ce qui est acceptable.
Causes communes de mauvaise performance
Voici quelques points à prendre en compte lors du débogage de problèmes de performances sur les appareils mobiles.
1. Déclarations CSS grandes et complexes
Malgré toute la fantaisie que CSS3 apporte au monde du développement front-end, toutes ces nouvelles déclarations de style sophistiquées obligent nos processeurs à travailler plus dur que jamais. Juriy Zaytsev a écrit un excellent article sur le profilage et l'optimisation CSS qui couvre tout cela, mais il est à noter que cet article a été publié en janvier 2012.
Le profileur utilisé par Juriy est le Profiler d’Opera Dragonfly, mais vous pouvez désormais profiler vos styles plus facilement avec Chrome DevTools en visitant simplement Profils dans la liste des outils de navigation de DevTools et en sélectionnant votre option préférée.
Pour voir les effets de CSS par vous-même, lancez un outil volumineux dans le Profiler de DevTools (si vous en avez le temps, décrivez également vos temps de peinture) et vous verrez les problèmes de performances dont je parle. Jetons un coup d'oeil à un exemple.
«Je peux exécuter Battlefield 3 sur des paramètres ultra (une très grande image), mais la page d’accueil du Green Man Festival défile à 24 ips. Quoi de neuf avec ça ??
Quoi de neuf avec ça?
Aussi beau que soit le site, les développeurs ont dû sacrifier un peu les performances pour obtenir l’aspect visuel recherché. La perte de performance est faible. Toutefois, si un site de ce type peut ralentir les performances sur un ordinateur de bureau puissant, à quoi pouvons-nous nous attendre sur un téléphone portable fonctionnant sur un processeur 1Ghz?
Bien entendu, la plupart des sites dotés de fonctions de bureau sophistiquées offrent, à juste titre, une expérience plus simplifiée s’ils sont visualisés sur des appareils mobiles.
Dans le cas de Green Man, les navigateurs mobiles auront des images plus petites à gérer, des animations simplifiées moins nombreuses ou plus nombreuses et une quantité réduite de contenu dynamique. En conséquence, il défile parfaitement et a fière allure.
Si votre site Web est lent sur mobile, la première chose à examiner est votre déclaration CSS. Pour ce qui est de rechercher les coupables, les combinaisons d'ombre de texte, d'ombre de la boîte, de rayon de bordure, de dégradés, de transparence et d'autres propriétés similaires couvrant plusieurs éléments d'une page peuvent augmenter le nombre de repeints que le navigateur doit effectuer. Il en résulte que l’interface utilisateur de votre site Web semble lente et ne répond pas. Ces repeints seront certainement plus apparents sur mobile.
C'est à vous de déterminer quels styles vous souhaitez conserver et quels styles vous pouvez facilement abandonner. Tout se résume à savoir si l’augmentation des performances est suffisante pour justifier une légère simplification des styles visuels. Plus souvent qu'autrement, le fait de supprimer des déclarations lourdes en performances peut favoriser l'expérience globale que vos utilisateurs recevront.
2. Animations JavaScript complexes
jQuery est maintenant une bibliothèque standard utilisée par de nombreux développeurs qui souhaitent intégrer l'animation dans leurs conceptions. La principale raison en est qu'il est si facile à utiliser. Vous n'avez pas vraiment besoin de connaître JavaScript pour utiliser jQuery. Bien sûr, il est facile de comprendre pourquoi cela peut entraîner des problèmes.Un mauvais JavaScript peut être une cause d'animations irrégulières. C'est pourquoi il est important de vous assurer que vos scripts sont optimisés au maximum.
Si JavaScript ne vous laisse pas les résultats escomptés, vous pouvez vous tourner vers les transformations CSS 3D, dont la prise en charge est déjà très bonne sur le marché de la téléphonie mobile.
L'utilisation de transformations 3D permet des transitions en douceur, pas toujours compatibles avec des bibliothèques telles que jQuery. Pourquoi? Parce qu'ils vous permettent de déclencher un rendu accéléré par le matériel qui, bien que n'étant pas une solution magique pour tous vos problèmes d'animation, peut être utilisé efficacement dans certains scénarios. Consultez cette démo de comparaison pour voir à quel point les performances peuvent différer entre les deux.
Pour ceux qui n'ont jamais utilisé de transformations 3D auparavant, examinons un exemple de code pour vous aider à démarrer. Voici quelques CSS de base que vous pourriez utiliser pour animer la position verticale d’un élément en survol.
Exemple CSS
J'ai mis en place une démonstration en direct sur CSSDesk avec tous les préfixes de fournisseur inclus. Veuillez noter que certains préfixes peuvent ne plus être nécessaires au moment où vous lisez ceci. Si vous avez le temps, le blog de dev de Flickr contient une excellente étude de cas sur ce sujet et mérite une lecture.
3. Amélioration progressive Vs. Dégradation progressive
Ici nous avons deux? Pas si nouveau? termes (l’amélioration progressive célèbre son 10e anniversaire, après avoir été inventé en 2003) et sont toujours aussi pertinents aujourd’hui. Les deux concepts sont particulièrement pertinents lors du développement de sites Web réactifs et, étant donné que le nombre d'appareils et de systèmes d'exploitation disponibles continue d'augmenter, l'amélioration progressive en particulier constituera un impératif pour de nombreux projets.
Ne sont-ils pas tous les deux la même chose?
Presque. La différence clé ici réside dans l’ordre dans lequel vous abordez votre conception. La planification des fonctionnalités pour fonctionner sur tous les périphériques, puis l'ajout de quelques brillants à ceux qui peuvent le gérer, est un exemple d'amélioration progressive. Créer une fonction spéciale avec JavaScript uniquement et continuer à viser un alternative à la fin; dégradation progressive.
Quelle méthode devriez-vous employer? D'après mon expérience, l'amélioration progressive aboutit presque toujours à une solution meilleure et plus propre. Chris Heilmann a écrit un très bon résumé à ce sujet, qui se trouve maintenant à Web Platform Docs.
Et ensuite?
Les idées présentées dans cet article sont basiques, mais elles vous aideront à trouver la cause des performances médiocres.
Si vous voulez en savoir plus, le meilleur endroit pour commencer serait d’apprendre les rouages du fonctionnement d’un navigateur Web au niveau technique. Après tout, c'est le navigateur qui analyse le code que vous écrivez. Si vous pouvez comprendre ce dont vous avez besoin pour pouvoir exécuter votre site correctement, vous pourrez factoriser votre code pour qu'il fonctionne avec.
Fonctionnement des navigateurs: Dans les coulisses des navigateurs Web modernes, vous trouverez un article fantastique et complet qui aborde de nombreux détails à ce sujet. Bonne chance!