Contenidos
Un résumé des principales nouvelles et mises à jour annoncées lors de notre événement communautaire en ligne de 3 jours et un rappel des événements régionaux à venir.
Nous venons de terminer notre événement de trois jours, web.dev LIVE, où certains membres de la communauté Web se sont réunis en ligne pour discuter de l'état du développement Web. Nous avons commencé chaque jour dans un fuseau horaire régional différent, et les employés de Google ont partagé une série de mises à jour, d'actualités et de conseils dans l'esprit d'aider les développeurs avec des outils et des conseils pour maintenir le Web stable, puissant et accessible.
Si une partie du flux en direct a été manquée, toutes les sessions sont enregistrées et disponibles pour que vous puissiez les visionner sur YouTube. Nous organisons également des événements régionaux à venir dans le monde entier qui sont hébergés par les groupes de développeurs Google et proposeront des sessions d'analyse approfondie sur des sujets liés à ce que nous couvrons pendant web.dev LIVE.
Jetons un coup d'œil à certaines des nouvelles et mises à jour qui ont été partagées au cours des trois jours.
Web Vitals
L'équipe Chrome
Annoncé l'initiative Web Vitals pour 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 aussi récemment annoncé Ils évalueront l'expérience de la page en tant que critère de classement et incluront les métriques Core Web Vitals comme base.
Les trois piliers de 2020 Core Web Vitals sont le chargement du contenu de la page, l'interactivité et la stabilité visuelle, qui sont capturés par les métriques suivantes:
- Paint with Largest Content mesure la vitesse de chargement perçue et marque le point sur la chronologie de chargement de la page où le contenu principal d'une page est susceptible d'avoir été chargé.
- Le délai de première entrée mesure la réactivité et quantifie l'expérience que les utilisateurs ressentent lorsqu'ils essaient pour la première fois d'interagir avec une page.
- La modification cumulative de la mise en page mesure la stabilité visuelle et quantifie la quantité de mouvement inattendu du contenu sur la page.
Sur web.dev LIVE, nous partageons les meilleures pratiques sur la façon de optimiser pour Core Web Vitals et comment utiliser Chrome DevTools pour explorer les valeurs fondamentales de votre site. Nous partageons également de nombreuses autres discussions sur les performances que vous pouvez trouver sur web.dev/live dans le calendrier du jour 1.
Développer pour une plate-forme aussi large que le Web peut être un défi. Les outils de création sont souvent au cœur de votre projet de développement Web, assumant un rôle clé dans la gestion de votre développeur et du cycle de vie de vos produits.
Nous avons tous vu des fichiers de configuration de construction peu maniables, pour aider les développeurs Web y Les auteurs d'outils conquièrent la complexité du Web, nous avons créé tooling.report. C'est un site Web qui vous aide à choisir le bon outil de création pour votre prochain projet, à décider s'il vaut la peine de migrer d'un outil à un autre ou à comprendre comment intégrer les meilleures pratiques dans votre base de code et la configuration de vos outils.
Nous avons conçu un ensemble de tests pour déterminer quels outils de construction vous permettent de suivre les meilleures pratiques de développement Web. Nous travaillons avec les auteurs des outils de construction pour nous assurer que nous utilisons correctement leurs outils et les représentons équitablement.
La version initiale de tooling.report couvre webpack v4, Rollup v2, Parcel v2 et Browserify with Gulp, qui semblent être les outils de construction les plus populaires pour le moment. Nous avons créé tooling.report avec la flexibilité d'ajouter plus d'outils de compilation et des tests supplémentaires avec l'aide de la communauté.
S'il nous manque une meilleure pratique qui devrait être essayée, le proposer dans un numéro GitHub. Si vous êtes prêt à écrire un test ou à ajouter un nouvel 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 la création de tooling.report et consulter notre session à partir de web.dev LIVE.
Confidentialité et sécurité sur le Web
Chrome croit en un Web ouvert qui respecte la confidentialité des utilisateurs et gère des cas d'utilisation clés qui permettent au Web de fonctionner pour tout le monde.
En 2019, Chrome
proposé une mise à jour de la norme relative aux cookies pour restreindre les cookies aux contextes propriétaires par défaut et 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 de falsification de requêtes intersites. La proposition est maintenant adoptée par Chrome, Firefox, Edge et d'autres navigateurs.
Alors que Chrome a décidé inversion temporaire Ces changements à la lumière du COVID-19, malheureusement pendant une crise où les gens sont les plus vulnérables, ces types d'attaques sont également vus en augmentation. Donc, avec la version stable de Chrome 84 (mi-juillet 2020), les changements
recommencer à se dérouler dans toutes les versions de Chrome à partir de 80. Consultez le guide des cookies SameSite ainsi que la session LIVE de web.dev pour plus d'informations.
De plus, sous la bannière du Sandbox de confidentialité Chrome propose une série de propositions de normes visant à prendre en charge des cas d'utilisation permettant aux utilisateurs de gagner leur vie en utilisant la plate-forme Web, mais de le faire d'une manière qui respecte mieux la confidentialité des utilisateurs. Chrome recherche activement des commentaires sur ces propositions et participe aux forums ouverts du W3C pour discuter des propositions ainsi que de celles soumises par d'autres parties. En savoir plus sur cette initiative dans le Sécurité et confidentialité pour le Web ouvert session.
Enfin, en ce qui concerne la sécurité des utilisateurs, Spectre c'était une vulnérabilité qui signifiait que le code malveillant s'exécutant dans un processus de navigateur pouvait lire toutes les données associées à ce processus, même si elles provenaient d'une source différente. L'une des mesures d'atténuation du navigateur pour cela est l'isolation de site, c'est-à-dire placer chaque site dans un processus distinct. Regardez la session LIVE de web.dev sur le
Nouvelles politiques d'ouverture et d'intégration d'origine croisée (COOP et COEP) pour plus d'informations.
Créer un site Web avec des capacités puissantes
Chrome veut que vous ayez la liberté de créer des applications Web de la plus haute qualité qui offrent la plus grande portée aux utilisateurs sur tous les appareils. En combinant la facilité d'installation et la fiabilité des PWA, avec le projet de capacités (Projet Fugu), Chrome se concentre sur trois choses pour combler le fossé entre le natif et le Web, pour vous aider à créer et à offrir de superbes expériences.
Tout d'abord, les équipes Chrome ont travaillé dur pour donner aux développeurs Web et aux utilisateurs plus de 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 d'avoir leur application dans le magasin. Pour vous aider, Chrome a publié
Papier bulle, une bibliothèque et une CLI qui facilitent l'introduction de votre PWA sur le Play Store. En fait, PWABuilder.com utilisez maintenant Bubblewrap sous le capot. En quelques clics de souris, vous pouvez générer un APK et télécharger votre PWA sur le Play Store, à condition que vous remplissiez les conditions.
Critères.
Deuxièmement, Chrome offre une intégration plus étroite avec le système d'exploitation, comme la possibilité de partager une photo, une chanson ou quoi que ce soit en invoquant 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'un autre site. . application installée. Vous pouvez tenir les utilisateurs informés ou les notifier subtilement de la nouvelle activité avec l'ID d'application. De plus, il est désormais plus facile pour les utilisateurs de lancer rapidement une action à l'aide des raccourcis d'application, à venir dans Chrome 84 (mi-juillet 2020).
Enfin, Chrome a travaillé sur de nouvelles fonctionnalités qui permettent de nouveaux scénarios qui n'étaient pas possibles auparavant, tels que 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 que les utilisateurs peuvent utiliser. dans leurs conceptions.
Pendant web.dev LIVE, nous avons parlé de de nombreuses autres capacités et fonctionnalités qui peut vous permettre d'offrir le même type d'expérience, avec les mêmes capacités, que les applications natives. Voir toutes les sessions sur web.dev/live dans le programme du jour 2.
Chrome Devtools - Nouvel onglet Problèmes, émulateur d'écart de couleur et prise en charge de 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 à attirer l'attention du développeur. Ceci est plus pertinent alors que nous passons à la phase suivante d'un
Web qui donne la priorité à la confidentialité. Pour réduire la fatigue des notifications et l'encombrement de la console, Chrome DevTools a publié le Onglet Problèmes qui se concentre sur trois types de problèmes critiques pour vous aider à démarrer: les problèmes de cookies,
contenu mixteet les problèmes de COEP. Voir la session LIVE de web.dev sur rechercher et résoudre les problèmes avec l'onglet Problèmes Pour commencer.
De plus, avec Core Web Vitals devenant l'un des ensembles de mesures les plus importants que les développeurs Web doivent suivre et mesurer, DevTools veut s'assurer que les développeurs peuvent facilement suivre leurs performances par rapport à ces seuils. Ces trois mesures se trouvent donc désormais dans le tableau de bord des performances de Chrome DevTools.
Et enfin, avec un nombre croissant de développeurs se concentrant sur l'accessibilité, DevTools a également introduit un émulateur de déficience de la vision des couleurs qui permet aux développeurs d'imiter une vision floue et d'autres types de déficiences visuelles. Vous pouvez en savoir plus à ce sujet et sur de nombreuses autres fonctionnalités dans le Nouveautés de DevTools session.
Lighthouse 6.0 - Nouvelles mesures, mesures de laboratoire de base Web Vitals, score de performance mis à jour et nouveaux audits
Phare 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 de Lighthouse s'est concentrée 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, Lighthouse a ajouté la prise en charge de Core Web Vitals: LCP, TBT (un proxy pour FID puisque Lighthouse est un outil de laboratoire et que le FID ne peut être mesuré que sur le terrain) et CLS. Lighthouse a également supprimé trois anciennes métriques: Première peinture significative, Premier inactif du processeur et FID potentiels maximum. Ces éliminations sont dues à des considérations telles que la variabilité métrique et des métriques plus récentes qui reflètent mieux la partie de l'expérience utilisateur que Lighthouse tente de mesurer. De plus, Lighthouse a également apporté quelques ajustements au nombre de facteurs pour chaque métrique dans le score de performance globale en fonction des commentaires des utilisateurs.
Phare a également ajouté un calculateur de score pour vous aider à explorer votre score de performance en fournissant une comparaison entre les scores de la version 5 et 6. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport est livré avec un lien vers la calculatrice avec vos résultats complets.
Enfin, Lighthouse a ajouté une série de nouveaux audits, en mettant l'accent sur l'analyse et l'accessibilité JavaScript.
Apprenez-en plus en regardant le Quoi de neuf dans les outils de vitesse
session.
Apprendre encore plus
Merci à tous les membres de la communauté qui nous ont rejoints pour discuter des opportunités et des défis de la plateforme web.
Cet article résumait certains des moments forts de l'événement, mais il y avait tellement plus. Assurez-vous de consulter toutes les sessions et de vous abonner à la newsletter web.dev si vous souhaitez recevoir plus de contenu directement dans votre boîte de réception. Et visitez la section Événements régionaux sur web.dev/live pour trouver un événement communautaire à venir dans votre fuseau horaire!
