Guide pour améliorer les performances de chargement des pages

La mesure des performances de chargement des pages continue d’évoluer. Afin d'améliorer les performances globales et l'expérience utilisateur, il est utile de comprendre les différentes métriques et comment elles sont liées les unes aux autres.

Avant de suivre les conseils ci-dessous, limitez votre champ d’action aux pages spécifiques que vous essayez d’améliorer. Pour un impact maximal, concentrez-vous sur les pages fréquemment consultées mais dont le score est inférieur à celui accepté pour le 75e percentile de l'utilisateur.

Indicateur de performance clé de chargement de page

Comment améliorer le temps jusqu'au premier octet (TTFB) :

Le temps jusqu'au premier octet mesure le temps écoulé entre le début de la navigation (un utilisateur cliquant sur un lien) et la réception par le navigateur du premier octet de la réponse du serveur. Si les utilisateurs du 75e percentile connaissent un TTFB supérieur à 0,5 s pour une ou plusieurs de vos pages, vous pouvez décomposer davantage les temps en interrogeant l'attribut suivant dans PageView:

• backendDuration
• connectionSetupDuration
• dnsLookupDuration
• networkDuration

Souvent, la lenteur avant le rendu est causée par la lenteur du backend, soit par des API tierces, soit par des applications backend.

monitoring synthétique des API tierces aide les équipes d'exploitation et de développement à comprendre quand la cause première est hors de leur contrôle. Même si vous ne pouvez pas contrôler le code, vous pouvez influencer le résultat en partageant les résultats de Synthetics avec le tiers pour l'aider à comprendre ce que vivent vos clients.

Si les applications backend appartiennent à vous ou à votre équipe, vous pouvez utiliser APMagents, Pixie ou OpenTelemetry pour comprendre et gérer les performances. Pour faciliter la communication entre les équipes, nous vous recommandons de mettre en œuvre la Gestion des niveaux de service limites.

Décalage cumulatif de la disposition (CLS)

Le décalage de mise en page cumulé est un score qui indique dans quelle mesure le contenu se déplace une fois qu'il a déjà été chargé. Conseils et astuces généraux pour améliorer CLS :

• Spécifiez les dimensions des feuilles de style et laissez le CSS par défaut du navigateur contrôler le rapport hauteur/largeur.
• Réservez de manière statique de l'espace pour les espaces publicitaires.
• Évitez les publicités situées en haut de la fenêtre d’affichage.
• Évitez d’insérer du nouveau contenu au-dessus du contenu existant.
• Précalculez suffisamment d’espace pour les intégrations.

Ressources supplémentaires :

• L'approche de Google en matière d'optimisation CLS.
• Lighthouse est un outil de Google qui exécute un test synthétique sur une page spécifique et fournit une liste de recommandations qui incluent la manière d'optimiser CLS.

Peinture à plus grand contenu (LCP)

La plus grande mesure de contenu de peinture mesure la différence entre le début du rendu de la page jusqu'au moment de peindre l'élément de contenu le plus volumineux. Causes courantes d'un LCP lent, selon web.dev:

• Temps de réponse du serveur lent
• JavaScript et CSS bloquant le rendu
• Temps de chargement des ressources lents
• Rendu côté client

Utilisez Browser trace les informations de session pour comprendre lesquelles des causes courantes ci-dessus influencent la page particulière que vous essayez d'optimiser.

Approches pour améliorer le LCP :

• Utilisez les CDN et faites attention à la mise en cache et aux performances du serveur Edge.
• Établissez des connexions avec des tiers dès le début.
• Retardez le Javascript et le CSS non critiques.

Ressources supplémentaires :

• L'approche de Google en matière d'optimisation LCP.
• Lighthouse est un outil de Google qui exécute un test synthétique sur une page spécifique et fournit une liste de recommandations qui incluent la manière d'optimiser CLS.

interaction avec la peinture suivante (INP)

L'interaction avec la prochaine peinture (INP) calcule quand un utilisateur interagit avec une page via des clics, des tapotements et une interaction au clavier avec une page tout au long de sa durée de vie. Il s'agit d'une mesure de champ qui varie en fonction du comportement réel de l'utilisateur (les résultats varient en fonction de l'impatience de l'utilisateur et du moment de l'action) mais qui peut être optimisée en réduisant le temps de blocage total (TBT).

Pour ce faire, vous devez :

• Décomposez les longues tâches de blocage.
• Optimisez le JavaScript gonflé.
• Envisagez de déplacer la logique côté serveur et/ou d'utiliser des travailleurs Web pour exécuter des threads en arrière-plan.

Utilisez Browser trace les informations de session pour comprendre où se produisent vos intervalles de blocage et combien de temps ils durent.

Ressources supplémentaires :

• L'approche de Google en matière d'optimisation INP.
• Lighthouse est un outil de Google qui exécute un test synthétique sur une page spécifique et fournit une liste de recommandations qui incluent comment optimiser l'INP.