Les performances Web sont un aspect crucial du développement Web. Elles se concentrent sur la vitesse de chargement des pages et leur réactivité face aux entrées utilisateur. En optimisant les performances de votre site Web, vous offrez aux utilisateurs une meilleure expérience. Une meilleure expérience utilisateur contribue grandement à atteindre les objectifs que vous aviez en tête pour votre site Web.
Les performances Web peuvent sembler être un sujet de niche, mais en réalité, elles sont à la fois vastes et assez approfondies. Étant donné la complexité de son sujet, il est essentiel qu'un cours sur les performances Web soit à la fois accessible, mais informatif. La version initiale de ce cours se concentre sur les principes fondamentaux des performances Web que les débutants doivent trouver instructifs.
Dans la mesure du possible, chaque module de cette série vise à proposer un ensemble de démonstrations qui complètent le contenu de chaque module et présentent les concepts clés de performances. Étant donné que ce cours est une offre initiale, d'autres modules sont en cours de publication dans les mois à venir.
Voici les points abordés dans le cours initial du cours "Learn Performance" :
L'importance de la vitesse
Avant de commencer à évaluer les performances d'apprentissage, vous devez comprendre leur rôle dans l'expérience utilisateur et la manière dont elles peuvent améliorer les résultats pour les utilisateurs. Ce cours commence par une brève introduction sur ces sujets, en donnant un contexte essentiel sur les raisons pour lesquelles il est important d'apprendre les performances.
Considérations générales sur les performances HTML
Chaque site Web commence par une requête de document HTML. Cette requête joue un rôle important dans la vitesse de chargement de votre site Web. Ce module aborde des concepts importants tels que la mise en cache HTML, le blocage de l'analyseur, le blocage de l'affichage, etc. Vous pouvez ainsi vous assurer que la première demande de code HTML de votre site Web est correcte.
Comprendre le chemin critique
Le chemin critique du rendu est un concept des performances Web qui traite de la rapidité avec laquelle le rendu initial d'une page s'affiche dans le navigateur. Ce module aborde les concepts théoriques sous-jacents au chemin critique du rendu. Il aborde des concepts tels que les ressources qui bloquent le rendu et les analyseurs, et explique comment elles jouent un rôle clé dans la vitesse d'affichage d'une page dans le navigateur.
Optimisez le chargement des ressources
Lors du chargement d'une page, de nombreuses ressources sont référencées dans son code HTML. Elles fournissent à la page son apparence et sa mise en page via CSS, et son interactivité via JavaScript. Ce module traite d'un certain nombre de concepts importants liés à ces ressources et à leur impact sur le temps de chargement des pages.
Aider le navigateur avec des indications de ressources
Les indications de ressources sont un ensemble de fonctionnalités disponibles en HTML qui peuvent aider le navigateur à charger les ressources plus tôt, voire avec une priorité plus élevée. Dans ce module, nous allons aborder quelques suggestions de ressources qui peuvent aider vos pages à se charger encore plus rapidement.
Performances des images
Les images représentent une grande partie des données transférées sur de nombreuses pages Web aujourd'hui. Ce module explique comment optimiser les images et comment les diffuser efficacement afin de limiter les octets gaspillés, quel que soit l'appareil de l'utilisateur.
Performances des vidéos
La vidéo est un type de support souvent utilisé sur les pages Web. Cependant, il ne faut pas négliger de savoir comment les diffuser efficacement. Ce module présente quelques techniques clés permettant d'intégrer des vidéos de manière à ce que votre site Web reste rapide, ainsi que les considérations relatives aux performances qui peuvent survenir lors de leur utilisation.
Optimiser les polices Web
Les polices Web sont une ressource couramment utilisée sur le Web, et à juste titre, car elles ajoutent à la conception d’un site Web de manière que les autres ressources ne puissent pas le faire. Malgré cela, les polices Web ont toujours un coût en termes de performances. Ce module traite d'un certain nombre de considérations et de techniques liées aux performances des polices Web.
JavaScript de division du code
Certaines ressources ne sont pas essentielles au chargement initial d'une page Web. JavaScript est l'une de ces ressources qui peut être différée jusqu'au moment où cela est nécessaire grâce à une technique connue sous le nom de fractionnement du code. Cela vous permettra d'améliorer les performances en diminuant les conflits liés à la bande passante et au processeur, des éléments essentiels à prendre en compte pour améliorer la vitesse de chargement initial de la page et la réactivité aux entrées au démarrage.
Images de chargement différé et éléments <iframe>
Les images et les éléments <iframe> peuvent consommer une quantité importante de bande passante et de temps de traitement du processeur. Cependant, les images et les éléments <iframe> n'ont pas tous besoin d'être chargés lors du chargement initial de la page et peuvent être reportés à un moment ultérieur où l'utilisateur est le plus susceptible de les voir. Cette technique est connue sous le nom de chargement différé. Dans ce module, vous découvrirez les images à chargement différé et les éléments <iframe> pour que vos pages se chargent plus rapidement, et ne consomment de la bande passante et du temps de traitement que lorsque cela est nécessaire.
Préchargement, prérendu et préchargement de service worker
Bien qu'une grande partie des performances porte sur ce que vous pouvez faire pour optimiser et éliminer les ressources inutiles, il peut sembler un peu paradoxal de suggérer que certaines ressources doivent être chargées avant d'être nécessaires. Toutefois, dans certains cas, il peut être approprié de charger certaines ressources à l'avance. Dans ce module, nous abordons cet aspect des performances, au même titre que le préchargement, le prérendu et la mise en cache par le service worker.
Présentation des workers Web
Une grande partie de ce que voit l'utilisateur dans le navigateur se produit sur un seul thread appelé thread principal. Toutefois, vous pouvez démarrer de nouveaux threads pour effectuer des tâches coûteuses en calcul afin que le thread principal puisse gérer les tâches importantes destinées aux utilisateurs. Il s'agit de l'API Web Worker. Ce module présente ses principes de base.
Cas d'utilisation concret d'un nœud de calcul Web
Maintenant que vous avez des connaissances de base sur les nœuds de calcul Web, ainsi que leurs capacités et leurs limites, intéressons-nous à un cas d'utilisation concret. Dans cette démonstration, un nœud de calcul Web est utilisé pour extraire un fichier JPEG, extraire ses métadonnées et les renvoyer au thread principal afin que l'utilisateur puisse le voir dans le navigateur.
Prêt à vous lancer dans l'apprentissage des performances Web ? Commencez par lire l'article Pourquoi la vitesse est-elle importante ?