Face à l'importance grandissante des Core Web Vitals, les propriétaires et les développeurs de sites se concentrent de plus en plus sur les performances et l'expérience utilisateur clé. Google propose de nombreux outils pour vous aider à évaluer, optimiser et surveiller les pages, mais les utilisateurs ne sont souvent pas surpris par les différentes sources de données et la manière de les utiliser efficacement. Ce guide propose un workflow combinant plusieurs outils et explique où et comment ils sont pertinents tout au long du processus de développement.

Découvrez les différents événements liés à Baseline en février 2025.

ruby-align fait désormais partie de Baseline

Publié le 20 février 2025 Télécharger de manière fiable de grands modèles d'IA est une tâche difficile. Si les utilisateurs perdent leur connexion Internet ou ferment votre site Web ou votre application Web, ils perdent les fichiers de modèle

Découvrez l'indice de ressource rel=prefetch et comment l'utiliser.

Découvrez comment identifier et corriger les décalages de mise en page.

Le CLS (Cumulative Layout Shift) est une métrique qui quantifie la fréquence à laquelle les utilisateurs subissent des changements soudains dans le contenu de la page. Dans ce guide, nous allons aborder l'optimisation des causes courantes de CLS telles que les images et les cadres iFrame sans dimensions ni contenu dynamique.

Les propriétés CSS scrollbar-color et scrollbar-gutter sont disponibles dans tous les principaux moteurs de navigateur, ce qui les rend disponibles en version de référence.

Dans sa première édition, ce récapitulatif mensuel de Baseline couvre les événements qui se sont déroulés dans Baseline, à la fois chez Google et dans la communauté des développeurs Web en janvier 2025.

La récupération de mémoire WebAssembly et les optimisations de la fonction Wasm tail call sont désormais disponibles dans tous les principaux moteurs de navigateur.

Cet article présente la métrique LCP (Largest Contentful Paint) et explique comment la mesurer.

Promise.try est désormais disponible dans tous les principaux moteurs de navigateurs. Il est donc disponible en tant que référence.

Description brève

Publié le 13 janvier 2024 Vous pouvez créer de nombreux projets incroyables avec l'IA, avec des modèles de machine learning classiques et de nouveaux grands modèles de langage (LLM). Grâce aux LLM, les ordinateurs peuvent générer de nouveaux

On vous a dit de "ne pas bloquer le thread principal" et de "diviser vos longues tâches", mais que signifient ces choses ?

Le masquage CSS vous permet d'utiliser une image en tant que calque de masque. Cela signifie que vous pouvez utiliser une image, un SVG ou un dégradé comme masque pour créer des effets intéressants sans éditeur d'images.

Ensemble de données "web-features", tableau de bord sur l'état de la plate-forme Web, widget d'état de référence et plus encore ! Revoyez la référence de 2024.

Cet article explique le chargement en différé et les options disponibles pour le chargement en différé des vidéos.

Le préchargement de module permet de charger à l'avance les modules JavaScript de manière déclarative.

Pour optimiser l'expérience utilisateur, il est essentiel de comprendre comment les utilisateurs interagissent avec vos formulaires. La saisie automatique du navigateur joue un rôle important dans ce processus. Découvrez comment collecter et analyser les données sur la façon dont les utilisateurs utilisent le remplissage automatique dans vos formulaires.

La détection de la toxicité protège vos utilisateurs et crée un environnement en ligne plus sûr. Dans la deuxième partie, nous apprenons à créer un outil d'IA côté client pour détecter et atténuer la toxicité à sa source.

Cet article décrit la métrique "Total Blocking Time (TBT)" et explique comment la mesurer.

Métriques essentielles pour un site opérationnel

Guide par étapes expliquant comment décomposer le LCP et identifier les points clés à améliorer.

Découvrez comment mesurer les signaux Web de votre site dans des environnements réels et en laboratoire.

Ensemble de bonnes pratiques que Chrome a identifiées comme les plus grandes opportunités d'optimiser les performances Web et d'améliorer les Core Web Vitals

La propriété CSS content-visibility est désormais disponible en version de référence.

Recherche et méthodologie derrière les seuils des Signaux Web essentiels

Vous avez examiné vos données réelles et constaté que vos interactions étaient lentes. L'étape suivante consiste à en savoir plus sur la façon de tester manuellement ces interactions et à identifier leurs causes.

Cet article explique l'origine de Baseline, l'implication de Google et la propriété du groupe de la communauté WebDX.

Découvrez comment optimiser vos pages pour des chargements instantanés lorsque vous utilisez les boutons "Précédent" et "Suivant" du navigateur.

L'imbrication CSS s'améliore considérablement !

Cet article présente la métrique FID (First Input Delay) et explique comment la mesurer.

Découvrez comment attribuer vos données de performance à l'aide d'informations de débogage pour vous aider à identifier et résoudre les problèmes réels des utilisateurs grâce à Analytics.

Découvrez comment utiliser les outils Google pour corréler vos métriques Core Web Vitals avec vos revenus publicitaires.

Quel impact @property a-t-il sur les performances de votre CSS ?

Il existe de nombreuses options pour stocker des données dans le navigateur. Laquelle répond le mieux à vos besoins ?

Cet article traite de l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des iFrames.

Ce tutoriel interactif étape par étape explique comment créer un serveur qui gère les abonnements aux notifications push et envoie les requêtes du protocole Web push à un service push.

Découvrez les méthodes recommandées et non recommandées pour créer plusieurs PWA en réutilisant le même domaine, ainsi que leurs avantages et leurs inconvénients.

Conditions requises pour modifier les icônes, les raccourcis, les couleurs et d'autres métadonnées dans le fichier manifeste de votre application Web pour votre PWA

Critères d'installation des progressive web apps.

Qu'est-ce qui rend une progressive web app de qualité ou de qualité ?

Le fichier manifeste de l'application Web est un simple fichier JSON qui indique au navigateur comment votre application Web doit se comporter.

Découvrez comment déployer une CSP basée sur des nonces ou des hachages de script pour vous protéger en profondeur contre les scripts intersites.

Cet article aide les développeurs Web à choisir l'API matérielle adaptée à un appareil donné.

Découvrez comment utiliser les requêtes d'origine associées pour autoriser la réutilisation des clés d'accès sur vos sites.

Cet article porte sur l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des images.

Choisir le bon format d'image est la première étape pour diffuser des images optimisées sur votre site Web. Cet article vous aide à faire le bon choix.

Les métriques personnalisées vous permettent de mesurer et d'optimiser les aspects de l'expérience utilisateur qui sont propres à votre site.

Découvrez comment envoyer les données des signaux Web vers les propriétés Google Analytics 4, puis les exporter pour les analyser dans BigQuery et Looker Studio.

Ce guide présente les bonnes pratiques à suivre pour les sites Web lorsqu'ils demandent aux utilisateurs l'autorisation d'accéder à des fonctionnalités sensibles (comme l'appareil photo, le micro et la localisation) afin de limiter les invites inutiles et l'accès bloqué.

Découvrez comment les notifications relatives aux cookies affectent les performances, la mesure des performances et l'expérience utilisateur.

Les développeurs Web peuvent personnaliser les notifications multimédias et répondre aux événements multimédias, comme la recherche ou le suivi des modifications, avec l'API Media Session.

Avant de pouvoir reproduire des interactions lentes dans l'atelier afin d'optimiser le paramètre "Interaction to Next Paint" sur votre site Web, vous devez vous appuyer sur les données réelles pour les trouver. Ce guide vous explique comment procéder.

Utilisez l'attribut tabindex pour définir explicitement la position de tabulation d'un élément.

Cet article présente la métrique TTFB (Time to First Byte) et explique comment la mesurer.

Découvrez comment ajuster vos requêtes pour obtenir les résultats souhaités avec différents LLM, modèles et tailles de modèles.

Cet article présente la métrique Interaction to Next Paint (INP) et explique comment elle fonctionne, comment la mesurer et comment l'améliorer.

description: définissez les couleurs qui réagissent au jeu de couleurs utilisé avec la fonction light-dark().

Dans ce guide, destiné aux développeurs Web qui souhaitent bénéficier de WebAssembly, vous allez apprendre à utiliser Wasm pour externaliser les tâches nécessitant une utilisation intensive du processeur à l'aide d'un exemple en cours d'exécution.

Dans la grille CSS, les propriétés "grid-template-columns" et "grid-template-rows" vous permettent respectivement de définir des noms de lignes et de suivre la taille des colonnes et des lignes de la grille. La prise en charge de l'interpolation pour ces propriétés permet aux mises en page en grille de passer de manière fluide entre les états, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.

Apprenez à contrôler des jeux Web avec l'API Gamepad.

La propriété inerte est un attribut HTML global qui simplifie la suppression et la restauration des événements d'entrée utilisateur pour un élément, y compris les événements de sélection et les événements issus de technologies d'assistance.

Les parties de confiance peuvent déterminer d'où provient la clé d'accès en examinant l'AAGUID. Découvrez comment ça marche.

À l'aide de l'exemple d'un langage synthétique appelé ExampleScript, découvrez comment écrire et optimiser des modules WebAssembly en JavaScript à l'aide de l'API Binaryen.js.

La capture audio/vidéo est depuis longtemps le Saint Graal du développement Web. Pendant de nombreuses années, nous avons dû nous appuyer sur des plug-ins de navigateur ( Flash ou Silverlight ) pour accomplir cette tâche. Allez! HTML5 à la rescousse.

Le composant Web <model-viewer> vous permet d'utiliser des modèles 3D sur une page Web de manière déclarative.

Découvrir comment utiliser "userVerification" dans WebAuthn

Découvrez pourquoi les données RUM peuvent afficher différents chiffres des Signaux Web essentiels de CrUX.

Il est important de créer des sites inclusifs et accessibles à tous. Nous pouvons optimiser au moins six domaines clés du handicap: la vision, l'audition, la mobilité, la cognition, la parole et les neurones.

Les scripts tiers offrent un large éventail de fonctionnalités utiles, ce qui rend le Web plus dynamique. Découvrez comment optimiser le chargement des scripts tiers pour réduire leur impact sur les performances.

Découvrez comment empêcher la création d'une clé d'accès si elle existe déjà dans le gestionnaire de mots de passe de l'utilisateur.

Guide des principes de base d'IndexedDB

C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.

Découvrez comment optimiser la métrique "Time to First Byte".

Quelle est la différence entre un hôte, un site et une origine ? Qu'est-ce qu'un eTLD ? Cet article vous explique comment procéder.

Découvrez les identifiants visibles et comment créer des expériences utilisateur adaptées à votre cas d'utilisation.

Les utilisateurs remarquent si les sites et les applications ne fonctionnent pas correctement. Il est donc crucial d'optimiser les performances d'affichage.

"ResizeObserver" vous avertit lorsque le rectangle de contenu d'un élément change de taille afin que vous puissiez réagir en conséquence.

En plus d'éliminer les téléchargements de ressources inutiles, la meilleure chose à faire pour améliorer la vitesse de chargement des pages consiste à réduire la taille de téléchargement globale en optimisant et en compressant les ressources restantes.

Ce document explique comment améliorer les performances de l'affichage des images dans votre application Web à l'aide de l'API OffscreenCanvas.

Cet article présente la métrique "First Contentful Paint" (FCP) et explique comment la mesurer.

Cet article offre une présentation complète des réseaux de diffusion de contenu (CDN). Il explique également comment choisir, configurer et optimiser une configuration CDN.

Conseils pratiques aux développeurs sur ce qu'il faut faire lorsqu'un utilisateur se déconnecte du site Web.

Cet article présente la métrique "Time to Interactive" (TTI) et explique comment la mesurer.

L'API Fetch Priority indique la priorité relative des ressources par rapport au navigateur. Elle peut optimiser le chargement et améliorer les Signaux Web essentiels.

À propos des pseudo-classes :user-valid et :user-invalid et de leur utilisation pour améliorer l'expérience utilisateur de validation des entrées

Découvrez comment les décideurs en entreprise et les non-développeurs peuvent améliorer les Signaux Web essentiels.

Comprenez et évitez les problèmes courants lors de l'application de l'encodage et du décodage base64 à des chaînes.

Les sous-grilles permettent le partage de grilles imbriquées, ce qui permet aux grilles imbriquées de s'aligner sur les ancêtres et les frères et sœurs.

Dans le monde numérique d'aujourd'hui, la publicité en ligne est un élément essentiel du Web sans frais dont nous profitons tous. Toutefois, des annonces mal implémentées peuvent ralentir l'expérience de navigation, frustrer les utilisateurs et réduire l'engagement. Découvrez comment charger efficacement des annonces sans affecter la vitesse de votre page, tout en offrant une expérience utilisateur fluide et en maximisant les opportunités de revenus pour les propriétaires de sites Web.

Apprenez-en plus sur la couverture de code et découvrez quatre façons courantes de la mesurer.

Déterminez ce que vous devez tester et ce que vous pouvez exclure.

Déterminez les éléments à tester, définissez vos scénarios de test et définissez les priorités.

Les métriques de performances axées sur l'utilisateur sont essentielles pour comprendre et améliorer l'expérience sur votre site tout en profitant aux utilisateurs réels.

Découvrez de nouvelles possibilités intéressantes en matière de préchargement d'images responsives pour garantir une expérience utilisateur optimale.

Méthode permettant d'adapter une police aux préférences de vos utilisateurs, afin qu'ils puissent lire votre contenu avec un maximum de confort.

Découvrez comment combiner différents types de tests dans une stratégie raisonnable adaptée à votre projet.

Commençons par les bases ! Découvrez les deux modes de test généraux et les trois types courants d'automatisation des tests.

Vous devez auditer régulièrement vos ressources pour vous assurer que chacune d'elles contribue à améliorer l'expérience utilisateur.

Le programme mkbitmap C lit une image et lui applique une ou plusieurs des opérations suivantes, dans cet ordre: inversion, filtrage passe-haut, mise à l'échelle et seuil. Chaque opération peut être contrôlée et activée ou désactivée individuellement. Cet article explique comment compiler mkbitmap dans WebAssembly.

Introduction à WebAssembly (parfois abrégé Wasm), le format de code binaire portable et le format texte correspondant pour les programmes exécutables, ainsi que les interfaces logicielles permettant de faciliter les interactions entre ces programmes et leur environnement hôte.

La norme de système de fichiers introduit un système de fichiers privé d'origine (OPFS) en tant que point de terminaison de stockage privé de l'origine de la page et non visible par l'utilisateur. Il fournit un accès facultatif à un type de fichier

Comment afficher de manière sécurisée le contenu contrôlé par l'utilisateur dans des applications Web

Présentation de l'adoption du format AVIF dans l'écosystème, et des avantages que les développeurs peuvent attendre de ce format pour les images fixes et les animations en termes de performances et de qualité.

Découvrez comment optimiser l'interaction de l'interaction avec le site Web avec Next Paint.

Découvrez quelques-unes des fonctionnalités de Baseline.

Le rendu du code HTML avec JavaScript est différent du rendu HTML envoyé par le serveur, ce qui peut affecter les performances. Découvrez dans ce guide les différences qui existent et ce que vous pouvez faire pour préserver les performances d'affichage de votre site Web, en particulier en ce qui concerne les interactions.

Le délai d'entrée peut contribuer de manière significative à la latence totale des interactions et avoir un impact négatif sur l'INP de votre page. Dans ce guide, vous allez découvrir ce qu'est le délai d'entrée et comment le réduire pour une interactivité plus rapide.

Les grandes tailles de DOM peuvent avoir un impact sur la rapidité ou non des interactions. Découvrez la relation entre la taille du DOM et l'INP, ce que vous pouvez faire pour réduire la taille du DOM et d'autres moyens de limiter l'affichage lorsque votre page contient de nombreux éléments DOM.

Lors du chargement de scripts, le navigateur met un certain temps à les évaluer avant leur exécution, ce qui peut entraîner de longues tâches. Découvrez comment fonctionne l'évaluation des scripts et comment éviter qu'elle n'entraîne de longues tâches lors du chargement de la page.

La version complète de WordPress, basée sur PHP, exécutée uniquement dans le navigateur avec WebAssembly

Cet article présente la métrique CLS (Cumulative Layout Shift) et explique comment la mesurer.

Présentation des outils désormais disponibles sur le Web grâce à WebAssembly.

Les progressive web apps peuvent être proposées sur des plates-formes de téléchargement d'applications comme le Play Store Android, le Microsoft Store, etc.

Améliorez l'expérience de débogage Web avec les mappages sources.

C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.

Calculez le sinus, le cosinus, la tangente, etc. en CSS.

La méthode requestVideoFrameCallback() permet aux auteurs Web d'enregistrer un rappel qui s'exécute dans les étapes de rendu lorsqu'une nouvelle image vidéo est envoyée au compositeur.

Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).

Cet article de blog annonce une nouvelle collection de modèles pour les applications multimédias.

Créons cet effet de texte animé avec dégradé à l'aide de propriétés personnalisées de portée et de background-clip. Accédez à CodePen et créez un nouveau canevas. Créez le balisage de votre texte. Utilisons un en-tête avec le mot "Rapide": Ensuite,

Ce Chrometober a donné vie à ce livre qui défile, et vous a donné des conseils et astuces amusants et effrayants.

Présentation des principes de base de la création d'un élément personnalisé d'info-bulle personnalisé et adaptable aux couleurs.

Les clés d'accès rendent les comptes utilisateur d'un site Web plus sûrs, plus simples, plus faciles à utiliser et sans mot de passe. Cet article explique comment concevoir une connexion sans mot de passe avec des clés d'accès tout en tenant compte des utilisateurs existants.

Les clés d'accès rendent les comptes utilisateur d'un site Web plus sûrs, plus simples, plus faciles à utiliser et sans mot de passe. Cet article explique comment autoriser les utilisateurs à créer des clés d'accès pour votre site Web.

Présentation des principes de base pour créer des composants du bouton d'action flottant qui s'adaptent aux couleurs, réactifs et accessibles.

Découvrez comment optimiser les polices Web pour les Signaux Web essentiels.

Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).

Présentation de trois outils et techniques permettant de tester et de vérifier le contraste des couleurs accessible de votre conception.

Créons un chargeur CSS animé avec des propriétés personnalisées de portée et animation-timing-function. Accédez à CodePen et créez un nouveau canevas. Créez la balise pour notre chargeur. Notez l'utilisation de propriétés personnalisées intégrées:

Ce tutoriel explique comment créer une navigation principale accessible sur un site Web. Vous y découvrirez le HTML sémantique, l'accessibilité et la façon dont les attributs ARIA peuvent faire plus de mal que de bien.

Ce pseudo-sélecteur CSS très pratique permet de sélectionner des éléments modals.

Découvrez des méthodes utiles et créatives pour styliser une liste.

Optimiser les balises et les gestionnaires de balises pour les métriques Core Web Vitals

Une exploration amusante des moyens de recréer une illusion d'optique avec le CSS.

Avantages de l'utilisation des propriétés personnalisées dans les systèmes de conception et les bibliothèques de composants

Découvrez comment utiliser les propriétés CSS individuelles de traduction, de rotation et de mise à l'échelle pour aborder les transformations de manière intuitive.

Examiner plusieurs façons d'animer une bordure en CSS

La BBC déploie le mécanisme HSTS sur son site Web afin d'améliorer la sécurité et les performances. Découvrez ce que cela signifie et comment le mécanisme HSTS peut vous aider.

Découvrez pourquoi les outils qui surveillent les métriques des Signaux Web essentiels peuvent indiquer des chiffres différents et comment interpréter ces différences.

GDE Enrique Fernandez Guerra à propos de l'Open Source de son ONG HelpDev.

Qu'est-ce que la fin de la prise en charge d'Internet Explorer a permis aux clients et aux développeurs de Maersk.com ?

Cela fait longtemps que HTML5Rocks, ça fait plaisir de vous connaître.

Découvrez comment définir des cookies propriétaires pour garantir la sécurité, la compatibilité avec plusieurs navigateurs et minimiser les risques de dysfonctionnement une fois les cookies tiers supprimés.

L'API Web Audio permet d'effectuer correctement la synchronisation AV.

Les dégradés coniques peuvent être utilisés pour créer des effets intéressants, comme cette belle bordure. Ce CodePen créé par Adam Argyle, initialement partagé via ce tweet sur Twitter, montre comment utiliser un dégradé conique pour créer une

Comprenez les différences entre les frameworks et les bibliothèques dans le contexte d'un environnement JavaScript côté client.

Interceptez les erreurs lors de l'utilisation de l'API Fetch.

Comprendre les décisions à prendre concernant l'utilisation d'une bibliothèque ou d'un framework JavaScript

Information concernant l'API CSS Google Fonts : fonctionnement, utilisation et ajout efficace de polices Web

Cette ressource peut vous aider à vous repérer rapidement dans le terminal.

GOV.UK a supprimé sa dépendance jQuery de son interface. Vous ne devinerez jamais ce qui s'est passé. (Oui.)

Présentation des bases de la création de composants adaptatifs aux couleurs, réactifs et accessibles.

Découvrez ce qu'est l'outil d'analyse de préchargement du navigateur, comment il améliore les performances et comment éviter les obstacles.

Mesurer les signaux Web avec votre outil d'analyse actuel

Concevoir des applications pour le Web plus facilement.

Des experts Google Developers sur le Web expliquent comment les programmes de mentorat leur ont permis de devenir des leaders.

Partager un guide pratique sur les polices variables, avec de nombreux exemples.

Cet outil conçu par Josh W Comeau vous permet de créer très facilement des dégradés à l'aspect esthétique.

Ensemble d'insights sur les principaux points de contrariété, recueillis à partir de plusieurs conversations avec des développeurs Web.

Vérifiez l'état des outils d'image.

Découvrez le champ d'application et son fonctionnement en JavaScript.

Présentation des principes de base pour créer des mini et méga boîtes de dialogue modales adaptatives aux couleurs, responsives et accessibles à l'aide de l'élément ".

Découvrez comment déboguer les erreurs de lecture multimédia sur le Web.

Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).

Charger les images dans la fenêtre d'affichage initiale (tout en chargeant le reste de manière différée) peut améliorer les Core Web Vitals tout en chargeant moins d'octets.

Présentation des principes de base de la création d'une barre de chargement accessible et adaptative avec l'élément ``.

Simplifiez au maximum vos formulaires d'inscription et de connexion. Enregistrez les identifiants des formulaires de connexion pour que les utilisateurs n'aient pas à se reconnecter lorsqu'ils reviennent. Pour stocker les identifiants utilisateur à

Modifications apportées à la chaîne user-agent, stratégies adoptées par Chrome et Firefox pour atténuer l'impact, et comment vous pouvez les aider.

Présentation des principes de base de la création d'un favicon adaptatif.

Découvrez comment effectuer le rendu de graphiques 2D sur un canevas sur le Web à partir de WebAssembly avec Emscripten.

L'oubli ou l'utilisation abusive de l'en-tête Cache-Control peuvent avoir un impact négatif sur la sécurité de votre site Web et la confidentialité de vos utilisateurs. Obtenez des recommandations pour les sites Web très intéressants.

Métriques essentielles pour un site opérationnel

Découvrez comment gPhoto2 a été transféré vers WebAssembly pour contrôler des caméras externes via USB à partir d'une application Web.

Utilisez Network Error Logging (NEL) pour collecter les erreurs réseau côté client.

Découvrez comment utiliser les dernières fonctionnalités de WebAssembly tout en répondant aux besoins des utilisateurs sur tous les navigateurs.

Découvrez comment transférer sur le Web du code qui interagit avec des appareils externes grâce aux API WebAssembly et Fugu.

Présentation des principes de base de la création d'un composant de changement de thème adaptatif et accessible.

Découvrez comment intégrer du code JavaScript dans votre bibliothèque WebAssembly pour communiquer avec le monde extérieur.

L'Oculus Quest 2 est un casque de réalité virtuelle créé par Oculus, une division de Meta. Les développeurs peuvent désormais créer et distribuer des progressive web apps (PWA) 2D et 3D, qui s'appuient sur la fonctionnalité multitâche d'Oculus Quest 2. Cet article décrit l'expérience et explique comment créer, télécharger et tester votre PWA dans l'Oculus Quest 2.

Un aperçu du processus et des outils utilisés pour créer l’expérience de style agenda des fêtes de Designcember.

Tentative skeuomorphe de recréer une calculatrice solaire sur le Web qui utilise le capteur de luminosité ambiante et la fonctionnalité de superposition des commandes de fenêtres.

Pendant très longtemps, vous avez dû recourir à des solutions de contournement et à des bibliothèques pour créer une copie profonde d'une valeur JavaScript. La plate-forme est désormais fournie avec `structuredClone()`, une fonction intégrée de copie profonde.

Présentation des principes de base de la création d'un composant de toast adaptatif et accessible.

Annonce du fonds pour l'interface utilisateur de Chrome, conçu pour offrir des subventions aux personnes travaillant sur les outils de conception, les feuilles de style CSS et le langage HTML.

Présentation des principes de base de la création d'un menu de jeu 3D réactif, adaptatif et accessible.

Un résumé de toutes les annonces clés du Chrome Dev Summit 2021, ainsi que les liens pour en savoir plus

Découvrez comment mesurer des animations, prendre en compte les frames d'animation et la fluidité globale de la page.

Découvrez les dernières informations de PageSpeed Insights pour vous aider à mieux mesurer et optimiser la qualité de vos pages et de votre site.

Essayez une nouvelle API Lighthouse pour mesurer les performances et les bonnes pratiques tout au long d'un parcours utilisateur.

Au cours des trois dernières années, Chrome s'efforce d'optimiser les applications Web qui repoussent les limites du navigateur. L'une de ces applications Web est Photoshop. Il y a quelques années à peine, l'idée d'exécuter un logiciel aussi complexe que Photoshop directement dans un navigateur aurait été difficile à imaginer. Cependant, grâce à l'utilisation de différentes nouvelles technologies Web, Adobe propose désormais une version bêta publique de Photoshop sur le Web.

Présentation des principes de base de la création d'un composant à sélection multiple réactif, adaptatif et accessible pour trier et filtrer les expériences utilisateur.

Découvrez les principes de base de l'utilisation des API Navigation et Resource Timing pour évaluer les performances de chargement sur le terrain.

La nouvelle API Sanitizer vise à créer un processeur robuste pour insérer des chaînes arbitraires dans une page en toute sécurité. Cet article présente l'API et explique son utilisation.

Ce document présente les bonnes pratiques en matière de performances à suivre lors du chargement d'intégrations tierces, des techniques de chargement efficaces et l'outil Layout Shift Terminator qui permet de réduire les décalages de mise en page pour les intégrations courantes.

Réponses aux questions courantes sur les applications monopages, les signaux Web essentiels et le plan de Google pour répondre aux limites actuelles de mesure.

preventDefault et stopPropagation: quand utiliser l'une ou l'autre et quelle est la fonction exacte de chaque méthode. La gestion des événements JavaScript est souvent simple. C'est particulièrement vrai lorsque vous travaillez avec une structure

Découvrez comment importer et regrouper différents types d'éléments à partir de JavaScript pour qu'ils fonctionnent à la fois dans les navigateurs et dans les bundles.

Présentation des principes de base de la création d'un composant "split-button" accessible

Découvrez comment utiliser des scripts de module CSS pour importer des feuilles de style CSS en utilisant la même syntaxe que les modules JavaScript.

Affichez la couleur de votre marque dans les entrées de formulaire HTML intégrées à l'aide d'une seule ligne de code.

Présentation des principes de base de la création d'un composant switch réactif et accessible

Un ensemble d'en-têtes d'indice client permet aux sites d'obtenir les préférences multimédias de l'utilisateur au moment de la requête, ce qui permet aux serveurs d'intégrer le CSS approprié pour des raisons de performances. Les requêtes médias CSS,

Présentation des principes de base de la création d'un composant de fil d'Ariane réactif et accessible pour que les utilisateurs puissent parcourir votre site.

Découvrez comment intégrer des applications multithread écrites dans d'autres langages à WebAssembly.

Découvrez les concepts de gestion des droits numériques et les commandes nécessaires pour passer d'un fichier MOV brut à un support chiffré empaqueté pour MPEG-DASH ou HLS à l'aide du chiffrement Clear Key ou Widevine.

Les frameworks multimédias sont à la fois propriétaires et Open Source. À la base, ils sont constitués d'un ensemble d'API qui prennent en charge la lecture audio et/ou vidéo pour différents formats de conteneurs et protocoles de transmission.

Créer une PWA avec streaming hors connexion n'est pas une mince affaire ! Dans cet article, vous découvrirez les API et les techniques qui offrent aux utilisateurs une expérience multimédia hors connexion de haute qualité.

Le streaming multimédia est une méthode d'envoi continu de contenu multimédia à partir d'un serveur dont le contenu a été divisé en blocs de données individuels qui peuvent être réunis lors de la lecture dans un ordre spécifique, via une requête de plage utilisant des protocoles tels que DASH et HLS.

Présentation des principes de base pour établir un jeu de couleurs dynamique et configurable

Lors du chargement d'une police Web, vous pouvez désormais ajuster son échelle pour normaliser la taille de police des documents et éviter le décalage de mise en page lors du changement de police

La diffusion d'images de la taille d'un ordinateur sur les appareils mobiles peut consommer deux à quatre fois plus de données que nécessaire. Plutôt que d'adopter une approche « taille unique » pour les images, diffusez des images de différentes tailles en fonction de l'appareil.

Cet article présente les techniques CSS permettant d'optimiser les signaux Web.

À compter d'aujourd'hui, une modification du CLS a été déployée sur plusieurs plates-formes d'outils Web Chrome, y compris Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome.

Ces ajouts apparemment mineurs à la syntaxe du sélecteur CSS vont avoir un impact important.

Une nouvelle formation en six parties sur les progressive web apps est désormais disponible, ainsi qu'une nouvelle série d'ateliers de programmation pour vous apprendre à créer des PWA fiables, installables et performantes.

Les fonctionnalités multimédias basées sur les préférences des utilisateurs, les requêtes de conteneurs et les requêtes média pour de nouveaux types d'écrans, tels que les écrans pliables, vont nous permettre d'exploiter ces fonctionnalités dans une nouvelle ère du responsive web design.

Stratégies pour remplacer l'utilisation de la chaîne user-agent par les nouveaux indicateurs client user-agent pour votre site.

Cet article répertorie les en-têtes de sécurité les plus importants que vous pouvez utiliser pour protéger votre site Web. Utilisez-le pour comprendre les fonctionnalités de sécurité Web, apprendre à les implémenter sur votre site Web et comme référence lorsque vous avez besoin d'un rappel.

Résumé de la conférence Google I/O 2021 de Thomas Steiner intitulée Excalidraw et Fugu: améliorer les parcours utilisateur de base

Au lieu d'utiliser importScripts(), les service workers peuvent utiliser des importations statiques de modules ES pour intégrer du code supplémentaire.

Présentation des principes de base pour créer une vue de défilement horizontale responsive pour les téléviseurs, les téléphones, les ordinateurs de bureau, etc.

Aujourd'hui, nous allons vous présenter les nouvelles fonctionnalités des outils de Lighthouse, PageSpeed et DevTools pour vous aider à déterminer comment améliorer les signaux Web pour votre site.

Découvrez comment appeler des API Web asynchrones lors de la compilation de langages traditionnellement synchrones en WebAssembly.

Grâce à la fonctionnalité de superposition des commandes de fenêtre, les développeurs peuvent personnaliser la barre de titre des PWA installées afin qu'elles ressemblent davantage à des applications.

Les scripts tiers ou les balises peuvent être une source de problèmes de performances sur votre site et donc une cible d'optimisation. Toutefois, avant de commencer à optimiser les balises que vous avez ajoutées, vérifiez que vous n'optimisez pas celles dont vous n'avez même pas besoin. Cet article vous explique comment évaluer les demandes de nouvelles balises, et comment gérer et examiner les demandes existantes.

L'objet DataTransfer contient les données qui sont déplacées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments de données, de chacun un ou plusieurs types de données. Cet article explique ce que vous pouvez faire avec l'API DataTransfer.

L'API WebOTP peut désormais recevoir un mot de passe à usage unique depuis un iFrame.

Présentation des principes de base de la création d'animations fractionnées pour les lettres et les mots.

Plan d'amélioration de la métrique CLS pour plus d'équité vis-à-vis des pages de longue durée.

La satisfaction des développeurs Web est un projet Google visant à recueillir des informations sur les besoins des développeurs Web. L'objectif est d'avoir une plate-forme Web plus fiable, prévisible et interopérable, qui permet aux développeurs d'investir dans celle-ci et de leur faire confiance, ainsi que d'adopter et d'utiliser de nouvelles fonctionnalités pour développer la plate-forme et leur activité.

Présentation de base sur la création d'un composant de paramètres composé de curseurs et de cases à cocher.

Il peut être difficile de déterminer la valeur de "this" en JavaScript. Voici comment procéder...

Ce chapitre fournit des détails sur les composants mis à disposition par toutes les plates-formes de mini-applications.

Ce chapitre passe en revue les options de balisage, de style, de script et de mise à jour de diverses plates-formes de mini-applications.

Ce chapitre présente un exemple de projet qui suit l'approche consistant à programmer la mini-application.

Ce chapitre aborde la structure du projet, le cycle de vie et le lot de mini-applications.

Ce chapitre présente une sélection de mini-projets Open Source intéressants.

Ce chapitre explique comment programmer des mini-applications.

Ce chapitre conclut la collection d'applications miniatures avec l'observation que le fait de sortir des sentiers battus et de s'inspirer de l'extérieur de sa propre bulle peut vraiment aider à construire un avenir meilleur sur le Web.

Ce chapitre fournit des informations sur les applications H5 et QuickApp, qui sont deux choses différentes des mini-applications.

L'API Streams permet à JavaScript d'accéder de manière programmatique aux flux de données reçus sur le réseau et de les traiter comme vous le souhaitez.

Présentation générale de la création d'un composant d'onglet semblable à celui des applications iOS et Android.

L'isolation multi-origine permet à une page Web d'utiliser des fonctionnalités puissantes telles que SharedArrayBuffer. Cet article explique comment activer l'isolation multi-origine sur votre site Web.

L'en-tête Origin-Agent-Cluster coupe l'accès synchrone aux autres origines du même domaine et indique au navigateur de fournir des ressources dédiées à votre origine.

Il est désormais plus facile de conserver les proportions des images et des éléments avec la nouvelle propriété CSS de format.

Bref aperçu de l'histoire, de l'architecture, des cas d'utilisation et de l'avenir de WebRTC.

Découvrez comment optimiser les performances et la facilité d'utilisation des carrousels.

L'utilisation de http://localhost pour le développement local est généralement acceptable, sauf dans certains cas particuliers. Cet article explique quand vous devez exécuter votre site de développement local avec HTTPS. Consultez également Utiliser

La plupart du temps, http://localhost se comporte comme HTTPS à des fins de développement. Toutefois, dans certains cas particuliers, tels que les noms d'hôte personnalisés ou l'utilisation de cookies sécurisés dans les navigateurs, vous devez

Découvrez nos projets d'amélioration de la métrique "Cumulative Layout Shift" et envoyez-nous vos commentaires.

Découvrez comment créer un composant de mise en page responsif de navigation latérale coulissant.

Présentation des principes de base de la création d'un panneau de navigation latéral réactif

Découvrez cinq techniques de centrage différentes avec CSS.

Suivez cinq techniques de centrage à mesure qu'ils effectuent une série de tests pour déterminer laquelle est la plus résistante aux changements.

Les performances du premier chargement sont importantes, mais ce n'est pas tout. Les utilisateurs qui chargent votre site une deuxième fois utiliseront leur cache pour accéder à votre contenu. Il est donc essentiel de s'assurer qu'il fonctionne aussi bien, à la fois pour la vitesse et l'exactitude.

Découvrez comment implémenter les API Houdini Paint dans plusieurs navigateurs et explorez tout un univers de worklets Houdini avec Houdini.how.

Découvrez les bonnes pratiques concernant les formulaires d'adresse.

Nouvel outil modulaire qui permet de collecter automatiquement des données de performances à partir de plusieurs sources.

Découvrez les bonnes pratiques concernant les modes de paiement.

Maximisez les conversions en aidant vos utilisateurs à remplir les formulaires d'adresse et de paiement aussi rapidement et facilement que possible.

Aidez vos utilisateurs à s'inscrire, à se connecter et à gérer les informations de leur compte avec un minimum de tracas.

Utilisez les fonctionnalités de navigateur multiplates-formes pour créer un formulaire d'inscription simple, sécurisé, accessible et facile à utiliser.

Demander à un utilisateur de fournir un mot de passe à usage unique envoyé par SMS est une méthode courante pour confirmer son numéro de téléphone. Cet article présente les bonnes pratiques à suivre pour créer un formulaire de mot de passe à usage unique envoyé par SMS et proposer une expérience utilisateur de qualité.

Comment les Web workers et les service workers peuvent améliorer les performances de votre site Web, et quand utiliser un travailleur Web plutôt qu'un service worker.

Comment les service workers peuvent communiquer de manière proactive avec la page pour informer de certains événements.

Établir un canal de communication bidirectionnel entre la page et le service worker.

Comment communiquer la fenêtre et le service worker pour effectuer des tâches liées aux performances, à la mise en cache et au mode hors connexion.

Les applications Web peuvent désormais désactiver l'accélération de la souris lors de la capture d'événements de pointeur.

Découvrez comment créer une expérience semblable aux stories Instagram sur le Web.

Découvrez comment créer une expérience semblable aux stories Instagram sur le Web.

Cet article explique comment adopter l'attribut de chargement dans les systèmes de gestion de contenu.

La définition de "same-site" évolue pour inclure le schéma d'URL. Par conséquent, les liens entre les versions HTTP et HTTPS d'un site sont désormais comptabilisés comme des requêtes intersites. Passez au HTTPS par défaut pour éviter tout problème lorsque cela est possible, ou poursuivez votre lecture pour en savoir plus sur les valeurs d'attribut SameSite nécessaires.

Ce tutoriel interactif étape par étape explique comment créer un serveur qui gère les abonnements aux notifications push et envoie les requêtes du protocole Web push à un service push.

Tutoriel interactif étape par étape qui vous montre comment créer un client qui abonne l'utilisateur aux notifications push, affiche les messages push en tant que notifications et le désabonne des notifications push.

Présentation des notifications push, des raisons pour lesquelles vous pourriez les utiliser et de leur fonctionnement.

Comment suivre l'utilisation hors connexion de votre site afin de comprendre pourquoi il nécessite une meilleure expérience hors connexion

Montrer comment des techniques hautes performances permettent de créer des animations complexes et de qualité

Les valeurs minimale, maximale et de limitation fournissent des fonctionnalités CSS puissantes qui permettent un style plus réactif avec moins de privilèges de code. Cet article explique comment contrôler le dimensionnement des éléments, maintenir un espacement correct et implémenter une typographie fluide à l'aide de ces fonctions mathématiques CSS bien compatibles.

Un échange signé est un mécanisme de distribution qui permet d'authentifier l'origine d'une ressource indépendamment de la manière dont elle a été fournie.

Nouveaux raccourcis de propriétés logiques et nouvelles propriétés d'encart pour Chromium.

Assurez-vous que votre service worker sait quoi faire lorsqu'une réponse partielle est demandée.

Pour une expérience sur le Web de qualité, il est essentiel de bien s'animer. Cet article explique pourquoi certains types d'animations sont plus performants que d'autres.

Pour améliorer les performances de vos animations CSS, utilisez autant que possible les propriétés CSS "transform" et "opacity", et évitez tout élément qui déclenche la mise en page ou la peinture.

Les fonctionnalités de panoramique, d'inclinaison et de zoom des caméras sont enfin contrôlables sur le Web.

Les phases d'évaluation permettent de tester une fonctionnalité nouvelle ou expérimentale d'une plate-forme Web. Une phase d'évaluation tierce permet aux fournisseurs de contenu intégré de tester une nouvelle fonctionnalité sur plusieurs sites. Les

Les fenêtres détachées sont un type courant de fuite de mémoire, particulièrement difficile à trouver et à résoudre.

Découvrez comment créer une expérience hors connexion simple pour votre application.

L'utilisation du rognage dans CSS peut nous aider à nous éloigner de tout ce qui ressemble à une boîte dans nos conceptions. Vous pouvez créer un chemin de découpe en utilisant différentes formes de base ou un SVG. Supprimez ensuite les parties de l'élément que vous ne souhaitez pas afficher.

Utilisez le code CSS pour personnaliser la couleur, la taille ou le type des nombres ou des puces des éléments `` ou ``.

En redirigeant les requêtes vers /.well-known/change-password vers l'URL de modification du mot de passe, vous pouvez permettre aux utilisateurs de mettre à jour leurs mots de passe plus facilement qu'auparavant.

Une fois qu'une application de paiement Web est enregistrée, elle peut accepter les demandes de paiement des marchands. Cet article vous explique comment orchestrer une opération de paiement d'un service worker pendant l'exécution.

Une fois qu'une application de paiement Web est enregistrée, elle peut accepter les demandes de paiement des marchands. Cet article vous explique comment orchestrer une opération de paiement d'un service worker pendant l'exécution.

Comment mentir sur un lecteur d'écran améliore l'accessibilité lorsqu'il n'entre pas en sel !

Découvrez comment utiliser WebAssembly pour importer des bibliothèques écrites dans d'autres langages sur le Web de manière sécurisée et idiomatique.

La propriété CSS content-visibility offre des avantages en termes de performances de rendu du contenu Web en ignorant le rendu du contenu hors écran. Cet article vous explique comment utiliser cette nouvelle propriété CSS pour accélérer les temps de chargement initiaux à l'aide du mot clé "auto". Vous découvrirez également la spécification de structuration CSS et d'autres valeurs pour la visibilité du contenu qui vous permettent de mieux contrôler l'affichage de votre contenu dans le navigateur.

L'API Async Clipboard simplifie le copier-coller adapté aux autorisations.

Envisagez de définir une règle de provenance stricte-origin-when-cross-origin. Cette méthode préserve une grande partie de l'utilité de l'URL de provenance, tout en limitant le risque de fuite de données entre origines multiples.

Découvrez comment utiliser différents composants pour afficher du contenu Web dans des applications Android.

Ce que l'équipe Bulletin a appris sur les service workers lors du développement d'une PWA.

Découvrez comment configurer la CI Lighthouse et l'intégrer aux workflows des développeurs.

Renforcer la sécurité et améliorer l'expérience utilisateur pour les comptes Google

Découvrez comment implémenter des propriétés CSS personnalisées avec une saisie sémantique, une valeur de remplacement et plus encore, directement dans votre fichier CSS.

Réalisez des tests A/B pour évaluer l'impact de la vitesse du site sur vos métriques d'entreprise.

Découvrez comment enregistrer une application de paiement Web dans le navigateur d'un client. Vous apprendrez également à les déboguer.

Découvrez comment adapter votre application de paiement Web pour qu'elle fonctionne avec les paiements Web et offre une meilleure expérience utilisateur.

Avantages et inconvénients de l'utilisation d'une logique d'expiration cohérente ou différente entre les couches de cache de service worker et de cache HTTP

Découvrez comment modifier votre application de paiement Android pour fournir l'adresse de livraison sélectionnée par l'utilisateur ainsi que ses coordonnées lorsque le marchand les a demandés via l'API Payment Request.

Les requêtes de navigation sont des requêtes HTML effectuées chaque fois que vous saisissez une nouvelle URL dans la barre de navigation ou suivez un lien sur une page. C'est là que les service workers ont le plus d'impact sur les performances. En faisant appel à un service worker qui répond sans attendre le réseau, vous pouvez vous assurer que les navigations sont rapides et fiables.

Le rapport d'expérience utilisateur Chrome (informément appelé CrUX) est un ensemble de données public rassemblant des données réelles sur l'expérience utilisateur sur des millions de sites Web. Contrairement aux données de test, les données d'expérience utilisateur Chrome proviennent en fait d'utilisateurs actifs sur le terrain.

Cet article met en avant quelques lignes de code CSS puissantes, qui font beaucoup de travail et vous aident à créer des mises en page modernes robustes.

Depuis Chrome 84, ResizeObserver prend en charge une nouvelle mesure de zone appelée "device-pixel-content-box", qui mesure la dimension de l'élément en pixels physiques. Cette approche est essentielle pour obtenir des graphismes au pixel près, en particulier sur les écrans haute densité.

Résumé des principales actualités et informations annoncées lors de notre événement communautaire en ligne de trois jours, et rappel concernant les événements régionaux à venir.

Découvrez comment améliorer progressivement votre progressive web app afin qu'elle reste utile sur tous les navigateurs récents, tout en offrant une expérience avancée dans les navigateurs compatibles avec de nouvelles fonctionnalités Web, telles que l'accès au système de fichiers, l'accès au presse-papiers système, la récupération des contacts, la synchronisation périodique en arrière-plan, le wakelock en arrière-plan, les fonctionnalités de partage Web, etc.

Utilisez les fonctionnalités multiplates-formes des navigateurs pour créer des formulaires de connexion sécurisés, accessibles et faciles à utiliser.

Utilisez les fonctionnalités multiplates-formes des navigateurs pour créer un formulaire de connexion simple, sécurisé, accessible et facile à utiliser.

Déboguer les problèmes de SEO sur des pages individuelles ou sur l'ensemble d'un site

Comment mettre en œuvre une expérience de recherche résiliente avec Workbox, à l'aide de la synchronisation en arrière-plan et de l'API Push.

Intégrez un fichier multimédia dans une page Web à l'aide des balises et.

Les fragments de texte vous permettent de spécifier un extrait de texte dans le fragment d'URL. Lorsque l'utilisateur accède à une URL qui comporte un fragment de texte de ce type, le navigateur peut le mettre en valeur et/ou attirer l'attention de l'utilisateur.

Informez les fournisseurs de navigateurs des problèmes que vous rencontrez dans leur navigateur, sur un appareil ou une plate-forme spécifique, pour améliorer la plate-forme Web.

Découvrez comment transformer votre progressive web app en une "véritable" application en implémentant des modèles d'application propres à une plate-forme à l'aide de technologies Web.

Le modèle RAIL permet aux concepteurs et aux développeurs de cibler de manière fiable le travail d'optimisation des performances qui a le plus d'impact sur l'expérience utilisateur. Découvrez les objectifs et les lignes directrices du modèle RAIL et les outils que vous pouvez utiliser pour les atteindre.

Quicklink est une bibliothèque qui accélère les chargements de page ultérieurs en préchargeant les liens dans la fenêtre d'affichage pendant les périodes d'inactivité.

Fetch Metadata est une nouvelle fonctionnalité de plate-forme Web conçue pour permettre aux serveurs de se protéger contre les attaques multi-origines.

Lorsque vous créez une mise en page à l'aide de CSS, vous devez veiller à ne pas créer une expérience déconnectée pour les utilisateurs qui naviguent à l'aide du clavier.

Préparer vos animations Web va devenir beaucoup plus facile.

L'objectif des paiements Web est de fournir une expérience de paiement fluide sur le Web. Découvrez son fonctionnement et ses avantages, et préparez-vous à intégrer votre application de paiement aux paiements Web.

Découvrez comment les marchands intègrent des applications de paiement, comment les transactions de paiement fonctionnent avec l'API Payment Request et ce qui est possible dans les paiements Web.

Une transaction de paiement avec les paiements Web commence lorsque votre application de paiement est découverte. Découvrez comment configurer un mode de paiement et préparer votre application de paiement pour permettre aux marchands et aux clients d'effectuer des paiements.

Découvrez comment adapter votre application de paiement Android pour qu'elle fonctionne avec les paiements Web et offre une meilleure expérience utilisateur.

Chromium 80 présentait une régression de l'épaisseur de police de l'interface système sur macOS. La raison pour laquelle il est tombé en panne et les nouveaux super pouvoirs de la post-résolution valent la peine d'être attendus dans Chromium 83.

Les raccourcis d'applications permettent d'accéder rapidement à quelques actions courantes dont les utilisateurs ont besoin fréquemment.

Élaborez une étude de cas solide pour votre PWA. Découvrez quand investir et comment mesurer votre réussite.

Détails sur Chrome et d'autres navigateurs prévoit de supprimer AppCache.

Bonnes pratiques pour combiner différentes offres d'installation afin d'augmenter les taux d'installation et d'éviter la concurrence entre les plates-formes et la cannibalisation.

Le stockage persistant peut aider à protéger les données critiques contre les évictions et à réduire le risque de perte de données.

Les modules CommonJS sont très dynamiques, ce qui empêche les groupes et les optimiseurs JavaScript d'effectuer des optimisations avancées par rapport à eux.

Découvrez comment profiler les performances des applications de Web Audio dans Chrome à l'aide de "about://tracing" et de l'extension **WebAudio** dans les outils pour les développeurs Chrome.

Certaines API Web augmentent le risque d'attaques par canaux secondaires, comme Spectre. Pour atténuer ce risque, les navigateurs proposent un environnement isolé basé sur l'activation, appelé "isolation multi-origine". Découvrez pourquoi l'isolation multi-origine est nécessaire pour utiliser des fonctionnalités puissantes telles que "SharedArrayBuffer", "performance.measureUserAgentSpecificMemory()" et un minuteur haute résolution avec une meilleure précision.

Découvrez comment Next.js et Gatsby ont amélioré leur sortie de compilation pour réduire le code en double et améliorer les performances de chargement des pages

Les termes "same-site" et "same-origin" sont souvent cités, mais souvent mal compris. Cette page explique en quoi elles consistent et ce qui les différencie.

Certaines API Web augmentent le risque d'attaques par canaux secondaires, comme Spectre. Pour atténuer ce risque, les navigateurs proposent un environnement isolé basé sur l'activation, appelé "isolation multi-origine". Utilisez COOP et COEP pour configurer un tel environnement et activer des fonctionnalités puissantes telles que "SharedArrayBuffer", "performance.measureUserAgentSpecificMemory()" ou un minuteur haute résolution avec une meilleure précision.

Découvrez comment mesurer l'utilisation de la mémoire de votre page Web en production pour détecter les régressions.

Dans ce premier article de l'équipe d'ingénieurs web.dev, découvrez comment nous créons le site, y compris notre utilisation d'Eleventy et de composants Web.

La propriété CSS du schéma de couleurs et la balise Meta correspondante permettent aux développeurs d'appliquer à leurs pages les valeurs par défaut spécifiques au thème de la feuille de style du user-agent, telles que les commandes de formulaire, les barres de défilement et les couleurs système CSS. De même, cette fonctionnalité empêche les navigateurs d'appliquer eux-mêmes des transformations.

Comment s'assurer que les fonctionnalités de base de votre site Web sont toujours disponibles, accessibles, sécurisées, utilisables, visibles et rapides

Identifier et résoudre rapidement les goulots d'étranglement d'un serveur, améliorer les performances du serveur et empêcher les régressions

Découvrez comment rendre vos pages plus accessibles en améliorant l'utilisation des couleurs et du contraste.

Il est important que les éléments interactifs aient suffisamment d'espace autour d'eux lorsqu'ils sont utilisés sur un appareil mobile ou à écran tactile. Cela aidera tout le monde, mais en particulier les personnes souffrant de troubles moteurs.

Nous savons qu'il est judicieux de concevoir de manière responsive afin d'offrir la meilleure expérience multi-appareil possible, mais le responsive design est également une solution avantageuse en termes d'accessibilité.

Lancement des Trusted Types, une API de navigateur qui empêche les scripts intersites basés sur le DOM dans les applications Web modernes.

Ouvrir une progressive web app dans une application Android

En optimisant les cycles de rendu, Chrome 83 élimine le décalage de la mise en page lors du préchargement des polices facultatives. Combiner avec font-display: facultatif est le moyen le plus efficace de garantir un affichage sans à-coups dans les polices personnalisées.

Comment obtenir et diffuser des fichiers SXG à l'aide de nginx, et défis liés au préchargement des sous-ressources.

Comment générer un certificat TLS avec des extensions SXG, installer des outils permettant de générer des fichiers SXG et configurer nginx pour diffuser des fichiers SXG.

Utilisez des requêtes média pour envoyer des images dont la taille est limitée par ce qui est nécessaire. Cette technique est généralement connue sous le nom d'images responsives.

comment les autres services peuvent contribuer à faire de votre projet d'optimisation de la vitesse de votre site Web un plus grand succès ;

À partir de Chrome 81, les composants de défilement restent ancrés lorsque la mise en page change. En d'autres termes, vous n'avez plus besoin d'ajouter d'écouteurs d'événements pour forcer l'ancrage.

Découvrez comment diffuser des échanges signés (SXG) à l'aide de Web Packager.

Utilisez l'événement beforeinstallprompt pour offrir à vos utilisateurs une expérience personnalisée et fluide d'installation dans l'application.

L'API de test de positionnement WebXR est une amélioration de la réalité augmentée sur le Web qui vous permet de placer des objets virtuels dans une vue du monde réel.

Si vous avez déjà utilisé l'API WebXR Device, vous serez heureux d'apprendre qu'il y a très peu de nouvelles choses à apprendre. Pour accéder à une session WebXR, c'est presque la même chose. L'exécution d'une boucle de frames est en grande partie identique. Les différences résident dans les configurations qui permettent d'afficher le contenu de manière appropriée pour la réalité augmentée.

La réalité virtuelle a fait son apparition sur le Web avec Chrome 79. Basé sur l'API WebXR Device, ce lancement constitue la base de la réalité augmentée et virtuelle. Deuxième article d'une série, cet article porte sur la boucle de frames, c'est-à-dire la partie d'une session XR au cours de laquelle les images sont présentées à l'utilisateur. D'autres navigateurs seront bientôt compatibles avec l'API WebXR Device, dont Firefox Reality, Oculus Browser, Edge et le navigateur Helio de Magic Leap, entre autres.

Découvrez comment Chrome investit dans un certain nombre d'outils Open Source afin de faire progresser l'écosystème JavaScript.

Présentation des progressive web apps (PWA) et des trois piliers qui les différencient des autres applications Web.

Comment enregistrer des routes dans Workbox pour que votre progressive web app s'affiche dans les UI de partage au niveau du système, avec les applications spécifiques à la plate-forme

Ce format d'icônes offre davantage de contrôle et permet à votre progressive web app d'utiliser des icônes adaptatives. Une icône masquable peut s'afficher correctement sur tous les appareils Android.

Il est courant qu'une page ou une application contienne des données analytiques ou d'autres données non envoyées au moment où l'utilisateur la ferme. Les sites utilisent un appel synchrone à XMLHttpRequest() pour garder la page ou l'application ouverte jusqu'à ce que ses données soient transmises au serveur. Il nuit à l'expérience utilisateur et ignore les meilleures méthodes d'enregistrement des données. Pour résoudre ce problème, Chrome 80 applique une modification récente des spécifications.

Les nœuds de calcul du module permettent de débloquer facilement le thread principal en déplaçant du code coûteux vers un thread en arrière-plan, tout en conservant les avantages en termes d'ergonomie et de performances des modules JavaScript standards.

Découvrez les dernières avancées dans le domaine des outils de vitesse, y compris les nouvelles métriques de performances, les mises à jour de PageSpeed Insights et du rapport d'expérience utilisateur Chrome, ainsi que les insights issus de l'analyse de Web Almanac sur l'écosystème Web.

Découvrez le modèle de chargement adaptatif, comment l'implémenter et comment Facebook, Tinder, eBay et d'autres entreprises utilisent le chargement adaptatif en production.

Le thread principal du navigateur est incroyablement surchargé. En faisant appel à des workers Web pour déplacer le code en dehors du thread principal, vous pouvez considérablement améliorer la fiabilité et l'expérience utilisateur de votre application.

Commentaires des personnes interrogées sur les différentes techniques d'optimisation des images

Dans cet atelier de programmation, vous allez apprendre à créer un serveur de notifications push.

Découvrez les avantages et les inconvénients liés à la compatibilité des pages AMP dans votre application Next.js AMP est un framework de composants Web qui garantit un chargement rapide des pages. Next.js est compatible avec le format AMP. Ce guide

Découvrez comment Next.js accélère la navigation avec le préchargement de routes et comment le personnaliser. Dans cet article, vous allez découvrir le fonctionnement du routage dans Next.js, comment il est optimisé pour la vitesse et comment le

Avec l'API Web Share, les applications Web peuvent utiliser les mêmes fonctionnalités de partage fournies par le système que les applications spécifiques à une plate-forme. L'API Web Share permet aux applications Web de partager des liens, du texte et des fichiers avec d'autres applications installées sur l'appareil de la même manière que les applications spécifiques à une plate-forme.

Next.js s'occupe de nombreuses optimisations dans votre application React, ce qui vous évite de le faire. Next.js est un framework React orienté avec un certain nombre d'optimisations des performances intégrées. L'idée principale derrière le

Découvrez comment accélérer votre application Next.js grâce au fractionnement du code et aux stratégies de chargement intelligentes. Cet article explique les différents types de fractionnement de code et comment utiliser les importations dynamiques

La réalité virtuelle a fait son apparition sur le Web avec Chrome 79. Basé sur l'API WebXR Devicer, ce lancement est la base de la réalité augmentée et virtuelle. Premier article d'une série, cet article explore les concepts de base et décrit comment participer à une session XR. D'autres navigateurs seront bientôt compatibles avec l'API WebXR Device, dont Firefox Reality, Oculus Browser, Edge et le navigateur Helio de Magic Leap, entre autres.

Les sites peuvent désormais marquer explicitement leurs cookies pour une utilisation intersite. Découvrez comment baliser vos cookies pour vous assurer que vos cookies propriétaires et tiers continuent de fonctionner après la mise en œuvre de ce changement.

Découvrez comment fonctionnent les cookies, et que sont les cookies propriétaires et tiers.

Découvrez l'intérêt des annonces rapides et comment interpréter leur vitesse.

Utilisez les notifications push pour susciter l'intérêt des utilisateurs avec des informations ciblées et opportunes.

Dans cet atelier de programmation, vous allez découvrir comment demander l'autorisation d'un utilisateur et envoyer des notifications.

Dans cet atelier de programmation, découvrez comment gérer les notifications avec un service worker.

Tutoriel de l'utilisation de WebPageTest pour identifier et résoudre les problèmes d'instabilité de mise en page.

Les feature phones connaissent un regain de popularité, en particulier sur les marchés émergents où la norme est la 2G. Voici ce que nous avons appris en faisant en sorte que PROXX, un clone mobile de Minesweeper, se charge rapidement sur les téléphones basiques en 2G.

Bien qu'utiles, les variables CSS sont difficiles à utiliser, car elles peuvent prendre n'importe quelle valeur et être remplacées, et vous ne pouvez pas utiliser de transitions avec elles. Le niveau d'API 1 des propriétés et valeurs des CSS permet de résoudre ces problèmes.

Découvrez comment accélérer les navigations futures en préchargeant des ressources.

On parle de contenu mixte lorsque le code HTML initial est chargé via une connexion HTTPS sécurisée, alors que d'autres ressources sont chargées via une connexion HTTP non sécurisée.

Découvrez comment corriger les erreurs de contenu mixte sur votre site Web afin de protéger les utilisateurs et de vous assurer que tout votre contenu se charge.

Des études montrent que la vidéo Web permet d'accroître l'engagement et les ventes. Même si vous n'avez pas encore ajouté de vidéos à vos sites, ce n'est qu'une question de temps avant de le faire.

Démonstration interactive expliquant comment spécifier l'icône à afficher sur les écrans d'accueil iOS.

La plate-forme Web est aujourd'hui très mature pour le développement de jeux. Pour créer un jeu Web moderne, il est essentiel d'adopter les bonnes pratiques en matière de conception et de monétisation. Cet article fournit des conseils pour atteindre cet objectif.

Les architectures multi-origines présentent de nombreux défis lors de la création de PWA. Découvrez les bonnes et les mauvaises utilisations de plusieurs origines, ainsi que des solutions pour créer des PWA sur des sites multi-origines.

Cet article explique comment charger des polices Web pour éviter les décalages de mise en page et les pages vierges lorsque les polices Web ne sont pas disponibles lors du chargement de la page.

Cet article explique comment réduire la taille des polices Web que vous utilisez sur votre site, afin qu'une bonne typographie ne signifie pas un site lent.

Découvrez comment créer des applications Angular progressives installables.

Envisagez d'utiliser un CDN pour les images afin d'optimiser les images de votre site et de réduire son coût lié aux données pour vos utilisateurs.

Découvrez comment identifier les ressources tierces lentes à l'aide de Lighthouse et des outils pour les développeurs Chrome.

Découvrez comment améliorer les temps de chargement et l'expérience utilisateur en évitant les pièges les plus courants liés à l'utilisation de scripts tiers.

Cet article décrit les principaux types de JavaScript tiers et les problèmes de performances qu'ils peuvent causer. Il fournit également des conseils généraux sur la façon d'optimiser les scripts tiers.

Les nouvelles fonctionnalités de la plate-forme Web facilitent la création d'éléments personnalisés qui fonctionnent comme les commandes de formulaire intégrées.

Découvrez les techniques permettant d'optimiser les ressources tierces lentes avec l'aide de Lighthouse.

Découvrez les indicateurs de ressources rel=preconnect et rel=dns-prefetch, et comment les utiliser.

Découvrez comment ajouter des effets d'arrière-plan comme le floutage et la transparence aux éléments de l'interface utilisateur sur le Web à l'aide de la propriété CSS Backdrop.

stale-while-revalidate aide les développeurs à trouver un équilibre entre l'immédiateté (chargement immédiat du contenu mis en cache) et la fraîcheur (actualisation), en veillant à ce que les mises à jour du contenu mis en cache soient utilisées à l'avenir.

Découvrez comment rendre les longues listes plus réactives en implémentant le défilement virtuel avec le kit de développement Angular Component.

Découvrez comment optimiser la détection des modifications de votre application Angular pour la rendre plus réactive.

Découvrez comment utiliser les stratégies de préchargement d'Angular pour accélérer le chargement des applications.

Découvrez comment utiliser l'API Network Information pour adapter votre contenu en fonction de la qualité du réseau.

Le fractionnement de code vous permet d'accélérer vos applications, mais peut ralentir la navigation ultérieure. Le préchargement prédictif est un moyen efficace d'utiliser l'analyse de données pour précharger intelligemment ce que l'utilisateur est susceptible d'utiliser ensuite, tout en optimisant l'utilisation du réseau.

Découvrez comment rendre votre application Angular accessible à l'aide de Codelyzer.

Découvrez comment utiliser les budgets de performances directement dans la CLI Angular.

Découvrez comment utiliser le service worker Angular pour effectuer une mise en cache préalable des éléments statiques de votre application.

De nombreux appareils sont désormais compatibles avec le mode sombre ou le thème sombre. Cet article explique comment le mode sombre peut être pris en charge sur les pages Web, répertorie les bonnes pratiques et présente un élément personnalisé nommé dark-mode-toggle, qui permet aux développeurs Web d'offrir aux utilisateurs un moyen d'ignorer les préférences définies au niveau du système d'exploitation sur des pages Web spécifiques.

Découvrez comment rendre votre application Angular plus rapide, plus fiable, plus visible, plus facile à installer et accessible.

Découvrez comment réduire la taille de votre app bundle initial à l'aide de la division du code au niveau du routage.

Utilisez srcset pour choisir automatiquement la bonne taille d'image.

Cet article résume une conférence sur l'état des composants Web en 2019, animée par Kevin Schaaf, du projet Polymer, et Caridy Patiño de Salesforce.

Lighthouse est désormais compatible avec les budgets de performances. Cette fonctionnalité, LightWallet, peut être configurée en moins de cinq minutes et fournit une évaluation de la taille et de la quantité des ressources de la page.

Démontrer les revenus générés par les améliorations du site tout en excluant les facteurs externes tels que les campagnes marketing.

Depuis le lancement de l'API Payment Request dans Chrome 53 et de l'API Payment Handler dans Chrome 68, de nombreuses modifications ont été apportées à leurs spécifications respectives. Cet article récapitule ces changements et continuera à accumuler les modifications apportées à l'API.

Les progressive web apps sont faciles à installer grâce à un nouveau bouton d'installation dans la barre d'adresse de Chrome (omnibox).

Découvrez l'impact des performances du site Web sur différentes parties de l'entonnoir de conversion de l'e-commerce.

La collaboration avec les service workers est nouvelle et peu connue de nombreux développeurs Web. Dans cet article, vous trouverez quelques conseils pour vous aider à vous concentrer sur ces sujets.

Comment promouvoir l'installation de progressive web apps et bonnes pratiques

Comment promouvoir l'installation de progressive web apps et bonnes pratiques

Les images occupent une grande partie de l'espace visuel et constituent la majorité des octets téléchargés sur un site Web. Utilisez les nouvelles règles de fonctionnalité pour identifier les images surdimensionnées.

Découvrez comment améliorer les délais d'affichage grâce à une technique CSS essentielle et comment choisir le meilleur outil pour votre projet.

Découvrez comment utiliser Critical pour extraire et intégrer les fichiers CSS essentiels, et améliorer les délais d'affichage.

Apprenez à diagnostiquer des problèmes qui sont coûteux et empêchent les interactions avec l'utilisateur.

À l'occasion de la conférence Google I/O 2019, nous avons lancé trois nouvelles initiatives liées aux performances Web qui, nous l'espérons, permettront d'améliorer l'expérience utilisateur pour tous.

PROXX est un jeu semblable au Démineur, créé en tant que PWA. Il fonctionne sur une grande variété d'appareils et améliore progressivement l'apparence visuelle à mesure que l'appareil est plus performant.

Ne serait-il pas intéressant que les utilisateurs puissent effectuer des recherches sur votre site à l'aide de leur appareil photo ?

Découvrez comment marquer vos cookies pour une utilisation propriétaire et tierce à l'aide de l'attribut SameSite. Vous pouvez renforcer la sécurité de votre site en utilisant les valeurs lax (lax) et stricte de SameSite afin de renforcer la protection contre les attaques CSRF. La spécification du nouvel attribut "None" vous permet de marquer explicitement vos cookies pour une utilisation intersite.

La nouvelle API Portals vous aide à simplifier l'interface tout en permettant une navigation fluide grâce à des transitions personnalisées. Dans cet article, vous allez vous familiariser avec les portails afin d'améliorer l'expérience utilisateur sur votre site.

Utilisez l'API Network Information pour adapter les éléments présentés aux utilisateurs en fonction de la qualité de leur connexion.

Dans cet atelier de programmation, vous allez découvrir comment la compression Brotli peut réduire davantage les taux de compression et la taille globale de votre application.

À l'occasion de la conférence Google I/O 2019, l'équipe web.dev a envoyé un certain nombre de mises à jour, y compris une nouvelle interface, de nouveaux documents Lighthouse et un tout nouveau blog.

Les marques qui optimisent la vitesse constateront souvent une régression rapide. Dans cet article, nous vous expliquons comment vous assurer que votre expérience reste rapide.

La vitesse est importante, mais qu'entendons-nous exactement par là ? Qu'est-ce qu'un site rapide ?

Les performances réelles varient fortement en raison des différences d'appareils utilisés, de connexions réseau et d'autres facteurs. Dans cet article, nous allons vous présenter des outils qui peuvent vous aider à collecter des données de test ou sur le terrain afin d'évaluer les performances d'une page.

réactif-window est une bibliothèque qui permet d'afficher efficacement de grandes listes.

La méthode React.lazy permet de diviser facilement le code d'une application React au niveau du composant à l'aide d'importations dynamiques. Utilisez cette fonctionnalité avec le suspense pour indiquer aux utilisateurs les états de chargement appropriés.

réactif-snap est une bibliothèque tierce qui préaffiche les pages de votre site dans des fichiers HTML statiques. Cela peut améliorer les temps First Paint dans votre application.

réactif-axe est une bibliothèque qui audite une application React et consigne tous les problèmes d'accessibilité dans la console des outils pour les développeurs Chrome. eslint-plugin-jsx-a11y est un plug-in ESLint qui identifie et applique un certain nombre de règles d'accessibilité directement dans votre JSX. En les combinant, vous pouvez bénéficier d'une approche d'audit complète pour détecter et résoudre les problèmes d'accessibilité dans votre application.

React est une bibliothèque Open Source qui facilite la création d'interfaces utilisateur. Ce parcours de formation aborde différents outils et API de l'écosystème que vous pouvez utiliser pour améliorer les performances et la facilité d'utilisation de votre application.

La création d'une application React inclut un fichier manifeste d'application Web par défaut. Modifier ce fichier vous permettra de changer la façon dont votre application s'affiche lorsqu'elle est installée sur l'appareil de l'utilisateur.

Workbox est intégré à Create React App avec une configuration par défaut qui met en cache en amont tous les éléments statiques de votre application à chaque compilation.

Dans cet atelier de programmation, découvrez comment améliorer les performances d'une page en préchargeant et en préchargeant des ressources.

La requête média en mode privilégié en mode réduit détecte si l'utilisateur a demandé au système de réduire la quantité d'animation ou de mouvement qu'il utilise. Elle s'adresse aux utilisateurs qui nécessitent ou préfèrent des animations réduites. Par exemple, les personnes souffrant de troubles vestibulaires préfèrent souvent réduire au minimum les animations.

Découvrez comment différer les CSS non critiques afin d'optimiser le chemin d'affichage critique et d'améliorer la métrique First Contentful Paint (FCP).

L'outil Intersection Observer v2 permet non seulement d'observer les intersections en tant que telles, mais également de détecter si les éléments qui les recoupaient étaient visibles au moment de l'intersection.

Créez des sites qui répondent aux besoins et aux fonctionnalités de l'appareil sur lequel ils sont consultés.

Les feuilles de style constructibles vous permettent de créer et de distribuer facilement des styles dans des documents ou des racines fantômes, sans vous soucier de l'effet FOUC.

Recommandations pour implémenter la logique et l'affichage dans les applications.

Définissez des budgets de performance avec une configuration minimale et appliquez-les dans le cadre de votre workflow de développement en utilisant Bundlesize avec Travis CI.

L'automatisation est le meilleur moyen de garder un œil sur votre budget de performances. Découvrez comment choisir l'outil qui correspond le mieux à vos besoins et à votre configuration actuelle.

Découvrez comment définir des budgets de performances et maîtriser la taille de votre lot avec Webpack.

Vous avez travaillé sans relâche pour gagner en rapidité. Assurez-vous maintenant de le rester en automatisant les tests de performances dans Travis CI avec Lighthouse Bot.

Comment intégrer WebAssembly à cette configuration ? Dans cet article, nous allons résoudre ce problème en prenant l'exemple de C/C et Emscripten.

L'API getInstallRelatedApps() est une API de plate-forme Web qui vous permet de vérifier si votre application iOS/Android/de bureau ou votre PWA est installée sur l'appareil de l'utilisateur.

Dans cet atelier de programmation, vous allez apprendre à améliorer les performances d'une application en minimisant la quantité de code transpilée.

Les indications client sont un ensemble d'en-têtes de requête HTTP que nous pouvons utiliser pour modifier la façon dont nous livrons les ressources de la page en fonction des caractéristiques de l'appareil et de la connexion réseau d'un utilisateur. Dans cet article, vous découvrirez les conseils destinés aux clients, leur fonctionnement et quelques idées sur la façon de les utiliser pour rendre votre site plus rapide pour les utilisateurs.

En utilisant les éléments HTML sémantiques appropriés, vous pourrez peut-être répondre à la plupart de vos besoins d'accès au clavier, voire à tous. Vous passerez ainsi moins de temps à modifier l'index de tabulation et vos utilisateurs seront plus satisfaits.

L'accessibilité du clavier est intégrée aux éléments HTML standards. Lorsque vous créez des composants interactifs personnalisés, utilisez l'index de tabulation pour vous assurer qu'ils sont accessibles via le clavier.

L'indicateur de mise au point (souvent représentée par un "anneau de sélection") identifie l'élément sélectionné. Pour les utilisateurs qui ne peuvent pas utiliser de souris, cet indicateur est extrêmement important, car il sert de substitut au pointeur de la souris.

De nombreux utilisateurs différents utilisent le clavier pour naviguer dans les applications, qu'il s'agisse d'utilisateurs souffrant de troubles moteurs temporaires ou permanents ou d'utilisateurs qui utilisent les raccourcis clavier pour gagner en efficacité et en productivité. Disposer d'une bonne stratégie de navigation au clavier pour votre application crée une meilleure expérience pour tous.

En utilisant les éléments appropriés pour les en-têtes et les points de repère, vous pouvez considérablement améliorer l'expérience de navigation des utilisateurs de technologies d'assistance.

Vous êtes-vous déjà demandé comment les technologies d'assistance, comme un lecteur d'écran, savent quoi annoncer aux utilisateurs ? La réponse est que ces technologies reposent sur le fait que les développeurs balisent leurs pages avec du code HTML sémantique. Mais qu'est-ce que la sémantique et comment les lecteurs d'écran l'utilisent-ils ?

Un site accessible est un site dont le contenu est accessible quels que soient les handicaps des utilisateurs et dont les fonctionnalités peuvent également être gérées par un éventail d'utilisateurs aussi diversifié que possible.

Pour qu'un lecteur d'écran présente une interface utilisateur vocale à l'utilisateur, les éléments significatifs doivent disposer de libellés appropriés ou d'autres textes alternatifs. Une étiquette ou une alternative textuelle attribue à un élément son nom accessible, l'une des propriétés clés permettant d'exprimer la sémantique de l'élément dans l'arborescence d'accessibilité.

Dès que vous ouvrez une page Web, le navigateur demande un document HTML au serveur, analyse le contenu du fichier HTML, puis envoie des requêtes distinctes pour toute autre référence externe. La chaîne de requêtes critiques représente l'ordre de priorité des ressources qui sont récupérées par le navigateur.

Analysez votre bundle JavaScript pour détecter et supprimer le code inutilisé.

Lighthouse est un outil qui vous aide à mesurer les performances d'une page et à trouver des moyens de les améliorer. Lighthouse fournit un rapport sur les performances de la page. Le rapport fournit un score pour chaque métrique, ainsi qu'une liste d'opportunités qui, si vous les appliquez, devraient accélérer le chargement de la page.

Pour établir les bonnes stratégies de mise en cache pour votre application Web, vous devez maîtriser précisément ce que vous chargez. Lors de la création d'une application Web fiable, le réseau peut être soumis à toutes sortes de forces obscures. Vous devez comprendre les vulnérabilités du réseau si vous espérez les résoudre dans votre application.

Lorsque le terme "sécurité" vous vient à l'esprit, il s'agit généralement d'une mauvaise nouvelle. Cependant, la sécurité doit être considérée comme un élément positif et nécessaire du développement Web, au même titre que l'"expérience utilisateur " et l'accessibilité.

Dans cet atelier de programmation, vous allez découvrir comment améliorer les performances en remplaçant un GIF animé par une vidéo.

Un navigateur peut charger et afficher les ressources de plusieurs sites. S'il n'y a aucune restriction sur les interactions entre ces ressources et qu'un script est compromis par un pirate informatique, il peut tout révéler dans le navigateur d'un utilisateur.

Dans cet atelier de programmation, vous allez apprendre à analyser le trafic réseau à l'aide des outils pour les développeurs Chrome.

De bonnes performances sont rarement un effet secondaire. Découvrez les budgets de performances et comment ils peuvent vous aider à réussir.

Dans cet atelier de programmation, vous allez apprendre à diffuser des images optimisées à l'aide de WebP.

Dans cet atelier de programmation, vous allez apprendre à afficher immédiatement du texte à l'aide de Font Face Observer.

Pour se prémunir contre les attaques, un développeur doit réduire les failles et ajouter des fonctionnalités de sécurité à une application. Heureusement, sur le Web, le navigateur offre de nombreuses fonctionnalités de sécurité, dont l'idée de "bac à sable".

Les moteurs de recherche sont la version numérique d'un bibliothécaire. Elles utilisent un index complet pour aider à trouver les bonnes informations pour une requête. Comprendre les bases de la recherche vous prépare à rendre votre contenu visible pour les utilisateurs.

Dans cet atelier de programmation, vous allez apprendre à rendre une application fiable en enregistrant un service worker.

L'audit SEO Lighthouse analyse votre page, teste les éléments importants pour les moteurs de recherche et vous attribue un score afin que vous puissiez identifier les points à améliorer. Le SEO est important, car il permet à davantage d'internautes pertinents de consulter votre contenu.

Avez-vous déjà vu un GIF animé sur un service comme Imgur ou Gfycat, l'avoir inspecté dans vos outils de développement, pour découvrir que le GIF était vraiment une vidéo ? Il y a une bonne raison à cela. Les GIF animés peuvent vraiment être énormes ! En convertissant des GIF volumineux en vidéos, vous pouvez économiser beaucoup de bande passante pour les utilisateurs.

Dans cet atelier de programmation, vous allez apprendre à améliorer les performances d'une application simple grâce à la division du code.

Dans cet atelier de programmation, vous allez apprendre à identifier une erreur 404 trompeuse qui peut empêcher l'indexation correcte de votre page.

Assurez-vous que votre site se charge rapidement grâce à un guide par étapes qui vous permet de définir des seuils pour les métriques de performances pertinentes pour votre site.

Workbox est un kit d'outils de haut niveau pour les service workers, basé sur les API Service Worker et Cache Storage. Il fournit un ensemble de bibliothèques prêtes pour la production permettant d'ajouter des fonctionnalités hors connexion aux applications Web.

Dans cet atelier de programmation, vous allez apprendre à utiliser imagemin avec webpack pour optimiser les images JPEG et PNG et les télécharger plus rapidement.

PRPL est un acronyme qui décrit un modèle utilisé pour que les pages Web se chargent et deviennent interactives, plus rapidement. Dans ce guide, vous allez découvrir comment chacune de ces techniques s'imbrique, mais peut quand même être utilisée indépendamment pour obtenir des résultats de performances.