{"id":83160,"date":"2022-09-24T03:12:59","date_gmt":"2022-09-24T01:12:59","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/resumen-de-web-dev-live\/"},"modified":"2020-09-16T19:00:51","modified_gmt":"2020-09-16T22:00:51","slug":"resumen-de-web-dev-live","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/","title":{"rendered":"r\u00e9sum\u00e9 de web.dev LIVE"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Vitales-web\" >Web Vitals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Privacidad-y-seguridad-en-la-web\" >Confidentialit\u00e9 et s\u00e9curit\u00e9 sur le Web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Construyendo-una-web-con-poderosas-capacidades\" >Cr\u00e9er un site Web avec des capacit\u00e9s puissantes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Chrome-Devtools-nueva-pestana-Problemas-emulador-de-deficiencias-de-color-y-compatibilidad-con-Web-Vitals\" >Chrome Devtools - Nouvel onglet Probl\u00e8mes, \u00e9mulateur d&#039;\u00e9cart de couleur et prise en charge de Web Vitals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Lighthouse-60-nuevas-metricas-mediciones-de-laboratorio-de-Core-Web-Vitals-una-puntuacion-de-rendimiento-actualizada-y-nuevas-auditorias\" >Lighthouse 6.0 - Nouvelles mesures, mesures de laboratoire de base Web Vitals, score de performance mis \u00e0 jour et nouveaux audits<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resumen-de-web-dev-live\/#Aprende-mas\" >Apprendre encore plus<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Un r\u00e9sum\u00e9 des principales nouvelles et mises \u00e0 jour annonc\u00e9es lors de notre \u00e9v\u00e9nement communautaire en ligne de 3 jours et un rappel des \u00e9v\u00e9nements r\u00e9gionaux \u00e0 venir.<\/p>\n<p>\n          <time>6 juillet 2020<\/time><\/p>\n<\/header>\n<p>Nous venons de terminer notre \u00e9v\u00e9nement de trois jours, web.dev LIVE, o\u00f9 certains membres de la communaut\u00e9 Web se sont r\u00e9unis en ligne pour discuter de l&#039;\u00e9tat du d\u00e9veloppement Web. Nous avons commenc\u00e9 chaque jour dans un fuseau horaire r\u00e9gional diff\u00e9rent, et les employ\u00e9s de Google ont partag\u00e9 une s\u00e9rie de mises \u00e0 jour, d&#039;actualit\u00e9s et de conseils dans l&#039;esprit d&#039;aider les d\u00e9veloppeurs avec des outils et des conseils pour maintenir le Web stable, puissant et accessible.<\/p>\n<p>Si une partie du flux en direct a \u00e9t\u00e9 manqu\u00e9e, toutes les sessions sont enregistr\u00e9es et disponibles pour que vous puissiez les visionner sur YouTube. Nous organisons \u00e9galement des \u00e9v\u00e9nements r\u00e9gionaux \u00e0 venir dans le monde entier qui sont h\u00e9berg\u00e9s par les groupes de d\u00e9veloppeurs Google et proposeront des sessions d&#039;analyse approfondie sur des sujets li\u00e9s \u00e0 ce que nous couvrons pendant web.dev LIVE.<\/p>\n<p>Jetons un coup d&#039;\u0153il \u00e0 certaines des nouvelles et mises \u00e0 jour qui ont \u00e9t\u00e9 partag\u00e9es au cours des trois jours.<\/p>\n<h2 id=\"web-vitals\"><span class=\"ez-toc-section\" id=\"Vitales-web\"><\/span>Web Vitals <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>L&#039;\u00e9quipe Chrome<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2020\/05\/introducing-web-vitals-essential-metrics.html\">Annonc\u00e9<\/a> l&#039;initiative Web Vitals pour fournir des conseils, des mesures et des outils unifi\u00e9s pour aider les d\u00e9veloppeurs \u00e0 offrir une exp\u00e9rience utilisateur exceptionnelle sur le Web. L&#039;\u00e9quipe de recherche Google aussi <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\">r\u00e9cemment annonc\u00e9<\/a> Ils \u00e9valueront l&#039;exp\u00e9rience de la page en tant que crit\u00e8re de classement et incluront les m\u00e9triques Core Web Vitals comme base.<\/p>\n<p>Les trois piliers de 2020 Core Web Vitals sont le chargement du contenu de la page, l&#039;interactivit\u00e9 et la stabilit\u00e9 visuelle, qui sont captur\u00e9s par les m\u00e9triques suivantes:<\/p>\n<figure class=\"w-figure\">\n  <img alt='corewebvitals-5974435' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/corewebvitals-5974435.png'><br \/>\n<\/figure>\n<ul>\n<li>Paint with Largest Content mesure la vitesse de chargement per\u00e7ue et marque le point sur la chronologie de chargement de la page o\u00f9 le contenu principal d&#039;une page est susceptible d&#039;avoir \u00e9t\u00e9 charg\u00e9.<\/li>\n<li>Le d\u00e9lai de premi\u00e8re entr\u00e9e mesure la r\u00e9activit\u00e9 et quantifie l&#039;exp\u00e9rience que les utilisateurs ressentent lorsqu&#039;ils essaient pour la premi\u00e8re fois d&#039;interagir avec une page.<\/li>\n<li>La modification cumulative de la mise en page mesure la stabilit\u00e9 visuelle et quantifie la quantit\u00e9 de mouvement inattendu du contenu sur la page.<\/li>\n<\/ul>\n<p>Sur web.dev LIVE, nous partageons les meilleures pratiques sur la fa\u00e7on de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/AQqFZ5t8uNc\">optimiser pour Core Web Vitals<\/a> et comment utiliser <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/OHb3xZIqUeU\">Chrome DevTools pour explorer les valeurs fondamentales de votre site<\/a>. Nous partageons \u00e9galement de nombreuses autres discussions sur les performances que vous pouvez trouver sur web.dev\/live dans le calendrier du jour 1.<\/p>\n<p>D\u00e9velopper pour une plate-forme aussi large que le Web peut \u00eatre un d\u00e9fi. Les outils de cr\u00e9ation sont souvent au c\u0153ur de votre projet de d\u00e9veloppement Web, assumant un r\u00f4le cl\u00e9 dans la gestion de votre d\u00e9veloppeur et du cycle de vie de vos produits.<\/p>\n<p>Nous avons tous vu des fichiers de configuration de construction peu maniables, pour aider les d\u00e9veloppeurs Web <em>y<\/em> Les auteurs d&#039;outils conqui\u00e8rent la complexit\u00e9 du Web, nous avons cr\u00e9\u00e9 tooling.report. C&#039;est un site Web qui vous aide \u00e0 choisir le bon outil de cr\u00e9ation pour votre prochain projet, \u00e0 d\u00e9cider s&#039;il vaut la peine de migrer d&#039;un outil \u00e0 un autre ou \u00e0 comprendre comment int\u00e9grer les meilleures pratiques dans votre base de code et la configuration de vos outils.<\/p>\n<p>Nous avons con\u00e7u un ensemble de tests pour d\u00e9terminer quels outils de construction vous permettent de suivre les meilleures pratiques de d\u00e9veloppement Web. Nous travaillons avec les auteurs des outils de construction pour nous assurer que nous utilisons correctement leurs outils et les repr\u00e9sentons \u00e9quitablement.<\/p>\n<figure class=\"w-figure\">\n  <img alt='toolingreport-2949255' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/toolingreport-2949255.png'><br \/>\n<\/figure>\n<p>La version initiale de tooling.report couvre webpack v4, Rollup v2, Parcel v2 et Browserify with Gulp, qui semblent \u00eatre les outils de construction les plus populaires pour le moment. Nous avons cr\u00e9\u00e9 tooling.report avec la flexibilit\u00e9 d&#039;ajouter plus d&#039;outils de compilation et des tests suppl\u00e9mentaires avec l&#039;aide de la communaut\u00e9.<\/p>\n<p>S&#039;il nous manque une meilleure pratique qui devrait \u00eatre essay\u00e9e, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/tooling.report\/issues\/new\">le proposer dans un num\u00e9ro GitHub<\/a>. Si vous \u00eates pr\u00eat \u00e0 \u00e9crire un test ou \u00e0 ajouter un nouvel outil que nous n&#039;avons pas inclus dans l&#039;ensemble initial, nous vous invitons \u00e0<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/tooling.report\/blob\/dev\/CONTRIBUTING.md\">contribuer<\/a>!<\/p>\n<p>En attendant, vous pouvez en savoir plus sur notre approche de la cr\u00e9ation de tooling.report et consulter notre session \u00e0 partir de web.dev LIVE.<\/p>\n<h2 id=\"privacy-and-security-on-the-web\"><span class=\"ez-toc-section\" id=\"Privacidad-y-seguridad-en-la-web\"><\/span>Confidentialit\u00e9 et s\u00e9curit\u00e9 sur le Web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Chrome croit en un Web ouvert qui respecte la confidentialit\u00e9 des utilisateurs et g\u00e8re des cas d&#039;utilisation cl\u00e9s qui permettent au Web de fonctionner pour tout le monde.<\/p>\n<p>En 2019, Chrome<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/05\/improving-privacy-and-security-on-web.html\">propos\u00e9<\/a> une mise \u00e0 jour de la norme relative aux cookies pour restreindre les cookies aux contextes propri\u00e9taires par d\u00e9faut et exiger que les cookies pour les contextes tiers soient explicitement marqu\u00e9s comme tels. Plus pr\u00e9cis\u00e9ment, cela fournit une ligne de d\u00e9fense contre les attaques de falsification de requ\u00eates intersites. La proposition est maintenant adopt\u00e9e par Chrome, Firefox, Edge et d&#039;autres navigateurs.<\/p>\n<p>Alors que Chrome a d\u00e9cid\u00e9 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2020\/04\/temporarily-rolling-back-samesite.html\">inversion temporaire<\/a> Ces changements \u00e0 la lumi\u00e8re du COVID-19, malheureusement pendant une crise o\u00f9 les gens sont les plus vuln\u00e9rables, ces types d&#039;attaques sont \u00e9galement vus en augmentation. Donc, avec la version stable de Chrome 84 (mi-juillet 2020), les changements<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromium.org\/updates\/same-site?pli=1#20200528\">recommencer \u00e0 se d\u00e9rouler<\/a> dans toutes les versions de Chrome \u00e0 partir de 80. Consultez le guide des cookies SameSite ainsi que la session LIVE de web.dev pour plus d&#039;informations.<\/p>\n<p>De plus, sous la banni\u00e8re du <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2020\/01\/building-more-private-web-path-towards.html\">Sandbox de confidentialit\u00e9<\/a> Chrome propose une s\u00e9rie de propositions de normes visant \u00e0 prendre en charge des cas d&#039;utilisation permettant aux utilisateurs de gagner leur vie en utilisant la plate-forme Web, mais de le faire d&#039;une mani\u00e8re qui respecte mieux la confidentialit\u00e9 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&#039;autres parties. En savoir plus sur cette initiative dans le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/8Tl0uQdVpxU\">S\u00e9curit\u00e9 et confidentialit\u00e9 pour le Web ouvert<\/a> session.<\/p>\n<p>Enfin, en ce qui concerne la s\u00e9curit\u00e9 des utilisateurs, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/meltdownattack.com\/\">Spectre<\/a> c&#039;\u00e9tait une vuln\u00e9rabilit\u00e9 qui signifiait que le code malveillant s&#039;ex\u00e9cutant dans un processus de navigateur pouvait lire toutes les donn\u00e9es associ\u00e9es \u00e0 ce processus, m\u00eame si elles provenaient d&#039;une source diff\u00e9rente. L&#039;une des mesures d&#039;att\u00e9nuation du navigateur pour cela est l&#039;isolation de site, c&#039;est-\u00e0-dire placer chaque site dans un processus distinct. Regardez la session LIVE de web.dev sur le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/XLNJYhjA-0c\">Nouvelles politiques d&#039;ouverture et d&#039;int\u00e9gration d&#039;origine crois\u00e9e<\/a> (COOP et COEP) pour plus d&#039;informations.<\/p>\n<h2 id=\"building-a-web-with-powerful-capabilities\"><span class=\"ez-toc-section\" id=\"Construyendo-una-web-con-poderosas-capacidades\"><\/span>Cr\u00e9er un site Web avec des capacit\u00e9s puissantes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Chrome veut que vous ayez la libert\u00e9 de cr\u00e9er des applications Web de la plus haute qualit\u00e9 qui offrent la plus grande port\u00e9e aux utilisateurs sur tous les appareils. En combinant la facilit\u00e9 d&#039;installation et la fiabilit\u00e9 des PWA, avec le projet de capacit\u00e9s (Projet Fugu), Chrome se concentre sur trois choses pour combler le foss\u00e9 entre le natif et le Web, pour vous aider \u00e0 cr\u00e9er et \u00e0 offrir de superbes exp\u00e9riences.<\/p>\n<p>Tout d&#039;abord, les \u00e9quipes Chrome ont travaill\u00e9 dur pour donner aux d\u00e9veloppeurs Web et aux utilisateurs plus de contr\u00f4le sur l&#039;exp\u00e9rience d&#039;installation, en ajoutant une promotion d&#039;installation \u00e0 l&#039;omnibox, et plus encore. Malgr\u00e9 l&#039;omnipr\u00e9sence du Web, il est toujours important pour certaines entreprises d&#039;avoir leur application dans le magasin. Pour vous aider, Chrome a publi\u00e9<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/bubblewrap\">Papier bulle<\/a>, une biblioth\u00e8que et une CLI qui facilitent l&#039;introduction de votre PWA sur le Play Store. En fait, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/PWABuilder.com\">PWABuilder.com<\/a> utilisez maintenant Bubblewrap sous le capot. En quelques clics de souris, vous pouvez g\u00e9n\u00e9rer un APK et t\u00e9l\u00e9charger votre PWA sur le Play Store, \u00e0 condition que vous remplissiez les conditions.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2020\/06\/changes-to-quality-criteria-for-pwas.html\">Crit\u00e8res<\/a>.<\/p>\n<p>Deuxi\u00e8mement, Chrome offre une int\u00e9gration plus \u00e9troite avec le syst\u00e8me d&#039;exploitation, comme la possibilit\u00e9 de partager une photo, une chanson ou quoi que ce soit en invoquant le service de partage au niveau du syst\u00e8me avec l&#039;API Web Share, ou la possibilit\u00e9 de recevoir du contenu lorsqu&#039;il est partag\u00e9 \u00e0 partir d&#039;un autre site. . application install\u00e9e. Vous pouvez tenir les utilisateurs inform\u00e9s ou les notifier subtilement de la nouvelle activit\u00e9 avec l&#039;ID d&#039;application. De plus, il est d\u00e9sormais plus facile pour les utilisateurs de lancer rapidement une action \u00e0 l&#039;aide des raccourcis d&#039;application, \u00e0 venir dans Chrome 84 (mi-juillet 2020).<\/p>\n<p>Enfin, Chrome a travaill\u00e9 sur de nouvelles fonctionnalit\u00e9s qui permettent de nouveaux sc\u00e9narios qui n&#039;\u00e9taient pas possibles auparavant, tels que des \u00e9diteurs qui lisent et \u00e9crivent des fichiers sur le syst\u00e8me de fichiers local de l&#039;utilisateur, ou obtiennent la liste des polices install\u00e9es localement que les utilisateurs peuvent utiliser. dans leurs conceptions.<\/p>\n<p>Pendant web.dev LIVE, nous avons parl\u00e9 de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/NXCT3htg9nk\">de nombreuses autres capacit\u00e9s et fonctionnalit\u00e9s<\/a> qui peut vous permettre d&#039;offrir le m\u00eame type d&#039;exp\u00e9rience, avec les m\u00eames capacit\u00e9s, que les applications natives. Voir toutes les sessions sur web.dev\/live dans le programme du jour 2.<\/p>\n<h3 id=\"chrome-devtools:-new-issues-tab-color-deficiencies-emulator-and-web-vitals-support\"><span class=\"ez-toc-section\" id=\"Chrome-Devtools-nueva-pestana-Problemas-emulador-de-deficiencias-de-color-y-compatibilidad-con-Web-Vitals\"><\/span>Chrome Devtools - Nouvel onglet Probl\u00e8mes, \u00e9mulateur d&#039;\u00e9cart de couleur et prise en charge de Web Vitals <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>L&#039;une des fonctionnalit\u00e9s les plus puissantes de Chrome DevTools est sa capacit\u00e9 \u00e0 d\u00e9tecter les probl\u00e8mes sur une page Web et \u00e0 attirer l&#039;attention du d\u00e9veloppeur. Ceci est plus pertinent alors que nous passons \u00e0 la phase suivante d&#039;un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2020\/01\/building-more-private-web-path-towards.html\">Web qui donne la priorit\u00e9 \u00e0 la confidentialit\u00e9<\/a>. Pour r\u00e9duire la fatigue des notifications et l&#039;encombrement de la console, Chrome DevTools a publi\u00e9 le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/issues\">Onglet Probl\u00e8mes<\/a> qui se concentre sur trois types de probl\u00e8mes critiques pour vous aider \u00e0 d\u00e9marrer: les probl\u00e8mes de cookies,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/security\/prevent-mixed-content\/what-is-mixed-content\">contenu mixte<\/a>et les probl\u00e8mes de COEP. Voir la session LIVE de web.dev sur <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/1TbkSxQb4bI\">rechercher et r\u00e9soudre les probl\u00e8mes avec l&#039;onglet Probl\u00e8mes<\/a> Pour commencer.<\/p>\n<figure class=\"w-figure\">\n  <img alt='issues-5095346' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/issues-5095346.png'><br \/>\n<\/figure>\n<p>De plus, avec Core Web Vitals devenant l&#039;un des ensembles de mesures les plus importants que les d\u00e9veloppeurs Web doivent suivre et mesurer, DevTools veut s&#039;assurer que les d\u00e9veloppeurs peuvent facilement suivre leurs performances par rapport \u00e0 ces seuils. Ces trois mesures se trouvent donc d\u00e9sormais dans le tableau de bord des performances de Chrome DevTools.<\/p>\n<p>Et enfin, avec un nombre croissant de d\u00e9veloppeurs se concentrant sur l&#039;accessibilit\u00e9, DevTools a \u00e9galement introduit un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/mathias\/status\/1237393102635012101?\">\u00e9mulateur de d\u00e9ficience de la vision des couleurs<\/a> qui permet aux d\u00e9veloppeurs d&#039;imiter une vision floue et d&#039;autres types de d\u00e9ficiences visuelles. Vous pouvez en savoir plus \u00e0 ce sujet et sur de nombreuses autres fonctionnalit\u00e9s dans le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/6yrJZHqJe2k\">Nouveaut\u00e9s de DevTools<\/a> session.<\/p>\n<figure class=\"w-figure\">\n  <img alt='\u00e9mulateur-5874971' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/emulator-5874971.png'><br \/>\n<\/figure>\n<h3 id=\"lighthouse-6.0:-new-metrics-core-web-vitals-lab-measurements-an-updated-performance-score-and-new-audits\"><span class=\"ez-toc-section\" id=\"Lighthouse-60-nuevas-metricas-mediciones-de-laboratorio-de-Core-Web-Vitals-una-puntuacion-de-rendimiento-actualizada-y-nuevas-auditorias\"><\/span>Lighthouse 6.0 - Nouvelles mesures, mesures de laboratoire de base Web Vitals, score de performance mis \u00e0 jour et nouveaux audits <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Phare<\/a> est un outil automatis\u00e9 open source qui aide les d\u00e9veloppeurs \u00e0 am\u00e9liorer les performances de leur site. Dans sa derni\u00e8re version, l&#039;\u00e9quipe de Lighthouse s&#039;est concentr\u00e9e sur la fourniture d&#039;informations bas\u00e9es sur des m\u00e9triques qui vous donnent une vue \u00e9quilibr\u00e9e de la qualit\u00e9 de votre exp\u00e9rience utilisateur par rapport aux dimensions critiques.<\/p>\n<p>Pour assurer la coh\u00e9rence, Lighthouse a ajout\u00e9 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 \u00eatre mesur\u00e9 que sur le terrain) et CLS. Lighthouse a \u00e9galement supprim\u00e9 trois anciennes m\u00e9triques: Premi\u00e8re peinture significative, Premier inactif du processeur et FID potentiels maximum. Ces \u00e9liminations sont dues \u00e0 des consid\u00e9rations telles que la variabilit\u00e9 m\u00e9trique et des m\u00e9triques plus r\u00e9centes qui refl\u00e8tent mieux la partie de l&#039;exp\u00e9rience utilisateur que Lighthouse tente de mesurer. De plus, Lighthouse a \u00e9galement apport\u00e9 quelques ajustements au nombre de facteurs pour chaque m\u00e9trique dans le score de performance globale en fonction des commentaires des utilisateurs.<\/p>\n<p>Phare a \u00e9galement ajout\u00e9 un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/googlechrome.github.io\/lighthouse\/scorecalc\/\">calculateur de score<\/a> pour vous aider \u00e0 explorer votre score de performance en fournissant une comparaison entre les scores de la version 5 et 6. Lorsque vous ex\u00e9cutez un audit avec Lighthouse 6.0, le rapport est livr\u00e9 avec un lien vers la calculatrice avec vos r\u00e9sultats complets.<\/p>\n<p>Enfin, Lighthouse a ajout\u00e9 une s\u00e9rie de nouveaux audits, en mettant l&#039;accent sur l&#039;analyse et l&#039;accessibilit\u00e9 JavaScript.<\/p>\n<figure class=\"w-figure\">\n  <img alt='audits-7603447' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/audits-7603447.png'><br \/>\n<\/figure>\n<p>Apprenez-en plus en regardant le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/youtu.be\/yDHfrhCGFQw\">Quoi de neuf dans les outils de vitesse<\/a><br \/>\nsession.<\/p>\n<h2 id=\"learn-more\"><span class=\"ez-toc-section\" id=\"Aprende-mas\"><\/span>Apprendre encore plus <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Merci \u00e0 tous les membres de la communaut\u00e9 qui nous ont rejoints pour discuter des opportunit\u00e9s et des d\u00e9fis de la plateforme web.<\/p>\n<p>Cet article r\u00e9sumait certains des moments forts de l&#039;\u00e9v\u00e9nement, mais il y avait tellement plus. Assurez-vous de consulter toutes les sessions et de vous abonner \u00e0 la newsletter web.dev si vous souhaitez recevoir plus de contenu directement dans votre bo\u00eete de r\u00e9ception. Et visitez la section \u00c9v\u00e9nements r\u00e9gionaux sur web.dev\/live pour trouver un \u00e9v\u00e9nement communautaire \u00e0 venir dans votre fuseau horaire!<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>Un r\u00e9sum\u00e9 des principales nouvelles et mises \u00e0 jour annonc\u00e9es lors de notre \u00e9v\u00e9nement communautaire en ligne de 3 jours et un rappel des \u00e9v\u00e9nements r\u00e9gionaux \u00e0 venir. 6 de\u2026<\/p>","protected":false},"author":1,"featured_media":83161,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83160","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>resumen de web.dev LIVE - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento comunitario en l\u00ednea de 3 d\u00edas y un recordatorio sobre\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"resumen de web.dev LIVE\" \/>\n<meta property=\"og:description\" content=\"Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento comunitario en l\u00ednea de 3 d\u00edas y un recordatorio sobre\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-24T01:12:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png\" \/>\n\t<meta property=\"og:image:width\" content=\"752\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"resumen de web.dev LIVE\",\"datePublished\":\"2022-09-24T01:12:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/\"},\"wordCount\":2166,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4454132.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/\",\"name\":\"resumen de web.dev LIVE - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4454132.png\",\"datePublished\":\"2022-09-24T01:12:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento comunitario en l\u00ednea de 3 d\u00edas y un recordatorio sobre\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/resume-web-dev-live\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4454132.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4454132.png\",\"width\":752,\"height\":479,\"caption\":\"thumbnail-4454132-6895145-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"resumen de web.dev LIVE - R Marketing Digital","description":"Un r\u00e9sum\u00e9 des principales nouvelles et mises \u00e0 jour annonc\u00e9es lors de notre \u00e9v\u00e9nement communautaire en ligne de 3 jours et un rappel sur","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/","og_locale":"fr_FR","og_type":"article","og_title":"resumen de web.dev LIVE","og_description":"Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento comunitario en l\u00ednea de 3 d\u00edas y un recordatorio sobre","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-24T01:12:59+00:00","og_image":[{"width":752,"height":479,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"resumen de web.dev LIVE","datePublished":"2022-09-24T01:12:59+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/"},"wordCount":2166,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/","name":"resumen de web.dev LIVE - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png","datePublished":"2022-09-24T01:12:59+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Un r\u00e9sum\u00e9 des principales nouvelles et mises \u00e0 jour annonc\u00e9es lors de notre \u00e9v\u00e9nement communautaire en ligne de 3 jours et un rappel sur","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/resume-web-dev-live\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4454132.png","width":752,"height":479,"caption":"thumbnail-4454132-6895145-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83160"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83161"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}