Les paramètres parfaits du panneau Réseau de Chrome pour optimiser les Core Web Vitals
Configurez le panneau réseau de Chrome DevTools pour une efficacité maximale
Les paramètres parfaits du panneau Réseau de Chrome pour optimiser les Core Web Vitals
Le panneau Réseau de Chrome DevTools est un outil indispensable et incontournable pour les développeurs web qui visent à optimiser les Core Web Vitals. Malheureusement, les paramètres par défaut ne sont pas les meilleurs pour optimiser la vitesse. En configurant les bons paramètres, vous pouvez simuler avec précision les conditions du monde réel et obtenir de meilleures informations sur les performances de votre site web. Ce guide vous guidera à travers la configuration idéale du panneau réseau de Chrome DevTools pour analyser et améliorer vos scores Core Web Vitals.
Table of Contents!
Configurer le panneau Réseau
Pour accéder au panneau Réseau, ouvrez Chrome DevTools (F12 ou Ctrl+Maj+I) et cliquez sur l'onglet "Network".
Limitation (Throttling)
L'un des paramètres les plus importants pour optimiser les Core Web Vitals est la limitation du réseau. Cela vous permet de simuler diverses conditions réseau que vos utilisateurs pourraient rencontrer.
Cliquez sur la liste déroulante "No throttling" (Pas de limitation) dans le panneau Réseau. Sélectionnez "Fast 4g", "Slow 4g" ou "3G" pour simuler les conditions du réseau mobile. La meilleure option dépend de votre audience. Si votre audience utilise généralement des appareils mobiles haut de gamme dans des conditions de réseau rapides, activez "Fast 4G". Si les conditions typiques du réseau sont un peu plus médiocres, sélectionnez "Slow 4G" et sinon, jouez la sécurité et sélectionnez "3G"
Désactiver le cache
Pour vous assurer que vous testez votre site comme un visiteur le ferait pour la première fois : Cochez la case "Disable cache" (Désactiver le cache) dans le panneau Réseau.
Activer l'affichage élargi des requêtes
L'affichage élargi des requêtes offre une vue plus complète de chaque requête. Les nouvelles informations les plus importantes que cela vous donnera sont :
- La colonne size affichera désormais la taille non compressée et compressée de la requête.
- Les colonnes name donneront des informations sur le chemin.
- La colonne priority vous montrera la priorité de récupération initiale et finale.
Activer les captures d'écran
Lorsque vous activez les captures d'écran, Chrome capture des écrans pendant le chargement de la page. Chaque capture d'écran représente un changement visuel sur la page et peut être utilisée pour comprendre les différentes étapes du chargement de la page et identifier les Cumulative Layout Shifts.
- Avec l'onglet Network actif, appuyez sur Ctrl+F5 (Cmd+R sur Mac) pour actualiser la page.
- Chrome capturera des captures d'écran pendant le processus de chargement de la page.
- Des vignettes de ces captures d'écran apparaîtront sous la ligne des cases à cocher dans le panneau Réseau.
L'aperçu des captures d'écran possède quelques petites fonctionnalités pratiques que vous ne connaissez peut-être pas encore :
- Survolez une capture d'écran pour voir quand elle a été capturée. Cela sera indiqué par une ligne verticale jaune sur le graphique d'aperçu.
- Cliquez sur une vignette de capture d'écran pour filtrer les requêtes qui se sont produites après la prise de cette capture d'écran.
- Double-cliquez sur une vignette pour zoomer et voir la capture d'écran plus en détail.
Activer les meilleures colonnes réseau
Pour trouver les problèmes de Core Web Vitals, les panneaux suivants vous donneront des informations utiles. Faites simplement un clic droit sur n'importe quel nom de colonne et sélectionnez vos colonnes préférées
Activez ensuite les colonnes suivantes qui ont une importance pour les Core Web Vitals :
| Nom de la colonne | Description | Importance pour les Core Web Vitals |
|---|---|---|
| Name | Nom de la requête | Identifier les ressources |
| Status | Codes d'état HTTP | Surveiller les codes non-200 (301 et 302 pour trouver les redirections et 404 / 410 pour les ressources qui n'existent pas) |
| Protocol | Protocole réseau utilisé | Prioriser HTTP/3 pour la performance |
| Domain | Domaine de la ressource | Identifier les ressources tierces |
| Type | Type de ressource | Catégoriser les requêtes |
| Initiator | Déclencheur de la requête | Comprendre les origines de la requête |
| Size | Transfert et taille réelle | Identifier les requêtes volumineuses |
| Priority | Priorité de chargement de la ressource | Assurer une priorisation correcte |
| Waterfall | Chronologie visuelle des requêtes | Analyser la séquence de chargement |
Activez ces en-têtes de réponse personnalisés :
Activez ces en-têtes de réponse personnalisés :
| Nom de la colonne | Description | Importance pour les Core Web Vitals |
|---|---|---|
| Cache-Control | Comportement de mise en cache des ressources | Identifier les ressources |
| Link | En-tête de réponse Link | Vérifier les en-têtes de préchargement ou de prélecture |
| Content-Encoding | L'encodage utilisé | Vérifier la compression des ressources |
Le résultat final :
Il est maintenant temps de recharger la page et de voir la réponse réseau nouvelle et améliorée dans l'onglet réseau de Chrome. Cela ressemblera à quelque chose comme ceci et montre toutes les informations dont vous avez besoin pour commencer à déboguer les Core Web Vitals !
Urgent Fix Required?
Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.
- 48hr Turnaround
- Rapid Response
- Failure Identification
