Exploration Approfondie de PageSpeed Insights (Guide Complet & Astuces pour Obtenir 100)

Sur Internet, il n’y a pas de limite de vitesse – mais heureusement, il y a un speedomètre.

La vitesse et les performances de ton site web ont un impact majeur sur ton activité. Cela peut améliorer tes classements de recherche et ton SEO, augmenter l’engagement sur ton site et générer plus de conversions – et de revenus.

Mais avant de pouvoir optimiser la vitesse de ton site web, tu dois savoir comment il fonctionne.

C’est là que PageSpeed Insights entre en jeu.

Cet outil gratuit de Google t’aide à comprendre les performances de ton site web, mais il peut être compliqué de s’y plonger.

Après tout, que signifient tous ces différents termes et scores ? Comment es-tu censé savoir quoi faire ou par où commencer ?

Ce guide se concentre sur ce qu’il faut faire avec les résultats de ton rapport PageSpeed Insights et comment travailler stratégiquement sur des solutions spécifiques pour améliorer chacun de tes scores, peu importe les problèmes à résoudre !

Aujourd’hui, nous allons passer en revue chacun des facteurs clés et montrer des stratégies pour améliorer ta performance avec chacun d’eux.

Qu’est-ce que Google PageSpeed Insights ?

PageSpeed Insights est un outil qui teste, mesure et rapporte les performances de ton site web. Il capture des données essentielles sur la manière dont les utilisateurs vivent et interagissent avec ton site en analysant des éléments tels que la vitesse du site, le temps de chargement et l’expérience utilisateur.

En plus d’évaluer ton site web sur un ensemble de métriques de performance clés, PageSpeed Insights effectue une série de diagnostics et recommande également des actions spécifiques pour t’aider à améliorer la performance de ton site.

PageSpeed Insights est alimenté par le moteur d’analyse open-source de Google, Lighthouse.

Ce qui rend PageSpeed Insights particulièrement important pour les webmasters et les marketeurs, c’est que la performance du site est étroitement liée à l’expérience utilisateur (UX), au SEO, au trafic, aux conversions et à tous les autres indicateurs clés de performance les plus importants pour l’entreprise.

Obtenir 100 % sur PageSpeed Insights, c’est un peu comme réussir ton SAT à la perfection.

Ça ne signifie pas nécessairement que tu réussiras très bien à l’université, mais ça te donne certainement un avantage.

Vitesse De Page Et SEO

Répondons d’abord à la question principale.

Oui, la vitesse et les performances de ton site web peuvent impacter l’optimisation pour les moteurs de recherche (SEO).

En particulier, une mauvaise performance peut nuire à ton SEO. Il est utile de considérer tes PageSpeed Insights comme un « gouverneur » pour ton site web. Si tes scores sont bas, cela signifie que le site est lent – ce qui ralentit également ta croissance dans les SERPs (Search Engine Results Page)!

Google a déclaré publiquement qu’ils utilisent les signaux de vitesse des sites web, qu’ils appellent « expérience de page », comme un facteur de classement SEO.

Il y a trois facteurs centraux inclus dans l’algorithme de recherche que Google appelle Core Web Vitals :

1. Chargement – Peinture la Plus Grande du Contenu (LCP)
2. Interactivité – Délai de Première Entrée (FID)
3. Stabilité Visuelle – Décalage Cumulatif de Mise en Page (CLS)

Tous ces facteurs mesurent la rapidité de chargement de ton site web ainsi que la vitesse et la qualité de l’expérience utilisateur, ce qui peut également influencer l’accessibilité.

Ces trois facteurs font partie des six métriques totales mesurées par PageSpeed Insights.

Comment Fonctionne PageSpeed Insights

Maintenant que nous comprenons le qui, le quoi, le où et le pourquoi… il ne reste plus que le comment.

Comment fonctionne PageSpeedInsights et comment utiliser les informations qu’il fournit ?

Tout d’abord, un peu sur le fonctionnement de l’outil en coulisses, directement de la part de Google :

« PageSpeed Insights fournit des données de laboratoire et de terrain sur une page. Les données de laboratoire sont utiles pour déboguer des problèmes, car elles sont collectées dans un environnement contrôlé. Cependant, elles peuvent ne pas capturer les goulets d’étranglement du monde réel. Les données de terrain sont utiles pour capturer la véritable expérience utilisateur du monde réel – mais disposent d’un ensemble plus limité de mesures. »

En d’autres termes, PageSpeed Insights examine deux choses.

D’abord, les ordinateurs de Google chargent ton site web pour voir comment il fonctionne.

Deuxièmement, puisque les ordinateurs de Google ne sont pas identiques à un ordinateur portable que tu pourrais utiliser à la maison ou au travail, ils consultent un journal de données historiques provenant d’utilisateurs réels qui ont visité ton site au cours des 28 derniers jours. (Ces données proviennent du Chrome User Experience Report, souvent appelé « CrUX », et elles sont collectées auprès d’utilisateurs qui utilisent le navigateur Chrome.)

Ensuite, PageSpeed Insights combine ces deux tests et évalue ton site web en fonction de la manière dont les utilisateurs réels pourraient l’expérimenter.

Le Score PageSpeed Insights est un ensemble de métriques sur la performance de ton site qui détaille les domaines qui sont bons et ceux qui pourraient nécessiter des améliorations.

Il y a 6 scores à connaître :

1. Premier Rendu de Contenu (FCP)
2. Délai de la Première Entrée (FID)
3. Plus Grand Rendu de Contenu (LCP)
4. Changement de Mise en Page Cumulatif (CLS)
5. Interaction au Prochain Rendu (INP)
6. Temps jusqu’au Premier Octet (TTFB)

Chacune de ces métriques est mesurée puis notée selon le niveau de performance.

Lorsque tu lances un rapport PageSpeed Insights pour ton site, tu recevras un score et une « note » pour chacun d’eux, qui sera classé dans l’un de ces trois niveaux :

1. Bien
2. À Améliorer
3. Médiocre

Ces notes sont déterminées par des intervalles prédéfinis que Google établit :

Comment Utiliser Ce Guide Pour Améliorer Votre Score PageSpeed Insights

Comprendre les PageSpeed Insights est la première partie de la bataille.

Ensuite, nous devons trouver comment traduire tous les scores, les chiffres et les suggestions en un plan d’action pour l’amélioration.

Voici comment utiliser ce guide :

• Lance ton rapport PageSpeed Insights de ton site web.
• Cherche les tests CWV échoués ou les métriques dans la partie “Poor” de l’échelle.
• Trouve la section ci-dessous qui correspond à ces métriques spécifiques.
• Suis les étapes (présentées par ordre d’impact du plus élevé au plus bas).
• Relance le rapport PageSpeed Insights.
• Si nécessaire, répète le processus pour toutes les métriques toujours marquées “Poor.”
• Passe aux métriques marquées comme “Needs Improvement.”
• Répète depuis le début.

#1 – Premier Rendu Utile (FCP)

Plongeons dans la première métrique sur la liste de Google.

C’est le First Contentful Paint, ou FCP, et il mesure la rapidité avec laquelle l’utilisateur peut voir ton site web pendant qu’il charge.

Qu’est-ce que le Premier Affichage de Contenu ?

First Contentful Paint (FCP) est le temps nécessaire pour que le premier objet se charge dans le navigateur de l’utilisateur. Ceci est différent de la vitesse de chargement de la page ou du temps de chargement car ce n’est pas le temps pour que toute la page se rende — C’est juste la première pièce de la page qui apparaît à l’écran.

C’est important du point de vue de l’utilisateur car il peut voir les progrès au fur et à mesure que la page commence à apparaître.

Cela signifie également que les stratégies pour accélérer le FCP sont uniques par rapport à simplement rendre le chargement de la page entière plus rapide.

FCP est mesuré en secondes.

• Bon : < 1,8 secondes
• À améliorer : 1,8 – 3 secondes
• Mauvais : > 3 secondes

Techniques Pour Améliorer Le FCP

Disons que tu as obtenu un score FCP de 2,2s. Tu espères le réduire à 1,8s.

Quels outils sont à ta disposition ?

Minimisation Des Ressources Bloquant Le Rendu

Rappelle-toi, le Premier Affichage de Contenu ne concerne pas seulement le temps de chargement complet de la page. Il s’agit de faire apparaître les premiers pixels à l’écran le plus rapidement possible.

Une stratégie clé est simplement de changer l’ordre du contenu sur ta page.

Laisse le navigateur afficher le texte le plus important, les images et les styles avant qu’il commence à charger les scripts lourds, les animations sophistiquées et le contenu qui se trouve « sous la ligne de flottaison ».

La première chose que tu devrais faire : Supprime tous les styles ou scripts inutilisés de ta page.

Si tu charges du JavaScript ou du CSS sur la page (généralement dans la section Head du site), cela ralentira le FCP. Si tu ne les utilises pas, alors cela te ralentit inutilement.

Dans WordPress, tu peux généralement y parvenir en désactivant les plugins inutilisés, qui peuvent charger du code sur la page même si le plugin n’est pas utilisé ou affiché.

Si tu regardes les résultats dans ton rapport PageSpeed Insights, cela indiquera le code qui est chargé dans la page mais qui n’est pas utilisé :

Cela devrait t’indiquer quel code ou quels plugins tu pourrais supprimer en toute sécurité.

(Note : Juste parce qu’un code n’est pas utilisé sur une page, cela ne signifie pas qu’il n’est pas présent sur d’autres pages de ton site web ! Sois prudent avant de commencer à couper et à supprimer des éléments de tes pages.)

Ensuite : Différer ou charger les scripts de manière asynchrone.

Si tu as besoin de scripts ou de styles sur ta page, mais qu’ils ne sont pas immédiatement nécessaires pour le premier contenu que l’utilisateur voit, alors tu peux faire ce qu’on appelle différer ou les charger de manière asynchrone. Cela indique au navigateur d’attendre pour les charger plutôt que de les charger dans l’ordre où ils apparaissent sur la page.

C’est assez simple — Tu peux ajouter un peu de code supplémentaire à ton site web qui indiquera au navigateur de différer ou de charger de manière asynchrone (ou les deux) :

<script src="app.js" async></script>

(Note de Nerd : Async et defer ne sont pas techniquement la même chose. Cependant, pour la plupart d’entre nous, la différence est principalement sémantique. Néanmoins, n’hésite pas à explorer en profondeur et en savoir plus sur les nuances subtiles.)

Si tu cherches une manière plus simple de gérer cette étape, envisage d’utiliser le plugin JetPack Boost pour WordPress.

JetPack est une suite de plugins gratuite qui te fournit toutes sortes d’outils pour optimiser la vitesse et les performances de ton site web. Notamment, tu peux choisir de différer le chargement des JavaScript non essentiels en un simple clic.

Depuis l’intérieur de WordPress, va à Plugins > Ajouter Nouveau.

Ensuite, recherche Boost. Cliquez sur « Installer » et « Activer ».

Tu devrais voir un nouveau menu dans ta navigation à gauche appelé « JetPack ».

Rends-toi à JetPack > Boost.

Le plugin rendra ton site en arrière-plan et affichera ton score, ainsi que des options d’amélioration. Pour différer le JS non essentiel, clique simplement sur le bouton bascule pour l’activer.

Enfin : Restructurer le CSS (style).

Si tu es familier avec CSS, tu sais qu’il est courant de regrouper tous tes styles dans un gros bloc de code et de les charger dans un fichier standard comme style.css.

Ce n’est pas mauvais. C’est juste pas très performant.

Pour améliorer le FCP, tu peux optimiser la structure de ton CSS :

1. Supprime tous les styles qui s’appliquent au contenu qui fait partie du FCP (tout ce qui est « au-dessus de la ligne de flottaison »).
2. Ajoute ces styles sous forme de bloc de style en ligne dans l’en-tête de ton site web.
3. Charge les styles restants de manière asynchrone avec une fonction de « préchargement » (montrée ci-dessous.)

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Alternativement, si tu as beaucoup de styles différents pour divers appareils et navigateurs, tu pourrais vouloir diviser ta feuille de style en plusieurs fichiers et utiliser une requête média @import pour charger uniquement les styles appropriés.

Optimisation Des Images Et Des Vidéos

Comme l’FCP concerne principalement l’optimisation des premiers centaines de pixels en haut de la page, nous n’allons pas entrer dans trop de détails sur l’optimisation des images et des vidéos ici.

Mais si ton en-tête contient beaucoup d’images ou si tu as une vidéo en haut de la page, alors il pourrait être utile d’examiner comment optimiser ces éléments pour améliorer la vitesse de chargement initiale. Voir ci-dessous pour plus de détails sur la manière d’aborder l’optimisation.

Utilisation d’un Réseau de Distribution de Contenu (CDN)

Identique ci-dessus. Les CDN peuvent aider à charger toute votre page plus rapidement, ce qui donne un petit coup de pouce au FCP. Voir ci-dessous pour plus de détails sur l’utilisation d’un CDN.

#2 – Délai de Première Entrée (FID), Temps de Blocage Total (TBT) et Temps pour devenir Interactif (TTI)

Maintenant, parlons des compromis.

Si tu ne prêtais attention qu’au Premier Affichage de Contenu, tu pourrais penser que tout ce que tu as à faire pour améliorer ton score sur PageSpeed Insights est de retarder et charger toutes tes ressources plus tard pour que la partie supérieure de ton site web se charge rapidement.

Mais si le site web semble se charger rapidement, mais que je ne peux pas vraiment interagir avec, alors c’est également une mauvaise expérience utilisateur.

Entrez : Délai de la première entrée.

Le délai de première entrée est également lié au temps total de blocage (TBT) et au temps jusqu’à l’interactivité (TTI).

Déballons chacun de ces éléments et voyons en quoi ils sont liés mais différents.

Qu’est-ce que le Délai de Première Entrée ?

Le délai de première entrée (FID) est le temps nécessaire au navigateur pour répondre à la première saisie ou interaction de l’utilisateur (par exemple, cliquer sur un lien ou un bouton). La performance de ton site web influence ce délai car la plupart des interactions ne peuvent pas être traitées pendant que le navigateur charge ou rend le code.

En d’autres termes, si ton code met beaucoup de temps à finir de charger, cela empêchera l’utilisateur d’interagir avec le site web, et il y aura un délai ou un temps de latence entre le moment où il clique et le moment où l’action se produit.

Cette métrique est mesurée en millisecondes et basée sur des données utilisateurs réelles.

• Bon : < 100ms
• À Améliorer : 100 – 300ms
• Mauvais : > 300ms

Qu’est-ce que le Temps jusqu’à l’Interactivité (TTI) ?

Le temps pour devenir interactif est le temps nécessaire pour que la page devienne « fiablement interactive ».

Google définit « fiablement interactif » comme le moment où le fil principal du navigateur est libre pendant au moins 5 secondes, rendant la page pleinement interactive pour l’utilisateur.

Ceci est une métrique mesurée par le Lighthouse de Google, donc elle n’est pas basée sur des données d’utilisateurs réels. Au lieu de cela, elle est mesurée selon des critères spécifiques et contrôlés.

Qu’est-ce que le Temps Total de Blocage (TBT) ?

Le Temps de Blocage Total mesure la période complète entre le FCP et le TTI.

En d’autres termes, l’horloge ne commence à tourner qu’une fois le haut de la page affiché, et elle s’arrête après que la page est considérée comme « fiablement interactive » ou 5 secondes après que le fil principal soit libre.

Délai de la première entrée vs Temps pour interagir vs Temps total de blocage

Ces trois métriques sont liées mais pas identiques.

Le délai de la première entrée est basé sur des données utilisateurs réelles et les Core Web Vitals. TTI et TBT sont mesurés par le rapport de performance dans PageSpeed Insights, alimenté par Lighthouse de Google.

En ce qui concerne l’amélioration de la performance de ces trois indicateurs, les solutions sont également similaires mais pas identiques. Notamment, les solutions pour améliorer le FID qui impliquent de différer le rendu JavaScript n’amélioreront pas le TTI ou le TBT car le JavaScript doit toujours être chargé.

Mais des solutions comme supprimer, minimiser et mettre en cache devraient aider à améliorer ces trois métriques.

Techniques Pour Améliorer FID, TTI, et TBT

De loin, l’impact le plus significatif sur le FID est le JavaScript chargé sur votre page.

Tu peux considérer JavaScript comme une voie ferrée distincte pour le navigateur. Pendant qu’il rend ou exécute du code JavaScript, il ne peut pas accomplir d’autres tâches ni répondre à des entrées comme un utilisateur cliquant sur un lien (le « fil principal » doit être libre pour que le navigateur puisse répondre).

Donc, plus il passe de temps à lire et à exécuter le JavaScript lors du premier chargement de la page, plus le délai sera long si l’utilisateur commence à interagir avec la page.

Réduire L’impact Du Code Tiers

Un suspect habituel pour la lenteur de réponse des entrées est que le site web est encore en train de charger toutes sortes d’outils tiers, de widgets et d’applications sur votre site.

Chaque fois que tu ajoutes des éléments comme Facebook, Drift, Intercom, HotJar ou d’autres outils et services tiers à ton site web, cela ajoute un peu de code qui devra être chargé et rendu sur la page.

Si tu as beaucoup de ces services, cela peut prendre beaucoup de temps pour tous les charger.

Pire encore, tu n’as aucun contrôle sur la rapidité de chargement de ces ressources sur ton site. Donc si le navigateur essaie de récupérer du JavaScript sur un site tiers avec un serveur lent, cela pourrait causer des retards significatifs.

Corrigeons cela.

Option #1: Supprime tous les outils tiers inutilisés.

Il est probable que tu as installé toutes sortes de services, de plugins et d’outils sur ton site web au fil des ans. Et il est probable que tu n’en utilises que quelques-uns.

C’est le moment de supprimer ou désinstaller ceux que tu n’utilises pas activement.

Pour obtenir une liste complète des JavaScript tiers chargés sur ta page, consulte ton rapport PageSpeed Insights ou exécute un rapport Lighthouse séparé.

Tu devrais voir une liste de tous les scripts chargés et le temps qu’ils prennent :

Maintenant, en utilisant ces informations, tu peux décider lesquels de ces éléments sont critiques et lesquels peuvent être supprimés en toute sécurité.

Selon les services que tu souhaites supprimer, tu pourrais devoir retirer manuellement le code de ton site web, désinstaller un plugin WordPress ou supprimer le code ajouté via Google Tag Manager pour améliorer la performance de la page.

Option #2 : Charger JavaScript de manière asynchrone.

Sauf si c’est essentiel à la représentation du FCP, il est presque toujours conseillé de rendre les scripts tiers de manière asynchrone. Si tu as du JavaScript vital qui ralentit le FID mais que tu ne peux pas le supprimer, alors essaie de le charger de manière asynchrone à la place.

Minimiser Le Temps D’exécution JavaScript

Le code tiers peut être un scélérat, mais qu’en est-il de notre propre code que nous avons placé sur notre site web ?

Il y a des chances que cela ne soit pas innocent dans le temps de chargement lent.

Si tu as du JavaScript non essentiel que tu as ajouté à ton propre site web, tu pourrais vouloir le supprimer.

En regardant le rapport PageSpeed Insights, tu devrais voir une section qui mentionne le JavaScript inutilisé :

• Si le JavaScript est à 100% inutilisé, envisage de le supprimer
• Si le JavaScript est utilisé sur d’autres pages, envisage de le livrer sélectivement uniquement sur les pages où il est nécessaire (également connu sous le nom de « fractionnement du code »)

Tu peux aussi explorer les options pour améliorer le temps de chargement du JavaScript.

La façon la plus courante d’accélérer le temps de chargement est de réduire la taille des fichiers. Et avec JavaScript, il existe deux stratégies principales :

• Minification – Suppression de tous les espaces, sauts de ligne, etc. dans le code
• Compression – « Zippage » du fichier pour le rendre plus petit

L’un ou l’autre pourrait aider à rendre ton code plus performant.

Priorisation Du Contenu Visible

Si tu es principalement préoccupé par l’amélioration du FID, alors tu voudrais peut-être te concentrer sur le report du JavaScript et d’autres éléments de la page pour te focaliser uniquement sur le contenu lors de la première peinture significative.

Après tout, les utilisateurs ne peuvent pas interagir avec des éléments qui n’ont pas été rendus.

#3 – Plus Grande Peinture de Contenu (LCP)

Si FCP est le temps que prend ta voiture pour passer de 0 à 60, alors LCP est son temps au quart de mile.

D’accord, pour ceux qui ne sont pas des férus de technologie, ce que je veux dire, c’est que LCP mesure la rapidité avec laquelle l’utilisateur peut voir le contenu “principal” sur votre page web.

Qu’est-ce que le Largest Contentful Paint ?

Le Largest Contentful Paint (LCP) est une métrique qui mesure le temps nécessaire pour que le plus grand bloc de contenu sur une page soit visible par l’utilisateur. Contrairement au FCP, il examine le temps de chargement pour le plus grand bloc d’image ou de texte sur la page, indépendamment de sa position ou de son ordre.

Il mesure le plus grand bloc de contenu en fonction de ses dimensions dans le champ de vision de l’utilisateur. En d’autres termes, s’il y a un seul <div> avec beaucoup de texte ou une seule image qui occupe une grande partie de l’écran, cela peut être considéré comme le plus grand bloc de contenu et utilisé pour calculer le LCP.

Il est mesuré en secondes et basé sur des données d’utilisateurs réels (ou « sur le terrain ») :

• Bon : < 2,5s
• À améliorer : 2,5 – 4s
• Mauvais : > 4s

Techniques Pour Améliorer LCP

Avant de commencer à travailler pour optimiser ton LCP, tu pourrais souhaiter déterminer quelle partie de ta page est considérée comme le plus grand bloc de contenu.

Cela peut t’aider à cibler tes efforts pour améliorer les performances sur une page spécifique ou un modèle.

Tu peux faire cela en utilisant les outils DevTools de Chrome dans ton navigateur pour identifier la ressource LCP sur une page spécifique.

Optimise La Priorité De Chargement

Dans les sections précédentes, nous avons discuté des options telles que l’utilisation de stratégies asynchrones ou de report pour accélérer le rendu des parties clés de la page.

Tu peux envisager de les considérer ici comme une option de première ligne.

Supprimer ou différer les ressources bloquant le rendu peut aider le contenu principal à se charger plus rapidement. Mais garde à l’esprit que si ces ressources modifient considérablement la mise en page ou la structure de la page, cela pourrait en fait changer quel bloc est considéré comme le plus grand et ralentir le LCP plutôt que de l’améliorer !

Tu peux pousser cette stratégie encore plus loin. Surtout si le plus grand bloc de contenu est une image.

Tu peux appliquer ce qu’on appelle un framework PRPL (Preload, Render, Precache, Lazy load) pour cibler des ressources spécifiques sur ta page et pour charger en premier dans la file d’attente. Si cette image est le bloc de contenu le plus grand, alors cela améliorera considérablement ton score LCP.

En plus des options de rendu asynchrone, ce Framework offre d’autres stratégies pour optimiser le chemin de rendu.

Une des méthodes les plus simples est le préchargement des actifs critiques.

Tu peux faire cela en ajoutant simplement un petit extrait à l’en-tête de ton site web qui indique au navigateur de prioriser les images, polices, styles ou scripts critiques, qui peuvent être essentiels pour ta plus grande section de contenu.

Par exemple, si tu as une image principale qui est le plus grand bloc de la page, alors tu pourrais vouloir précharger cette image sur chaque page en utilisant un extrait comme celui-ci :

<link rel="preload" as="image" href="image1.png">

Cela indique au navigateur de commencer à charger cette ressource immédiatement, avant qu’elle ne soit découverte sur la page.

Optimiser La Taille Des Fichiers (Ressources)

Maintenant, parlons de la taille des fichiers.

Les fichiers plus volumineux prennent plus de temps à charger. Cela s’applique aux images, scripts, vidéos, polices et à tout autre élément de votre page qui peut être chargé comme partie du bloc de contenu le plus important.

Une manière d’accélérer ton score LCP est l’optimisation de la taille des fichiers.

Les stratégies pour optimiser la taille de fichier dépendront du format du fichier.

Optimisation Des Images

Généralement, tu trouveras de grands avantages à compresser et optimiser tes images.

Commence par évaluer ces domaines pour amélioration :

• Format : Les différents formats d’image offrent des niveaux variés de compression et de qualité. Pour la plupart des utilisations web, les formats les plus courants sont JPEG, PNG et WebP.
  • Le JPEG est généralement le meilleur pour les photos.
  • Le PNG est généralement le meilleur pour les images conçues avec du texte ou des contours nets.
  • Le WebP est un format plus efficace qui offre une meilleure compression sans sacrifier la qualité, mais il peut ne pas être pris en charge par tous les navigateurs.
• Compression : Dans de nombreux cas, tu peux compresser la taille de fichier d’une image sans perdre beaucoup ou aucune qualité visuelle.
  • Outils de compression d’images en ligne : TinyPNG (pour PNG et JPEG), Squoosh (pour WebP).
  • Outils de compression d’images pour WordPress : ShortPixel, Imagify.
• Taille de l’image : Si tu télécharges des images brutes ou des photos sur ton site web puis que tu les ajoutes à ta page, il y a de fortes chances qu’elles soient bien plus grandes que nécessaire, ralentissant ainsi le temps de chargement.
  • Redimensionne tes images et télécharge uniquement la taille dont tu as besoin.
  • Utilise un plugin WordPress pour redimensionner automatiquement les images lors de leur téléchargement.
  • Utilise les attributs “srcset” et “sizes” dans la balise “img” pour spécifier plusieurs sources et tailles d’images. Le navigateur choisit automatiquement l’image la plus appropriée en fonction de la taille de l’écran et de la résolution de l’utilisateur.

Optimisation des Scripts et des Styles

Toutes les ressources nécessaires pour afficher le plus grand bloc de contenu devront être entièrement chargées avant que le LCP ne soit calculé.

Cela inclut les scripts et les styles qui impactent ton plus grand bloc de contenu.

En utilisant certaines des techniques que nous avons déjà discutées, tu peux améliorer le LCP en optimisant la taille de fichier et le chemin de rendu pour JavaScript, CSS, etc. :

• Minimise les fichiers.
• Division du code pour réduire la taille du fichier.
• Ajoute des styles et scripts en ligne.
• Précharge ou met en cache.

Optimisation Des Vidéos

Si ta ressource LCP pourrait être une vidéo, alors tu devrais envisager des moyens d’optimiser les vidéos.

• Héberge la vidéo sur YouTube ou un autre service avec un CDN rapide plutôt que de la télécharger directement.
• Compresse la taille du fichier vidéo.

Optimisation Des Polices

Si la ressource LCP en question est un texte et que ce texte utilise une police importée (par exemple, de Google Fonts), alors tu peux optimiser en améliorant la vitesse de chargement du fichier de la police.

• Utilise uniquement les polices de caractères WOFF et WOFF2.0 pour le web.
• Précharge le fichier de police en utilisant une balise link rel (voir ci-dessus).
• Explore plus d’options pour réduire encore le temps de chargement du fichier de police.

Implémenter un CDN

Pense à un CDN comme à une voie de covoiturage sur l’autoroute.

Il aide le navigateur à télécharger plus rapidement les ressources en les mettant en cache sur des serveurs dans le monde entier.

La chose principale à savoir est la suivante : L’implémentation d’un CDN peut améliorer considérablement la performance du site web de manière globale. Et, surtout en ce qui concerne LCP, cela peut aider à rendre les images, scripts et autres ressources plus rapidement que le serveur normal de ton hébergeur web.

Pour mettre en œuvre un CDN :

• Choisis Un Fournisseur De CDN : Il existe plusieurs fournisseurs de CDN populaires sur le marché, tels que Cloudflare, Amazon CloudFront, Google Cloud CDN, et Fastly.
• Crée Un Compte Et Configure Le CDN : Une fois que tu as choisi un fournisseur de CDN, inscris-toi pour un compte et configure les paramètres du CDN. Cela implique généralement la création d’une zone CDN, la configuration des règles de mise en cache et la configuration du chiffrement SSL/TLS.
• Intègre Le CDN À Ton Site Web : Pour intégrer le CDN à ton site web, tu devras mettre à jour les URL du contenu que tu souhaites servir via le CDN. Cela implique de changer les noms de serveurs pour pointer vers le CDN au lieu de ton serveur normal.
• Teste Le CDN : Après avoir intégré le CDN à ton site web, effectue des tests pour t’assurer que le contenu est bien servi via le CDN et que la performance LCP s’est améliorée.

Pour un guide plus détaillé, consulte notre article sur l’utilisation d’un CDN avec WordPress.

Améliorer La Performance Du Serveur

Enfin, et c’est certainement pas le moins important, la performance du serveur de ton hébergeur web joue également un rôle clé dans le LCP.

Nous aborderons ceci en détail lorsque nous plongerons dans le TTFB ; il suffit de dire que le navigateur ne peut télécharger les ressources aussi rapidement que le serveur le permet. Si le serveur met longtemps à répondre, il faudra également longtemps pour que la ressource se charge.

#4 – Décalage Cumulatif de Mise en Page (CLS)

Savais-tu que les sites web peuvent danser ?

En quelque sorte. Et pas très bien.

Plus précisément, ils peuvent se déplacer. Les éléments sur la page bougent tandis que différentes images, scripts, styles et textes sont rendus jusqu’à ce que la page soit entièrement chargée.

Qu’est-ce que le Cumulative Layout Shift ?

Le décalage de mise en page cumulatif mesure à quelle distance les images, le texte, les boutons et autres éléments de votre page se déplacent sur l’écran pendant que l’utilisateur attend que la page se charge. Un CLS plus bas est considéré comme meilleur pour l’expérience utilisateur.

Cela n’est pas vraiment surprenant si tu considères tes propres habitudes de navigation.

Si tu as l’impression de jouer à tape-taupe en essayant de cliquer sur un lien qui continue de descendre plus bas sur la page, tu seras probablement frustré et quitteras le site. (Bonjour, taux de rebond !)

Cette expérience peut être particulièrement exaspérante lors de la navigation sur un appareil mobile.

CLS est une donnée de terrain provenant de vrais utilisateurs, et elle est mesurée sous forme de score qui combine la « fraction d’impact » (quel pourcentage d’éléments dans le champ de vision ont été déplacés) et la « fraction de distance » (à quelle distance ils se sont déplacés par rapport à la taille totale de l’écran).

Il existe également une désignation spéciale pour les « changements attendus » (par exemple, cliquer sur un bouton qui ouvre une nouvelle section sur la page) et les « changements inattendus », qui ne sont pas provoqués par une saisie de l’utilisateur.

CLS est mesuré en multipliant la fraction d’impact et la fraction de distance :

• Bon: < 0.1
• À améliorer: 0.1 – 0.25
• Mauvais: > 0.25

Techniques Pour Améliorer Le CLS

Il est probable que si tu ne cherches pas intentionnellement à tromper tes utilisateurs en déplaçant des éléments sur ta page, ton CLS est assez bas par défaut, mais il y a quelques erreurs innocentes que tu peux commettre et qui méritent d’être corrigées.

Définis Les Tailles De Toutes Les Images Et Vidéos

Un petit détail avec un grand impact. Si tu ne définis pas explicitement la taille des images et des vidéos sur ta page, cela peut entraîner un décalage dans la mise en page car le navigateur ne sait pas combien d’espace réserver pour cette ressource.

C’est aussi simple que d’ajouter l’attribut pour n’importe quelle image ou vidéo sur la page :

<img src="hero_image.jpg" width="400" height="400">

Évite les publicités et les pop-ups qui causent des déplacements de mise en page

Tu dois payer les factures d’une manière ou d’une autre, mais évite d’utiliser des pop-ins ou des pop-ups qui modifient la mise en page. Si tu n’as pas d’autre choix, utilise une boîte de ratio d’aspect CSS pour « réserver » un espace pour les publicités ou d’autres messages qui se chargent sur la page à mesure que l’utilisateur interagit.

Choisissez Les Animations Avec Sagesse

Avec les CSS modernes et JavaScript, nous pouvons implémenter toutes sortes d’animations cool et sophistiquées sur la page.

Mais, du point de vue de l’utilisateur, la fonctionnalité prime toujours sur la forme.

Supprime toute animation qui déclenche des modifications de mise en page, car chaque changement d’état peut contribuer au déplacement global de la mise en page et affecter ton score CLS.

#5 – Interaction jusqu’au prochain rendu (INP)

Comme Jay-Z l’a dit un jour, « Je n’ai pas de patience. Et je déteste attendre. »

N’est-ce pas?

Alors que nous avons déjà couvert le délai d’entrée lors de la première interaction avec ton site web (FID), INP est une métrique plus large qui évalue la réactivité globale de ton site.

Qu’est-ce que l’interaction jusqu’au prochain rendu ?

L’interaction jusqu’au prochain rendu mesure le temps qu’il faut pour que le prochain « rendu » ou cadre mis à jour sur ton site web apparaisse après que l’utilisateur interagit avec un bouton ou un élément de la page. Elle mesure la réactivité globale du site web et la fluidité des interactions.

C’est particulièrement important pour les applications web qui nécessitent une interaction utilisateur significative et peuvent sembler lentes et confuses s’il y a un trop long délai d’entrée ou de retard entre l’action et le résultat.

INP est mesuré en millisecondes :

• Bon : < 200ms
• À Améliorer : 200 – 500ms
• Mauvais : > 500ms

Techniques Pour Améliorer L’INP

Si tu as des problèmes INP, je suis désolé pour toi, mon fils. (Désolé, c’est une autre paroles de Jay-Z.)

Heureusement, tu peux réduire la plupart des problèmes en trois problèmes principaux :

1. Délai d’entrée
2. Délai d’interaction
3. Délai de présentation

C’est la partie vraiment délicate ; Pour diagnostiquer le problème de plus près, tu devras utiliser le profil de performance de Google Chrome ou la fonction d’enregistrement de Lighthouse.

Ici, tu peux zoomer sur une interaction individuelle et voir où le plus long délai se produit.

De là, nous pouvons chercher des solutions pour chacune d’elles.

Correction du Délai d’Entrée

Le délai d’entrée est causé lorsque le fil principal est occupé au moment de l’interaction. Cela signifie que quelque chose d’autre se passe lorsque le clic ou la pression sur une touche a lieu.

Pour le corriger, tu voudras examiner quels processus s’exécutent dans le cadre du thread principal :

• Supprimer ou optimiser le JavaScript tiers.
• Utilise des workers web pour exécuter JavaScript en dehors du thread principal.
• Utilise des écouteurs comme isInputPending() pour céder le thread principal (c’est l’option la plus avancée.)

Correction du Délai d’Interaction

Si l’interaction elle-même est la coupable – ce qui signifie qu’il faut beaucoup de temps pour que l’interaction s’exécute réellement – alors tu devras refactoriser le code pour cette entrée.

La principale recommandation ici est de différer les calculs non essentiels.

En d’autres termes, exécute la partie de l’interaction que l’utilisateur voit immédiatement et attend. Ensuite, après la mise à jour du cadre, effectue tous les autres calculs ou interactions en arrière-plan.

Disons, par exemple, que l’utilisateur clique sur un bouton qui ouvre une fenêtre et enregistre également un événement montrant qu’il a cliqué sur le bouton. Tu voudrais que ton code ouvre d’abord la fenêtre, « complétant » l’interaction du point de vue de l’utilisateur.

Ensuite, une fois l’interaction terminée, consigne l’événement que l’utilisateur ne verra ni n’expérimentera directement.

Correction Du Délai De Présentation

Il est possible que l’entrée et l’interaction se produisent assez rapidement, mais que le navigateur mette beaucoup de temps à mettre à jour la présentation avec la nouvelle image.

Malheureusement, il n’y a pas beaucoup de refactorisation qui puisse aider avec cela.

Mais quelques facteurs pourraient causer un retard plus long que normal :

• Surutilisation de requestAnimationFrame(). Chaque fois que cette fonction est appelée, elle crée un léger retard. Regarde donc les cas où elle pourrait être utilisée trop fréquemment ou inutilement.
• Les attributs “Async” mal gérés. Selon le contexte, certaines ressources que tu as marquées pour un rendu asynchrone pourraient ignorer la directive ou se charger de manière inattendue. Si cela se produit, cela retardera d’autres éléments du chemin de rendu et la prochaine image.

#6 – Temps Jusqu’au Premier Octet (TTFB)

Maintenant, nous réfléchissons à ce tout premier instant où une page web se charge.

Avant que la page puisse commencer à s’afficher, le navigateur de l’utilisateur doit prendre contact avec le serveur web, déterminer à qui il se connecte et obtenir des instructions sur ce qu’il doit charger et dans quel ordre.

Cette poignée de main initiale contient le premier octet d’information. La rapidité avec laquelle cet octet arrive est comme le coup de pistolet au début d’une course de chevaux.

Qu’est-ce que le Temps jusqu’au Premier Octet ?

Le temps jusqu’au premier octet est le temps qu’il faut à ton navigateur pour effectuer des processus comme la recherche DNS, les poignées de main TCP et SSL, et la configuration de la connexion afin de demander – et de recevoir – les premiers octets d’information d’un serveur web. La rapidité d’établissement de la connexion avec le serveur web dépend presque entièrement du serveur lui-même et de la manière dont le site web est hébergé.

C’est mesuré en millisecondes :

• Bon : < 800ms
• À Améliorer : 800 – 1800ms
• Mauvais : > 1800ms

Techniques Pour Améliorer le TTFB

Tu peux considérer le TTFB comme le temps que tu passes sur la ligne de départ avant que le pistolet ne soit tiré. Tout ce qui retarde le feu vert initial ajoutera du temps au TTFB et au temps de chargement total de la page.

Alors, quelles sont tes options pour t’améliorer ?

Éliminer Les Redirections

Tout d’abord, élimine les redirections de page dans la mesure du possible. Si tu rediriges les utilisateurs d’une page à une autre, le temps nécessaire pour exécuter cela se situe dans la fenêtre TTFB, ce qui signifie que tu ajouteras un temps considérable à ton score.

Cela inclut les redirections 301 des anciennes URL vers une nouvelle, ainsi que des redirections temporaires et d’autres implémentations.

Mettre À Jour Ton Hébergement Web

L’hébergement joue un rôle énorme dans la vitesse générale et le score de performance de ton site web, notamment en ce qui concerne le TTFB.

Tu voudras examiner les spécificités de ton fournisseur d’hébergement web, en prêtant une attention particulière à des éléments tels que :

• Shared vs Dedicated Hosting : Ton site web est-il hébergé sur sa propre instance ou partage-t-il des ressources avec d’autres utilisateurs et leurs sites web ? Le Dedicated Hosting coûte généralement plus cher mais offre des performances plus constantes.
• Mémoire (RAM) : La mémoire à laquelle ton site peut accéder sur le serveur joue un rôle majeur dans ses performances globales. Si la mémoire est saturée, alors le serveur ne pourra pas traiter et répondre aux nouvelles demandes.
• CPU / Processeur : La vitesse du processeur du serveur joue également un rôle dans sa vitesse de réponse et son temps de traitement.
• Mises à jour de l’infrastructure : Le logiciel fonctionnant sur le serveur est-il maintenu à jour et exempt d’erreurs ou de conflits ? Met à jour les dernières versions de PHP, MySQL et autres applications essentielles pour maximiser les performances.

Mettre En Place Le Caching

Sur les sites dits « dynamiques », comme ceux fonctionnant sous WordPress, la mise en cache de tes pages peut apporter d’énormes améliorations aux temps de chargement des pages et au TTFB.

Le caching signifie essentiellement que, au lieu de récupérer les informations de la base de données de ton site à chaque fois qu’une page est chargée, le site stockera une copie de la page et la fournira à l’utilisateur. C’est beaucoup plus rapide que de rechercher les informations à chaque fois.

Pour comprendre comment cela fonctionne, lis notre guide sur le cache des sites web.

Une Note Sur L’indice De Vitesse

Nous n’avons pas inclus une section séparée axée sur le métrique de l’indice de vitesse dans ce guide car cela mesure essentiellement le temps de chargement global de la page.

Cela signifie que résoudre les problèmes d’indice de vitesse est généralement une question de s’attaquer aux autres métriques connexes que nous avons déjà abordées :

• Premier affichage de contenu
• Plus grand affichage de contenu
• Interaction jusqu’au prochain affichage
• Temps jusqu’au premier octet

Chacun jouera un petit rôle dans la vitesse de page cumulative et les aborder directement devrait améliorer ton score global d’indice de vitesse.

Réflexions Finales Sur PageSpeed Insights

Dans ce guide, nous avons couvert à peu près tout ce qu’il y a à savoir sur le rapport PageSpeed Insights et comment tu peux aborder stratégiquement chaque problème potentiel.

Ensemble, je m’attends à ce que les performances des pages, l’accessibilité et les meilleures pratiques techniques continuent de gagner en importance. Nous construisons le web ensemble – un site web à la fois – et cela repose sur notre investissement commun pour maintenir le web ouvert, accessible et beau.

Prenez le Contrôle avec un VPS Hosting Flexible

Voici comment l’offre VPS de DreamHost se distingue : support client 24/7, un Panel intuitif, RAM évolutive, bande passante illimitée, domaines d’hébergement illimités et stockage SSD.

Choisissez Votre Plan VPS

Brian Glassman