Sites de haute performance pour les tests de performances.

Commencé à lire “High Performance Web Sites” de Steve Souders. Un livre axé sur la connaissance essentielle concernant le web performance pour les ingénieurs logiciels front-end. De plus, je dirais que ce livre est une bonne option pour les Testeurs de Qualité et des Tests de Performances car souvent les améliorations du côté front sont négligées par les équipes de développement. Depuis maintenant plusieurs mois, en collaboration avec mes collègues, nous avons mené des processus de tests de performance qui incluent également l’analyse et la mise à niveau du front-end, ce processus étant réalisé en collaboration avec les développeurs, les Testeurs de Qualité et les Testeurs de Performances.

Le livre “High Performance Web Sites” présente 14 règles spécifiques à prendre en compte lors de la conception d’applications web, selon son auteur Steve Souders. Ces règles peuvent réduire le temps de réponse des applications de manière significative, jusqu’à 25% et même 50%. Pour l’auteur et son livre, Joe Hewitt, mieux connu pour ses travaux dans le débuggeur Firebug et la développement DOM Inspector, a dit :

Si tous les utilisateurs appliquent seulement la moitié des recommandations de Steve, le Web serait un endroit beaucoup meilleur. Avec ce livre et l’extension YSlow de Steve, il n’y a vraiment pas d’exemption pour avoir une page web lent.

De plus, le développeur de Fiddler Web Debugger, Eric Lawrence, a dit :

Steve Souders a fait un travail fantastique en convertissant une grande partie et une partie semi-secrets d’art en une série de pas à suivre concis qui changera le monde du web performant.

Implémentant ces règles est crucial pour accélérer les temps de réponse dans les applications Web. Voici ces règles ci-dessous, et nous montrerons ces règles avec des exemples réels dans les prochaines publications.

1.- Réduire les demandes HTTP #

Réduire les demandes HTTP est la technique essentielle pour optimiser votre site web. En réduisant le nombre de composants sur une page, vous réduit également le nombre de requêtes HTTP nécessaires pour représenter la page. Il existe plusieurs solutions comme la combinaison de JavaScript et CSS dans un seul fichier, l’utilisation d’images mappées ou des Sprites CSS, entre autres.

2.- Utilisez un CDN #

Une plateforme de distribution de contenu (CDN) est une méthode pour envoyer le contenu de votre site Web ou d’application mobile à vos utilisateurs plus rapidement et efficacement, en fonction de leur position géographique. Elle comprend des serveurs situés dans le monde entier qui fournissent un expérience web équitable pour ses utilisateurs. La proximité du client avec votre serveur Web a une incidence sur les temps de réponse. Implémenter votre contenu dans plusieurs serveurs dispersés géographiquement vous permettra d’améliorer la vitesse des pages.

3.- Ajoutez un header Expires #

Quand vous ajoutez un header Expires à des composants avec des dates futures, vous pouvez les stocker dans le cache, ce qui réduit la durée de chargement nécessaire pour vos pages. Cela devrait être fait avec les images, les scripts et les stylesheets. Il n’affecte pas la performance du site, même si la page est revue plus tard, réduisant les temps de réponse. Ces sont importantes pour réduire le nombre d’appels HTTP, ce qui réduit le temps nécessaire au serveur pour communiquer avec le navigateur. De plus, permet aux utilisateurs de recharger des fichiers cachés dans leurs navigateurs pour réduire le nombre de fichiers à télécharger.

Composants de Gzip #

Les applications actuelles implémentent généralement une forme de compression. La réduction du temps nécessaire pour répondre se fait en réduisant la taille des réponses HTTP. Compresser le plus grand nombre de types de fichiers possible est un moyen simple d’abaisser la charge de page et d’accélérer l’expérience utilisateur. Gzip est actuellement le méthode de compression la plus populaire et efficace disponible, généralement réduisant la taille des réponses environ 70%. Environ 90% du trafic Internet passe par les navigateurs qui prétendent être compatibles avec gzip.

5.- Place styles at the top #

Le auteur du livre spécifie que lors de l’investigation des performances web sur Yahoo!, ils ont découvert qu’en déplaçant les feuilles de style vers le HEAD, cela permettait aux pages d’être chargées plus rapidement. Cela est dû au fait que de placer les styles danspermet une rétrocession progressive, qui est particulièrement important pour les pages avec beaucoup de contenu et pour les utilisateurs ayant des connexions Internet plus lentes. Donner à l’utilisateur un feedback visuel, comme des indicateurs de progression, a été bien étudié et documenté. Lorsque le navigateur charge la page progressivement, le header, la barre de navigation, le logo au haut de la page, etc., servent d’informations visuelles aux utilisateurs qui attendent que la page soit chargée. Cela améliore l’expérience utilisateur globale.

6. Placez le script en bas. #

Placer les scripts à la fin des pages permet d’autres ressources de ne pas bloquer, tandis que le téléchargement d’un script, le navigateur ne commence aucune autre téléchargement même sur des noms de domaine différents. Si les scripts sont placés à la fin d’une page, ils seront chargés en dernier. En effet, l’contenu/structure (CSS, images, HTML) chargeront avant et montreront quelque chose dans le navigateur plus rapidement; les utilisateurs ne doivent pas attendre que le script soit terminé de télécharger avant d’être en mesure de voir quoi que ce soit sur l’application.

7.- Évitant les expressions CSS #

Les expressions CSS sont une façon puissante (et dangereuse) de définir des propriétés CSS dynamiquement. Ces expressions peuvent générer des milliers d’évaluations CSS inutiles. Ces expressions sont évaluées fréquemment : lors du rendu de la page et des changements de taille, lorsque nous utilisons le défilement sur la page, même lorsque le utilisateur se déplace sur la page. Les évaluations fréquentes dégradent l’expérience utilisateur.

8.- Création d’ fichiers JavaScript et CSS externes #

Utiliser des fichiers externes permet de rendre les pages plus rapides car le navigateur en stocke ces fichiers dans sa cache. Ces fichiers sont intégrés dans les documents HTML téléchargés chaque fois qu’une requête HTML est faite. Cela réduit la quantité d’HTTP nécessaire, mais augmente la taille du document HTML. De plus, si les fichiers JavaScript et CSS sont stockés externement dans la cache du navigateur, la taille du document HTML diminue sans augmenter la quantité d’HTTP requises.

9.- Réduire les recherches DNS #

Les recherches DNS ajoutent des retards à la demande initiale d’un hôte. Demander de multiples hôtes peut affecter le performance. Les recherches DNS ont un coût en termes de temps, généralement entre 20 et 120 millisecondes pour trouver l’adresse IP d’un nom de domaine. Le navigateur ne peut pas télécharger quoi que ce soit du hôte tant que la recherche n’est pas terminée.

10. Minifier JavaScript et CSS #

Supprimez les caractères inutiles de votre fichier JavaScript et CSS pour améliorer vos temps de chargement. La minification supprime des caractères non nécessaires d’un fichier pour réduire sa taille, améliorant ainsi le temps de chargement. Lorsqu’un fichier est minifié, les commentaires et espaces inutiles (espaces, nouvelles lignes, tabulations, etc.) sont supprimés. Cela améliore la réponse en réduisant la taille des fichiers téléchargés.

11. Évitez les Redirections #

N’ utilisez pas les redirections de URL, car cela ajoute des retards supplémentaires à la charge de chargement du site. Les redirections sont effectuées via les codes d’état HTTP 301 et 302, qui indiquent au navigateur qu’il doit se rendre à une autre destination. L’insertion d’une redirection entre le visiteur et le document HTML final reprend tout contenu sur la page, car aucun contenu ne peut être représenté avant que le document HTML arrive, et les composants ne peuvent pas être téléchargés jusqu’à ce moment.

12 - Supprimez les scripts d’origine multiples. #

Dupliquer le même fichier de script JavaScript deux fois sur une page est mauvais pour la performance. En effet et plus simplement, dupliquer le CSS et le JavaScript génère des requêtes supplémentaires et consomme du temps car ils seront évalués plusieurs fois.

13.- Configurer les ETags #

Ces identifiants uniques sont assignés à une version spécifique d’un ressource donnée sur un serveur web. Les ETags sont l’une des méthodes de validation utilisées par HTTP pour le stockage temporaire, ce qui permet aux clients de faire des demandes conditionnelles. Le problème avec les ETags est que ces identifiants ne correspondront pas lorsque le navigateur reçoit la partie originale d’un serveur et fait une demande conditionnelle GET à un autre serveur. C’est courant dans les sites utilisant une cluster sur le côté du serveur. Pour “des sites très actifs” avec plusieurs serveurs, les ETags peuvent empêcher de stocker identiquement des ressources dans la cache, ce qui dégrade la performance. Par conséquent, ils doivent être configurés correctement.

14. Effectuer des demandes Ajax Cacheables (Cacheable) #

Permettre aux demandes Ajax de se charger en cache peut éviter les retards inutiles. L’un des avantages de l’Ajax est que cela fournit instantanément une réponse à l’utilisateur car il demande asynchronement des informations du serveur web backend. Cependant, utiliser l’Ajax ne garantit pas que les utilisateurs ne resteront pas en attente pour les réponses asynchrones JavaScript et XML. Optimiser les réponses Ajax est important pour améliorer la performance, et rendre elles cacheables est le meilleur moyen d’y parvenir.

Conclusion #

Implementant ces règles fournira une amélioration exponentielle de la réponse et du niveau d’expérience utilisateur. Bien que cela soit vrai que beaucoup d’entre eux soient très faciles à mettre en œuvre et apportent des améliorations significatives dans le temps de réponse, d’autres peuvent conduire à des solutions un peu plus techniques qui finissent par être un peu coûteuses mais la recommandation ici est travailler en étroite collaboration avec tous les impliqués dans le développement logiciel : développeurs, infrastructures, architectes, gestionnaires de projets, même les designers UX.
Si vous êtes prêt à explorer ces sujets, ce livre sera un excellent allié car il enseigne chaque règle avec des exemples pratiques. Even for débutants a une excellente chapitre pour apprendre sur le protocole HTTP, l’un des connaissances fondamentales pour tous ceux impliqués dans cette branche.