La performance web est un sujet complexe. Lorsque nous discutons des performances web, nous pouvons aborder de nombreux sujets et nous plonger dans les détails de chacun d’entre eux. Cela peut être très déroutant. L’objectif de cet article est de garder de la hauteur. Vous obtiendrez une vue d’ensemble de ce qui importe sans trop entrer dans le détail pour comprendre ce qui détermine l’expérience utilisateur des applications et des sites Web. Nous limitons volontairement cet article à 5 facteurs clés qui comptent vraiment pour la performances web.
Essayons de rendre les choses plus faciles à comprendre : il y a 5 facteurs clés sur lesquels vous devez vous concentrer lorsque vous essayez d’optimiser les performances web de vos utilisateurs :
- Le profil de l’utilisateur
- Le contenu
- La performance des ressources
- Le chemin critique et performance combinée
- L’ hébergement des utilisateurs et des plates-formes
Paramètre #1 : le profil utilisateur
Votre profil d’utilisateur est un facteur clé de la performance de votre application web.
Votre application peut être hébergée de façon satisfaisante pour les utilisateurs situés dans une région donnée, et pas pour les autres. Elle peut être bien conçue pour les utilisateurs d’ordinateurs portables et non pour les appareils mobiles ou encore nécessiter trop de RAM pour d’autres. Elle peut être optimisée pour Chrome et non pour Firefox.
La première chose que vous devez savoir est :
- Localisation: où sont connectés les utilisateurs
- Connectivité: comment sont-ils connectés ? Par quel type de connexion (adsl, wifi, réseau gsm) et quels opérateurs ?
- Which device are they using? With which user agent (browser)?
- Dans quelle mesure sont-ils sensibles aux délais de réponse ? La culture et les coutumes peuvent également affecter leur sensibilité aux temps de réponse.
Paramètre #2 : le contenu fourni par votre application web
Vous devez comprendre CE QUE votre application fournit aux utilisateurs. Il peut s’agir d’un site ou d’une application à page unique. Tous les contenus sont importants, ils font partie du chargement initial de la page ou de la réponse à un appel ultérieur.
Vous devez, entre autres, suivre le poids du transfert de données nécessaire pour chacun d’entre eux : fichier HTML, CSS, scripts. Vous devez également comprendre dans quelle mesure ils sont correctement compressés.
l est également important de savoir quels sont ceux qui sont essentiels à une expérience utilisateur réussie.
Paramètre #3 : la performance des ressources
Chaque ressource a son propre attribut de performance ; selon l’endroit où elles sont hébergées et la façon avec laquelle elles sont référencées dans votre code HTML (voir la section sur le chemin critique ci-dessous), elles nécessitent une nouvelle résolution DNS, des connexions TCP et TLS ou non. Dans tous les cas, si elles ne sont pas mises en cache, elle nécessitent un traitement serveur, un transfert de données pour les traiter. Enfin, le navigateur doit les restituer.
Si elles résultent d’une action de l’utilisateur ou de l’exécution d’un script, il en sera de même par le biais d’un appel API.
Si elles résultent d’une action de l’utilisateur ou de l’exécution d’un script, il en sera de même par le biais d’un appel API.
Paramètre #4 : la performance combinée = le rendu du chemin critique
Toutes les ressources ne se comportent pas de la même manière si elles sont positionnées différemment dans le chemin de rendu (si vous n’êtes pas familier avec ce concept, nous vous recommandons cet article d’Ilya Grigorik). Dans certains cas, elles seront mises en attente pendant un certain temps, dans d’autres cas, elles nécessitent la mise en place d’une nouvelle session réseau, dans d’autres encore, ce ne sera pas le cas.
Vous devez considérer les performances de la page et des appels suivants comme un tout et non comme la somme des temps de réponse de toutes les ressources
- Contenu combiné
- Taille globale
- Nombre total d’éléments
- Nombre de fichiers CSS
- Chemin critique
- Gestion des scripts (head, body, defer, async)
- Eléments bloquant le fil principal ou non
- Moment d’apparition des éléments critiques pour l’utilisateur
- Sessions en réseau
- Nombre de résolutions DNS requises
- Nombre de sessions TCP requises
- Configuration des sessions TLS
- Choix du protocole de réseau
- Traitement parallèle ou mise en file d’attente (voir notre article sur HTTP/2 et HTTP/1.1)
Paramètre #5 : La localisation de l’utilisateur et l’hébergement de la plateforme
Il est évident que la latence du réseau aura une incidence sur le rendu de votre application (voir cet article pour en savoir plus), mais cette latence dépend de plusieurs facteurs :
- Connectivité utilisée par vos clients
- La « distance réseau » relative entre vos utilisateurs et les différents éléments de votre plateforme (pour comprendre les facteurs de latence, nous vous conseillons de lire cet article)
Tout dépend de l’adéquation de l’hébergement de vos ressources à vos utilisateurs : pour votre application, pour votre CDN (Cloud Delivery Network), ainsi que pour vos ressources tierces.
Quand vous envisagez cela, pensez à :
- Temps de résolution DNS
- Temps de connexion au réseau
- Spécificités régionales (comme pour la Russie, la Chine, le Brésil, l’Afrique, etc.).
C’est sur ces 5 paramètres que Kadiska apporte une visibilité instantanée. La semaine prochaine, nous verrons les principaux facteurs d’optimisation que vous pouvez utiliser pour ces 5 domaines.
