Rendez vos sites rapides, accessibles et sécurisés avec l'aide de Google
À propos de l'auteur
Dion Almaer s'efforce d'améliorer le Web en tant que directeur de l'écosystème des développeurs Web chez Google. Il travaille sur des outils, des services et des bibliothèques qui visent à en faire… En savoir plus sur Dion …
Du 30 juin au 2 juillet, l'équipe de la plate-forme Web de Google a réuni la communauté Web pour web.dev LIVE un événement numérique pour parler des derniers développements de l'écosystème de la plate-forme et des outils , donnez aux développeurs la possibilité de se parler et de poser leurs questions brûlantes à l'équipe. Au cours des trois jours, l'équipe de Google a partagé une série de mises à jour et de nouvelles dans un esprit d'utilité et pour donner aux développeurs Web tous les outils et les conseils dont ils ont besoin pour maintenir leurs sites stables, puissants et accessibles en ces temps difficiles.
Plus tôt cette année, l'équipe Chrome a annoncé l'initiative Web Vitals pour fournir des conseils, des mesures et des outils unifiés afin d'aider les développeurs à offrir une expérience utilisateur exceptionnelle sur le Web. L'équipe de recherche Google a également récemment annoncé qu'elle évaluerait l'expérience de la page comme critère de classement et inclurait Core Web Vitals des mesures comme fondement.
Les trois piliers de 2020 Les éléments essentiels du Web sont le chargement, l'interactivité et la stabilité visuelle du contenu de la page, qui sont capturés par les mesures suivantes:
La plus grande peinture riche en contenu mesure la vitesse de chargement perçue et marque le point dans la chronologie de chargement de la page lorsque le contenu principal de la page a probablement été chargé.
Le délai d'entrée mesure la réactivité et quantifie l'expérience que les utilisateurs ressentent lorsqu'ils tentent d'interagir avec la page pour la première fois.
Le Web est une plate-forme complexe qui se développe pour cela peut être difficile dans le meilleur des cas. Les outils de construction visent à faciliter la vie d'un développeur Web, mais en conséquence, les outils de construction finissent eux-mêmes par être assez complexes.
Pour aider les développeurs d'outils et les auteurs d'outils à surmonter la complexité du Web, nous avons construit tooling.report . Il s'agit d'un site Web qui vous aide à choisir le bon outil de construction pour votre prochain projet, à décider si la migration d'un outil à un autre en vaut la peine ou à découvrir comment intégrer les meilleures pratiques dans votre configuration d'outils et votre base de code. Notre objectif est d'expliquer les compromis impliqués lors du choix d'un outil de génération et de documenter comment suivre les meilleures pratiques avec un outil de génération donné.
Nous avons conçu une suite de tests pour le rapport en fonction de ce que nous pensons représenter les meilleures pratiques pour le développement Web. Les tests nous permettent de déterminer quel outil de build vous permet de suivre les meilleures pratiques et nous avons travaillé avec les auteurs des outils de build pour nous assurer que nous avons utilisé leurs outils correctement et les avons représentés équitablement.
La version initiale de tooling.report couvre webpack v4, Rollup v2 et Parcel v2 ainsi que Browserify + Gulp, qui, selon nous, sont les outils de construction les plus populaires à l'heure actuelle. Nous avons créé tooling.report avec la possibilité d'ajouter plus d'outils de construction et des tests supplémentaires avec l'aide de la communauté.
Donc, si vous pensez qu'une meilleure pratique qui devrait être testée ou qui manque, veuillez la proposer dans un numéro GitHub et si vous êtes prêt à écrire en ajoutant un nouvel outil que nous n'avons pas inclus dans l'ensemble initial, nous vous invitons à contribuer !
La plupart des développeurs Web passent beaucoup de temps de leur jour dans leurs outils de développement afin que nous voulons nous assurer que nos outils permettent une plus grande productivité, que ce soit pour le débogage ou pour l'audit et la résolution de problèmes pour améliorer l'expérience utilisateur.
Chrome Devtools: onglet Nouveaux problèmes, émulateur de déficience de couleur et support Web Vitals [19659027] L'une des fonctionnalités les plus puissantes de Chrome DevTools est sa capacité à repérer les problèmes sur une page Web et à les porter à l'attention du développeur – ceci est plus pertinent à mesure que nous entrons dans la prochaine phase d'un Web privilégiant la confidentialité . Pour réduire la fatigue des notifications et l'encombrement de la console, nous avons lancé « Onglet Problèmes » qui se concentre sur trois types de problèmes critiques pour commencer: Problèmes de cookies Mixte content and COEP issues . Regardez notre session sur trouver et résoudre les problèmes avec l'onglet Problèmes pour plus d'informations. Nouveaux problèmes Onglet dans Chrome DevTools ( Grand aperçu )
De plus, avec Core Web Vitals devenant l'un des ensembles de mesures les plus critiques que, selon nous, chaque développeur doit suivre et mesurer , nous voulons nous assurer que les développeurs sont en mesure de suivre facilement leurs performances par rapport à ces seuils. Nous avons donc ajouté les trois mesures dans la chronologie Chrome DevTools .
Et enfin, avec un nombre croissant de développeurs axés sur l'accessibilité, nous avons également introduit un émulateur de déficience de la vision des couleurs qui permet aux développeurs de simuler des déficiences visuelles, y compris une vision floue et divers autres types de daltonisme. Nous sommes très heureux d'offrir cette fonctionnalité aux développeurs qui cherchent à rendre leurs sites Web plus conviviaux pour les daltoniens et vous pouvez en savoir plus à ce sujet et sur de nombreuses autres fonctionnalités dans notre session sur Quoi de neuf dans DevTools .
Lighthouse 6.0: Nouveau Metrics, Core Web Vitals Lab Measurement, An Performance Score, And Exciting New Audits
Lighthouse est un outil automatisé open source qui aide les développeurs à améliorer les performances de leur site. Dans sa dernière version, nous nous sommes concentrés sur la fourniture d'informations basées sur des métriques qui vous donnent une vue équilibrée de la qualité de votre expérience utilisateur par rapport aux dimensions critiques.
Pour assurer la cohérence, nous avons ajouté la prise en charge de Core Web Vitals – LCP TBT (équivalent de laboratoire pour FID car Lighthouse est un outil de laboratoire) et CLS – et en ont retiré trois anciens: Première peinture significative Premier processeur inactif et Max Potential FID . Ces suppressions sont dues à des considérations telles que la variabilité des mesures et les nouvelles mesures offrant de meilleures réflexions sur la partie de l'expérience utilisateur que nous essayons de mesurer. De plus, nous avons également effectué des ajustements des poids en fonction des commentaires des utilisateurs.
Nous avons également ajouté une calculatrice de notation très astucieuse pour vous aider à explorer votre notation des performances, en fournissant une comparaison entre les scores des versions v5 et v6. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport contient un lien vers la calculatrice avec vos résultats renseignés.
Et enfin, nous avons ajouté un tas de nouveaux audits utiles en mettant l'accent sur l'analyse JavaScript et accessibilité.
Pendant web.dev LIVE, nous avons partagé plus de nouvelles fonctionnalités et mises à jour qui sont arrivées sur le Web au cours des derniers mois. Regardez toutes les sessions pour rester à jour et abonnez-vous à la newsletter web.dev si vous souhaitez plus de contenu de ce type directement dans votre boîte de réception.
(ef, ra, il)