Articles
Optimiser les longues tâches
On vous a dit de "ne pas bloquer le thread principal" et de "diviser vos longues tâches", mais que signifient ces choses ?
Configurer un mode de paiement
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.
Précharger les modules
Le préchargement de module permet de charger à l'avance les modules JavaScript de manière déclarative.
Mesurer la saisie automatique dans le navigateur sur vos formulaires
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.
Partie 1: L'IA côté client pour lutter contre la toxicité en ligne
"Protégez vos utilisateurs et créez un environnement en ligne plus sûr grâce à la détection de la toxicité. Dans la première partie, nous vous présentons le contexte dont vous avez besoin pour déployer l'IA afin de réduire la toxicité à sa source: les claviers des utilisateurs."
Partie 2: Créer une détection de la toxicité de l'IA côté client
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.
Temps de blocage total (TBT)
Cet article décrit la métrique "Total Blocking Time (TBT)" et explique comment la mesurer.
Premiers pas avec la mesure des signaux Web
Découvrez comment mesurer les signaux Web de votre site dans des environnements réels et des laboratoires.
Les moyens les plus efficaces d'améliorer les métriques Core Web Vitals
Un ensemble de bonnes pratiques identifiées par Chrome comme les plus intéressantes pour optimiser les performances Web et améliorer les Core Web Vitals
Web Vitals
Métriques essentielles pour un site opérationnel
Optimiser le Largest Contentful Paint
Guide par étapes expliquant comment décomposer le LCP et identifier les points clés à améliorer.
Comparer les capacités du LLM à la synthèse
Évaluez les résultats de différents modèles et requêtes à l'aide du LLM comme technique d'évaluation. Au lieu de s'appuyer sur le jugement humain, la validation du modèle est déléguée à un autre LLM.
La propriété CSS content-visibility est désormais disponible en version de référence
La propriété CSS content-visibility est désormais disponible en version de référence.
Comment les seuils des métriques Core Web Vitals ont été définis
Recherche et méthodologie derrière les seuils des Signaux Web essentiels
Workflows des Signaux Web essentiels avec les outils Google
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.
Diagnostiquer manuellement les interactions lentes dans l'atelier
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.
Référence
Cet article explique l'origine de Baseline, l'implication de Google et la propriété du groupe de la communauté WebDX.
Cache amélioré
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 est améliorée avec CSSNestedDeclarations
L'imbrication CSS s'améliore considérablement !
Déboguer les performances sur le terrain
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.
First Input Delay (FID)
Cet article présente la métrique FID (First Input Delay) et explique comment la mesurer.
Analyse comparative des performances de la propriété CSS @
Quel impact @property a-t-il sur les performances de votre CSS ?
Améliorer les performances et l'expérience utilisateur pour l'IA côté client
Découvrez les avantages de l'IA côté client, y compris la faible latence, la réduction des coûts côté serveur, l'absence de clé API, la confidentialité accrue des utilisateurs et l'accès hors connexion.
Corréler les métriques Core Web Vitals et les revenus publicitaires avec les outils Google
Découvrez comment utiliser les outils Google pour corréler vos métriques Core Web Vitals avec vos revenus publicitaires.
Stockage pour le Web
Il existe de nombreuses options pour stocker des données dans le navigateur. Laquelle répond le mieux à vos besoins ?
Il est temps de charger les iFrames hors écran de manière différée !
Cet article traite de l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des iFrames.
Protocole Web push
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.
Créer plusieurs progressive web apps sur le même domaine
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.
Quels sont les éléments nécessaires pour être installable ?
Critères d'installation des progressive web apps.
Quelles sont les caractéristiques d'une progressive web app de qualité ?
Qu'est-ce qui rend une progressive web app de qualité ou de qualité ?
Comment Chrome gère les mises à jour du fichier manifeste de l'application Web
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
Ajouter un fichier manifeste d'application Web
Le fichier manifeste de l'application Web est un simple fichier JSON qui indique au navigateur comment votre application Web doit se comporter.
Limiter les scripts intersites (XSS) avec une CSP (Content Security Policy) stricte.
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.
Accéder aux appareils sur le Web
Cet article aide les développeurs Web à choisir l'API matérielle adaptée à un appareil donné.
Autorisez la réutilisation des clés d'accès sur vos sites avec les requêtes d'origine associées
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.
Choisir le bon format d'image
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.
Chargement différé des images au niveau du navigateur pour le Web
Cet article porte sur l'attribut de chargement et explique comment l'utiliser pour contrôler le chargement des images.
Métriques personnalisées
Les métriques personnalisées vous permettent de mesurer et d'optimiser les aspects de l'expérience utilisateur qui sont propres à votre site.
Mesurer et déboguer les performances avec Google Analytics 4 et BigQuery
Découvrez comment envoyer les données des signaux Web aux propriétés Google Analytics 4, et les exporter pour les analyser dans BigQuery et Looker Studio.
Bonnes pratiques pour les autorisations Web
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é.
Bonnes pratiques concernant les notifications relatives aux cookies
Découvrez comment les notifications relatives aux cookies affectent les performances, la mesure des performances et l'expérience utilisateur.
Personnalisez les notifications multimédias et les commandes de lecture avec l'API Media Session
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.
Identifier les interactions lentes sur le terrain
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.
Utilisation de l'index de tabulation
Utilisez l'attribut tabindex pour définir explicitement la position de tabulation d'un élément.
Délai avant le premier octet (TTFB)
Cet article présente la métrique TTFB (Time to First Byte) et explique comment la mesurer.
Extraction pratique des requêtes pour les LLM plus petits
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.
Optimiser le délai avant le premier octet
Découvrez comment optimiser la métrique "Time to First Byte".
INP (Interaction to Next Paint)
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.
Couleurs CSS dépendantes du schéma de couleurs avec light-dark()
description: définissez les couleurs qui réagissent au jeu de couleurs utilisé avec la fonction light-dark().
Modèles de performances WebAssembly pour les applications Web
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.
Mises en page de type grille animée CSS
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.
Jouez au jeu du dinosaure avec votre manette de jeu Chrome
Apprenez à contrôler des jeux Web avec l'API Gamepad.
L'attribut inerte
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.
Découvrez l'équipe Web.dev AI
Rencontrez les rédacteurs techniques et l'équipe chargée des relations avec les développeurs.
Améliorez la recherche sur votre site: réponses contextuelles grâce à l'IA générative
Il existe de nombreuses considérations éthiques à prendre en compte lorsque vous utilisez des outils d'IA et générez de nouveaux contenus.
Éthique et IA
Il existe de nombreuses considérations éthiques à prendre en compte lorsque vous utilisez des outils d'IA et générez de nouveaux contenus.
Qu'est-ce que l'intelligence artificielle ?
L'acronyme "IA" est souvent utilisé de manière interchangeable pour représenter les différents types de technologies qui composent le domaine de l'IA.
Déterminer le fournisseur de clés d'accès avec l'AAGUID
Les parties de confiance peuvent déterminer d'où provient la clé d'accès en examinant l'AAGUID. Découvrez comment ça marche.
Compiler et optimiser Wasm avec Binaryen
À 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.
Composant Web <model-viewer>
Le composant Web <model-viewer> vous permet d'utiliser des modèles 3D sur une page Web de manière déclarative.
Enregistrer du contenu audio et vidéo au format HTML5
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.
Présentation détaillée de userVerification
Découvrir comment utiliser "userVerification" dans WebAuthn
Pourquoi les données CrUX sont-elles différentes de mes données RUM ?
Découvrez pourquoi les données RUM peuvent afficher différents chiffres des Signaux Web essentiels de CrUX.
Accessibilité pour les développeurs Web
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.
Largest Contentful Paint (LCP)
Cet article présente la métrique LCP (Largest Contentful Paint) et explique comment la mesurer.
Charger du code JavaScript tiers
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.
Empêcher la création d'une clé d'accès s'il en existe déjà une
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.
Utiliser IndexedDB
Guide des principes de base d'IndexedDB
5 extraits CSS que tout développeur front-end devrait connaître en 2024
C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.
Quelles sont les parties d'une URL ?
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.
Présentation détaillée des identifiants visibles
Découvrez les identifiants visibles et comment créer des expériences utilisateur adaptées à votre cas d'utilisation.
Performances d'affichage
Les utilisateurs remarquent si les sites et les applications ne fonctionnent pas correctement. Il est donc crucial d'optimiser les performances d'affichage.
ResizeObserver: il s'apparente à document.onresize pour les éléments.
"ResizeObserver" vous avertit lorsque le rectangle de contenu d'un élément change de taille afin que vous puissiez réagir en conséquence.
Optimiser la taille d'encodage et de transfert des éléments textuels
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.
OffscreenCanvas : accélérez les opérations de canevas avec un nœud de calcul Web
Ce document explique comment améliorer les performances de l'affichage des images dans votre application Web à l'aide de l'API OffscreenCanvas.
First Contentful Paint (FCP)
Cet article présente la métrique "First Contentful Paint" (FCP) et explique comment la mesurer.
Réseaux de diffusion de contenu (CDN)
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.
Qu'est-ce qui fait une bonne expérience de déconnexion ?
Conseils pratiques aux développeurs sur ce qu'il faut faire lorsqu'un utilisateur se déconnecte du site Web.
Délai avant interactivité (TTI)
Cet article présente la métrique "Time to Interactive" (TTI) et explique comment la mesurer.
Optimiser le chargement des ressources avec l'API Fetch Priority
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.
Les pseudo-classes :user-valid et :user-invalid
À 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
Optimiser les Core Web Vitals pour les décisionnaires en entreprise
Découvrez comment les décideurs en entreprise et les non-développeurs peuvent améliorer les Signaux Web essentiels.
Nuances de l'encodage des chaînes en base64 en JavaScript
Comprenez et évitez les problèmes courants lors de l'application de l'encodage et du décodage base64 à des chaînes.
Sous-grille CSS
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.
Chargement efficace des annonces sans impact sur la vitesse des pages
Dans le monde numérique d'aujourd'hui, la publicité en ligne est un élément essentiel du Web sans frais que nous apprécions tous. Toutefois, des annonces mal implémentées peuvent ralentir la navigation, frustrer les internautes et réduire leur engagement. Découvrez comment charger efficacement les annonces sans affecter la vitesse de vos pages, offrir une expérience utilisateur fluide et maximiser les opportunités de revenus pour les propriétaires de sites Web.
Quatre types courants de couverture de code
Apprenez-en plus sur la couverture de code et découvrez quatre façons courantes de la mesurer.
Tester ou non, d'un point de vue technique
Déterminez ce que vous devez tester et ce que vous pouvez exclure.
Définir des scénarios de test et des priorités
Déterminez les éléments à tester, définissez vos scénarios de test et définissez les priorités.
Métriques de performances axées sur l'utilisateur
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.
Précharger les images responsives
Découvrez de nouvelles possibilités intéressantes en matière de préchargement d'images responsives pour garantir une expérience utilisateur optimale.
Adapter la typographie aux préférences des utilisateurs avec le CSS
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.
Pyramide ou crabe ? Trouvez une stratégie de test adaptée
Découvrez comment combiner différents types de tests dans une stratégie raisonnable adaptée à votre projet.
Les trois types courants d'automatisation des tests
Commençons par les bases ! Découvrez les deux modes de test généraux et les trois types courants d'automatisation des tests.
Élimination des téléchargements inutiles
Vous devez auditer régulièrement vos ressources pour vous assurer que chacune d'elles contribue à améliorer l'expérience utilisateur.
Qu'est-ce que WebAssembly et d'où provient-il ?
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.
Compilation de mkbitmap vers WebAssembly
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.
Système de fichiers privé d'origine
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
Hébergement sécurisé des données utilisateur dans les applications Web modernes
Comment afficher de manière sécurisée le contenu contrôlé par l'utilisateur dans des applications Web
Déployer le format AVIF pour des sites Web plus réactifs
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é.
Optimiser l'interaction pour la page suivante
Découvrez comment optimiser l'interaction de l'interaction avec le site Web avec Next Paint.
Fonctionnalités de référence que vous pouvez utiliser aujourd'hui
Découvrez quelques-unes des fonctionnalités de Baseline.
L'impact des grandes tailles de DOM sur l'interactivité et ce que vous pouvez faire pour y remédier
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.
Évaluation des scripts et tâches longues
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.
Affichage côté client du code HTML et de l'interactivité
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.
Optimiser le délai d'entrée
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.
Optimiser le Cumulative Layout Shift
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.
Utiliser l'extension Web Vitals pour déboguer les problèmes liés aux Signaux Web essentiels
L'extension Signaux Web affiche désormais davantage d'informations de débogage pour vous aider à identifier l'origine des problèmes liés aux Signaux Web essentiels.
Cumulative Layout Shift (CLS)
Cet article présente la métrique CLS (Cumulative Layout Shift) et explique comment la mesurer.
Créez des expériences WordPress dans le navigateur avec WordPress Playground et WebAssembly
La version complète de WordPress, basée sur PHP, exécutée uniquement dans le navigateur avec WebAssembly
Nouvelle fonctionnalité pour les développeurs, proposée par WebAssembly
Présentation des outils désormais disponibles sur le Web grâce à WebAssembly.
Que sont les cartes sources ?
Améliorez l'expérience de débogage Web avec les mappages sources.
PWA sur les plates-formes de téléchargement d'applications
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.
6 extraits CSS que tout développeur front-end devrait connaître en 2023
C'est un CSS fiable, performant et fiable que vous pouvez utiliser dès aujourd'hui.
Fonctions trigonométriques en CSS
Calculez le sinus, le cosinus, la tangente, etc. en CSS.
Effectuer des opérations efficaces sur chaque image de la vidéo avec requestVideoFrameCallback()
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.
Point fort de la communauté GDE: Lars Knudsen
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Astuce CSS rapide ! Texte animé en dégradé
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,
Nouveaux modèles pour les applications multimédias
Cet article de blog annonce une nouvelle collection de modèles pour les applications multimédias.
Chrometober est en cours de développement !
Ce Chrometober a donné vie à ce livre qui défile, et vous a donné des conseils et astuces amusants et effrayants.
Créer un composant d'info-bulle
Présentation des principes de base de la création d'un élément personnalisé d'info-bulle personnalisé et adaptable aux couleurs.
Se connecter avec une clé d'accès via le remplissage automatique de formulaire
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.
Créer une clé d'accès pour les connexions sans mot de passe
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.
Créer un composant de bouton d'action flottant (FAB)
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.
Bonnes pratiques concernant les polices
Découvrez comment optimiser les polices Web pour les Signaux Web essentiels.
Astuce CSS rapide ! Chargeur animé
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:
Tester le contraste des couleurs de la conception Web
Présentation de trois outils et techniques pour tester et vérifier le contraste des couleurs accessible de votre conception.
Point fort de la communauté GDE: Alba Silvente Fuentes
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Créer la navigation principale d’un site Web
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.
Est-ce :modal ?
Ce pseudo-sélecteur CSS très pratique permet de sélectionner des éléments modals.
Bonnes pratiques pour les balises et les gestionnaires de balises
Optimiser les balises et les gestionnaires de balises pour les métriques Core Web Vitals
Styles de la liste de créations
Découvrez des méthodes utiles et créatives pour styliser une liste.
Création d'une illusion de grille tordue
Une exploration amusante des moyens de recréer une illusion d'optique avec le CSS.
Comment Nordhealth utilise-t-elle les propriétés personnalisées de ses composants Web ?
Avantages de l'utilisation des propriétés personnalisées dans les systèmes de conception et les bibliothèques de composants
Contrôle plus précis des transformations CSS grâce à des propriétés de transformation individuelles
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.
Animations de bordure CSS
Examiner plusieurs façons d'animer une bordure en CSS
Comment la BBC déploie-t-elle le mécanisme HSTS pour améliorer la sécurité et les performances ?
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.
En quoi les données de test et les données réelles peuvent être différentes (et comment y remédier)
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.
Une situation gagnant-gagnant
GDE Enrique Fernandez Guerra à propos de l'Open Source de son ONG HelpDev.
Fin d'Internet Explorer
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 ?
Adieu HTML5Rocks
Cela fait longtemps que HTML5Rocks, ça fait plaisir de vous connaître.
Recettes de cookies propriétaires
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.
Synchroniser la lecture audio et vidéo sur le Web
L'API Web Audio permet d'effectuer correctement la synchronisation AV.
Utiliser des dégradés coniques pour créer une bordure sympa
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
Différence entre les bibliothèques et les frameworks JavaScript
Comprenez les différences entre les frameworks et les bibliothèques dans le contexte d'un environnement JavaScript côté client.
Choisir une bibliothèque ou un framework JavaScript
Comprendre les décisions concernant l'utilisation d'une bibliothèque ou d'un framework JavaScript.
Implémenter la gestion des erreurs lors de l'utilisation de l'API Fetch
Interceptez les erreurs lors de l'utilisation de l'API Fetch.
Le guide du développeur front-end sur le terminal
Cette ressource peut vous aider à vous repérer rapidement dans le terminal.
Une API pour des polices Web rapides et esthétiques
Information concernant l'API CSS Google Fonts : fonctionnement, utilisation et ajout efficace de polices Web
GOV.UK supprime jQuery de son interface.
GOV.UK a supprimé sa dépendance jQuery de son interface. Vous ne devinerez jamais ce qui s'est passé. (Oui.)
Créer un composant de bouton
Présentation des bases de la création de composants adaptatifs aux couleurs, réactifs et accessibles.
Ne luttez pas contre l'analyse du préchargement du navigateur
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.
Combler le fossé
Concevoir des applications pour le Web plus facilement.
Bonnes pratiques pour mesurer les signaux Web sur le terrain
Mesurer les signaux Web avec votre outil d'analyse actuel
Trouver du courage et de l'inspiration au sein de la communauté des développeurs
Des experts Google Developers sur le Web expliquent comment les programmes de mentorat leur ont permis de devenir des leaders.
Polices variables dans la vie réelle
Partager un guide pratique sur les polices variables, avec de nombreux exemples.
Créez rapidement de magnifiques dégradés CSS avec CSS Gradient Creator
Cet outil conçu par Josh W Comeau vous permet de créer très facilement des dégradés à l'aspect esthétique.
Présentation détaillée des principales difficultés rencontrées par les développeurs Web
Ensemble d'insights sur les principaux points de contrariété, recueillis à partir de plusieurs conversations avec des développeurs Web.
Améliorez l'image de votre site avec images.tooling.report
Vérifiez l'état des outils d'image.
Champ d'application des variables globales et locales
Découvrez le champ d'application et son fonctionnement en JavaScript.
Créer un composant de boîte de dialogue
Présentation fondamentale de la création de mini et de mégamodals adaptés aux couleurs, réactifs et accessibles avec l'élément ``.
Déboguer les erreurs de lecture de contenus multimédias sur le Web
Découvrez comment déboguer les erreurs de lecture de contenus multimédias sur le Web.
Point fort de la communauté GDE: Nishu Goel
Il s'agit de l'une des séries d'entretiens avec des membres du programme Experts Google Developers (GDE).
Effets sur les performances d'un chargement différé trop important
Le chargement hâtif des images dans la fenêtre d'affichage initiale, ainsi que le chargement différé du reste, peut améliorer les Signaux Web tout en limitant le chargement d'octets.
Créer un composant de barre de chargement
Présentation des principes de base de la création d'une barre de chargement accessible et adaptative avec l'élément ``.
Enregistrer des identifiants depuis Forms
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 à
Chrome et Firefox vont bientôt atteindre la version majeure 100
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.
Créer un favicon adaptatif
Présentation des principes de base de la création d'un favicon adaptatif.
Améliorez la sécurité et la confidentialité en mettant à jour le cache HTTP
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.
Dessiner sur un canevas dans Emscripten
Découvrez comment effectuer le rendu de graphiques 2D sur un canevas sur le Web à partir de WebAssembly avec Emscripten.
Éléments HTML supplémentaires
Métriques essentielles pour un site opérationnel
Portage d'applications USB sur le Web Partie 2: gPhoto2
Découvrez comment gPhoto2 a été transféré vers WebAssembly pour contrôler des caméras externes via USB à partir d'une application Web.
Journalisation des erreurs réseau (NEL)
Utilisez Network Error Logging (NEL) pour collecter les erreurs réseau côté client.
Détection des fonctionnalités WebAssembly
Découvrez comment utiliser les dernières fonctionnalités de WebAssembly tout en répondant aux besoins des utilisateurs sur tous les navigateurs.
Portage d'applications USB sur le Web Partie 1: libusb
Découvrez comment transférer sur le Web du code qui interagit avec des appareils externes grâce aux API WebAssembly et Fugu.
Créer un composant de changement de thème
Présentation des principes de base de la création d'un composant de changement de thème adaptatif et accessible.
Intégrer des extraits de code JavaScript en C++ avec Emscripten
Découvrez comment intégrer du code JavaScript dans votre bibliothèque WebAssembly pour communiquer avec le monde extérieur.
PWA sur Oculus Quest 2
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.
Conception de bâtiments
Un aperçu du processus et des outils utilisés pour créer l’expérience de style agenda des fêtes de Designcember.
Calculatrice de conception
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.
Copie approfondie en JavaScript avec structuredClone
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.
Créer un composant de toast
Présentation des principes de base de la création d'un composant de toast adaptatif et accessible.
Fonds UI
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.
Créer un composant de menu de jeu en 3D
Présentation des principes de base de la création d'un menu de jeu 3D réactif, adaptatif et accessible.
Vers une métrique de fluidité de l'animation
Découvrez comment mesurer des animations, prendre en compte les frames d'animation et la fluidité globale de la page.
Nouveautés de PageSpeed Insights
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.
Parcours utilisateur Lighthouse
Essayez une nouvelle API Lighthouse pour mesurer les performances et les bonnes pratiques tout au long d'un parcours utilisateur.
Toutes les annonces du Chrome Dev Summit 2021
Un résumé de toutes les annonces clés du Chrome Dev Summit 2021, ainsi que les liens pour en savoir plus
Parcours de Photoshop vers le Web
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.
Créer un composant à sélection multiple
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.
Évaluer les performances de chargement sur le terrain avec Navigation Timing et Resource Timing
Découvrez les principes de base de l'utilisation des API Navigation et Resource Timing pour évaluer les performances de chargement sur le terrain.
Manipulation DOM sécurisée avec l'API Sanitizer
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.
Bonnes pratiques concernant les intégrations tierces
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.
Impact des architectures SPA sur les Signaux Web essentiels
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.
Présentation détaillée des événements JavaScript
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
Regroupement de ressources non-JavaScript
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.
Créer un composant de bouton "split-button"
Présentation des principes de base de la création d'un composant "split-button" accessible
Importer des feuilles de style à l'aide de scripts de module CSS
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.
Couleur d'accentuation CSS
Affichez la couleur de votre marque dans les entrées de formulaire HTML intégrées à l'aide d'une seule ligne de code.
Créer un composant switch
Présentation des principes de base de la création d'un composant switch réactif et accessible
En-têtes des conseils client pour les fonctionnalités multimédias des préférences de l'utilisateur
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,
Créer un composant de fil d'Ariane
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.
Utiliser des threads WebAssembly à partir de C, C++ et Rust
Découvrez comment intégrer des applications multithread écrites dans d'autres langages à WebAssembly.
Principes de base du streaming multimédia
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.
Frameworks multimédias
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.
Chiffrement multimédia
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.
PWA avec streaming hors connexion
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é.
Trouvez votre chemin avec les données réelles de la mise à jour de l'extension Web Vitals
L'extension Web Vitals vous montre désormais où se situent vos expériences locales par rapport aux expériences utilisateur réelles sur le terrain.
Créer un jeu de couleurs
Présentation des principes de base pour établir un jeu de couleurs dynamique et configurable
Ajustement de la taille du CSS pour @font-face
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
Utiliser le format AVIF pour compresser les images de votre site
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.
Évolution du Cumulative Layout Shift dans les outils 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.
CSS pour les signaux Web
Cet article présente les techniques CSS permettant d'optimiser les signaux Web.
Nouveaux sélecteurs de pseudo-classe fonctionnels CSS :is() et :where()
Ces ajouts apparemment mineurs à la syntaxe du sélecteur CSS vont avoir un impact important.
Nouvelle formation sur les progressive web apps désormais disponible
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.
Migrer vers les indicateurs client user-agent
Stratégies pour remplacer l'utilisation de la chaîne user-agent par les nouveaux indicateurs client user-agent pour votre site.
Le nouveau responsive Web design dans un monde axé sur les composants
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.
Guide de référence rapide sur les en-têtes de sécurité
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.
Excalidraw et Fugu: améliorer le parcours utilisateur principal
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
Modules ES dans les service workers
Au lieu d'utiliser importScripts(), les service workers peuvent utiliser des importations statiques de modules ES pour intégrer du code supplémentaire.
Créer un composant de défilement multimédia
Présentation des principes de base de la création d'une vue de défilement horizontale responsive pour les téléviseurs, les téléphones, les ordinateurs, etc.
Optimiser les signaux Web avec Lighthouse
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.
Utiliser des API Web asynchrones à partir de WebAssembly
Découvrez comment appeler des API Web asynchrones lors de la compilation de langages traditionnellement synchrones sur WebAssembly.
Personnaliser les commandes de fenêtre en superposition de la barre de titre de votre PWA
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.
Garder le contrôle des scripts tiers
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.
Remplir les formulaires OTP dans des iFrame multi-origines avec l'API WebOTP
L'API WebOTP peut désormais recevoir un mot de passe à usage unique depuis un iFrame.
Surmonter les obstacles avec l'API DataTransfer
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.
Créer des animations de texte fractionné
Présentation des principes de base de la création d'animations fractionnées pour les lettres et les mots.
Faire évoluer la métrique CLS
Plan d'amélioration de la métrique CLS pour plus d'équité vis-à-vis des pages de longue durée.
Satisfaction des développeurs Web
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é.
Créer un composant Settings
Présentation des principes de base de la création d'un composant de paramétrage composé de curseurs et de cases à cocher.
Déboguer les décalages de mise en page
Découvrez comment identifier et corriger les décalages de mise en page.
JavaScript: Qu'est-ce que cela signifie ?
Il peut être difficile de déterminer la valeur de "this" en JavaScript. Voici comment procéder...
Appliquer les principes de programmation des mini-applications à un exemple de projet
Ce chapitre présente un exemple de projet qui suit l'approche consistant à programmer la mini-application.
Structure, cycle de vie et regroupement du projet
Ce chapitre aborde la structure du projet, le cycle de vie et le lot de mini-applications.
Balisage, style, script et mise à jour des mini-applis
Ce chapitre passe en revue les options de balisage, de style, de script et de mise à jour de diverses plates-formes de mini-applications.
Conclusions d'un développeur Web sur les 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.
Programmer une mini-application
Ce chapitre explique comment programmer des mini-applications.
Composants de la mini-appli
Ce chapitre fournit des détails sur les composants mis à disposition par toutes les plates-formes de mini-applications.
Projets Open Source de mini-appli
Ce chapitre présente une sélection de mini-projets Open Source intéressants.
Que sont H5 et QuickApp ?
Ce chapitre fournit des informations sur les applications H5 et QuickApp, qui sont deux choses différentes des mini-applications.
Flux : guide définitif
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.
Créer un composant "Tabs"
Présentation générale de la création d'un composant d'onglet semblable à celui des applications iOS et Android.
Guide pour activer l'isolation multi-origine
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.
Demander l'isolation des performances avec l'en-tête Origin-Agent-Cluster
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.
Propriété CSS aspect-ratio
Il est désormais plus facile de conserver les proportions des images et des éléments avec la nouvelle propriété CSS de format.
Bonnes pratiques concernant les carrousels
Découvrez comment optimiser les performances et la facilité d'utilisation des carrousels.
WebRTC est désormais une norme W3C et IETF
Bref aperçu de l'histoire, de l'architecture, des cas d'utilisation et de l'avenir de WebRTC.
Quand utiliser HTTPS pour le développement local ?
L'utilisation de http://localhost pour le développement local est acceptable la plupart du temps, sauf dans certains cas particuliers. Cet article vous explique dans quels cas vous devez exécuter votre site de développement local avec HTTPS.
Vos commentaires ont été demandés: amélioration de la métrique de décalage de mise en page pour les pages de longue durée
Découvrez nos projets d'amélioration de la métrique "Cumulative Layout Shift" et envoyez-nous vos commentaires.
Utiliser HTTPS pour le développement local
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
Créer un composant de navigation latérale
Présentation des principes de base de la création d'un panneau de navigation latéral réactif
Atelier de programmation: Créer un composant Sidenav
Découvrez comment créer un composant de mise en page responsif de navigation latérale coulissant.
Atelier de programmation: Centrer en CSS
Découvrez cinq techniques de centrage différentes avec CSS.
Centrer en 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.
J'adore votre cache ❤️
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.
Kits de peinture internavigateurs et Houdini.how
Découvrez comment implémenter les API Houdini Paint dans plusieurs navigateurs et explorez tout un univers de worklets Houdini avec Houdini.how.
Atelier de programmation sur les bonnes pratiques concernant les formulaires d'adresse
Découvrez les bonnes pratiques concernant les formulaires d'adresse.
Atelier de programmation sur les bonnes pratiques concernant les formulaires de paiement
Découvrez les bonnes pratiques concernant les modes de paiement.
Bonnes pratiques concernant les formulaires OTP envoyés par SMS
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é.
Bonnes pratiques concernant les formulaires de paiement et d'adresse
Maximisez les conversions en aidant vos utilisateurs à remplir les formulaires d'adresse et de paiement aussi rapidement et facilement que possible.
Bonnes pratiques concernant le formulaire d'inscription
Aidez vos utilisateurs à s'inscrire, à se connecter et à gérer les informations de leur compte en toute simplicité.
Atelier de programmation sur les bonnes pratiques concernant le formulaire d'inscription
Utilisez les fonctionnalités de navigateur multiplates-formes pour créer un formulaire d'inscription simple, sécurisé, accessible et facile à utiliser.
Automatiser les audits avec AutoWebPerf
Nouvel outil modulaire qui permet de collecter automatiquement des données sur les performances à partir de plusieurs sources.
Communication bidirectionnelle avec les service workers
Établir un canal de communication bidirectionnel entre la page et le service worker.
Guide sur la mise en cache impérative
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.
Diffuser des mises à jour sur les pages avec des service workers
Comment les service workers peuvent communiquer de manière proactive avec la page pour informer de certains événements.
Présentation des nœuds de calcul
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.
Désactivez l'accélération de la souris pour améliorer le FPS
Les applications Web peuvent désormais désactiver l'accélération de la souris lors de la capture d'événements de pointeur.
Créer un composant "Stories"
Découvrez comment créer une expérience semblable aux stories Instagram sur le Web.
Atelier de programmation: créer un composant "Stories"
Découvrez comment créer une expérience semblable aux stories Instagram sur le Web.
Schemeful SameSite
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.
Chargement différé au niveau du navigateur pour les CMS
Cet article explique comment adopter l'attribut de chargement dans les systèmes de gestion de contenu.
Atelier de programmation: créer un client de notification 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.
Atelier de programmation: Créer un serveur de notifications push
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.
Présentation des notifications push
Présentation des notifications push, des raisons pour lesquelles vous pourriez les utiliser et de leur fonctionnement.
Mesurer l'utilisation hors connexion
Comment suivre l'utilisation hors connexion de votre site afin de comprendre pourquoi il nécessite une meilleure expérience hors connexion
Exemples d'animations CSS hautes performances
Montrer comment des techniques hautes performances permettent de créer des animations complexes et de qualité
CSS min(), max() et clamp()
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.
Échanges signés (SXG)
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.
Améliorations de la mise en page logique avec des raccourcis relatifs au flux
Nouveaux raccourcis pour les propriétés logiques et nouvelles propriétés d'encart pour Chromium.
Créer des animations CSS hautes performances
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.
Pourquoi certaines animations sont-elles lentes ?
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.
Traiter les requêtes de plage dans un service worker
Assurez-vous que votre service worker sait quoi faire lorsqu'une réponse partielle est demandée.
Contrôler le panoramique, l'inclinaison et le zoom de la caméra
Les fonctionnalités de panoramique, d'inclinaison et de zoom des caméras sont enfin contrôlables sur le Web.
En quoi consistent les phases d'évaluation tierces ?
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
Fuites de mémoire de fenêtres dissociées
Les fenêtres détachées sont un type courant de fuite de mémoire, particulièrement difficile à trouver et à résoudre.
Créer une page de remplacement hors connexion
Découvrez comment créer une expérience hors connexion simple pour votre application.
Appliquer des effets aux images avec la propriété d'image de masque de CSS
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.
Créez des formes d'images intéressantes avec la propriété "clip-path" de CSS
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.
Puces personnalisées avec CSS ::Marker
Utilisez le code CSS pour personnaliser la couleur, la taille ou le type des nombres ou des puces des éléments `` ou ``.
Aider les utilisateurs à changer facilement de mot de passe en ajoutant une URL connue pour changer de mot de passe
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.
Gérer des informations de paiement facultatives avec un service worker
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.
Orchestrer des transactions de paiement avec un service worker
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.
ARIA: poison ou antidote ?
Comment mentir sur un lecteur d'écran améliore l'accessibilité lorsqu'il n'entre pas en sel !
Déboguer les fuites de mémoire dans WebAssembly à l'aide d'Emmscripten
Découvrez comment utiliser WebAssembly pour importer sur le Web des bibliothèques écrites dans d'autres langages de façon sécurisée et idiomatique.
content-Visibility: la nouvelle propriété CSS qui améliore les performances d'affichage
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.
Déblocage de l'accès au presse-papiers
L'API Async Clipboard simplifie le copier-coller adapté aux autorisations.
Bonnes pratiques en matière de règles relatives aux URL de provenance et aux sites référents
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.
Web sur Android
Découvrez comment utiliser différents composants pour afficher du contenu Web dans des applications Android.
Créer une PWA chez Google (1re partie)
Ce que l'équipe Bulletin a appris sur les service workers lors du développement d'une PWA.
Surveillance des performances avec Lighthouse CI
Découvrez comment configurer la CI Lighthouse et l'intégrer aux workflows des développeurs.
Concevoir l'expérience utilisateur des clés d'accès sur les comptes Google
Renforcer la sécurité et améliorer l'expérience utilisateur pour les comptes Google
@property: donner des superpouvoirs aux variables CSS
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.
Enregistrer une application de paiement sur le Web
Découvrez comment enregistrer une application de paiement Web dans le navigateur d'un client. Vous apprendrez également à les déboguer.
Fournir des coordonnées et des informations de livraison depuis une application de paiement Android
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.
Présentation des applications de paiement Web
Découvrez comment adapter votre application de paiement Web pour qu'elle fonctionne avec les paiements Web et offre une meilleure expérience utilisateur.
Mise en cache du service worker et mise en cache HTTP
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
Le lien entre la vitesse du site et les métriques commerciales
Réalisez des tests A/B pour évaluer l'impact de la vitesse du site sur vos métriques d'entreprise.
Utiliser le rapport d'expérience utilisateur Chrome pour examiner les performances sur le terrain
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.
Gérer les requêtes de navigation
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.
Rendu au pixel près avec devicePixelContentBox
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é.
Dix mises en page modernes sur une seule ligne de code CSS
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.
Synthèse du direct web.dev
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.
Bonnes pratiques concernant les formulaires de connexion
Utilisez les fonctionnalités de navigateur multiplates-formes pour créer des formulaires de connexion sécurisés, accessibles et faciles à utiliser.
Améliorer progressivement votre progressive web app
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.
Utiliser les fonctionnalités de navigateur multiplates-formes pour créer un formulaire de connexion
Utilisez les fonctionnalités de navigateur multiplates-formes pour créer un formulaire de connexion simple, sécurisé, accessible et facile à utiliser.
Outils pour les développeurs Web pour déboguer les problèmes JavaScript dans la recherche Google
Déboguer les problèmes de SEO sur des pages individuelles ou sur l'ensemble d'un site
Créer des expériences de recherche résilientes avec Workbox
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.
Ajouter du contenu multimédia à une page Web
Intégrez un fichier multimédia dans une page Web à l'aide des balises et.
Ajouter un lien en gras lorsque personne n'a encore associé de lien: fragments de texte
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.
Signaler un bug de navigateur
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.
Donnez à votre PWA l'aspect d'une application
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.
Mesurer les performances avec le modèle RAIL
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.
Accélérer la navigation dans React avec Quicklink
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é.
Protégez vos ressources contre les attaques sur le Web avec Fetch Metadata
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.
Réorganisation du contenu
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.
Améliorations de l'API Web Animations dans Chromium 84
Préparer vos animations Web va devenir beaucoup plus facile.
Cycle de vie d'une transaction de paiement
Découvrez comment les marchands intègrent des applications de paiement, le fonctionnement des transactions de paiement avec l'API Payment Request et les possibilités offertes par les paiements Web.
Guide du développeur d'applications de paiement Android
Découvrez comment adapter votre application de paiement Android pour qu'elle fonctionne avec les paiements Web et offre une meilleure expérience utilisateur.
Intégrer les paiements Web aux applications de paiement
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.
Plus d'options de police variables pour la police de l'UI système de macOS dans Chromium 83
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.
Comment les progressive web apps peuvent-elles contribuer à la réussite d'une entreprise ?
Élaborez une étude de cas solide pour votre PWA. Découvrez quand investir et comment mesurer votre réussite.
Accomplissez des tâches rapidement grâce aux raccourcis d'application
Les raccourcis d'applications permettent d'accéder rapidement à quelques actions courantes dont les utilisateurs ont besoin fréquemment.
Préparer la suppression du cache d'appli
Détails sur Chrome et d'autres navigateurs prévoit de supprimer AppCache.
Définir votre stratégie d'installation
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.
Stockage persistant
Le stockage persistant peut aider à protéger les données critiques contre les évictions et à réduire le risque de perte de données.
Comment CommonJS rend vos bundles plus volumineux
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.
Profiler des applications Web Audio dans Chrome
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.
Pourquoi avez-vous besoin d'un modèle isolé multi-origine pour bénéficier de fonctionnalités performantes ?
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.
Amélioration des performances de chargement des pages Next.js et Gatsby grâce à la segmentation précise
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
"Same site" et "same-origin"
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.
isoler votre site Web multi-origine à l'aide de COOP et COEP.
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.
Surveillez l'utilisation totale de la mémoire de votre page Web avec measureUserAgentSpecificMemory()
Découvrez comment mesurer l'utilisation de la mémoire de votre page Web en production pour détecter les régressions.
Blog d'ingénierie web.dev n° 1: Comment créer le site et utiliser les composants Web
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.
Amélioration du style par défaut du mode sombre avec la propriété CSS color-scheme et la balise Meta correspondante
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.
Assurez-vous que votre site Web est disponible et utilisable par tous pendant la pandémie de COVID-19
Comment s'assurer que les fonctionnalités de base de votre site Web sont toujours disponibles, accessibles, sécurisées, utilisables, visibles et rapides
Accessibilité aux couleurs et au contraste
Découvrez comment rendre vos pages plus accessibles en améliorant l'utilisation des couleurs et du contraste.
Résoudre un problème de serveur surchargé
Identifier et résoudre rapidement les goulots d'étranglement d'un serveur, améliorer les performances du serveur et empêcher les régressions
Éléments tactiles accessibles
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.
Conception responsive et accessible
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é.
Prévenez les failles des scripts DOM basés sur des scripts intersites grâce aux Trusted Types
Lancement des Trusted Types, une API de navigateur qui empêche les scripts intersites basés sur le DOM dans les applications Web modernes.
Utiliser une PWA dans votre application Android
Ouvrir une progressive web app dans une application Android
Préchargez les polices facultatives pour éviter les décalages de mise en page et les flashs de texte invisible (FOIT).
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.
Configurer les échanges HTTP signés (SXG) à l'aide de nginx
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.
Comment distribuer des échanges HTTP signés (SXG) à l'aide de nginx
Comment obtenir et diffuser des fichiers SXG à l'aide de nginx, et défis liés au préchargement des sous-ressources.
Optimiser les images de fond CSS avec des requêtes média
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.
Améliorer la vitesse du site Web de manière pluridisciplinaire
comment les autres services peuvent contribuer à faire de votre projet d'optimisation de la vitesse de votre site Web un plus grand succès ;
Ancrage de défilement après un changement de mise en page
À 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.
Configurer des échanges signés à l'aide de Web Packager
Découvrez comment diffuser des échanges signés (SXG) à l'aide de Web Packager.
Proposer votre propre expérience d'installation dans l'application
Utilisez l'événement beforeinstallprompt pour offrir à vos utilisateurs une expérience personnalisée et fluide d'installation dans l'application.
Positionner des objets virtuels dans des vues réelles
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.
La réalité virtuelle arrive sur le Web, 2e partie
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.
Réalité augmentée: vous le savez peut-être déjà
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.
Développer l'écosystème du framework Web
Découvrez comment Chrome investit dans un certain nombre d'outils Open Source afin de faire progresser l'écosystème JavaScript.
Que sont les progressive web apps ?
Présentation des progressive web apps (PWA) et des trois piliers qui les différencient des autres applications Web.
Intégrez les PWA dans les interfaces utilisateur de partage intégrées avec Workbox
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
Compatibilité des icônes adaptatives dans les PWA avec icônes masquables
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.
Amélioration de la fermeture des pages dans XMLHttpRequest() synchrones
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.
Exécuter des threads Web avec des nœuds de calcul de module
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.
Évolution des outils de vitesse: temps forts du Chrome Developer Summit 2019
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.
Chargement adaptatif: améliorer les performances Web sur les appareils lents
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.
Utiliser des workers Web pour exécuter JavaScript en dehors du thread principal du navigateur
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 sur l'enquête sur l'optimisation des images de l'été 2019
Commentaires des personnes interrogées sur les différentes techniques d'optimisation des images
Créer un serveur de notifications push
Dans cet atelier de programmation, vous allez apprendre à créer un serveur de notifications push.
Intégrer l'UI de partage du système d'exploitation avec l'API Web Share
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.
Acheminer le préchargement dans Next.js
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
Fractionnement du code avec des importations dynamiques dans Next.js
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
Performances par défaut avec Next.js
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
Comment le format AMP peut garantir la rapidité de votre application Next.js
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
La réalité virtuelle arrive sur le Web
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.
Comprendre les cookies
Découvrez comment fonctionnent les cookies, et que sont les cookies propriétaires et tiers.
Recettes de cookies SameSite
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.
La rapidité de la publicité est importante
Découvrez l'intérêt des annonces rapides et comment interpréter leur vitesse.
Utiliser les notifications push pour engager et réengager les utilisateurs
Utilisez les notifications push pour susciter l'intérêt des utilisateurs avec des informations ciblées et opportunes.
Premiers pas avec l'API Notifications
Dans cet atelier de programmation, vous allez découvrir comment demander l'autorisation d'un utilisateur et envoyer des notifications.
Utiliser un service worker pour gérer les notifications
Dans cet atelier de programmation, découvrez comment gérer les notifications avec un service worker.
Corriger l'instabilité de la mise en page
Tutoriel de l'utilisation de WebPageTest pour identifier et résoudre les problèmes d'instabilité de mise en page.
Techniques permettant d'accélérer le chargement d'une application Web, même sur un feature phone
Les feature phones font leur grand retour et sont populaires, en particulier sur les marchés émergents où la 2G est la norme. Voici ce que nous avons appris en créant PROXX, un clone de démineur mobile, à charger rapidement sur les feature phones en 2G.
Propriétés personnalisées plus intelligentes avec la nouvelle API de Houdini
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.
Précharger les ressources pour accélérer les navigations futures
Découvrez l'indice de ressource rel=prefetch et comment l'utiliser.
Deux méthodes de préchargement : balises <link> et en-têtes HTTP
Découvrez comment accélérer les navigations futures en préchargeant des ressources.
Corriger le contenu mixte
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.
Qu'est-ce que le contenu mixte ?
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.
Aller au-delà des images avec des vidéos simples pour le Web
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.
Ajouter une icône Apple Touch à votre progressive web app
Démonstration interactive expliquant comment spécifier l'icône à afficher sur les écrans d'accueil iOS.
Ready Player Web
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.
Progressive web apps sur des sites multi-origines
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.
Optimiser le chargement et l'affichage de WebFont
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.
Réduire la taille de police sur le Web
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.
Créer une progressive web app à l'aide de la CLI Angular
Découvrez comment créer des applications Angular progressives installables.
Charger efficacement le code JavaScript tiers
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.
Identifier les composants JavaScript tiers lents
Découvrez comment identifier les ressources tierces lentes à l'aide de Lighthouse et des outils pour les développeurs Chrome.
Utiliser des CDN pour les images pour optimiser les images
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.
Performances JavaScript tierces
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.
Commandes de formulaire plus performantes
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.
Optimiser le code JavaScript tiers
Découvrez les techniques permettant d'optimiser les ressources tierces lentes avec l'aide de Lighthouse.
Établissez des connexions réseau suffisamment tôt pour améliorer la vitesse perçue des pages
Découvrez les indicateurs de ressources rel=preconnect et rel=dns-prefetch, et comment les utiliser.
Créez des arrière-plans semblables à ceux de l'OS avec le filtre de fond
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.
Actualiser les résultats avec des ressources "stale-while-revalidate"
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.
Virtualiser de grandes listes avec le CDK Angular
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.
Stratégies de préchargement de routes dans Angular
Découvrez comment utiliser les stratégies de préchargement d'Angular pour accélérer le chargement des applications.
Optimiser la détection des modifications dans Angular
Découvrez comment optimiser la détection des modifications de votre application Angular pour la rendre plus réactive.
Adapter la vidéo à la diffusion d'images en fonction de la qualité du réseau
Découvrez comment utiliser l'API Network Information pour adapter votre contenu en fonction de la qualité du réseau.
Navigation Web plus rapide avec le préchargement prédictif
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.
Auditer l'accessibilité de votre application Angular avec un codelyzer
Découvrez comment rendre votre application Angular accessible à l'aide de Codelyzer.
Effectuer la pré-mise en cache avec le service worker Angular
Découvrez comment utiliser le service worker Angular pour effectuer une mise en cache préalable des éléments statiques de votre application.
Budgets de performances avec la CLI Angular
Découvrez comment utiliser les budgets de performances directement dans la CLI Angular.
préfères-color-scheme: Salut les ténèbres, mon vieil ami
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.
Premiers pas: optimiser une application Angular
Découvrez comment rendre votre application Angular plus rapide, plus fiable, plus visible, plus facile à installer et accessible.
Fractionnement du code au niveau de la route dans Angular
Découvrez comment réduire la taille de votre app bundle initial à l'aide de la division du code au niveau du routage.
Conseils pour améliorer les performances sur le Web
Utilisez srcset pour choisir automatiquement la bonne taille d'image.
Composants Web: l'ingrédient secret au service du Web
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.
Utiliser Lighthouse pour les budgets de performances
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.
Mises à jour des API Web Payments
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.
La valeur de la vitesse
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.
Installation de la barre d'adresse pour les progressive web apps sur ordinateur
Les progressive web apps sont faciles à installer grâce à un nouveau bouton d'installation dans la barre d'adresse de Chrome (omnibox).
Comment les performances peuvent-elles améliorer les conversions ?
Découvrez l'impact des performances du site Web sur différentes parties de l'entonnoir de conversion de l'e-commerce.
Comment informer les utilisateurs que ma PWA peut être installée ?
Comment promouvoir l'installation de progressive web apps et bonnes pratiques
Modèles pour promouvoir l'installation de PWA
Comment promouvoir l'installation de progressive web apps et bonnes pratiques
État d'esprit des service workers
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.
Règles relatives aux images pour des temps de chargement rapides et plus encore
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.
Extraire les fichiers CSS critiques
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.
Les longues tâches JavaScript retardent-elles le délai avant interactivité ?
Apprenez à diagnostiquer des problèmes qui sont coûteux et empêchent les interactions avec l'utilisateur.
Extraire et intégrer les CSS critiques avec Critical
Découvrez comment utiliser Critical pour extraire et intégrer les fichiers CSS essentiels, et améliorer les délais d'affichage.
Vitesse à grande échelle: quelles sont les nouveautés en matière de performances Web ?
À 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.
Présentation de PROXX
PROXX est un jeu de type démineur créé en tant que PWA. Elle est compatible avec une grande variété d'appareils et améliore progressivement l'apparence visuelle de l'appareil, au fur et à mesure que celui-ci est performant.
Recherche visuelle avec le Web Perception Toolkit
Ne serait-il pas intéressant que les utilisateurs puissent effectuer des recherches sur votre site à l'aide de leur appareil photo ?
Présentation des cookies SameSite
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.
Pratique des portails: une navigation simplifiée sur le Web
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.
Diffusion adaptative basée sur la qualité du réseau
Utilisez l'API Network Information pour adapter les éléments présentés aux utilisateurs en fonction de la qualité de leur connexion.
Réduire et compresser les charges utiles du réseau avec des brotli
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.
web.dev à la conférence I/O 2019
À 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.
Comment garder la vitesse ?
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.
Comment mesurer la vitesse ?
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.
Qu'est-ce que la vitesse ?
La vitesse est importante, mais qu'entendons-nous exactement par là ? Qu'est-ce qu'un site rapide ?
Virtualiser de longues listes avec une fenêtre de réaction
réactif-window est une bibliothèque qui permet d'afficher efficacement de grandes listes.
Fractionnement du code avec React.lazy et Suspense
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.
Audit de l'accessibilité avec react-axe et eslint-plugin-jsx-a11y
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.
Effectuer une mise en cache dans "Créer une application React avec Workbox"
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.
Pré-rendu des routes avec réactif-snap
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.
Ajouter un fichier manifeste d'application Web avec Créer une application React
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.
Premiers pas: optimiser votre application React
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.
Atelier de programmation: précharger les éléments critiques pour améliorer la vitesse de chargement
Dans cet atelier de programmation, découvrez comment améliorer les performances d'une page en préchargeant et en préchargeant des ressources.
préfère-réduire-le-mouvement: parfois, il suffit de moins bouger
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.
Reporter les CSS non critiques
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).
La confiance est bonne, l'observation est préférable: Intersection Observer v2
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.
Les bases du responsive web design
Créez des sites qui répondent aux besoins et aux fonctionnalités de l'appareil sur lequel ils sont consultés.
Feuilles de style constructibles
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.
Rendu sur le Web
Recommandations pour implémenter la logique et l'affichage dans les applications.
Utiliser la taille de lot avec Travis CI
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.
Intégrer des budgets de performances dans votre processus de création
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éfinir des budgets de performance avec webpack
Découvrez comment définir des budgets de performances et maîtriser la taille de votre lot avec Webpack.
Définir un budget de performances à l'aide du bot Lighthouse
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.
Emscripten et npm
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.
Votre application est-elle installée ? La méthode get prochaineApps() vous indique !
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.
Intégrez un code moderne dans les navigateurs récents pour accélérer le chargement des pages.
Dans cet atelier de programmation, vous allez apprendre à améliorer les performances d'une application en minimisant la quantité de code transpilée.
S'adapter aux utilisateurs grâce aux indices client
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.
Qu'est-ce que l'accessibilité ?
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.
En-têtes et points de repère
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.
Libellés et alternatives de texte
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é.
Principes de base de l'accès au clavier
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.
Contrôler le curseur à l'aide de la touche Tabindex
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.
Sémantique et lecteurs d'écran
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 ?
Utiliser du code HTML sémantique pour faciliter l'utilisation du clavier
En utilisant les éléments HTML sémantiques appropriés, vous pourrez peut-être répondre à la plupart ou à l'ensemble de vos besoins d'accès au clavier. Ainsi, vous passerez moins de temps à manipuler l'index de l'onglet et vos utilisateurs seront plus satisfaits.
Focus du style
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.
Supprimer le code inutilisé
Dans cet atelier de programmation, vous allez apprendre à améliorer les performances d'une application en supprimant toutes les dépendances inutilisées et inutiles.
Service workers et API Cache Storage
Le cache HTTP du navigateur est votre première ligne de défense. Cette approche n'est pas nécessairement la plus puissante ni la plus flexible, et vous avez un contrôle limité sur la durée de vie des réponses mises en cache. Cependant, plusieurs règles de base vous permettent d'implémenter la mise en cache de manière logique, sans trop de travail. Vous devez donc toujours essayer de les suivre.
Découvrir des opportunités d'amélioration des performances avec Lighthouse
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.
Remplacer les GIF par des vidéos
Dans cet atelier de programmation, vous allez découvrir comment améliorer les performances en remplaçant un GIF animé par une vidéo.
Diffusez des images dont les dimensions sont correctes
Dans cet atelier de programmation, vous allez apprendre à diffuser des images aux dimensions appropriées pour améliorer les performances du réseau.
Utiliser Imagemin pour compresser les images
Les images non compressées surchargent vos pages avec des octets inutiles. Exécutez Lighthouse pour rechercher les opportunités d'amélioration du chargement des pages en compressant les images.
Partage des ressources entre origines multiples (CORS)
La règle d'origine commune du navigateur bloque la lecture d'une ressource depuis une origine différente pour des raisons de sécurité. L'activation de CORS permet au serveur d'indiquer au navigateur qu'il peut utiliser une origine supplémentaire.
Utiliser des images WebP
Les images WebP sont plus petites que leurs homologues JPEG et PNG, généralement avec une réduction de 25 à 35% de la taille des fichiers. Cela réduit la taille des pages et améliore les performances.
Travailler avec des service workers
Dans cet atelier de programmation, vous allez apprendre à rendre une application fiable en enregistrant un service worker.
Explorer le panneau DevTools Network
Dans cet atelier de programmation, vous allez apprendre à analyser le trafic réseau à l'aide des outils pour les développeurs Chrome.
Remplacez les GIF animés par des vidéos pour accélérer le chargement des pages
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.
Créer des images WebP à l'aide de la ligne de commande
Dans cet atelier de programmation, vous allez apprendre à diffuser des images optimisées à l'aide de WebP.
Configurer le comportement de la mise en cache HTTP
Dans cet atelier de programmation, vous allez apprendre à contrôler le comportement de mise en cache des ressources à l'aide d'en-têtes HTTP.
Identifier les ressources chargées à partir du réseau
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.
Direction artistique
Dans cet atelier de programmation, vous allez apprendre à charger des images complètement différentes selon la taille d'affichage de l'appareil.
Appliquer le chargement instantané avec le modèle PRPL
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.
Permettre l'installation
Dans cet atelier de programmation, vous allez apprendre à rendre un site installable à l'aide de l'événement beforeinstallprompt.
Règle d'origine identique et iFrame
Dans cet atelier de programmation, vous allez découvrir le fonctionnement des règles de même origine lorsque vous accédez aux données dans un iFrame.
Le fonctionnement de la Recherche Google
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.
Règle d'origine identique et demandes de récupération
Dans cet atelier de programmation, vous allez découvrir comment fonctionne la règle de même origine lors de la récupération de ressources.
Précharger les éléments essentiels pour améliorer la vitesse de chargement
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.
La sécurité ne devrait pas être si effrayante !
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é.
Éviter les requêtes réseau inutiles avec le cache HTTP
Le cache HTTP du navigateur constitue votre première ligne de défense contre les requêtes réseau inutiles.
Spécifier plusieurs largeurs d'espace publicitaire
Dans cet atelier de programmation, vous allez apprendre à utiliser l'attribut "sizes" (tailles) pour dimensionner correctement les images en fonction de la fenêtre d'affichage de l'utilisateur.