Modèles des Signaux Web
Cette collection inclut des tendances qui sont souvent difficiles à implémenter sans nuire à vos scores Core Web Vitals. Utilisez le code de ces exemples pour vous assurer que vos projets restent sur la bonne voie.
- Temps de blocage total (TBT)
- Premiers pas avec la mesure des signaux Web
- Les moyens les plus efficaces d'améliorer les métriques Core Web Vitals
- Web Vitals
- Comparer les capacités du LLM à la synthèse
- Comment les seuils des métriques Core Web Vitals ont été définis
- Workflows des Signaux Web essentiels avec les outils Google
- Diagnostiquer manuellement les interactions lentes dans l'atelier
- Optimiser le Largest Contentful Paint
- Référence
- Cache amélioré
- Déboguer les performances sur le terrain
- First Input Delay (FID)
- Analyse comparative des performances de la propriété CSS @
- Améliorer les performances et l'expérience utilisateur pour l'IA côté client
- Corréler les métriques Core Web Vitals et les revenus publicitaires avec les outils Google
- Stockage pour le Web
- Il est temps de charger les iFrames hors écran de manière différée !
- Protocole Web push
- Créer plusieurs progressive web apps sur le même domaine
- Quels sont les éléments nécessaires pour être installable ?
- Quelles sont les caractéristiques d'une progressive web app de qualité ?
- Comment Chrome gère les mises à jour du fichier manifeste de l'application Web
- Ajouter un fichier manifeste d'application Web
- Limiter les scripts intersites (XSS) avec une CSP (Content Security Policy) stricte.
- Accéder aux appareils sur le Web
- Autorisez la réutilisation des clés d'accès sur vos sites avec les requêtes d'origine associées
- Choisir le bon format d'image
- Chargement différé des images au niveau du navigateur pour le Web
- Métriques personnalisées
- Mesurer et déboguer les performances avec Google Analytics 4 et BigQuery
- Bonnes pratiques pour les autorisations Web
- Bonnes pratiques concernant les notifications relatives aux cookies
- Personnalisez les notifications multimédias et les commandes de lecture avec l'API Media Session
- Identifier les interactions lentes sur le terrain
- Utilisation de l'index de tabulation
- Délai avant le premier octet (TTFB)
- Extraction pratique des requêtes pour les LLM plus petits
- Optimiser les longues tâches
- Optimiser le délai avant le premier octet
- INP (Interaction to Next Paint)
- Couleurs CSS dépendantes du schéma de couleurs avec light-dark()
- Modèles de performances WebAssembly pour les applications Web
- Mises en page de type grille animée CSS
- Jouez au jeu du dinosaure avec votre manette de jeu Chrome
- L'attribut inerte
- Découvrez l'équipe Web.dev AI
- Améliorez la recherche sur votre site: réponses contextuelles grâce à l'IA générative
- Éthique et IA
- Qu'est-ce que l'intelligence artificielle ?
- Déterminer le fournisseur de clés d'accès avec l'AAGUID
- Compiler et optimiser Wasm avec Binaryen
- Composant Web <model-viewer>
- Enregistrer du contenu audio et vidéo au format HTML5
- Présentation détaillée de userVerification
- Pourquoi les données CrUX sont-elles différentes de mes données RUM ?
- Accessibilité pour les développeurs Web
- Largest Contentful Paint (LCP)
- Charger du code JavaScript tiers
- Empêcher la création d'une clé d'accès s'il en existe déjà une
- Utiliser IndexedDB
- 5 extraits CSS que tout développeur front-end devrait connaître en 2024
- Quelles sont les parties d'une URL ?
- Présentation détaillée des identifiants visibles
- Performances d'affichage
- ResizeObserver: il s'apparente à document.onresize pour les éléments.
- Optimiser la taille d'encodage et de transfert des éléments textuels
- OffscreenCanvas : accélérez les opérations de canevas avec un nœud de calcul Web
- Précharger les modules
- First Contentful Paint (FCP)
- Réseaux de diffusion de contenu (CDN)
- Qu'est-ce qui fait une bonne expérience de déconnexion ?
- Délai avant interactivité (TTI)
- Optimiser le chargement des ressources avec l'API Fetch Priority
- Les pseudo-classes :user-valid et :user-invalid
- Optimiser les Core Web Vitals pour les décisionnaires en entreprise
- Nuances de l'encodage des chaînes en base64 en JavaScript
- Sous-grille CSS
- Chargement efficace des annonces sans impact sur la vitesse des pages
- Quatre types courants de couverture de code
- Tester ou non, d'un point de vue technique
- Définir des scénarios de test et des priorités
- Métriques de performances axées sur l'utilisateur
- Précharger les images responsives
- Adapter la typographie aux préférences des utilisateurs avec le CSS
- Pyramide ou crabe ? Trouvez une stratégie de test adaptée
- Les trois types courants d'automatisation des tests
- Élimination des téléchargements inutiles
- Qu'est-ce que WebAssembly et d'où provient-il ?
- Compilation de mkbitmap vers WebAssembly
- Système de fichiers privé d'origine
- Hébergement sécurisé des données utilisateur dans les applications Web modernes
- Déployer le format AVIF pour des sites Web plus réactifs
- Optimiser l'interaction pour la page suivante
- Fonctionnalités de référence que vous pouvez utiliser aujourd'hui
- L'impact des grandes tailles de DOM sur l'interactivité et ce que vous pouvez faire pour y remédier
- Évaluation des scripts et tâches longues
- Affichage côté client du code HTML et de l'interactivité
- Optimiser le délai d'entrée
- Optimiser le Cumulative Layout Shift
- Utiliser l'extension Web Vitals pour déboguer les problèmes liés aux Signaux Web essentiels
- Cumulative Layout Shift (CLS)
- Créez des expériences WordPress dans le navigateur avec WordPress Playground et WebAssembly
- Nouvelle fonctionnalité pour les développeurs, proposée par WebAssembly
- Que sont les cartes sources ?
- PWA sur les plates-formes de téléchargement d'applications
- 6 extraits CSS que tout développeur front-end devrait connaître en 2023
- Fonctions trigonométriques en CSS
- Effectuer des opérations efficaces sur chaque image de la vidéo avec requestVideoFrameCallback()
- Point fort de la communauté GDE: Lars Knudsen
- Astuce CSS rapide ! Texte animé en dégradé
- Nouveaux modèles pour les applications multimédias
- Chrometober est en cours de développement !
- Créer un composant d'info-bulle
- Se connecter avec une clé d'accès via le remplissage automatique de formulaire
- Créer une clé d'accès pour les connexions sans mot de passe
- Créer un composant de bouton d'action flottant (FAB)
- Bonnes pratiques concernant les polices
- Astuce CSS rapide ! Chargeur animé
- Tester le contraste des couleurs de la conception Web
- Point fort de la communauté GDE: Alba Silvente Fuentes
- Créer la navigation principale d’un site Web
- Est-ce :modal ?
- Bonnes pratiques pour les balises et les gestionnaires de balises
- Styles de la liste de créations
- Création d'une illusion de grille tordue
- Comment Nordhealth utilise-t-elle les propriétés personnalisées de ses composants Web ?
- Contrôle plus précis des transformations CSS grâce à des propriétés de transformation individuelles
- Animations de bordure CSS
- Comment la BBC déploie-t-elle le mécanisme HSTS pour améliorer la sécurité et les performances ?
- En quoi les données de test et les données réelles peuvent être différentes (et comment y remédier)
- Une situation gagnant-gagnant
- Fin d'Internet Explorer
- Adieu HTML5Rocks
- Recettes de cookies propriétaires
- Synchroniser la lecture audio et vidéo sur le Web
- Utiliser des dégradés coniques pour créer une bordure sympa
- Différence entre les bibliothèques et les frameworks JavaScript
- Choisir une bibliothèque ou un framework JavaScript
- Implémenter la gestion des erreurs lors de l'utilisation de l'API Fetch
- Le guide du développeur front-end sur le terminal
- Une API pour des polices Web rapides et esthétiques
- GOV.UK supprime jQuery de son interface.
- Créer un composant de bouton
- Ne luttez pas contre l'analyse du préchargement du navigateur
- Combler le fossé
- Bonnes pratiques pour mesurer les signaux Web sur le terrain
- Trouver du courage et de l'inspiration au sein de la communauté des développeurs
- Polices variables dans la vie réelle
- Créez rapidement de magnifiques dégradés CSS avec CSS Gradient Creator
- Présentation détaillée des principales difficultés rencontrées par les développeurs Web
- Améliorez l'image de votre site avec images.tooling.report
- Champ d'application des variables globales et locales
- Créer un composant de boîte de dialogue
- Déboguer les erreurs de lecture de contenus multimédias sur le Web
- Point fort de la communauté GDE: Nishu Goel
- Effets sur les performances d'un chargement différé trop important
- Créer un composant de barre de chargement
- Enregistrer des identifiants depuis Forms
- Chrome et Firefox vont bientôt atteindre la version majeure 100
- Créer un favicon adaptatif
- Améliorez la sécurité et la confidentialité en mettant à jour le cache HTTP
- Dessiner sur un canevas dans Emscripten
- Éléments HTML supplémentaires
- Portage d'applications USB sur le Web Partie 2: gPhoto2
- Journalisation des erreurs réseau (NEL)
- Détection des fonctionnalités WebAssembly
- Portage d'applications USB sur le Web Partie 1: libusb
- Créer un composant de changement de thème
- Intégrer des extraits de code JavaScript en C++ avec Emscripten
- PWA sur Oculus Quest 2
- Conception de bâtiments
- Calculatrice de conception
- Copie approfondie en JavaScript avec structuredClone
- Créer un composant de toast
- Fonds UI
- Créer un composant de menu de jeu en 3D
- Vers une métrique de fluidité de l'animation
- Nouveautés de PageSpeed Insights
- Parcours utilisateur Lighthouse
- Toutes les annonces du Chrome Dev Summit 2021
- Parcours de Photoshop vers le Web
- Créer un composant à sélection multiple
- Évaluer les performances de chargement sur le terrain avec Navigation Timing et Resource Timing
- Manipulation DOM sécurisée avec l'API Sanitizer
- Bonnes pratiques concernant les intégrations tierces
- Impact des architectures SPA sur les Signaux Web essentiels
- Présentation détaillée des événements JavaScript
- Regroupement de ressources non-JavaScript
- Créer un composant de bouton "split-button"
- Importer des feuilles de style à l'aide de scripts de module CSS
- Couleur d'accentuation CSS
- Créer un composant switch
- En-têtes des conseils client pour les fonctionnalités multimédias des préférences de l'utilisateur
- Créer un composant de fil d'Ariane
- Utiliser des threads WebAssembly à partir de C, C++ et Rust
- Principes de base du streaming multimédia
- Frameworks multimédias
- Chiffrement multimédia
- PWA avec streaming hors connexion
- Trouvez votre chemin avec les données réelles de la mise à jour de l'extension Web Vitals
- Créer un jeu de couleurs
- Ajustement de la taille du CSS pour @font-face
- Utiliser le format AVIF pour compresser les images de votre site
- CSS pour les signaux Web
- Nouveaux sélecteurs de pseudo-classe fonctionnels CSS :is() et :where()
- Nouvelle formation sur les progressive web apps désormais disponible
- Migrer vers les indicateurs client user-agent
- Guide de référence rapide sur les en-têtes de sécurité
- Excalidraw et Fugu: améliorer le parcours utilisateur principal
- Modules ES dans les service workers
- Créer un composant de défilement multimédia
- Optimiser les signaux Web avec Lighthouse
- Utiliser des API Web asynchrones à partir de WebAssembly
- Personnaliser les commandes de fenêtre en superposition de la barre de titre de votre PWA
- Garder le contrôle des scripts tiers
- Remplir les formulaires OTP dans des iFrame multi-origines avec l'API WebOTP
- Surmonter les obstacles avec l'API DataTransfer
- Créer des animations de texte fractionné
- Satisfaction des développeurs Web
- Créer un composant Settings
- Déboguer les décalages de mise en page
- JavaScript: Qu'est-ce que cela signifie ?
- Appliquer les principes de programmation des mini-applications à un exemple de projet
- Structure, cycle de vie et regroupement du projet
- Balisage, style, script et mise à jour des mini-applis
- Conclusions d'un développeur Web sur les mini-applications
- Programmer une mini-application
- Composants de la mini-appli
- Projets Open Source de mini-appli
- Que sont H5 et QuickApp ?
- Flux : guide définitif
- Créer un composant "Tabs"
- Guide pour activer l'isolation multi-origine
- Demander l'isolation des performances avec l'en-tête Origin-Agent-Cluster
- Propriété CSS aspect-ratio
- Bonnes pratiques concernant les carrousels
- WebRTC est désormais une norme W3C et IETF
- Quand utiliser HTTPS pour le développement local ?
- 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
- Utiliser HTTPS pour le développement local
- Créer un composant de navigation latérale
- Atelier de programmation: Créer un composant Sidenav
- Atelier de programmation: Centrer en CSS
- Centrer en CSS
- J'adore votre cache ❤️
- Kits de peinture internavigateurs et Houdini.how
- Publiez, livrez et installez du code JavaScript moderne pour des applications plus rapides
- Atelier de programmation sur les bonnes pratiques concernant les formulaires d'adresse
- Atelier de programmation sur les bonnes pratiques concernant les formulaires de paiement
- Bonnes pratiques concernant les formulaires OTP envoyés par SMS
- Bonnes pratiques concernant les formulaires de paiement et d'adresse
- Bonnes pratiques concernant le formulaire d'inscription
- Atelier de programmation sur les bonnes pratiques concernant le formulaire d'inscription
- Automatiser les audits avec AutoWebPerf
- Communication bidirectionnelle avec les service workers
- Guide sur la mise en cache impérative
- Diffuser des mises à jour sur les pages avec des service workers
- Présentation des nœuds de calcul
- Désactivez l'accélération de la souris pour améliorer le FPS
- Créer un composant "Stories"
- Atelier de programmation: créer un composant "Stories"
- Schemeful SameSite
- Chargement différé au niveau du navigateur pour les CMS
- Atelier de programmation: créer un client de notification push
- Atelier de programmation: Créer un serveur de notifications push
- Présentation des notifications push
- Mesurer l'utilisation hors connexion
- Exemples d'animations CSS hautes performances
- CSS min(), max() et clamp()
- Échanges signés (SXG)
- Améliorations de la mise en page logique avec des raccourcis relatifs au flux
- Créer des animations CSS hautes performances
- Pourquoi certaines animations sont-elles lentes ?
- Traiter les requêtes de plage dans un service worker
- Contrôler le panoramique, l'inclinaison et le zoom de la caméra
- En quoi consistent les phases d'évaluation tierces ?
- Fuites de mémoire de fenêtres dissociées
- Core Web Vitals
- Appliquer des effets aux images avec la propriété d'image de masque de CSS
- Créez des formes d'images intéressantes avec la propriété "clip-path" de CSS
- Puces personnalisées avec CSS ::Marker
- Aider les utilisateurs à changer facilement de mot de passe en ajoutant une URL connue pour changer de mot de passe
- Gérer des informations de paiement facultatives avec un service worker
- Orchestrer des transactions de paiement avec un service worker
- Accessibilité des contenus multimédias
- ARIA: poison ou antidote ?
- Déboguer les fuites de mémoire dans WebAssembly à l'aide d'Emmscripten
- content-Visibility: la nouvelle propriété CSS qui améliore les performances d'affichage
- Déblocage de l'accès au presse-papiers
- Bonnes pratiques en matière de règles relatives aux URL de provenance et aux sites référents
- Web sur Android
- Créer une PWA chez Google (1re partie)
- Surveillance des performances avec Lighthouse CI
- Concevoir l'expérience utilisateur des clés d'accès sur les comptes Google
- @property: donner des superpouvoirs aux variables CSS
- Enregistrer une application de paiement sur le Web
- Fournir des coordonnées et des informations de livraison depuis une application de paiement Android
- Présentation des applications de paiement Web
- Mise en cache du service worker et mise en cache HTTP
- Le lien entre la vitesse du site et les métriques commerciales
- Utiliser le rapport d'expérience utilisateur Chrome pour examiner les performances sur le terrain
- Gérer les requêtes de navigation
- Rendu au pixel près avec devicePixelContentBox
- Dix mises en page modernes sur une seule ligne de code CSS
- Synthèse du direct web.dev
- Bonnes pratiques concernant les formulaires de connexion
- Améliorer progressivement votre progressive web app
- Utiliser les fonctionnalités de navigateur multiplates-formes pour créer un formulaire de connexion
- Outils pour les développeurs Web pour déboguer les problèmes JavaScript dans la recherche Google
- Créer des expériences de recherche résilientes avec Workbox
- Ajouter du contenu multimédia à une page Web
- Ajouter un lien en gras lorsque personne n'a encore associé de lien: fragments de texte
- Signaler un bug de navigateur
- Donnez à votre PWA l'aspect d'une application
- Mesurer les performances avec le modèle RAIL
- Accélérer la navigation dans React avec Quicklink
- Protégez vos ressources contre les attaques sur le Web avec Fetch Metadata
- Réorganisation du contenu
- Améliorations de l'API Web Animations dans Chromium 84
- Cycle de vie d'une transaction de paiement
- Guide du développeur d'applications de paiement Android
- Configurer un mode de paiement
- Intégrer les paiements Web aux applications de paiement
- Plus d'options de police variables pour la police de l'UI système de macOS dans Chromium 83
- Comment les progressive web apps peuvent-elles contribuer à la réussite d'une entreprise ?
- Accomplissez des tâches rapidement grâce aux raccourcis d'application
- Préparer la suppression du cache d'appli
- Définir votre stratégie d'installation
- Stockage persistant
- Comment CommonJS améliore-t-il vos groupes ?
- Profiler des applications Web Audio dans Chrome
- Pourquoi avez-vous besoin d'un modèle isolé multi-origine pour bénéficier de fonctionnalités performantes ?
- Amélioration des performances de chargement des pages Next.js et Gatsby grâce à la segmentation précise
- "Same site" et "same-origin"
- isoler votre site Web multi-origine à l'aide de COOP et COEP.
- Surveillez l'utilisation totale de la mémoire de votre page Web avec measureUserAgentSpecificMemory()
- Blog d'ingénierie web.dev n° 1: Comment créer le site et utiliser les composants Web
- Amélioration du style par défaut du mode sombre avec la propriété CSS color-scheme et la balise Meta correspondante
- Assurez-vous que votre site Web est disponible et utilisable par tous pendant la pandémie de COVID-19
- Accessibilité aux couleurs et au contraste
- Résoudre un problème de serveur surchargé
- Éléments tactiles accessibles
- Conception responsive et accessible
- Prévenez les failles des scripts DOM basés sur des scripts intersites grâce aux Trusted Types
- Utiliser une PWA dans votre application Android
- Préchargez les polices facultatives pour éviter les décalages de mise en page et les flashs de texte invisible (FOIT).
- Configurer les échanges HTTP signés (SXG) à l'aide de nginx
- Comment distribuer des échanges HTTP signés (SXG) à l'aide de nginx
- Optimiser les images de fond CSS avec des requêtes média
- Améliorer la vitesse du site Web de manière pluridisciplinaire
- Ancrage de défilement après un changement de mise en page
- Configurer des échanges signés à l'aide de Web Packager
- Proposer votre propre expérience d'installation dans l'application
- Positionner des objets virtuels dans des vues réelles
- La réalité virtuelle arrive sur le Web, 2e partie
- Réalité augmentée: vous le savez peut-être déjà
- Développer l'écosystème du framework Web
- Que sont les progressive web apps ?
- Intégrez les PWA dans les interfaces utilisateur de partage intégrées avec Workbox
- Compatibilité des icônes adaptatives dans les PWA avec icônes masquables
- Amélioration de la fermeture des pages dans XMLHttpRequest() synchrones
- Exécuter des threads Web avec des nœuds de calcul de module
- Évolution des outils de vitesse: temps forts du Chrome Developer Summit 2019
- Chargement adaptatif: améliorer les performances Web sur les appareils lents
- Utiliser des workers Web pour exécuter JavaScript en dehors du thread principal du navigateur
- Commentaires sur l'enquête sur l'optimisation des images de l'été 2019
- Créer un serveur de notifications push
- Intégrer l'UI de partage du système d'exploitation avec l'API Web Share
- Acheminer le préchargement dans Next.js
- Fractionnement du code avec des importations dynamiques dans Next.js
- Performances par défaut avec Next.js
- Comment le format AMP peut garantir la rapidité de votre application Next.js
- La réalité virtuelle arrive sur le Web
- Comprendre les cookies
- Recettes de cookies SameSite
- La rapidité de la publicité est importante
- Utiliser les notifications push pour engager et réengager les utilisateurs
- Premiers pas avec l'API Notifications
- Utiliser un service worker pour gérer les notifications
- Corriger l'instabilité de la mise en page
- Techniques permettant d'accélérer le chargement d'une application Web, même sur un feature phone
- Propriétés personnalisées plus intelligentes avec la nouvelle API de Houdini
- Précharger les ressources pour accélérer les navigations futures
- Deux méthodes de préchargement : balises <link> et en-têtes HTTP
- Corriger le contenu mixte
- Qu'est-ce que le contenu mixte ?
- Aller au-delà des images avec des vidéos simples pour le Web
- Ajouter une icône Apple Touch à votre progressive web app
- Ready Player Web
- Progressive web apps sur des sites multi-origines
- Optimiser le chargement et l'affichage de WebFont
- Réduire la taille de police sur le Web
- Créer une progressive web app à l'aide de la CLI Angular
- Charger efficacement le code JavaScript tiers
- Identifier les composants JavaScript tiers lents
- Utiliser des CDN pour les images pour optimiser les images
- Performances JavaScript tierces
- Commandes de formulaire plus performantes
- Optimiser le code JavaScript tiers
- Établissez des connexions réseau suffisamment tôt pour améliorer la vitesse perçue des pages
- Créez des arrière-plans semblables à ceux de l'OS avec le filtre de fond
- Actualiser les résultats avec des ressources "stale-while-revalidate"
- Virtualiser de grandes listes avec le CDK Angular
- Stratégies de préchargement de routes dans Angular
- Optimiser la détection des modifications dans Angular
- Adapter la vidéo à la diffusion d'images en fonction de la qualité du réseau
- Navigation Web plus rapide avec le préchargement prédictif
- Auditer l'accessibilité de votre application Angular avec un codelyzer
- Effectuer la pré-mise en cache avec le service worker Angular
- Budgets de performances avec la CLI Angular
- préfères-color-scheme: Salut les ténèbres, mon vieil ami
- Premiers pas: optimiser une application Angular
- Fractionnement du code au niveau de la route dans Angular
- Conseils pour améliorer les performances sur le Web
- Composants Web: l'ingrédient secret au service du Web
- Utiliser Lighthouse pour les budgets de performances
- Mises à jour des API Web Payments
- La valeur de la vitesse
- Installation de la barre d'adresse pour les progressive web apps sur ordinateur
- Comment les performances peuvent-elles améliorer les conversions ?
- Comment informer les utilisateurs que ma PWA peut être installée ?
- Modèles pour promouvoir l'installation de PWA
- État d'esprit des service workers
- Règles relatives aux images pour des temps de chargement rapides et plus encore
- Extraire les fichiers CSS critiques
- Les longues tâches JavaScript retardent-elles le délai avant interactivité ?
- Extraire et intégrer les CSS critiques avec Critical
- Vitesse à grande échelle: quelles sont les nouveautés en matière de performances Web ?
- Présentation de PROXX
- Recherche visuelle avec le Web Perception Toolkit
- Présentation des cookies SameSite
- Pratique des portails: une navigation simplifiée sur le Web
- Diffusion adaptative basée sur la qualité du réseau
- Réduire et compresser les charges utiles du réseau avec des brotli
- web.dev à la conférence I/O 2019
- Comment garder la vitesse ?
- Comment mesurer la vitesse ?
- Qu'est-ce que la vitesse ?
- Virtualiser de longues listes avec une fenêtre de réaction
- Fractionnement du code avec React.lazy et Suspense
- Audit de l'accessibilité avec réactif-axe et eslint-plugin-jsx-a11y
- Effectuer une mise en cache dans "Créer une application React avec Workbox"
- Pré-rendu des routes avec réactif-snap
- Ajouter un fichier manifeste d'application Web avec Créer une application React
- Premiers pas: optimiser votre application React
- Atelier de programmation: précharger les éléments critiques pour améliorer la vitesse de chargement
- préfère-réduire-le-mouvement: parfois, il suffit de moins bouger
- Reporter les CSS non critiques
- La confiance est bonne, l'observation est préférable: Intersection Observer v2
- Les bases du responsive web design
- Feuilles de style constructibles
- Rendu sur le Web
- Utiliser la taille de lot avec Travis CI
- Intégrer des budgets de performances dans votre processus de création
- Définir des budgets de performance avec webpack
- Définir un budget de performances à l'aide du bot Lighthouse
- Emscripten et npm
- Votre application est-elle installée ? La méthode get prochaineApps() vous indique !
- Intégrez un code moderne dans les navigateurs récents pour accélérer le chargement des pages.
- S'adapter aux utilisateurs grâce aux indices client
- Qu'est-ce que l'accessibilité ?
- En-têtes et points de repère
- Libellés et alternatives de texte
- Principes de base de l'accès au clavier
- Contrôler le curseur à l'aide de la touche Tabindex
- Sémantique et lecteurs d'écran
- Utiliser du code HTML sémantique pour faciliter l'utilisation du clavier
- Focus du style
- Supprimer le code inutilisé
- Service workers et API Cache Storage
- Découvrir des opportunités d'amélioration des performances avec Lighthouse
- Remplacer les GIF par des vidéos
- Diffusez des images dont les dimensions sont correctes
- Utiliser Imagemin pour compresser les images
- Partage des ressources entre origines multiples (CORS)
- Utiliser des images WebP
- Travailler avec des service workers
- Explorer le panneau DevTools Network
- Remplacez les GIF animés par des vidéos pour accélérer le chargement des pages
- Créer des images WebP à l'aide de la ligne de commande
- Évitez le flash de texte invisible.
- Configurer le comportement de la mise en cache HTTP
- Identifier les ressources chargées à partir du réseau
- Direction artistique
- Appliquer le chargement instantané avec le modèle PRPL
- Mise en cache préalable avec Workbox
- Permettre l'installation
- Règle d'origine identique et iFrame
- Le fonctionnement de la Recherche Google
- Règle d'origine identique et demandes de récupération
- Précharger les éléments essentiels pour améliorer la vitesse de chargement
- La sécurité ne devrait pas être si effrayante !
- Éviter les requêtes réseau inutiles avec le cache HTTP
- Spécifier plusieurs largeurs d'espace publicitaire
- Diffusez des images dont les dimensions sont correctes
- Intégrez un code moderne dans les navigateurs récents pour accélérer le chargement des pages.
- Diffuser des images responsives
- Utiliser des descripteurs de densité
- Votre premier budget de performances