Aller au contenu

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

8 juillet 2024 · 8 min

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 ?

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.

schema de la web performance

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.

schema de l'optimisation de la web performance

Temps de connection

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

Traitement serveur

Le serveur est chargé de constituer et restitier une page html. Pour ce faire elle dispose souvant de base de données, ce sont des tableux d'information comme la liste des articles de blog, la liste des utiliseurs 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'assuer 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 obsletes, et mettre en mémoire les résultat de recherche fréquent pour limiter les calcules redondnat.

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'interation 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 utilistions 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.

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 proprités css ratio : style="aspect-ratio: 16 / 9;"

Pour optimiser le chargement de la ressources prinicipale au dessus le la ligne de flotaison 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 abarquant les mêmes fonctionnalités.

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

Réduire le poids des images

Le format adapté

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

Le niveau de compression adapté

La compression est optimale de 95% à 70%

Choisir ça compression dépends de notre priorité. Si elle est de mettre en avant les détails des photos comme un site de joillier ou de photographe la compression doit être légère, entre 95% et 80%. En revenche 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 incomprésible. 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é :

  • Le spinner

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

  • 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 sythè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.

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

Établient par Google, ces métrics offrent différentes lecture de la perception du chargement par les usagers. Pour optenir un score pour une page donnée, l'outil officiel Page Speed permet de les calculers et de sugèrer des pistes d'améloiration si nécessaire.

Métrics de chargments

  • 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

Entre 25 et 2500 caractères