Résumé des principales actualités et nouveautés annoncées lors de notre événement communautaire en ligne de trois jours, et rappel des événements régionaux à venir.
Nous venons de terminer notre événement de trois jours, web.dev LIVE, au cours duquel une partie de la communauté Web s'est réunie en ligne pour parler de l'état du développement Web. Chaque journée a débuté dans un fuseau horaire régional différent, et les Googlers ont partagé des informations, des actualités et des conseils pour aider les développeurs à maintenir un Web stable, puissant et accessible grâce à des outils et des conseils.
Si vous avez manqué une partie de la diffusion en direct, sachez que toutes les sessions sont enregistrées et disponibles sur YouTube. Nous organisons également des événements régionaux dans le monde entier. Ils sont organisés par les Google Developer Groups et proposeront des sessions approfondies sur des sujets liés à ce que nous avons abordé lors de web.dev LIVE.
Passons en revue certaines des annonces et nouveautés qui ont été partagées au cours de ces trois jours.
Signaux Web
L'équipe Chrome a annoncé l'initiative Web Vitals, qui vise à fournir des conseils, des métriques et des outils unifiés pour aider les développeurs à offrir une expérience utilisateur de qualité sur le Web. L'équipe de la recherche Google a également annoncé récemment qu'elle évaluerait l'expérience sur la page en tant que critère de classement, et qu'elle inclurait les métriques Core Web Vitals comme base.
Les trois piliers des Core Web Vitals de 2020 sont le chargement, l'interactivité et la stabilité visuelle du contenu de la page, qui sont capturés par les métriques suivantes :
- La métrique Largest Contentful Paint mesure la vitesse de chargement perçue et marque le point dans la chronologie de chargement de page lorsque le contenu principal de la page a probablement été chargé.
- La métrique First Input Delay mesure la réactivité et quantifie l'expérience des utilisateurs lorsqu'ils essaient d'interagir pour la première fois avec une page.
- Cumulative Layout Shift mesure la stabilité visuelle et quantifie la quantité de mouvements inattendus du contenu de la page.
Lors de l'événement web.dev LIVE, nous avons partagé des bonnes pratiques pour optimiser les métriques Core Web Vitals et utiliser les Outils pour les développeurs Chrome afin d'explorer les valeurs des métriques de votre site. Nous avons également partagé de nombreuses autres discussions liées aux performances, que vous trouverez sur web.dev/live dans le programme du premier jour.
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, et jouent un rôle clé dans la gestion du cycle de vie de votre produit et de votre développement.
Nous avons tous vu des fichiers de configuration de compilation encombrants. Pour aider les développeurs Web et les auteurs d'outils à surmonter la complexité du Web, nous avons créé tooling.report. Il s'agit d'un site Web qui vous aide à choisir l'outil de compilation adapté à votre prochain projet, à déterminer si la migration d'un outil à un autre en vaut la peine ou à intégrer les bonnes pratiques dans la configuration de vos outils et votre codebase.
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 collaboré avec les auteurs des outils de compilation pour nous assurer que nous utilisions leurs outils correctement et que nous les représentions 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 actuellement. Nous avons conçu tooling.report de manière à pouvoir ajouter d'autres outils de compilation et des tests supplémentaires avec l'aide de la communauté.
S'il manque une bonne pratique à tester, veuillez la proposer dans un problème GitHub. Si vous souhaitez écrire un test ou ajouter un nouvel outil que nous n'avons pas inclus dans l'ensemble initial, n'hésitez pas à contribuer.
En attendant, vous pouvez en savoir plus sur notre approche de la création de tooling.report et regarder notre session de web.dev LIVE.
Confidentialité et sécurité sur le Web
Chrome croit en un Web ouvert qui respecte la confidentialité des utilisateurs et maintient les principaux cas d'utilisation qui permettent au Web de fonctionner pour tous.
En 2019, Chrome a proposé une mise à jour de la norme des cookies afin de limiter par défaut les cookies aux contextes first party et d'exiger que les cookies pour les contextes tiers soient explicitement marqués comme tels. Plus précisément, cela fournit une ligne de défense contre les attaques par falsification de requêtes intersites. La proposition est désormais adoptée par Chrome, Firefox, Edge et d'autres navigateurs.
Bien que Chrome ait décidé de revenir temporairement sur ces modifications en raison de la COVID-19, nous constatons malheureusement une augmentation de ce type d'attaques en période de crise, lorsque les utilisateurs sont les plus vulnérables. Ainsi, avec la version stable de Chrome 84 (mi-juillet 2020), les modifications commenceront à être déployées à nouveau sur toutes les versions de Chrome à partir de la version 80. Pour en savoir plus, consultez les instructions sur les cookies SameSite ainsi que la session web.dev LIVE.
De plus, sous la bannière de la Privacy Sandbox, Chrome introduit un certain nombre de propositions de normes visant à prendre en charge les cas d'utilisation qui permettent aux utilisateurs de gagner leur vie en utilisant la plate-forme Web, mais d'une manière qui respecte mieux la confidentialité des utilisateurs. Chrome cherche activement à obtenir des commentaires sur ces propositions et participe aux forums ouverts du W3C pour en discuter, 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 était une faille qui permettait à un code malveillant exécuté dans un processus de navigateur de lire toutes les données associées à ce processus, même si elles provenaient d'une autre origine. L'une des mesures d'atténuation du navigateur consiste à isoler les sites, c'est-à-dire à placer chaque site dans un processus distinct. Pour en savoir plus, regardez la session web.dev LIVE sur les nouvelles règles interorigines d'ouverture et d'intégration (COOP et COEP).
Créer un Web doté de fonctionnalités puissantes
Chrome veut vous donner la liberté de créer des applications Web de la plus haute qualité, qui vous permettent de toucher le plus grand nombre d'utilisateurs sur tous les appareils. En combinant l'installabilité et la fiabilité des PWA avec le projet de fonctionnalités (projet Fugu), Chrome se concentre sur trois aspects pour combler l'écart entre les applications spécifiques à une 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é d'arrache-pied pour offrir aux développeurs Web et aux utilisateurs un meilleur contrôle sur 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 de proposer leur application sur le Play Store. Pour vous aider, Chrome a lancé Bubblewrap, une bibliothèque et une CLI qui facilitent l'intégration de votre PWA au Play Store. En fait, PWABuilder.com utilise désormais Bubblewrap en arrière-plan. En quelques clics, vous pouvez générer un APK et importer votre PWA sur le Play Store, à condition de respecter les critères.
Deuxièmement, Chrome offre une intégration plus étroite avec le système d'exploitation, comme la possibilité de partager une photo, un titre ou autre 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é depuis une autre application installée. Vous pouvez tenir les utilisateurs informés ou les avertir subtilement d'une nouvelle activité grâce aux badges d'application. De plus, les utilisateurs peuvent désormais lancer rapidement une action à l'aide des raccourcis d'application, qui seront disponibles dans Chrome 84 (mi-juillet 2020).
Enfin, Chrome travaille sur de nouvelles fonctionnalités qui permettent de nouveaux scénarios qui n'étaient pas possibles auparavant, comme des éditeurs qui lisent et écrivent des fichiers sur le système de fichiers local de l'utilisateur, ou 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 nombreuses autres fonctionnalités qui vous permettent de proposer le même type d'expérience, avec les mêmes fonctionnalités, que les applications spécifiques à une 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 déficiences visuelles et compatibilité avec les signaux Web essentiels
L'une des fonctionnalités les plus puissantes des outils pour les développeurs Chrome est sa capacité à repérer les problèmes sur une page Web et à les signaler au développeur. C'est d'autant plus pertinent que nous entrons dans la prochaine phase d'un Web axé sur la confidentialité. Pour réduire la fatigue liée aux notifications et l'encombrement de la console, les outils pour les développeurs Chrome ont lancé l'onglet "Problèmes", qui se concentre sur trois types de problèmes critiques pour commencer : les problèmes de cookies, le contenu mixte et les problèmes de COEP. Pour commencer, regardez la session web.dev LIVE sur la recherche et la résolution de problèmes avec l'onglet "Problèmes".
De plus, les Core Web Vitals devenant l'un des ensembles de métriques les plus importants pour les développeurs Web, DevTools souhaite s'assurer que les développeurs peuvent facilement suivre leurs performances par rapport à ces seuils. Ces trois métriques sont désormais disponibles dans le panneau "Performances" des outils pour les développeurs Chrome.
Enfin, comme de plus en plus de développeurs se concentrent sur l'accessibilité, les outils de développement ont également introduit un émulateur de déficience de la vision des couleurs qui permet aux développeurs d'émuler une vision trouble et d'autres types de déficiences visuelles. Pour en savoir plus sur cette fonctionnalité et bien d'autres, consultez la session Nouveautés des outils de développement.
Lighthouse 6.0 : nouvelles métriques, mesures de laboratoire Core Web Vitals, score de performances mis à jour et nouveaux audits
Lighthouse est un outil Open Source automatisé 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 une vue équilibrée de la qualité de votre expérience utilisateur par rapport à des dimensions critiques.
Pour assurer la cohérence, Lighthouse a ajouté la prise en charge des métriques Core Web Vitals : LCP, TBT (un proxy pour le FID, car Lighthouse est un outil de laboratoire et le FID ne peut être mesuré que sur le terrain) et CLS. Lighthouse a également supprimé trois anciennes métriques : First Meaningful Paint, First CPU Idle et Max Potential FID. Ces suppressions sont dues à des considérations telles que la variabilité des métriques et les nouvelles métriques offrant de meilleures réflexions sur la partie de l'expérience utilisateur que Lighthouse essaie de mesurer. De plus, Lighthouse a également ajusté la part de chaque métrique dans le score de performances global en fonction des commentaires des utilisateurs.
Lighthouse a également ajouté un calculateur de score pour vous aider à explorer votre score de performances, en fournissant une comparaison entre les scores des versions 5 et 6. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport inclut un lien vers le calculateur avec vos résultats.
Enfin, Lighthouse a ajouté un certain nombre de nouveaux audits, axés sur l'analyse JavaScript et l'accessibilité.
Pour en savoir plus, regardez la session What's new in speed tooling (Nouveautés des outils de vitesse).
En savoir plus
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 points forts de l'événement, mais il y en a eu bien d'autres. N'oubliez pas de consulter toutes les sessions et de vous abonner à la newsletter web.dev si vous souhaitez recevoir plus de contenus 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.