Informations sur la vitesse de page

Qu'est-ce que PageSpeed Insights ?

Google PageSpeed Insights est un outil gratuit qui permet d'analyser la vitesse, l'expérience utilisateur et les performances d'une page web. Il permet d'identifier les problèmes qui ralentissent votre page et suggère des améliorations de performance pour les appareils mobiles et de bureau.

PageSpeed Insights mesure également vos Vitaux Web fondamentaux, qui sont essentiels pour l'expérience de l'utilisateur et affectent le classement dans les résultats de recherche.

Aperçu de l'outil PageSpeed Insights

L'outil rend compte de divers paramètres et facteurs de convivialité, classés par catégories :

• Éléments essentiels du Web
• Performance
• Accessibilité
• Meilleures pratiques
• SEO

Nous allons maintenant aborder les mesures et les facteurs de convivialité mesurés et rapportés par l'outil PageSpeed Insights ci-dessous.

1 Éléments essentiels du Web

Les "Core Web Vitals" sont les paramètres utilisés par Google pour mesurer l'efficacité de l'Internet. les performances de chargement, l'interactivité et la stabilité visuelle d'une page web. Les paramètres utilisés pour mesurer les Vitaux Web de base sont les suivants :

• La plus grande peinture de contenu (LCP)
• Interaction avec la peinture suivante (INP)
• Décalage de mise en page cumulé (CLS)

PageSpeed Insights fournit également des rapports sur d'autres mesures qui ne font pas partie de vos Vitaux Web de base, mais qui peuvent avoir un impact sur l'expérience utilisateur de votre page. Ces mesures sont les suivantes

• Première peinture de contenu (FCP)
• Premier délai d'entrée (FID)
• Temps jusqu'au premier octet (TTFB)

Les indicateurs principaux du Web et les autres indicateurs notables sont présentés dans le champ "Découvrez ce que vivent vos utilisateurs réels", comme le montre le schéma ci-dessous.

Les données de ce champ sont extraites du Chrome User Experience Report (CrUX) et reflètent la manière dont les visiteurs humains réels utilisant le navigateur Google Chrome ont perçu la page au cours des 28 derniers jours.

Toutefois, les données communiquées sont réservé aux visiteurs de Chrome qui remplissent certaines conditions, notamment

• Activation de l'option "Aider à améliorer les fonctionnalités et les performances de Chrome" sur leur navigateur
• N'a pas défini de phrase de passe sur son navigateur
• Accepter de synchroniser l'historique de son navigateur
• Utiliser un navigateur Chrome compatible

Il s'agit des seules mesures obtenues auprès des visiteurs réels de votre site et de vos pages. Les autres mesures affichées dans l'outil PageSpeed Insights sont extraites des données de laboratoire de Lighthouse.

2 Performance

Le champ Performance rend compte de la vitesse et de l'efficacité de la page. Pour ce champ, l'outil PageSpeed Insights mesure une série de paramètres et les utilise pour calculer un score de performance pour la page.

Les paramètres utilisés pour calculer la note de performance sont les suivants :

• Première peinture de contenu
• Le plus grand tableau de contenu
• Temps de blocage total
• Décalage cumulatif de la mise en page
• Indice de vitesse

Vous pouvez observer que ces mesures diffèrent de celles présentées dans la section précédente. Cela s'explique par le fait que les données de ce champ sont basées sur les données de laboratoire de Lighthouse. Lighthouse simule le chargement d'une page dans un environnement contrôlé, et non dans un laboratoire. sur les utilisateurs du monde réel.

3 Accessibilité

Le champ Accessibilité évalue si le code d'une page web respecte les lignes directrices et les meilleures pratiques en matière d'accessibilité du web.

Pour ce champ, PageSpeed Insights analyse le code HTML, CSS et JavaScript de la page en fonction de plusieurs bonnes pratiques, notamment la présence d'en-têtes et de textes alternatifs appropriés. Il vérifie également le contraste des couleurs et l'utilisation de balises HTML obsolètes.

Il présente ensuite ses conclusions dans la section "Accessibilité". Toutefois, la structure du rapport dépend de plusieurs facteurs, notamment de la page consultée et des problèmes identifiés.

4 Meilleures pratiques

La section "Meilleures pratiques" évalue l'adhésion de la page à diverses meilleures pratiques de développement web.

L'outil PageSpeed Insights évalue divers aspects du code, de la structure et de la configuration de la page. Par exemple, il examine la convivialité de votre site pour les mobiles, l'utilisation du protocole HTTPS sécurisé et la présence de modifications du code.

Il dresse ensuite une liste des meilleures pratiques qui n'ont pas encore été appliquées à votre site, de celles qui l'ont déjà été et de celles qui ne le sont pas. Il présente ensuite ses conclusions, accompagnées de suggestions concrètes pour améliorer votre site.

5 SEO

La section SEO évalue la conformité de votre site aux meilleures pratiques SEO.

Par exemple, l'outil PageSpeed Insights vérifie si la page a un titre et une méta-description. Il vérifie également l'indexation des liens et la validité de votre fichier robot.txt.

PageSpeed Insights présente ensuite ses conclusions, notamment les pratiques SEO qui n'ont pas été appliquées, celles que vous devez vérifier manuellement et celles qui ont déjà été appliquées à votre site.

Comment utiliser l'outil Pagespeed Insights ?

Dirigez-vous vers le Page web de l'outil PageSpeed Insights et saisissez l'URL à analyser.

L'outil PageSpeed Insights analysera alors la page et vous renverra vos évaluations Core Web Vitals et d'autres données. Il vous présentera également une série de recommandations pour améliorer les performances.

Examinons une à une les mesures rapportées et les options disponibles.

1 Sélectionnez Mobile ou Desktop

La première option consiste à choisir entre Portable ou Bureau.

• Mobile : Affiche les données relatives aux visiteurs qui ont consulté votre site à l'aide d'un appareil mobile.
• Bureau : Vous montre les mesures pour les visiteurs qui ont visité votre site à partir d'un ordinateur de bureau. 

Vous devez prêter attention aux mesures rapportées pour les appareils mobiles et les ordinateurs de bureau, car il est possible de réussir l'évaluation de Core Web Vitals pour un appareil et de l'échouer pour l'autre.

Par exemple, un site peut réussir l'évaluation Core Web Vitals pour les ordinateurs de bureau et échouer pour les téléphones portables.

De même, une page peut réussir l'évaluation Core Web Vitals pour les mobiles et échouer pour les ordinateurs de bureau.

2 Sélectionner cette URL ou cette origine

Les mesures et les données affichées correspondent généralement à l'URL que vous avez saisie dans la barre de recherche.

Cependant, pour les indicateurs de base, PageSpeed Insights inclura également les mesures de plusieurs pages de votre site. Dans ce cas, vous devez sélectionner l'une des options suivantes Cette URL ou Origine.

• Cette URL : Affiche les métriques de l'URL que vous avez saisi dans la barre de recherche.
• Origine : affichera les métriques de plusieurs pages de votre site

Cela dit, l'option "Cette URL" sera grisée et non cliquable si le rapport sur l'expérience utilisateur de Chrome n'a pas suffisamment de visiteurs pour calculer la mesure pour cette URL spécifique. Dans ce cas, vous devez vous fier aux données d'origine.

3 Passez en revue votre évaluation Core Web Vitals

Une fois cette étape franchie, vous pouvez consulter votre évaluation Core Web Vitals. Cette évaluation est calculé à l'aide de vos données de base Web Vitals :

• La plus grande peinture de contenu (LCP)
• Interaction avec la peinture suivante (INP)
• Décalage de mise en page cumulé (CLS)

Les indicateurs sont codés en vert, orange et rouge. La couleur fournit des informations sur votre niveau de performance pour l'indicateur en question :

• Vert : La métrique est correcte
• Orange : Le système métrique est correct mais pourrait être amélioré
• Rouge : La mesure n'est pas satisfaisante et devrait être améliorée

Vous pouvez réussir ou échouer l'évaluation. En règle générale, vous échouerez à l'évaluation si l'une de vos mesures de Core Web Vitals est trop faible.

Il est essentiel de savoir que votre évaluation Core Web Vitals est déterminée en utilisant le 75e percentile. En d'autres termes, elle est calculée sur la base de l'expérience de 75% de vos visiteurs sur votre site.

Vous pouvez cliquer sur Agrandir la vue pour obtenir plus d'informations sur les mesures. 

La vue élargie affiche plus d'informations sur vos mesures, notamment :

• La note idéale pour réussir l'examen
• Le pourcentage de visiteurs ayant expérimenté chaque catégorie

4 Examinez vos indicateurs de performance

Une fois cette opération effectuée, accédez au champ Diagnostiquer les problèmes de performance. En règle générale, vous souhaitez vous concentrer sur votre score de performance, car il est calculé à l'aide de certains des paramètres utilisés pour vos Vitaux Web de base.

Il est essentiel de noter que les rapports de ce champ "Diagnostiquer les problèmes de performance" sont basés sur les évaluations de l'outil PageSpeed Insights. Les résultats ne proviennent pas des visiteurs humains de la page.

En haut de la page se trouve l'indicateur de performance, qui contient le score de performance de la page.

La note de performance est calculée à l'aide de plusieurs paramètres. Comme d'habitude, les indicateurs sont codés par couleur et vous pouvez passer la souris sur le score pour voir comment chaque indicateur se comporte.

À droite se trouve une capture d'écran de l'URL telle qu'elle apparaît actuellement. Vous pouvez basculer entre les mesures de performance sur mobile et sur ordinateur en cliquant sur le bouton correspondant en haut de la page.

En cliquant sur le bouton, vous obtiendrez également le score de performance pour les mesures mobiles et de bureau.

Sous la note de performance figurent les paramètres utilisés pour calculer la note. Vous pouvez cliquer sur Agrandir la vue pour en savoir plus sur les indicateurs. 

Le champ se développe et affiche la définition des métriques.

Viennent ensuite les diagnostics.

Le champ Diagnostics indique les améliorations que vous pouvez apporter à la page. Ces améliorations ne sont pas utilisées pour calculer la note de performance, mais elles peuvent contribuer à améliorer les paramètres utilisés pour la calculer.

Le champ affiche par défaut toutes les suggestions d'amélioration. Vous pouvez afficher des suggestions propres à un indicateur à l'aide de l'option Présenter les audits pertinents pour options. Toutefois, les options exactes affichées diffèrent d'une page à l'autre.

Une fois cette étape franchie, vous pouvez faire défiler l'écran pour voir les audits que vous avez réussis. Cliquez sur Afficher pour consulter les audits.

Une fois cette étape franchie, vous pouvez passer à l'examen des sections Accessibilité, Meilleures pratiques et Audit SEO. Ces rapports sont basés sur une évaluation de l'outil PageSpeed Insights et ne proviennent pas de visiteurs réels de votre site.

Il est essentiel de souligner qu'il ne s'agit pas non plus de mesures et qu'il s'agit simplement de suggestions pour améliorer votre site. Cela dit, en les améliorant, vous rendrez généralement votre site plus utilisable pour vos visiteurs.

Comment améliorer la vitesse de votre page

Dans cette section, nous allons vous montrer comment améliorer la vitesse de vos pages. Tout d'abord, nous aborderons les indicateurs de vitesse de page les uns après les autres, puis nous terminerons par un article sur l'amélioration et l'optimisation de votre fichier JavaScript, qui est l'une des principales causes d'une vitesse de page médiocre.

Si vous préférez les vidéos, vous pouvez cliquer pour regarder la vidéo ci-dessous.

1 Comment améliorer votre plus grand tableau de contenu (LCP)

Le Largest Contentful Paint (LCP) mesure le temps de chargement de l'élément le plus volumineux de votre page. Il s'agit généralement d'une image ou d'une vidéo, car les textes se chargent généralement plus rapidement.

Vous pouvez rapidement identifier le plus grand élément de la page en faisant défiler la page jusqu'au champ Diagnostic et en cliquant sur le bouton Le plus grand élément de peinture de contenu option. 

L'élément le plus important vous est présenté, comme indiqué ci-dessous. 

Si l'élément le plus important est une vidéo, vous devrez réduire la taille du fichier pour qu'il soit plus petit et se charge plus rapidement. S'il s'agit d'une image, vous devez : 

• Réduire sa largeur et sa hauteur 
• Compresser le fichier pour qu'il soit inférieur à 250 kb
• Utilisez un format d'image moderne et adapté au web comme AVIF ou WebP

2 Comment améliorer votre interaction avec la peinture suivante (INP)

L'Interaction to Next Paint (INP) mesure la rapidité avec laquelle votre site réagit à l'entrée de l'utilisateur, par exemple lorsqu'il clique sur un bouton. Un mauvais score d'Interaction to Next Paint indique que votre site réagit lentement à la saisie de l'utilisateur, ce qui peut entraîner des problèmes de convivialité et une mauvaise expérience pour l'utilisateur. 

Vous pouvez améliorer votre interaction avec Next Paint en : 

• Réduire le temps d'exécution de JavaScript
• Spécifier la hauteur et la largeur de vos images
• Utilisation d'un espace réservé pour vos éléments dynamiques
• Charger d'abord les scripts essentiels et différer les scripts non critiques

3 Comment améliorer votre décalage cumulatif de la mise en page (CLS)

Le décalage cumulatif de la mise en page (CLS) mesure les changements de position et de taille des éléments de votre page. Les éléments de votre page se déplacent parfois en réponse à un contenu dynamique tel que des publicités, des éléments intégrés et des iframes. 

Vous pouvez améliorer un mauvais score de décalage cumulatif de la mise en page en procédant comme suit :

• Utilisation d'un espace réservé pour vos éléments dynamiques
• Spécifier la hauteur et la largeur de vos images

L'espace réservé agira comme un espace réservé pour l'élément dynamique. Ainsi, l'élément se chargera dans l'espace qui lui est réservé sans affecter le reste du contenu de la page. Cependant, à moins que vous ne soyez doué pour écrire du code CSS, vous aurez généralement besoin d'un concepteur web versé dans le CSS pour écrire le code nécessaire. 

Vous devez également vous assurer que vos images ont une hauteur et une largeur spécifiées. Si les éléments de hauteur et de largeur manquent à vos images, vous pouvez automatiquement les ajouter en utilisant WP Rocket. 

Pour inclure automatiquement les éléments de hauteur et de largeur dans vos images, rendez-vous à l'adresse suivante Tableau de bord WordPress → Réglages → WP Rocket. Ensuite, sélectionner Médias.

Une fois que c'est fait, naviguez jusqu'au champ Dimensions de l'image et activez l'option Ajouter les dimensions manquantes de l'image option. Cliquez ensuite sur Sauvegarder les modifications. 

4 Comment améliorer votre première peinture de contenu (FCP)

Le First Contentful Paint (FCP) mesure le temps nécessaire au chargement du premier élément de votre page. 

Un mauvais First Contentful Paint n'est pas toujours causé par le serveur web, comme le pensent la plupart des gens. En général, elle est due au thème et aux plugins de votre site ou aux éléments de la page concernée.

Vous pouvez améliorer votre première peinture Contentful en : 

• Utiliser un service d'hébergement rapide
• Utilisation d'un code côté serveur qui réduit les délais
• Compression des fichiers HTML, CSS et JavaScript
• Optimisation et compression des images sur la page
• Minimiser et différer les codes CSS et JavaScript
• Veiller à ce que les ressources critiques, telles que les polices et le contenu au-dessus du pli, se chargent en premier.
• Utilisation de réseaux de diffusion de contenu (CDN) pour distribuer le contenu au plus près des utilisateurs

5 Comment améliorer votre délai de première entrée (DPI)

Le délai de première entrée (DPI) mesure la durée entre le moment où un utilisateur interagit avec un élément d'une page et le moment où la page commence à traiter l'interaction. Un mauvais score pour le délai de première saisie indique que les visiteurs risquent de vivre une mauvaise expérience lorsqu'ils visitent votre site.

Vous pouvez améliorer votre première peinture Contentful en :

• Optimiser et minimiser les fichiers CSS de votre site
• Réduire la quantité de JavaScript à exécuter lors du chargement de la page
• Retarder le chargement des scripts non critiques jusqu'à ce que le contenu principal soit chargé
• Décharger les calculs lourds sur des threads d'arrière-plan
• Optimiser et limiter le nombre de scripts tiers sur le site

6 Comment améliorer votre temps de réponse au premier octet (TTFB)

Le temps de chargement du premier octet (TTFB) mesure la durée entre le moment où un navigateur demande une ressource et le moment où le premier octet de la page commence à se charger.

Un mauvais score pour le temps de réponse au premier octet indique généralement des problèmes de réactivité du serveur, bien qu'il puisse être dû à d'autres facteurs. Parmi les causes les plus courantes, citons

• Surcharge du serveur
• Requêtes de base de données lentes
• Scripts côté serveur inefficaces
• Retards dans le temps de traitement du serveur
• Temps de latence élevé du réseau (retard du réseau)
• Mise en cache inexistante

Vous pouvez améliorer votre temps de réponse au premier octet en procédant comme suit :

• Utilisation de matériel serveur rapide
• Optimiser le logiciel de votre serveur
• Utilisation d'un réseau de diffusion de contenu (CDN)
• Utilisation de stratégies de mise en cache pour stocker et servir rapidement le contenu statique
• Rationalisation des scripts et des processus côté serveur pour réduire le temps de traitement
• Combiner des fichiers et minimiser le nombre de requêtes envoyées au serveur

7 Comment améliorer votre temps de blocage total

Le temps de blocage total mesure la durée pendant laquelle les tâches longues bloquent le fil de discussion. Ces tâches rendent la page insensible et inutilisable jusqu'à la fin de leur chargement. 

Un temps de blocage total élevé est généralement le résultat de la présence de fichiers JavaScript complexes sur le site. Vous pouvez améliorer votre temps de blocage total en.. :

• Minifier vos fichiers JavaScript
• Diviser les gros fichiers JavaScript en petits morceaux
• Différer ou retarder l'exécution de vos fichiers JavaScript
• Optimiser ou différer les scripts de tiers
• Rupture des tâches de longue durée afin que le fil de discussion soit réactif
• Optimiser votre fichier CSS
• S'assurer que votre fichier CSS ne bloque pas le rendu de la page

8 Comment améliorer et optimiser votre fichier JavaScript

Vous avez peut-être remarqué que de nombreuses solutions visant à améliorer la vitesse de vos pages font référence à JavaScript. Plus précisément, il s'agit de différer, de retarder et d'optimiser vos fichiers JavaScript. Heureusement, vous pouvez optimiser vos fichiers JavaScript à l'aide de WP Rocket.

Si vous avez déjà installé WP Rocket, se diriger vers Tableau de bord WordPress → Réglages → WP Rocket. Puis clique Optimisation des fichiers. 

Une fois que c'est fait, descendez jusqu'au champ Fichiers JavaScript et activez l'option Minifier le fichier JavaScript. 

Un message s'affiche, vous informant que l'activation de cette option risque de perturber votre site. Cliquez sur Activer Minify JavaScript.

Ensuite, faites défiler vers le bas et cliquez sur Sauvegarder les modifications. 

Maintenant, allez à l'option WP Rocket sur votre barre d'administration et cliquez sur Effacer et précharger le cache, comme indiqué ci-dessous. 

Noter: Une fois cette opération effectuée, visitez votre page d'accueil et quelques autres pages de votre site pour vérifier qu'elles se chargent et s'affichent correctement. Si vous constatez des irrégularités, désactivez cette option.

Ensuite, activez la fonction Combiner les fichiers JavaScript (activer la fonction Minify JavaScript pour sélectionner les fichiers) option. Une fois que c'est fait, faites défiler vers le bas et cliquez sur Sauvegarder les modifications.

Noter: Visitez votre page d'accueil et quelques autres pages de votre site pour vous assurer qu'elles se chargent et s'affichent correctement. Si vous constatez des irrégularités, désactivez cette option.

Maintenant, faites défiler vers le bas et activez Chargement différé de JavaScript. Si vous souhaitez exclure certains fichiers du report, saisissez-les dans le champ Fichiers JavaScript exclus. 

Ensuite, faites défiler vers le bas et cliquez sur Retarder l'exécution de JavaScript.

Il vous sera présenté pour éviter que certains fichiers JavaScript ne soient retardés.

Sélectionnez les fichiers que vous ne souhaitez pas retarder. Les éléments sélectionnés ne seront pas retardés et se chargeront au moment du chargement de la page. Ensuite, faites défiler la page vers le bas et cliquez sur Sauvegarder les modifications. 

Une fois que vous avez terminé les paramètres JavaScript, retournez dans votre barre d'administration et cliquez sur WP Rocket. Sélectionnez ensuite l'option Effacer les CSS utilisés option. 

Retournez ensuite dans PageSpeed Insights et cliquez sur Analyser pour analyser la page. Vous pouvez voir que le score de performance est actuellement de 66.

Vous constaterez que votre page est désormais plus performante qu'auparavant. Dans ce cas, le score de performance de la page est passé de 69 à 99. 

Voici comment augmenter la vitesse de votre page à l'aide de WP Rocket. WP Rocket est une solution complète et puissante pour optimiser vos Vitaux Web de base, améliorer vos scores PageSpeed Insights et accélérer votre site.

Mieux encore, il s'intègre parfaitement à Rank Math, ce qui vous permet d'optimiser votre SEO tout en offrant à vos visiteurs une expérience utilisateur optimale. Vous pouvez vous référer à cette page pour plus d'informations sur utiliser WP Rocket avec Rank Math.