Un résumé des principales actualités et mises à jour annoncées lors de notre événement communautaire en ligne de trois jours, ainsi qu'un rappel concernant les prochains événements régionaux.
Nous venons de conclure notre événement de trois jours, web.dev LIVE, au cours duquel des membres de la communauté Web se sont réunis pour parler de l'état du développement Web. Nous avons commencé chaque jour dans un fuseau horaire différent, et les Googleurs ont partagé une série de mises à jour, d'actualités et de conseils afin d'aider les développeurs à fournir des outils et des conseils pour que le Web reste stable, puissant et accessible.
Si vous avez manqué une partie de la diffusion en direct, toutes les sessions sont enregistrées et vous pouvez les regarder sur YouTube. Des événements régionaux à venir organisés dans le monde entier sont organisés par des Google Developer Groups. Ils proposeront des sessions approfondies sur des sujets en lien avec les sujets abordés lors de web.dev LIVE.
Examinons quelques-unes des actualités et nouveautés qui ont été partagées pendant ces trois jours.
Signaux Web
L'équipe Chrome a annoncé le lancement du projet Signaux Web, destiné à fournir des conseils, des métriques et des outils unifiés afin d'aider les développeurs à offrir une expérience utilisateur de qualité sur le Web. L'équipe de la recherche Google a également récemment annoncé qu'elle allait évaluer l'expérience sur la page en tant que critère de classement sur la base des métriques Core Web Vitals.
Les trois piliers des Core Web Vitals de 2020 sont le chargement, l'interactivité et la stabilité visuelle du contenu de la page. Ils sont déterminés par les métriques suivantes:
- La métrique Largest Contentful Paint mesure la vitesse de chargement perçue et indique le moment où le contenu principal d'une page a probablement été chargé dans la chronologie de chargement.
- Le First Input Delay mesure la réactivité et quantifie l'expérience que les utilisateurs ressentent lorsqu'ils essaient d'interagir pour la première fois avec une page.
- La métrique Cumulative Layout Shift mesure la stabilité visuelle et quantifie la quantité de mouvements inattendus dans le contenu de la page.
Lors de l'événement web.dev LIVE, nous avons partagé des bonnes pratiques sur l'optimisation pour Core Web Vitals et sur l'utilisation des outils pour les développeurs Chrome afin d'explorer les valeurs Android Vitals de votre site. Nous avons également partagé de nombreuses autres conférences sur les performances que vous pouvez retrouver sur web.dev/live dans le programme du jour 1.
tooling.report
Développer pour une plate-forme aussi vaste que le Web peut s'avérer difficile. Les outils de compilation sont souvent au cœur de votre projet de développement Web, car ils jouent un rôle clé dans la gestion du cycle de vie des développeurs et des produits.
Nous avons tous vu des fichiers de configuration de compilation complexes. C'est pourquoi nous avons créé tooling.report pour aider les développeurs Web et les auteurs d'outils à appréhender la complexité du Web. Il s'agit d'un site Web qui vous aide à choisir l'outil de compilation le plus adapté à votre prochain projet, à décider s'il vaut la peine de passer d'un outil à un autre ou à intégrer les bonnes pratiques dans la configuration de vos outils et dans votre code base.
Nous avons conçu une suite de tests pour déterminer quels outils de compilation vous permettent de suivre les bonnes pratiques de développement Web. Nous avons travaillé avec les auteurs des outils de compilation pour nous assurer d'utiliser leurs outils correctement et de les représenter de manière équitable.
La version initiale de tooling.report couvre webpack v4, Rollup v2, Parcel v2 et Browserify avec Gulp, qui semblent être les outils de compilation les plus populaires à l'heure actuelle. Nous avons conçu tooling.report en vous offrant la possibilité d'ajouter d'autres outils de compilation et tests supplémentaires avec l'aide de la communauté.
S'il nous manque une bonne pratique à tester, veuillez la présenter dans un problème GitHub. Si vous souhaitez écrire un test ou ajouter un outil que nous n'avons pas inclus dans l'ensemble initial, nous vous invitons à contribuer.
En attendant, vous pouvez en savoir plus sur notre approche de création de tools.report et regarder notre session sur web.dev en direct.
Confidentialité et sécurité sur le Web
Chrome croit en un Web ouvert qui respecte la confidentialité des utilisateurs et gère les cas d'utilisation clés qui permettent à tous les utilisateurs.
En 2019, Chrome a proposé une mise à jour de la norme relative aux cookies afin de limiter par défaut les cookies aux contextes propriétaires et d'exiger que les cookies pour les contextes tiers soient explicitement marqués comme tels. Plus précisément, elle fournit une ligne de défense contre les attaques par falsification de requêtes intersites. Cette proposition est aujourd'hui adoptée par Chrome, Firefox, Edge et d'autres navigateurs.
Bien que Chrome ait décidé d'annuler temporairement ces changements en raison de la pandémie de COVID-19, malheureusement, lors d'une crise où les personnes sont les plus vulnérables, vous constatez également une augmentation de ces types d'attaques. Ainsi, avec la version stable de Chrome 84 (mi-juillet 2020), les modifications recommenceront à être déployées sur toutes les versions de Chrome à partir de la version 80. Pour en savoir plus, consultez les conseils concernant les cookies SameSite ainsi que la session LIVE web.dev.
En outre, sous la bannière de la Privacy Sandbox, Chrome présente un certain nombre de propositions de normes visant à soutenir les cas d'utilisation qui permettent aux utilisateurs de gagner leur vie à l'aide de la plate-forme Web, tout en respectant mieux la confidentialité des utilisateurs. L'équipe Chrome sollicite activement des commentaires sur ces propositions et participe aux forums ouverts du W3C afin de discuter de ces propositions, ainsi que de celles soumises par d'autres parties. Pour en savoir plus sur cette initiative, consultez la session Sécurité et confidentialité pour le Web ouvert.
Enfin, en ce qui concerne la sécurité des utilisateurs, Spectre représentait une faille qui signifie que du code malveillant exécuté dans un processus de navigateur pourrait lire toutes les données associées à ce processus, même si elles proviennent d'une origine différente. L'une des mesures d'atténuation des navigateurs pour ce problème est l'isolation de sites, c'est-à-dire que chaque site est placé dans un processus distinct. Pour en savoir plus, regardez la session LIVE sur web.dev sur les nouvelles règles d'ouverture et d'intégration multi-origines (COOP et COEP).
Créer un Web doté de puissantes fonctionnalités
Chrome vous offre la liberté de créer des applications Web de qualité optimale qui vous permettent de toucher un maximum d'utilisateurs sur tous les appareils. En associant la facilité d'installation et la fiabilité des PWA au projet de fonctionnalités (projet Fugu), Chrome se concentre sur trois éléments visant à combler l'écart entre les applications spécifiques à la plate-forme et le Web, afin de vous aider à créer et à proposer des expériences de qualité.
Tout d'abord, les équipes Chrome ont travaillé dur pour permettre aux développeurs Web et aux utilisateurs de mieux contrôler l'expérience d'installation, en ajoutant une promotion d'installation à l'omnibox et plus encore. Malgré l'omniprésence du Web, il est toujours important pour certaines entreprises d'avoir leur application dans la boutique. Pour vous aider, Chrome a lancé Bubblewrap, une bibliothèque et une CLI qui facilitent l'importation de votre PWA sur le Play Store. D'ailleurs, PWABuilder.com utilise désormais le papier bulle en arrière-plan. En quelques clics, vous pouvez générer un APK et importer votre PWA sur le Play Store, à condition que vous répondiez aux critères.
Deuxièmement, Chrome offre une intégration plus étroite avec le système d'exploitation, avec la possibilité de partager une photo, une chanson ou tout autre élément en appelant le service de partage au niveau du système avec l'API Web Share, ou la possibilité de recevoir du contenu lorsqu'il est partagé à partir d'une autre application installée. Vous pouvez tenir les utilisateurs à jour ou les avertir subtilement de nouvelles activités grâce aux badges d'application. De plus, il est désormais plus facile pour les utilisateurs de lancer rapidement une action à l'aide des raccourcis d'application, qui arriveront dans Chrome 84 (mi-juillet 2020).
Enfin, Chrome a travaillé sur de nouvelles fonctionnalités qui offrent de nouveaux scénarios jusqu'alors impossibles auparavant, comme des éditeurs qui lient et écrivent dans des fichiers sur le système de fichiers local de l'utilisateur ou qui obtiennent la liste des polices installées localement afin que les utilisateurs puissent les utiliser dans leurs conceptions.
Lors de l'événement web.dev LIVE, nous avons parlé de beaucoup d'autres fonctionnalités qui peuvent vous permettre d'offrir le même type d'expérience que les applications spécifiques à la plate-forme. Consultez toutes les sessions sur web.dev/live dans le programme du jour 2.
Nouveautés des outils pour les développeurs Chrome et de Lighthouse 6.0
Outils pour les développeurs Chrome: nouvel onglet "Problèmes", émulateur de problèmes de couleurs et prise en charge des Core Web Vitals
L'une des fonctionnalités les plus puissantes des outils pour les développeurs Chrome permet de détecter les problèmes sur une page Web et d'attirer l'attention du développeur. C'est particulièrement important à mesure que nous passons à la phase suivante d'un Web axé sur la confidentialité. Pour réduire l'essoufflement et l'encombrement des notifications dans la console, les outils pour les développeurs Chrome ont lancé l'onglet Problèmes, qui se concentre d'abord sur trois types de problèmes critiques: les problèmes liés aux cookies, le contenu mixte et les problèmes COEP. Regardez la session LIVE sur web.dev sur la recherche et la résolution des problèmes liés à l'onglet "Problèmes" pour commencer.
De plus, les Core Web Vitals deviennent l'un des ensembles de métriques les plus importants que les développeurs Web doivent suivre et mesurer. C'est pourquoi les outils de développement veulent s'assurer que les développeurs puissent suivre facilement leurs performances par rapport à ces seuils. Ces trois métriques se trouvent désormais dans le panneau "Performances" des outils pour les développeurs Chrome.
Enfin, lorsqu'un nombre croissant de développeurs se concentrent sur l'accessibilité, les outils de développement ont également lancé un émulateur de déficience de la vision des couleurs qui permet aux développeurs d'émuler une vision floue et d'autres types de déficiences visuelles. Pour en savoir plus à ce sujet et sur de nombreuses autres fonctionnalités, consultez la session Nouveautés de DevTools.
Lighthouse 6.0: nouvelles métriques, mesures des Core Web Vitals en laboratoire, score de performance mis à jour et nouveaux 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, l'équipe Lighthouse s'est concentrée sur la fourniture d'insights basés sur des métriques qui vous donnent un équilibre entre la qualité de l'expérience utilisateur et les dimensions critiques.
Pour garantir la cohérence, Lighthouse a ajouté la compatibilité avec les métriques Core Web Vitals : LCP, TBT (un proxy pour FID, car Lighthouse est un outil de test et le FID ne peut être mesuré que sur le terrain) et CLS. Lighthouse a également supprimé trois anciennes métriques: First Meaningful Paint, Premier CPU inactif et FID potentiel maximal. Ces suppressions sont dues à des considérations telles que la variabilité des métriques et des métriques plus récentes offrant de meilleures réflexions sur la partie de l'expérience utilisateur que Lighthouse tente de mesurer. En outre, Lighthouse a également ajusté l'impact de chaque métrique dans le score global des performances en fonction des commentaires des utilisateurs.
Lighthouse a également ajouté un calculateur de notes pour vous aider à explorer votre score de performances, en vous permettant de comparer les scores des versions 5 et 6. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport est fourni avec un lien vers le simulateur, avec vos résultats renseignés.
Enfin, Lighthouse a ajouté de nombreux audits, axés sur l'analyse et l'accessibilité JavaScript.
Pour en savoir plus, regardez la session Nouveautés des outils de vitesse.
Plus d'infos
Merci à tous les membres de la communauté qui nous ont rejoints pour discuter des opportunités et des défis de la plate-forme Web.
Cet article résume certains des temps forts de l'événement, mais il y en avait tellement plus. Assurez-vous de consulter toutes les sessions et abonnez-vous à la newsletter web.dev si vous souhaitez recevoir plus de contenu directement dans votre boîte de réception. Consultez également la section Événements régionaux sur web.dev/live pour trouver un événement communautaire à venir dans votre fuseau horaire.