🖊️ 🐾 💂🏼 Quelles sont les performances des applications Web? 🥒 ♋️ 🐲

Certaines applications se chargent rapidement, d'autres lentement, mais à cause de ce qui se passe? La vitesse de chargement des pages est-elle la seule mesure des performances des applications?

Il serait très difficile de répondre à ces questions et à bien d'autres dans un seul article. J'ai donc constitué un catalogue de liens et je l'ai divisé en catégories. Mais pour commencer - un peu de théorie sur ce qu'est la performance et quand y penser.

Lorsque des problèmes de performances surviennent

Vous pouvez développer des applications Web pendant des années et n'avoir pratiquement aucun problème avec les performances des applications.

Mais, très probablement, des problèmes surviennent dans les situations suivantes:

Des données volumineuses apparaissent (vous devez afficher de grandes listes ou des centaines de milliers de points sur la carte).
L'application devient volumineuse (des centaines de scénarios utilisateur, des dizaines d'écrans, de formulaires, etc.).
Un grand nombre de clients de différentes régions (par exemple, plus de 300 000 clients par jour du monde entier).
Concurrence élevée sur le marché (à coup sûr, l'utilisateur préférera l'application de votre concurrent si elle fonctionne plus rapidement).
Une version mobile est nécessaire (les navigateurs sur les appareils mobiles souffrent toujours de problèmes de performances).

En quoi consiste la performance

Globalement, les problèmes de performances des applications Web peuvent être divisés en deux catégories: le transfert de données et l'exécution.

Le transfert de données signifie le téléchargement de toutes les ressources nécessaires au fonctionnement de l'application.
En cours d'exécution - fonctionnement de l'application, rendu et traitement des entrées utilisateur.

Chacune de ces catégories contient de nombreuses nuances auxquelles nous ne pensons souvent pas, mais qui distinguent les applications de haute qualité des applications de faible qualité.

Voici les mesures de performances des applications Web les plus populaires (toutes devraient être minimales):

Chargement de la page

TTFB - heure de réception du premier octet ( Time to First Byte ).
FCP - l'heure du premier rendu du contenu ( First Contentful Paint ).
FMP est le moment de la première peinture significative .
TTI - le temps jusqu'à ce que la page puisse répondre à l'entrée de l'utilisateur ( Temps à interactif ).

Durée

Temps de réponse d'entrée utilisateur.
Interface redessiner le temps.

Bien que TTFB et TTI soient tous deux des métriques pour les performances de chargement des pages, des problèmes liés à l'exécution peuvent également les affecter.

Comment rechercher et analyser les problèmes de performances

La boîte à outils principale de l'arsenal du développeur est Chrome DevTools ou des outils similaires, tels que les outils de développement Firebug / Firefox .
Des articles séparés peuvent être écrits à leur sujet, mais nous nous limiterons aux points les plus importants.

Réseau - vous permet d'analyser en détail quelles ressources sont chargées sur la page, à partir de quelles ressources, avec quelle vitesse et ainsi de suite. Cet outil est souvent utilisé pour analyser manuellement la vitesse de chargement des pages.

Performances - dans cet onglet, vous pouvez activer l'enregistrement des appels d'exécution de code, les opérations d'entrée / sortie et autres. De plus, l'enregistrement peut être effectué avec l'émulation du réseau de limitation et du processeur. Par exemple, vérifiez l'application sur les appareils faibles.

Phare - Un outil intégré à Chrome DevTools qui démarre le chargement des pages, enregistre les métriques, les analyse et donne même des recommandations pour améliorer les performances.

Comment mesurer / surveiller les performances

Les outils de surveillance des performances des applications Web peuvent être divisés en deux catégories: ceux qui prennent des mesures synthétiques et ceux qui enregistrent les données de performances d'utilisateurs réels.

Les outils de surveillance synthétiques incluent Lighthouse et Webpagetest .
Pour la surveillance d'utilisateurs réels (RUM - surveillance d'utilisateurs réels), mPulse et Sematext conviennent .

De plus, il existe des outils comme Webpack-bundle-analyzer qui ne peuvent pas être affectés à ces deux catégories. Mais avec leur aide, vous pouvez mesurer certains paramètres qui affectent les performances, tels que la taille du bundle.

Transfert de données

Connexion TCP, recherche DNS - vous pouvez accélérer le chargement des pages même en raison de la configuration correcte des connexions au serveur. En particulier, si vous utilisez la prélecture DNS ou même des adresses IP au lieu des noms de domaine.

TTFB (Time to First Byte) . Le temps pour obtenir le premier octet est une métrique importante. Pour l'accélérer, vous devez essayer d'implémenter le moins de logique possible sur le serveur avant d'émettre index.html.

HTTP1 vs HTTP2 - HTTP2 peut accélérer considérablement le chargement des pages en multiplexant ou en compressant les en-têtes. En outre, un nouveau protocole (relativement) ouvre un tas de fonctionnalités, telles que la poussée du serveur.

Partage de domaine. Si vous devez envoyer un grand nombre d'en-têtes HTTP pour les demandes d'API, mais pas pour les demandes statiques, il est préférable de les séparer en différents domaines.

CDN (réseau de diffusion de contenu) permettra d'accélérer le chargement pour les clients géographiquement distribués.

La priorisation des ressources (préchargement, prélecture, préconnexion) est l'accélération du chargement des pages en raison de la bonne stratégie de chargement des ressources. Les navigateurs vous permettent de définir des priorités pour différents types de ressources et de télécharger plus tôt ce qui est important pour le premier rendu.

Compression statique: GZIP et Brotli . Brotli est un algorithme de compression qui réduira le poids statique et, par conséquent, augmentera la vitesse de téléchargement. Et voici une excellente solution de mon collègue.

Webp vs Png & Jpg. Webp est une excellente alternative à Png. En plus du faible poids des images, Webp n'est pas de qualité inférieure. Maintenant, ce format prend en charge environ 78% des navigateurs . Mais même si vous avez besoin d'un support à 100%, vous pouvez implémenter le repli sur Png en utilisant le tag d' image .

Durée

Tâches, microtâches . En priorisant correctement l'exécution du code, vous pouvez vous débarrasser des frises et accélérer la réponse aux entrées de l'utilisateur.

requestIdleCallback est une fonction utile qui vous permet d'exécuter du code pendant votre temps libre à la fin du cadre (cadre / tick) ou lorsque l'utilisateur est inactif. Cela aidera à se débarrasser de tous les mêmes retards et "gels".

requestAnimationFrame vous permet de planifier correctement l'animation et de maximiser les chances de rendre 60 images par seconde.

ES2015 vs ES5 . ES2015 offre de nombreuses fonctionnalités plus productives que ES5.

Manipulation Dom. Les manipulations avec le DOM coûtent cher, vous devez les effectuer avec soin et de manière significative. Par exemple, n'appelez pas querySelector () dans une boucle si cela peut être fait avec un seul appel.

Rendre la ressource de blocage . Le chargement de certaines ressources peut bloquer le rendu. Pour éviter cela, vous devez utiliser les attributs defer, async, preload.

60 FPS par pointeur-événements: aucun n'est un excellent hack avec lequel vous pouvez atteindre 60 FPS en faisant défiler la page. Cela fonctionne très simplement: tous les gestionnaires d'événements de souris sont désactivés pendant le défilement.

Écouteur d'événement passif- un moyen de faire défiler la page en douceur sur les écrans tactiles. En bref, le navigateur a un traitement de flux imparfait pour les auditeurs d'événements tactiles. Si vous définissez le paramètre passif lors de la création du gestionnaire d'événements, le navigateur comprendra clairement que le gestionnaire n'annulera pas le défilement et le rendu, sans attendre qu'il se termine.

Le défilement virtuel est un moyen intelligent de ne pas afficher de grandes listes, mais de les générer lors du défilement. Vous permet de consommer moins de mémoire et de faciliter les listes de défilement.

Évitez les mises en page complexes de grande taille et la suppression de mise en page . La mise en page / refusion est une opération coûteuse qui effectue de nombreux recalculs des paramètres de rendu. Pour éviter leurs appels fréquents, vous devez créer correctement la disposition et manipuler le DOM.

Ce qui force la mise en page / refusion - une feuille de triche où vous pouvez trouver une liste de fonctions et de paramètres qui fonctionnent avec qui provoque la mise en page / refusion.

Assemblée

Tree shaking - supprimez le code inutilisé du bundle et accélérez le chargement des pages.

Fractionnement de code - en divisant le code en morceaux, vous pouvez optimiser le premier chargement et ouvrir la possibilité de télécharger des parties du code «paresseusement».

L'obfuscation peut réduire la taille du paquet et même aider un peu à cacher votre code aux regards indiscrets.

Architecture

Le rendu côté serveur est probablement le moyen le plus connu pour effectuer un rendu SPA immédiatement au premier démarrage. Il s'agit d'une exigence importante pour certains moteurs de recherche (et pas seulement).

Chargement d'images et de vidéos paresseux ( + natif ) - une solution native conçue pour améliorer les métriques du premier rendu grâce au chargement «paresseux» d'images et de vidéos.

Lazy loading modules / routes est un outil que l'on retrouve dans tous les frameworks et bibliothèques populaires. Vous permet de charger "paresseusement" des morceaux de fonctionnalité d'application.

La mise en cache des fichiers avec les agents de service vous permet de mettre en cache des fichiers dans un navigateur et de ne pas les télécharger à chaque fois depuis le serveur. Peut-être la seule façon de faire le mode hors ligne dans une application de navigateur.

Mise en cache HTTP - En utilisant certains en-têtes HTTP, vous pouvez considérablement améliorer la vitesse de chargement des pages et réduire la charge du serveur.

Quelles sont les performances des applications Web?

Lorsque des problèmes de performances surviennent

En quoi consiste la performance

Chargement de la page

Durée

Comment rechercher et analyser les problèmes de performances

Comment mesurer / surveiller les performances

Transfert de données

Durée

Assemblée

Architecture

More articles: