Les performances Web sont un aspect crucial du développement Web. Elles se concentrent sur la vitesse de chargement des pages, ainsi que sur leur réactivité face aux entrées utilisateur. En optimisant les performances de votre site Web, vous offrez une meilleure expérience aux utilisateurs. Une meilleure expérience utilisateur contribue grandement à atteindre les objectifs que vous aviez en tête pour votre site Web.
Même si les performances Web peuvent sembler être un thème de niche, il est en fait à la fois vaste et assez profond. Compte tenu de la complexité de son sujet, il est essentiel qu'un cours sur les performances Web soit à la fois accessible, mais aussi informatif. La version initiale de ce cours se concentre sur les principes de base 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 performance. Étant donné qu'il s'agit d'une offre initiale, d'autres modules sont actuellement publiés dans les mois à venir.
Voici les thèmes abordés dans le cours initial de 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 comment elles peuvent améliorer leurs résultats. Ce cours commence par une brève introduction sur ces sujets, en vous fournissant un contexte essentiel qui explique pourquoi il est important d'apprendre à améliorer les performances.
Considérations générales sur les performances HTML
Chaque site Web commence par une requête pour un 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 requête HTML de votre site Web est bien effectuée.
Comprendre le chemin critique
Le chemin critique du rendu est un concept de 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 le rôle clé qu'elles jouent 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 une page avec 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 d'une page.
Aider le navigateur avec des indices de ressources
Les indices 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 ressources permettant d'accélérer le chargement de vos pages.
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 minimiser 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 certaines 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 contribuent à la conception d’un site Web de manière à ce que d’autres ressources ne puissent pas le faire. Néanmoins, les polices Web ont toujours un coût en termes de performances. Dans ce module, nous allons étudier un certain nombre de techniques et de considérations relatives aux performances des polices Web.
JavaScript fractionné dans le 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'en cas de besoin grâce à une technique connue sous le nom de division du code. Cela vous permettra d'améliorer les performances en diminuant les conflits sur la bande passante et le processeur, des points essentiels à prendre en compte pour améliorer à la fois la vitesse de chargement initiale de la page et la réactivité aux entrées au démarrage.
Images au chargement différé et éléments <iframe>
Les images et les éléments <iframe> peuvent consommer beaucoup de bande passante et de temps de traitement CPU. Cependant, les images et les éléments <iframe> n'ont pas tous besoin d'être chargés lors du chargement initial de la page. Ils peuvent également ê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, nous vous expliquons les images et les éléments <iframe> au chargement différé. Cela vous permet d'accélérer le chargement de vos pages, et de consommer de la bande passante et du temps de traitement uniquement lorsque cela est nécessaire.
Préchargement, prérendu et préchargement de service worker
Bien que l'essentiel 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. Cependant, dans certains cas, il peut être peut-être approprié de charger certaines ressources à l'avance. Dans ce module, nous explorons cet aspect des performances, au même titre que le préchargement, le prérendu et la prémise en cache des service workers.
Présentation des workers Web
Une grande partie de ce que voit l'utilisateur dans le navigateur se produit dans 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 visibles par l'utilisateur. L'API qui effectue cette opération est connue sous le nom d'API Web Worker. Dans ce module, ses principes de base sont abordés dans ce module.
Cas d'utilisation concret d'un nœud de calcul Web
Maintenant que vous avez compris les bases des workers Web, ainsi que de leurs capacités et de leurs limites, il est temps d'examiner un cas d'utilisation concret pour un worker Web. Dans cette démonstration, un nœud de calcul Web est utilisé pour récupérer un fichier JPEG, extraire ses métadonnées et le 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 Pourquoi la vitesse est importante.