Web performance, concevoir pour les connexions faibles et les appareils lents

La web performance ou la vitesse perçue de chargement perçu un site web sont des indicateurs très suivis en e-commerce. Ils ont une incidence directe sur le taux de rebond (personne qui part du site sans le consulter) et l’expérience d’usage. Comment s’assurer de la qualité de sa web performance ?

Sommaire

• La web performance, qu'est-ce que c'est ?
• Comment améliorer la web performance ?
• Temps de connection
• Traitement serveur
• Affichage et ressources
• Optimiser et prioriser le chargement des éléments de la page
• Réduire le poids des images
• Afficher les chargements
• Mesurer la web performance
• Water fall
• Les indicateurs Core Vitals

La web performance, qu'est-ce que c'est ?

En premier lieu, c’est la perception de rapidité d’un site web lorsque je lui demande une action : afficher une page ou ouvrir une modale.
Cette dernière devant de plusieurs facteurs : la rapidité de l’appareil, la quantité du réseau (wifi, 4g, 3g), la complexité de la page, son poids, le nombre de requêtes et le temps de traitement du ou des serveurs.

Comment améliorer la web performance ?

Pour améliorer cette chaîne, il faut s’intéresser à chaque maillon. Quelles sont les étapes de la demande à l'affichage de ma page web ?

Si je souhaite afficher le site de ma ville, je vais saisir son adresse dans la barre de mon navigateur : ville-de-dieppe.fr. ma requête s'en va trouver le serveur avec lequel est hébergé le site de ma ville disons le serveur Ovh 34.45.24.88 à Gravelines.

Ce dernier va m'envoyer constituer document rempli de balise appelé Html avec ces bases de données (comme la liste des dernières actualités).

Une fois réceptionné, mon navigateur va chercher chaque ressource de ma page comme les images, les vidéos et police d'écriture ou les scripts pour rendre ma page interactive.

Temps de connection

Sélectionner un serveur proche de mon audience est un point à ne pas manqué, cela permet de réduire la latence. Si mon serveur est à Hong-Kong, tous mes usagers vont devoir établir une connection avec un serveur lointain. Cela va avoir pour conséquence de passer par plusieurs intermédiaire et d’augmenter le risque que des packet de donnée transfert soit perdu et ralentisse le temps perçu de chargement.

Poids des requêtes

Une requête Http est une demande adressé à un serveur pour obtenir une page ou une information. Elle contient l'adresse ip, le navigateur, sa version, sa langue, des préférence sur le suivi (GPC), la demande de ressource et les cookies rattachés au domaine. Ce dernier element peuvent contenir de nombreuses données et dépasse parfois le méga octet. Avec votre navigateur, après plusieurs sessions, vous pouvez inspecter les cookies et leurs poids dans stockage / cookies.

Traitement serveur

Le serveur est chargé de constituer et restituer une page html. Pour ce faire elle dispose souvent de base de données, ce sont des tableaux d'information comme la liste des articles de blog, la liste des utilisateurs et leur préférences ou les produits d'une boutique. Ces dernières peuvent-être complexe si ma boutique à plus de 20k références.

Pour s’assurer de sa rapidité d'exécution, il faut choisir un serveur performant avec des disque solide rapide. Il faut également réduire et optimiser sa base de donnée : effacer les lignes obsoletes, et mettre en mémoire (en cache) les résultats de recherche fréquent pour limiter les calcules redondants.

Affichage et ressources

Limiter le nombre de serveurs à appeler Réduire le poids des ressources Simplifier la page web (DOM) et limiter le nombre de calculs serveur (sobriété, cache)

Limiter et optimiser les javascripts

Un fichier javascript sert à ajouter de l’interaction dans les pages web : ouvrir une modale, afficher une carte afficher des diagrammes interactifs. Ces scripts on une pars très importante dans la perception du chargement d'une page web. Ils ont besoin d'être téléchargés, parcours et exécutés.

Leurs utilisations et très présente : script d'analyse d'audience, technologie de génération de page, fil d'actualités infini... Les sites en sont devenu très lourd et complexe. Limiter l'usage de ce dernier est possible et souhaitable.

• Utiliser des composants natifs. De nombreux éléments interactifs natif au Html5 existe comme l'accordéon, la modale ou la liste déroulante. Les utiliser, réduit la complexité et leurs réactivités Voir le projet de composant natif Dragon.css
• Réduire la liste d'outils analytics et de librairies JavaScript
• Ne pas utiliser de technologie de génération de site javascript coté utilisateur(client side rendering) comme Next, React, Angular ou Vue. Elles sont souvent des phénomènes de mode, leurs recours à de nombreuses bibliothèques de code et leur re-génération sur l'appareil de l'utilisateur portent préjudice à la rapidité d'une site web. C'est d'ailleurs pour cela que Netflix à décider de se séparer de React sur ces pages d'attérisages.
• Optimiser le chargement et l’exécution du javascript (et de certaines autres ressources) :

Attribut	Usage	Schéma
rel="preload"	Charger les ressources essentielles, comme la police d'affichage
async	Télécharger les scripts en arrière-plan et l’exécuter pendant le chargement de la page : Script externe comme ceux d'analyses d'audiences
defer	Exécuter le script après le changement de la page. Pour les fonctionnalités occasionnelles.
rel="prefetch"	Charger des ressources pour la page suivante.
rel="preconnect"	Se pré-connecter au serveur qui détiens des ressources de la page

Optimiser et prioriser le chargement des éléments de la page

Pour anticiper les décalages de la mise en page liée au chargement des images utiliser les propriétés css ratio : style="aspect-ratio: 16 / 9;"

Pour optimiser le chargement de la ressources principale au dessus le la ligne de flottaison placer l'attribut fetchpriority="high" dans la balise de l'élément.

Minifier les fichiers de style (Css) et JavaScript (Js) en enlevent les commentaires, retours à la ligne et les espaces. Avec des outils comme Minifier org ces fichiers peuvent perdre du poids en embarquant les mêmes fonctionnalités.

Utiliser le chargement paresseux avec l'attribut loading="lazy" pour toutes les images et les contenus embarqués en dessous de la ligne de flottaison.

Réduire le poids des images

Le format adapté

Choisir un format d'image c'est choisir l'algorithme qui simplifiera l'image pour enregistrer le plus petit fichier possible avec la meilleures qualité possible. Dans cette discipline, 2 formats sortent du lot : le WebP et l'Avif. Compresser des images en ligne

Le niveau de compression adapté

Choisir ça compression dépends de notre priorité. Si elle est de mettre en avant les détails des photos comme un site de joaillier ou de photographe la compression doit être légère, entre 95% et 80%. En revanche, si notre site n'as pas d'exigences quant aux rendus des images, une compression entre 80% et 70% et adéquat.

Afficher les chargements

certain temps de chargement sont incompressible. Dans ces cas de figures, il faut adopter le bon indicateur de chargement pour ne pas donner l'impression que le système est arrêté :

• 

  Chargements des données

  Le spinner

  Chargement dont la durée n’est pas connue.

• Téléversement des fichiers

  La barre de progression

  Chargement dont la durée ou la progression est connue.
• Le skeleton

  Chargement dont la mise en page est connue

Pour signaler aux synthèses vocales le temps de chargement d'une partie de la page il faut ajouter l'attribut aria-busy="true"

Mesurer la web performance

Water fall

Le "Water fall" ou "chute d'eau" en français est un graphique chronologique mettant en avant l'ordre et la durée dew chargements de l'ensemble des ressources d'une page web. On peut l'afficher depuis notre navigateur internet ou avec des outils en ligne comme Web Page Test.

Repérer les requêtes problématiques

• Les longues
• Les lourdes
• Les redondantes
• Les inabouties
• Les bloquantes

En bas du "Water fall" le navigateur affiche différentes données :

• Le nombre de requêtes. il doit essayer d'être en dessous de 40 avec moins de 5 serveurs différents
• Le poids total de la page, cibler en dessous de 1Mo.
• Le temps de chargment global, devrait être en dessous de 3,3s et le temps de chargement du Dom.
• Pour obtenir le nombre d'éléments du Dom, le nombre nombre de balise de notre page, il faut saisir cette entré document.getElementsByTagName('*').length dans la console du navigateur. Il faut dans l'idéale en avoir en dessous de 600.

Les indicateurs Core Vitals

Établissent par Google, ces métrics offrent différentes lecture de la perception du chargement par les usagers. Pour obtenir un score pour une page donnée, l'outil officiel Page Speed permet de les calculer et de suggérer des pistes d’amélioration si nécessaire. Pour suivre les évolutions les évolutions de ces indicateurs dans le temps, l'outil Rumvision History propose une visualisation des 6 derniers mois.

Métrics de chargements

• Indice de vitesse (SI)
  Compare l'indice de vitesse de votre page à celui de sites Web réels
• Chargement du premier élément (FCP)
  mesure le temps nécessaire au navigateur pour afficher le premier contenu du DOM après qu'un utilisateur a accédé à votre page.
• Chargement du Hero (LCP) Mesure le moment où le plus grand élément de contenu de la fenêtre d'affichage est affiché à l'écran.

Métrics d'expérience de temps de chargement

• Temps de réactivité (INP)
  Durée totale pendant laquelle une page est bloquée pour répondre à un clics utilisateur ou les appuis au clavier.
• Changement de mise en page (CLS)
  Mesure les décalages de la mise en page durant l’affichage de la mise en page

Retour aux articles Publier un commentaire