La vitesse de la page est mesurée correctement

La vitesse de la page est mesurée correctement

Google a mis à jour PageSpeed ​​Insights, précisant qu'il existe plusieurs chemins et différentes valeurs pour mesurer la vitesse de la page. Nous vous expliquerons les métriques les plus importantes et vous montrerons comment cibler l'optimisation du site.

Google publie une mise à jour pour Pagespeed Insights

Pour Google, la vitesse de la page devient plus importante. À plusieurs reprises, le géant des moteurs de recherche a commenté cette année sa gestion des sites Web lents, en particulier des sites mobiles. C’est remarquable en ce que le dernier message officiel de Google sur le sujet date de 2010.

Cette série d'activités correspond à la mise à jour renouvelée de l'outil interne pour le test de vitesse de page. La cinquième version de Pagespeed Insights est basée sur Lighthouse, un outil d’optimisation de sites Web également disponible en tant qu’extension du navigateur Chrome. Il utilise également les données de CrUX, le rapport sur l'expérience utilisateur de Chrome. À ce stade, cela devient clair: Google comprend Page Speed, non seulement d’un point de vue technique, mais aussi dans le cadre de l'expérience utilisateur,

Après la vérification rapide de votre site Web, vous remarquerez sûrement qu'il a été considérablement dégradé dans le résultat. Ceci est principalement dû au fait que Google examine maintenant beaucoup plus de critères d'évaluation et utilise la vitesse sur un appareil mobile à bande passante moyenne pour son évaluation initiale.

Si vous n'êtes pas habitué à la vue de Lighthouse, vous remarquerez également que Pagespeed Insights génère désormais cinq métriques de vitesse de page différentes. Et comme si cela ne prêtait pas à confusion: cela laisse également de côté une lecture importante, traditionnellement l’un des paramètres clés.

Dans cet article, nous voudrions expliquer les lectures les plus importantes de Pagespeed Insights et d’autres outils de test de vitesse de page. Nous donnons également des conseils sur la manière d’améliorer ces indicateurs grâce à l’optimisation du site Web.

Les 4 lectures les plus importantes de la vitesse de la page

Quelle est la vitesse de la page? Dans l’ensemble, nous entendons le temps qu’il faut pour passer d’un site Web au point où il termine son rendu et est prêt à être saisi dans le navigateur. Au cours de cette période, plusieurs processus complexes ont lieu dont la durée dépend de certains facteurs. Pour les identifier et les optimiser, des lectures supplémentaires sont utiles.

Notre top 4 de ces mesures dans l'ordre chronologique:

  • Temps au premier octet (TTFB): Délai entre l'appel du site Web et le premier octet chargé par le serveur Web.
  • Première peinture au contenu (FCP): Heure à laquelle le navigateur affiche un élément de présentation pour la première fois.
  • Première peinture significative (FMP): Heure à laquelle l'utilisateur estime que le site Web est chargé.
  • Time to Interactive (TTI): Heure à laquelle le site est rendu et prêt pour la saisie de l'utilisateur.

Page_Speed_Mess Stations Page Speed

Figure 1: Page Stations de mesure de la vitesse après l'appel du site Web © wao.io

TTFB – Heure du premier octet

L'octet Time to First mesure le temps qui commence lorsque le site Web est appelé et se termine avec le premier octet reçu du serveur Web. Dans le contexte des autres mesures présentées, le TTFB constitue une exception, car il mesure la demande d'un site Web, pas sa présentation.

Dans l'outil Succès du site par SEO Expertise le temps jusqu'au premier octet est affiché dans le rapport de performances. Il est particulièrement intéressant que SEO Expertise présente séparément une lecture supplémentaire qui est considérée comme faisant partie du TTFB: le temps de connexion entre la machine de l'utilisateur et le serveur Web.

vitesse de la page

Figure 2: Le rapport de performance de SEO Expertise

Cela affecte le temps de premier octet

Le temps de connexion est tellement important qu’il est possible de masquer les premiers facteurs de lenteur d’une page. Pour vous connecter avec succès au serveur Web, son adresse IP doit être déterminée via le domaine. Cela se fait en résolvant le nom de domaine via le serveur DNS jusqu'à ce que l'adresse IP soit trouvée. Le navigateur utilise maintenant l'adresse IP pour se connecter au serveur Web via divers routeurs sur Internet. Selon l'emplacement et la connexion réseau, cette connexion contient des latences qui entraînent un retard de transmission.

Si vous utilisez un certificat SSL – et vous devriez! – et la demande via HTTPS est en cours d'exécution, puis l'établissement de la liaison SSL a lieu, après quoi la connexion cryptée sécurisée est établie. Si l'ordinateur est connecté au serveur Web, le navigateur envoie une demande via le protocole HTTP. Le logiciel du serveur Web gère maintenant le traitement de cette demande. Les performances de ce logiciel et la charge du matériel du serveur sont déterminantes pour le temps de traitement.

  • Hautes latences dans la configuration de la connexion
  • Ralentissement du matériel et des logiciels du serveur Web

Donc, vous optimisez pour le TTFB

Pour réduire le temps de connexion, la façon de résoudre le domaine peut être optimisée. Le serveur de noms de Google avec l'adresse IP "2.2.2.2" ou "1.1.1.1" de Cloudflare est toujours populaire ici. Mais vous pouvez clarifier cela avec votre fournisseur de domaine, qui peut vous aider avec cela. S'il est particulièrement important pour vous de rendre votre site Web accessible dans le monde entier dans des conditions identiques, vous pouvez utiliser un réseau de diffusion de contenu (Content Delivery Network) ou CDN.

Un CDN peut réduire le temps de latence entre l'utilisateur et le serveur Web. Le contenu des pages Web pouvant être mis en cache est mis en cache dans le CDN pour un accès plus rapide. Certains CDN offrent des fonctionnalités qui rendent le contenu dynamique plus rapide, les latences étant optimisées grâce au routage dans le CDN. Notre conseil: Les sites Web et les boutiques en ligne d'Allemagne, d'Autriche et de Suisse ne bénéficient généralement pas d'un CDN mondial. Il est facile d'économiser de l'argent sans sacrifier la qualité.

Si le délai jusqu'au premier octet augmente malgré des temps de latence optimisés, cela peut être dû à un goulot d'étranglement dans l'infrastructure informatique ou à un serveur Web généralement surchargé. Veuillez contacter vos administrateurs système ou votre hébergeur. Changer le logiciel du serveur Web peut également avoir un effet positif sur le TTFB.

  • Clarifier l'utilisation de meilleurs serveurs DNS avec le fournisseur de domaine
  • Utilisez un CDN (uniquement) si le site Web a une audience mondiale.
  • Adapter l'hébergement lorsque le matériel atteint ses limites

FCP – Première peinture au contenu

Le premier octet est suivi de toutes les autres données du site Web, y compris le code HTML, les feuilles de style et les fichiers de script, les polices et principalement les fichiers multimédias tels que les images et les vidéos. First Contentful Paint mesure le moment où le navigateur est capable de restituer un élément de page à l'écran. Ceci est important pour l'utilisateur car il reçoit les commentaires positifs que le site Web est en train de charger.

Dans Pagespeed Insights, First Contentful Paint se cache derrière la traduction allemande gratuite "First Content Drawn" et constitue le premier poste de mesure, au lieu du TTFB. Pour l'outil Google, cela a du sens, car il devrait s'adresser aux développeurs et propose principalement des mesures d'optimisation OnPage.

TTFB1 Vitesse de page

Figure 3: Capture d'écran de Pagespeed Insights (Données de laboratoire)

Que peut retarder First Contentful Paint?

Le volume de téléchargement du site Web est important pour l'affichage rapide dans le navigateur. Plus cela est grand, plus la transmission prend du temps. En plus de la latence, le code source non compressé avec commentaires et les bibliothèques de scripts volumineuses peuvent prolonger le temps de transfert et ralentir la vitesse de la page. Bien que la bande passante n'ait pas d'incidence sur le temps de latence, elle est cruciale pour la rapidité du transfert et le devient d'autant plus que la taille du site Web augmente.

Les fichiers de script sont divisés en CSS et JavaScript. CSS est responsable de l'affichage des éléments HTML dans le navigateur. Il bloque donc le rendu du site Web jusqu'à ce que le fichier CSS soit complètement chargé. JavaScript est nécessaire pour la fonctionnalité et le contrôle interactif du site Web du côté de l'utilisateur. La présentation du site Web ne commence pas tant que le démarrage de JavaScript n’a pas eu lieu.

  • Code non compressé
  • Grandes bibliothèques CSS et JavaScript

Optimisation du site pour le FCP

L'important est un transfert rapide et structuré des données de site Web du serveur Web vers le navigateur. Afin de maintenir le volume de téléchargement bas, les données peuvent être compressées par GZIP ou Brotli. Pour une transmission plus rapide et des téléchargements en parallèle grâce aux connexions persistantes, HTTP / 2 (également appelé H2) peut être activé sur le serveur Web. La condition préalable est un certificat SSL, mais vous devriez, comme déjà mentionné, utiliser quand même. En attendant, ils sont même gratuits avec Let's Encrypt. Veuillez contacter votre hébergeur ou l'administrateur système à nouveau si le changement est possible.

Pour que tout le contenu ne doive pas être redemandé au serveur Web lors du rechargement du site Web ou du chargement d'une sous-page ayant un contenu similaire, vous pouvez utiliser la mise en cache HTTP intelligente pour déterminer la durée de mise en cache de certains éléments sur l'ordinateur de l'utilisateur.

La définition de fichiers CSS pour des fenêtres spécifiques réduit le bloc de rendu à ces fichiers CSS spécifiés. Les bibliothèques JavaScript et CSS peuvent souvent être personnalisées pour ne télécharger que le contenu dont elles ont besoin, et non leur étendue.

  • Compresser les données
  • Activer HTTP / 2
  • La mise en cache détermine quel contenu n'a pas besoin d'être rechargé
  • Réduire le code, configurer CSS pour les fenêtres, purger les bibliothèques

FMP – Première peinture significative

Une fois que tout le contenu de la page a été chargé pour la position actuelle de la fenêtre d'affichage, la page est considérée comme chargée pour l'utilisateur. Comme déjà décrit dans le magazine SEO Expertise, il s'agit d'une étape importante. Bien que les éléments interactifs ne soient pas encore chargés et que les autres éléments situés au-dessous du pli ne soient pas encore disponibles, l'utilisateur a fini de les charger.

Dans Pagespeed Insights, le PGF est décrit comme un "contenu largement dessiné". La capture d'écran du site affichée sous les statistiques montre clairement la transition de la première peinture avec contenu vers la première peinture utile. Visuellement, rien ne change jusqu'à Time To Interactive. L'optimisation sur le FMP est d'autant plus importante.

Influences négatives sur la première peinture significative

Outre le code source et les fichiers de script, des fichiers multimédia sont notamment transmis. Les images représentent près de la moitié du volume de téléchargement sur un site Web moderne. Les boutiques en ligne sont beaucoup plus. En conséquence, un nombre élevé d'images haute résolution peut considérablement ralentir la vitesse de la page.

Cela affecte la première peinture significative, car l'affichage de ces images est crucial pour la perception perçue du site Web chargé. En particulier dans le cas des aperçus de produits, où de nombreuses images ne sont en réalité visibles que par l'utilisateur après le défilement, la première peinture utile peut être étirée inutilement.

L’optimisation des images est la clé de FMP

Afin d’aligner l’optimisation du site Web sur les besoins de l’utilisateur, l’optimisation de l’image est essentielle. Dans SEO Expertise Magazine, vous pouvez lire comment optimiser les images dans le processus de création. Cela peut s'avérer très coûteux pour les boutiques en ligne proposant des milliers d'images de produits et de sites Web comportant de nombreux contenus éditoriaux. Le problème peut donc être mieux résolu par une optimisation d'image automatisée.

Pour les aperçus de produits et les autres sites Web qui affichent de nombreuses images uniquement après le défilement, nous recommandons une intégration dynamique via un chargement paresseux. Par conséquent, les images ne sont pas demandées par le serveur tant qu'elles ne sont pas sorties dans la fenêtre d'affichage. Entre-temps, les espaces réservés et les écrans de progression sont générés de sorte que la disposition ne soit pas modifiée et que l'utilisateur puisse voir que les images sont en cours de chargement. Avec l'outil de wao.io, le chargement paresseux peut être configuré automatiquement pour les sites Web.

wao-lazyloading Page Speed

Figure 4: Capture d'écran de wao.io avec la personnalisation de Lazy Loading

  • Optimisation d'image manuelle ou automatisée
  • Chargement paresseux pour les sites Web contenant de nombreuses images

TTI – Time To Interactive

La dernière mesure de cette série est le moment où le site est prêt à être chargé et prêt pour l’interaction. La plupart des tests de vitesse de page prennent cette valeur comme base de leur analyse.

Si vous avez suivi tous les problèmes décrits et mis en œuvre les mesures appropriées, en particulier pour la première peinture contenant du contenu et la première peinture utile, vous êtes également prêt pour une valeur TTI satisfaisante.

conclusion

Nous avons comparé les 4 valeurs les plus élevées pour déterminer la vitesse de la page et avons montré à la fois les bloqueurs de performances et les solutions possibles pour l'optimisation. Il s'avère que la vitesse de la page ne peut pas être mesurée simplement comme une valeur. Les stations de mesure, de la page vue au site Web fini, ont chacune leur propre signification pour l’homme et la machine.

    Nous résumons ici les principales conclusions concernant les valeurs de mesure présentées:

    Heure du premier octet:

    ✓ Mesure importante pour identifier les problèmes dans le processus côté serveur
    ✓ Déterminer la latence et éliminer les goulots d'étranglement

    Première peinture de contentement:

    ✓ L'utilisateur reconnaît que le site Web est en cours de chargement, le taux de rebond baisse
    ✓ Utilisez la mise en cache, ne chargez que ce qui est nécessaire

    Première peinture significative:

    ✓ L'utilisateur a des commentaires que le site Web a été chargé
    ✓ L’optimisation des images et le chargement paresseux font apparaître le pli supérieur plus tôt

    Temps d'interactivité:

    ✓ La lecture la plus importante dans la plupart des tests de vitesse de page: le site Web est prêt à entrer
    ✓ L'optimisation n'est pas une action ponctuelle mais un processus permanent

Dirigeant SEO SEA Expertise

Si vous avez des craintes avant de vous lancer dans un projet de communication ou de marketing digitale ou si vous vous posez encore beaucoup de questions sur la meilleure manière de procéder, contactez-moi. Je serai ravi de répondre à vos questions.