Comment analyser les résultats de Google PageSpeed ​​Insights

Alors que Google va donner un coup de pouce au classement des sites Web rapides, vous souhaitez probablement en savoir plus sur les informations Google PageSpeed ?

…Et je ne suis pas surpris car c'est déroutant !

Cet article vous aidera.

Pourquoi la vitesse des pages du site Web est-elle importante ?

Google souhaite offrir la meilleure expérience utilisateur possible aux utilisateurs.

Si votre site Web est lent, cela frustrera les utilisateurs et créera une mauvaise expérience utilisateur. C'est aussi simple que ça. La performance a un impact sur l'expérience.

Google a récemment annoncé que les éléments vitaux Web de base seront utilisés dans le cadre de son algorithme de classement en 2021. Ces éléments vitaux Web de base sont des indicateurs de vitesse et de la rapidité avec laquelle les gens peuvent interagir avec votre page.

Fondamentalement, pour ce tableau ci-dessous, vous ne pouvez pas être "rouge"

Qu'est-ce que Google PageSpeed Insights ?

Il s'agit d'un outil gratuit fourni par Google qui vous permet de saisir l'URL d'une page Web et d'exécuter rapidement un test pour vérifier les différentes mesures liées aux performances.

L'outil attribue alors à votre page un score allant de 0 à 100 points. Le score n'est pas vraiment une question de vitesse. Vous pouvez obtenir un score amélioré si vous avez utilisé les recommandations typiques de Google concernant l'amélioration de la vitesse.

Il vous montre également les paramètres exacts qui ralentissent votre page ainsi que des suggestions pour l'améliorer.

C'est là que les choses deviennent techniques et les résultats un peu difficiles à comprendre.

Comment interprétez-vous les résultats ?

La première chose que vous voyez après avoir exécuté un test est le score de performance (desktop et mobile) de la page analysée.

Ce sera un nombre compris entre 0 et 100.

• 0 à 49 - C'est mauvais, vous ne voulez pas que votre score soit de 49 ou moins
• 50 à 89 - C'est correct mais il y a place à l'amélioration
• 90 à 100 - Si vous êtes dans cette échelle, vous êtes dans les bons livres.

En faisant défiler vers le bas, vous verrez ce qui cause un score élevé ou faible :

Remarque : Voir les indicateurs de couleur avant chaque section :

• Vert signifie rapide
• Orange signifie modéré
• Rouge signifie lent

Voici ce que chacune de ces sections signifie :

Première peinture contentful

Il s'agit du temps qu'il faut entre la navigation vers une page du navigateur et le moment où le contenu commence à s'afficher.

Fondamentalement, c'est un indicateur que la page commence à se charger.

Par exemple, il peut s'agir simplement d'un changement de couleur qui est la couleur de fond de la page, une image affichée ou un morceau de texte.

Ceci est important car lorsqu'un utilisateur voit une action, il est plus susceptible d'attendre que la page soit complètement chargée.

Ligne directrice:

Temps d'interactivité

Ce paramètre montre à quelle vitesse une page devient interactive.

Cela signifie qu'une page affiche suffisamment d'éléments à l'écran pour que les utilisateurs puissent réellement interagir avec, par exemple en cliquant sur un bouton de menu.

Parfois, les sites Web peuvent se concentrer sur la visibilité, c'est-à-dire tout afficher avant de pouvoir interagir avec le contenu, ce qui peut être frustrant pour l'utilisateur.

Ligne directrice:

Temps total de blocage

Il existe un écart entre le moment où le visiteur de votre site Web voit le contenu à l'écran et le moment où il peut interagir avec celui-ci.

C'est le temps total de blocage !

Il est bon de savoir si les gens ne peuvent pas faire des choses comme un clic de souris, des tapotements sur l'écran ou des pressions sur des mots clés avant que le site Web ne soit interactif.

Les tâches longues sont des tâches qui vous bloquent plus de 50ms.

Tout ce qui dépasse 50 ms est considéré comme un temps de blocage.

S'il n'y a pas de longues tâches, vous verrez 0 temps de blocage, ce que vous voyez dans les statistiques ci-dessus.

Changement de mise en page cumulé

Un changement de disposition se produit lorsqu'un élément visuel s'affiche à l'écran mais se déplace ensuite.

Ainsi, par exemple, vous lisez les actualités et il y a un changement de mise en page, de sorte que l'emplacement de l'article d'actualité a changé.

Il s'agit d'un comportement inattendu du point de vue de l'utilisateur.

Plus le score est élevé, pire c'est.

Indice de vitesse

C'est difficile à comprendre mais précieux.

Imaginez donc 2 sites Web qui se chargent tous les deux en 1,5 seconde.

Si vous parcouriez les 2 sites Web présentés dans l'image ci-dessus, lequel se chargerait le plus rapidement ?

Les deux ont été entièrement chargés en 1,5 seconde, mais comme le premier site a commencé à afficher certains éléments plus tôt, il a semblé être plus rapide pour l'utilisateur.

Si vous mesurez juste le temps de chargement, ils sont les mêmes.

L'indice de vitesse est un score calculé en fonction de la "rapidité" d'un chargement complet d'un site Web.

Un enregistrement vidéo du chargement est utilisé pour montrer visuellement quand les bits sont chargés.

À divers intervalles, la quantité de contenu visible à l'écran (au-dessus du pli) est comparée au contenu affiché sur un site Web entièrement chargé pour déterminer le pourcentage de contenu affiché pour ce moment particulier.

Ce processus est répété plusieurs fois.

Le temps est uniquement basé sur ce que l'utilisateur peut voir sur l'écran (le viewport). Peu importe ce qui se trouve sous le pli.

Donc… c'est bien d'essayer avec différentes fenêtres.

Si vous avez 2 sites Web et que l'un affiche des éléments visuels avant l'autre, il se retrouvera avec un indice de vitesse inférieur.

Plus c'est bas, mieux c'est.

La plus grande peinture contente

C'est le temps qu'il faut pour que le plus grand élément de la page soit entièrement rendu.

Au fur et à mesure que la page se charge, le premier élément devient l'élément le plus grand, mais il est remplacé au fur et à mesure que des éléments plus grands sont ajoutés.

Le dernier élément d'une page peut être le plus grand élément de la page (par exemple une grande image) ou ne pas l'être.

Remarque : nous ne parlons pas de l'espace qu'il occupe sur l'écran.

Voici 2 exemples.

Le temps entre le moment où le site Web a commencé à s'afficher et le moment où la dernière image de la page a été affichée serait considéré comme la plus grande peinture de contenu. C'est parce que l'image prend le plus de place sur la page !

Mais…

Dans le cas ci-dessous, l'image "Instagram" était la plus grande image affichée, donc la plus grande peinture de contenu est lorsque l'avant-dernier écran a été chargé.

Le dernier écran est à prix réduit. Tout ce qui a été ajouté à cet écran était le "bouton de lecture Google", qui était une image plus petite que celle "Instagram".

Selon Google, si vous souhaitez offrir une bonne expérience utilisateur, LCP doit se produire dans les 2,5 secondes suivant le premier chargement de la page.

Ligne directrice:

Opportunités

La section Opportunités vous montre les suggestions qui pourraient aider à améliorer le temps de chargement des pages.

Chaque suggestion vous indique également une estimation de la réduction du temps de chargement de la page si vous avez mis en œuvre la recommandation.

Diagnostique

Les diagnostics mettent en évidence les meilleures pratiques en matière de développement Web que vous devriez envisager de mettre en œuvre.

Cependant, même si vous apportez ces améliorations, elles n'auront pas d'impact direct sur le score de performance de votre page.

Sommaire

Améliorer la vitesse de votre site Web consiste à offrir aux visiteurs une meilleure expérience. Avoir un site qui se charge rapidement rend les utilisateurs et les moteurs de recherche plus heureux, mais cela a également un impact sur votre capacité à convertir les visiteurs en clients.

Un outil comme Google PageSpeed ​​Insights est incroyablement utile car il vous montre par où commencer et sur quels problèmes vous concentrer pour améliorer les performances de votre site Web.

J'espère que cet article vous a aidé à comprendre le fonctionnement de cet outil et la signification réelle des résultats du test afin que vous puissiez commencer à optimiser vos pages Web pour créer une expérience incroyable pour vos visiteurs.