Catégories
Astuces et Design

Rendez vos sites rapides, accessibles et sécurisés avec l'aide de Google – Smashing Magazine

A propos de l'auteur

Dion Almaer aspire à un meilleur Web en tant que directeur de l'écosystème de développeurs Web chez Google. Il travaille sur des outils, des services et des bibliothèques qui visent à en faire…
Plus à propos
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 la plate-forme et de l'écosystème d'outils, donner aux développeurs la possibilité de se parler et de demander à leurs des 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 de serviabilité et pour donner aux développeurs Web tous les outils et les conseils dont ils ont besoin pour garder 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 visant à fournir des conseils, des mesures et des outils unifiés pour 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 évaluera l'expérience des pages en tant que critère de classement et inclura les statistiques Core Web Vitals comme fondement.

Les trois piliers de Core Web Vitals 2020 sont le chargement, l'interactivité et la stabilité visuelle du contenu de la page, qui sont capturés par les mesures suivantes:

Une illustration des trois mesures expliquées: la plus grande peinture contentieuse, le premier délai d'entrée et le décalage de mise en page cumulatif
Core Web Vitals 2020 (Grand aperçu)
  • 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é.
  • Premier délai d'entrée mesure la réactivité et quantifie l'expérience des utilisateurs lorsqu'ils tentent d'interagir avec la page pour la première fois.
  • Décalage de mise en page cumulatif mesure la stabilité visuelle et quantifie la quantité de mouvement inattendu du contenu de la page.

À web.dev LIVE, nous avons partagé les meilleures pratiques sur la façon d'optimiser pour Core Web Vitals et comment utiliser Chrome DevTools pour explorer les valeurs vitales de votre site ou de votre application. Nous avons également partagé de nombreuses autres discussions liées aux performances que vous pouvez trouver sur web.dev/live dans le calendrier du jour 1.

tooling.report

Le Web est une plate-forme complexe et son développement 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 Web et les auteurs d'outils conquièrent 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 construction et de documenter comment suivre les meilleures pratiques avec un outil de construction donné.

Nous avons conçu une suite de tests pour le rapport sur la base 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 construction vous permet de suivre les meilleures pratiques et nous avons travaillé avec les auteurs des outils de construction pour nous assurer que nous avons utilisé leurs outils correctement et les avons représentés équitablement.

Un aperçu et une comparaison entre les outils de construction Webpack v4, Rollup v2, Parcel v2 et Browserify + Gulp
Rapport de comparaison de l'ensemble actuel de bibliothèques sur tooling.report (Grand aperçu)

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 flexibilité 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 problème GitHub et si vous êtes prêt à écrire en ajoutant un nouvel outil que nous n'avons pas inclus dans le jeu initial, nous vous invitons à contribuer!

En attendant, vous pouvez en savoir plus sur notre approche de la construction de tooling.report et regarder notre session sur web.dev LIVE pour en savoir plus.

Dernières versions de Chrome DevTools et Lighthouse 6.0

La plupart des développeurs Web passent beaucoup de temps de leur journée dans leurs outils de développement, nous voulons donc 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 afin d'améliorer l'expérience utilisateur.

Chrome Devtools: onglet Nouveaux problèmes, émulateur de carence en couleur et support Web Vitals

L'une des fonctionnalités les plus puissantes de Chrome DevTools est sa capacité à détecter 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 site Web axé sur la confidentialité. Pour réduire la fatigue des notifications et l'encombrement de la console, nous avons lancé «l'onglet Problèmes» qui se concentre sur trois types de problèmes critiques: les problèmes de cookies, le contenu mixte et les problèmes COEP. Regardez notre session sur la recherche et la résolution des problèmes avec l'onglet Problèmes pour en savoir plus.

Une capture d'écran de la chronologie Chrome DevTools où les développeurs peuvent suivre et mesurer les mesures, les performances et plus encore
Onglet Nouveaux problèmes dans Chrome DevTools (Grand aperçu)

De plus, avec Core Web Vitals devenant l'un des ensembles de mesures les plus critiques que nous pensons que 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.

Enfin, avec un nombre croissant de développeurs axés sur l'accessibilité, nous avons également introduit un Émulateur de déficience de 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 de proposer cette fonctionnalité aux développeurs qui cherchent à rendre leurs sites Web plus conviviaux pour les daltoniens. Vous pouvez en savoir plus à ce sujet et sur de nombreuses autres fonctionnalités dans notre session sur les nouveautés de DevTools.

Une capture d'écran de YouTube d'une session mettant en vedette Jake Archibald et Surma
Nouveau Émulateur de déficience de vision des couleurs dans Chrome DevTools (Grand aperçu)

Lighthouse 6.0: nouvelles métriques, mesure en laboratoire des principaux composants vitaux du Web, mise à jour du score de performance et nouveaux audits passionnants

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 mesures qui vous donnent une vue équilibrée de la qualité de votre expérience utilisateur par rapport aux dimensions critiques.

Pour garantir la cohérence, nous avons ajouté la prise en charge des principaux composants Web Web – LCP, TBT (équivalent de laboratoire pour FID car Lighthouse est un outil de laboratoire) et CLS – et supprimé trois anciens modèles: First Signful Paint, First CPU Idle 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 ajusté les pondérations en fonction des commentaires des utilisateurs.

Nous avons également ajouté un calculateur de score super astucieux pour vous aider à explorer votre score de performance, en fournissant une comparaison entre les scores de la version v5 et v6. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport est accompagné d'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 l'accessibilité.

Tous les nouveaux audits dans Lighthouse 6.0 (Grand aperçu)

Il y en a beaucoup d'autres dont nous avons parlé sur web.dev LIVE – regardez la session sur les derniers outils de vitesse et les derniers sur Puppeteer.

Au cours de 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.

Smashing Editorial(ef, ra, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *