Avec l’utilisation croissante des périphériques nomades, la fluidité d’utilisation devient une problématique critique. La performance web est une des composantes de cette fluidité.
Les sites ont plus de fonctionnalités qu’auparavant, à tel point qu’un haut niveau de performance est difficile à atteindre pour bon nombre d’entre eux.
Les conséquences varient : de petits retards, qui ne sont que brièvement ennuyeux pour les utilisateurs, jusqu’à l’indisponibilité totale d’un site.
La performance web peut être définie par la vitesse de chargement et d’affichage d’un site internet. C’est un sujet aussi vaste que passionnant, que nous allons analyser en partie dans cette série d’articles.
Regardons ensemble pourquoi il est primordial de surveiller de près les performances de son site web et intéressons-nous aux solutions qui s’offrent à nous.
Quelques statistiques
Aujourd’hui, il faut environ 10 secondes pour charger entièrement un site web sur un ordinateur et près de 22 secondes sur un mobile.
Une des raisons de l’augmentation constante du temps de chargement est certainement le poids des sites web qui ne cesse d’augmenter.
La plateforme httparchive.org met à disposition des statistiques sur l’évolution du poids médian des pages web, qui, comme nous pouvons le constater, augmente avec le temps.
Le poids moyen d’un site web est actuellement de 2.39 Mb. À titre de comparaison, ce poids dépasse à présent celui d’un jeu vidéo de 1993, Doom.
Le nombre de requêtes médian au chargement d’un site web sur mobile s’est également envolé de plus de 300% en 9 ans, soit 69 requêtes au 1er mars 2019.
Pourquoi améliorer les performances ?
La performance web joue un rôle majeur dans le succès de toute entreprise en ligne, elle engendre la fidélisation des utilisateurs.
Nous souhaitons que les utilisateurs interagissent de manière significative avec ce que nous construisons.
S’il s’agit d’une boutique en ligne, nous voulons qu’ils effectuent des achats.
Si c’est un réseau social, nous souhaitons qu’ils échangent les uns avec les autres.
Voici quelques études de cas fournies par Google qui expliquent la manière dont les sites à forte affluence engagent et retiennent l’utilisateur plus longtemps grâce à l’optimisation des performances.
- Pinterest a augmenté son taux d’inscription de 15 % lorsqu’il a réduit de 40% le temps d’attente perçu. (Rétrospective)
- La BBC a constaté que, durant le chargement de leur site, ils perdaient 10% d’utilisateurs par seconde supplémentaire d’attente.
- Google Analytics a observé que 53% des visites de sites mobiles étaient abandonnées si une page mettait plus de 3 secondes à charger.
Par ailleurs, la performance web est prise en compte dans le référencement. En effet, les moteurs de recherche se basent en partie sur la rapidité des sites ainsi que sur leur stabilité pour établir un classement. C’est donc un facteur différenciant par rapport à la concurrence.
Il faut également surveiller l’impact sur la batterie des appareils nomades. Il existe effectivement des sites qui consomment bien plus de batteries que d’autres.
Ces sites web proposent des fonctionnalités utiles mais consommatrices de batterie qui pourraient être optimisées grâce à l’API BatteryManager par exemple :
- Personnaliser la précision de la géolocalisation en cas de batterie faible
- Sur batterie, télécharger les flux vidéos et images en qualités inférieurs par défaut
- Réduire les animations CSS
- Augmenter l’intervalle de temps pour les taches en arrière-plan
- Éviter les tâches faisant appel à la carte graphique comme les vidéos et les cartes interactives.
Les sites web performants réduisent également les disparités économiques. En effet, un écart croissant existe entre ce qu’un appareil haut de gamme et un appareil bas de gamme peuvent gérer, créant ainsi une grande différence dans l’accès aux contenus en fonction de la classe économique des internautes.
L’optimisation des performances et une meilleure gestion des ressources permettent également d’utiliser moins de ressources et donc de diminuer les coûts financiers en ressources serveurs.
On constate alors qu’il y a de nombreux critères importants à prendre en compte lors de la conception d’un site.
Pourquoi les sites web sont-ils aussi longs à charger ?
Comme vu précédemment, il y a plusieurs dimensions à la performance web, et le temps de chargement est l’une de ses composantes.
La fluidité des animations, du scroll, le temps de réaction lorsque l’on écrit dans un input, sont des critères importants qui doivent être pris en compte.
Le temps de chargement croissant peut en partie s’expliquer par l’utilisation grandissante du JavaScript afin d’animer un site, le rendre dynamique sans recharger la page, ajouter des traqueurs, de la publicité et plus encore.
Les pages web effectuent de plus en plus de calculs du côté client, ce qui se traduit souvent par des saccades lors du scroll, une utilisation de la batterie excessive et l’augmentation du bruit des ventilateurs d’un ordinateur.
L’accroissement du poids des images fait également partie des responsables, directement lié aux tailles et résolutions d’écrans qui évoluent elles aussi.
Devrait-on arrêter d’utiliser JavaScript ?
Et se mettre à développer des sites comme motherfuckingwebsite.com ?
Non. Le JavaScript reste un bon moyen d’améliorer les pages web, mais il est parfois utilisé en excès. Vous pouvez d’ailleurs le désactiver directement dans votre navigateur pour constater que l’expérience globale sur le web ne sera pas aussi bonne. Le JavaScript longtemps exploité pour animer des pages et ajouter de l’intelligence côté client est désormais au centre des applications modernes et difficilement désactivable au risque de fortement altérer l’expérience utilisateur lors de sa visite.
Des outils pour nous aider
La majorité des navigateurs offrent des outils pour nous aider à concevoir des applications web rapides et performantes. Chromium, le navigateur à la base de Chrome, Brave, récemment Edge et bien d’autres, propose des outils d’audit, notamment grâce aux onglets Performance et Audit dans le panel d’outils pour développeurs. Ces outils peuvent nous aider à concevoir des applications plus rapides et légères.
Mais attention aux audits en local, leurs résultats, en particulier sur les performances, sont fortement liés à la machine sur laquelle vont être exécutés les tests, à la stabilité du réseau, si l’ordinateur est en faible pourcentage de batterie ou encore s’il est en surchauffe.
De nombreuses plateformes se sont lancées sur le marché des audits de performance. Nous pouvons conseiller GTmetrix qui génère un rapport complet et donne des conseils pour améliorer le score généré ou encore PageSpeed Insights développé par Google, l’équivalent de l’onglet Audit de Chromium directement en ligne qui pourra fournir un résultat stable dans le temps, indépendant de l’appareil depuis lequel l’audit est effectué.
Les tendances évoluent
Les pages web dynamiques ont longtemps été calculées côté serveur, en particulier avec PHP. Elles sont maintenant majoritairement calculées du côté client pour les applications modernes et nous assistons désormais à la démocratisation du SSR, pour Server Side Rendering, qui promet un premier chargement ultra rapide sans délaisser le côté dynamique de l’application grâce à des outils comme Next.js, Nuxt.js, Sapper, etc.
2017 a été l’année du dépassement : les internautes surfent de plus en plus sur les appareils nomades et délaissent les ordinateurs. Il est donc important pour les entreprises d’offrir un site web performant et pensé pour le mobile avec toutes les contraintes qui en découlent.
Svelte.js est également à surveiller. Concurrent entre autres de React.js, Vue.js et Angular, Il n’utilise pas de virtual DOM mais fait de la compilation de JavaScript afin de déplacer vers le compilateur tous les calculs et la logique qui n’ont pas besoin d’être résolus côté client. En comparaison, React nous permet d’écrire un code piloté par l’état et qui est converti par le navigateur en code JavaScript idéal. Cela peut ralentir le site, car la plupart des opérations se font dans le navigateur alors que Svelte.js convertit le code en code JavaScript idéal au moment de la compilation plutôt que lors de son exécution.
AMP (Accelerated Mobile Pages) a pour objectif de fluidifier la navigation web sur mobile en accentuant significativement la vitesse de chargement des pages web par le téléchargement prioritaire des contenus textuels. L’intégration par Google de la technologie AMP est une réponse au développement des recherches web sur mobile. Les pages mobiles accélérées sont simplifiées, moins lourdes et permettent ainsi d’améliorer l’expérience utilisateur lors de recherches sur un navigateur web.
Et la planète dans tout ça ? Notre société se tourne de plus en plus vers le développement durable et marque un désir de réduire les émissions de CO2. On voit alors émerger le mouvement Green It, défendant le numérique responsable. Il a été montré que l’empreinte environnementale du réseau est considérable. Selon Frédéric Bordage, dans son livre Éco-conception web, les 115 bonnes pratiques, chaque internaute émettrait en moyenne 200 kg de gaz à effet de serre et consommerait 350 kWh d’énergie et 3 000 litres d’eau par an. Ce livre est un bon moyen de faire de l’éco-conception web tout en ayant l’amélioration des performances comme objectif.
La performance web inclut donc aussi bien des enjeux techniques, sociaux et environnementaux. Elle sert l’expérience utilisateur et contribue à l’essor des sites web.
Dans de futurs articles, nous placerons la technique au coeur de notre étude en l’illustrant par un cas concret.