Google a mis à jour la » PageSpeed Insights », et il est maintenant plus clair que jamais, il existe plusieurs façons et valeurs de mesurer la vitesse de la page. Nous vous expliquerons les mesures les plus importantes et vous montrerons comment optimiser votre site Web.
Plan de l'article
Google lance une mise à jour pour Pagespeed Insights
La vitesse de la page devient de plus en plus importante pour Google. Le géant des moteurs de recherche a commenté sa gestion des sites Web lents plusieurs fois cette année, et les sites Web mobiles en particulier ont été touchés.
A lire en complément : Pourquoi utiliser les outils web à des fins de référencement ?
La nouvelle mise à jour de l’outil interne de test de vitesse d’une page s’inscrit dans cette série d’activités. La cinquième version de Pagespeed Insights est basée sur Lighthouse, un outil d’optimisation de site Web qui est également disponible comme extension du navigateur Chrome. Il utilise également les données de CrUX, le Chrome User Experience Report. À ce stade, il devient clair que Google comprend la vitesse de la page non seulement d’un point de vue technique, mais aussi dans le cadre de l’expérience utilisateur.
Après avoir vérifié la vitesse de votre site Web, vous remarquerez qu’il a été considérablement dégradé. Cela s’explique principalement par le fait que Google consulte maintenant plus de critères pour l’évaluation et utilise la vitesse sur un appareil mobile avec une bande passante moyenne comme base pour son évaluation initiale.
A lire en complément : Quels sont les avantages du métier de rédacteur web ?
Si vous n’êtes pas habitué à l’affichage de Lighthouse, vous remarquerez également que Pagespeed Insights affiche désormais cinq lectures de vitesse différentes. Si cela ne prête pas suffisamment à confusion, il omet également une valeur de mesure importante, qui est traditionnellement l’un des ratios les plus importants.
Dans cet article, nous expliquons les valeurs de mesure les plus importantes de Pagespeed Insights et d’autres outils de test de vitesse de page. Nous donnons également des conseils sur la façon d’améliorer ces mesures grâce à l’optimisation du site Web.
Les 4 lectures de vitesse de page les plus importantes
Qu’est-ce que la vitesse de page ? La vitesse de la page indique essentiellement la période qui s’écoule entre le moment où un site Web est appelé et le moment où il est rendu et prêt à être saisi dans le navigateur. Pendant ce temps, plusieurs processus complexes se déroulent, dont la durée dépend de certains facteurs. Pour les déterminer et les optimiser, des valeurs de mesure supplémentaires sont utiles.
Top 4 des mesures par ordre chronologique :
- La TTFB : Temps écoulé entre l’appel du site Web et le premier octet chargé par le serveur Web.
- La FCP : L’heure à laquelle un élément d’affichage est affiché pour la première fois dans le navigateur.
- La FMP : L’heure à laquelle l’utilisateur perçoit le site Web à charger.
- La TTI : L’heure à laquelle le site Web a été rendu et est prêt à être saisi par l’utilisateur.
TTFB – Temps jusqu’au premier octet
Le temps du premier octet mesure la période de temps qui commence avec l’appel au site Web et se termine avec le premier octet reçu du serveur Web. Dans le contexte des autres mesures présentées, la TTFB est une exception car elle mesure la demande d’un site Web seulement et non sa représentation.
Dans l’outil Succès du site Web de Ryte, la durée du premier octet est affichée dans le rapport de performance. Ryte affiche également une valeur de mesure supplémentaire : séparément, qui est considérée comme faisant partie de la TTFB. Ceci est également considéré comme faisant partie de la TTFB.
Qu’est-ce qui influence la TTFB ?
Le temps de connexion est important car il peut montrer les premiers facteurs d’une vitesse de page lente. Pour que la connexion au serveur Web soit réussie, 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 ensuite l’adresse IP pour se connecter au serveur web via différents routeurs sur Internet. Selon l’emplacement et la connexion réseau, cette connexion contient des latences qui provoquent un retard dans la transmission.
Si vous utilisez un certificat SSL (et vous devriez !), et que la requête passe par HTTPS, le handshake 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 requête via le protocole HTTP. Le logiciel du serveur Web traite maintenant cette requête. La performance de ce logiciel et l’utilisation du matériel du serveur sont décisives pour le temps de traitement.
Comment optimiser l’utilisation de la TTFB ?
Pour réduire le temps de connexion, le chemin vers la résolution du domaine peut être optimisé. Le serveur de nom Google avec l’adresse IP « 2.2.2.2.2 » est toujours populaire, tout comme le « 1.1.1.1.1 » de Cloudflare. Mais vous pouvez clarifier cela avec votre fournisseur de domaine, qui peut vous aider. S’il est particulièrement important pour vous de rendre votre site Web accessible dans le monde entier, dans les mêmes et bonnes conditions, alors vous pouvez utiliser un réseau de diffusion de contenu, en abrégé CDN.
Un CDN peut réduire la latence entre l’utilisateur et le serveur web. Le contenu des pages Web qui peut être stocké dans un cache est mis en cache dans le CDN et peut donc être consulté plus rapidement. Certains CDN offrent des fonctions qui permettent de récupérer le contenu dynamique plus vite, puisque les latences sont optimisées par le routage au sein du CDN. Notre conseil : les sites Web et les boutiques en ligne dans d’autres pays occidentaux comme la Suisse n’utilisent pas toujours un CDN de conception mondiale. Ici, vous pouvez facilement économiser de l’argent sans perdre la qualité.
Si le temps nécessaire au premier octet augmente malgré des latences optimisées, cela peut être dû à un goulot d’étranglement dans l’infrastructure informatique ou à un serveur web généralement surchargé. Dans ce cas, vous devez contacter votre administrateur système ou votre hébergeur. Le changement du logiciel du serveur Web peut également avoir un effet positif sur la TTFB.
- Clarifiez l’utilisation de meilleurs serveurs DNS avec le fournisseur de domaine.
- Utilisez un CDN (uniquement) si le site Web a une audience mondiale.
- Personnalisez l’hébergement lorsque le matériel atteint ses limites.
La FCP
Après le premier octet, toutes les autres données du site Web suivent, y compris le code HTML, les feuilles de style et les fichiers script, les polices et les fichiers multimédia, tels que les images et les vidéos. La FCP mesure le moment auquel le navigateur est capable de rendre un élément de page à l’écran pour la première fois. C’est important pour l’utilisateur car il reçoit des commentaires positifs sur le fait que le site Web est effectivement chargé.
Dans Pagespeed Insights, la FCP forme la première mesure au lieu de la TTFB. C’est logique pour l’outil Google car il est destiné aux développeurs et propose principalement des mesures d’optimisation OnPage.
Qu’est-ce qui peut retarder la FCP ?
Le volume de téléchargement du site Web est important pour un affichage rapide dans le navigateur. Plus cette taille est importante, plus la transmission prend du temps. En plus de la latence, le code source non compressé gonflé de commentaires et de grandes bibliothèques de scripts peut également augmenter le temps de transmission et donc ralentir la vitesse de la page. Bien que la bande passante n’ait aucune influence sur la latence, elle est décisive pour la vitesse de transmission et devient de plus en plus importante avec l’augmentation de la taille du site.
Les fichiers de script sont divisés en CSS et JavaScript : CSS est responsable de l’affichage des éléments HTML dans le navigateur, de sorte que le navigateur bloque le rendu du site Web jusqu’à ce que le CSS soit entièrement chargé, JavaScript est nécessaire pour la fonctionnalité et le contrôle interactif du site Web du côté de l’utilisateur. L’affichage du site Web ne commence pas avant que le démarrage JavaScript n’ait eu lieu.
- Code non compressé.
- Grandes bibliothèques CSS et JavaScript.
Optimisation du site Web pour le PCF
Un transfert rapide et structuré des données du site Web du serveur Web au navigateur est important. Afin de maintenir le volume de téléchargement à un faible niveau, les données peuvent être compressées par GZIP ou Brotli. HTTP/2 (aussi appelé H2) peut être activé dans le serveur web pour une transmission plus rapide et des téléchargements en parallèle grâce à des connexions permanentes. La condition préalable est un certificat SSL, mais comme déjà mentionné, vous devriez quand même l’utiliser. En attendant, ils sont même gratuits avec « Let’s Encrypt ». Veuillez contacter votre hébergeur ou l’administrateur système si le changement est possible :
- Compressez les données ;
- activez HTTP/2 ;
- déterminez par la mise en cache quel contenu n’a pas besoin d’être rechargé ;
- minimisez le code, configurer le CSS pour les fenêtres d’affichage, purifier les bibliothèques.
Pour ne pas avoir à demander à nouveau tout le contenu du serveur Web lorsque vous rechargez un site Web ou chargez une page secondaire avec un contenu similaire, vous pouvez utiliser une mise en cache HTTP intelligente pour déterminer combien de temps certains éléments doivent être mis en cache sur l’ordinateur de l’utilisateur.
En spécifiant des fichiers CSS pour certaines vues, vous pouvez réduire 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 vous avez vraiment besoin, et non le contenu complet.
La FMP
Dès que tout le contenu de la page pour la position actuelle de la fenêtre d’affichage a été chargé, l’utilisateur a l’impression que la page a été chargée. Bien que les éléments interactifs ne soient pas encore chargés et que les autres éléments « sous le pli » ne doivent pas encore être disponibles, le processus de chargement pour l’utilisateur est terminé ici.
La transition de la FCP à la FMP est clairement visible dans la capture d’écran du site Web, qui est affichée sous les valeurs mesurées. Visuellement, rien ne change ici avant « Time To Interactive ». C’est pourquoi l’optimisation de la FMP est d’autant plus importante.
Influences négatives sur la FMP
Outre le code source et les fichiers script, les fichiers multimédia sont également transférés. Les images représentent près de la moitié du volume de téléchargement d’un site web moderne, plus pour les boutiques en ligne. Par conséquent, un nombre élevé d’images à haute résolution peut ralentir énormément la vitesse de la page.
Cela a un effet sur la FMP, car l’affichage de ces images est décisif pour la perception perçue du site Web chargé fini. La première peinture utile peut être rallongée inutilement, en particulier dans les aperçus de produits où de nombreuses images ne sont visibles par l’utilisateur qu’après le défilement.
L’optimisation de l’image est la clé de la FMP
Afin d’aligner l’optimisation du site Web avec les besoins de l’utilisateur, l’optimisation de l’image est essentielle. Dans « Ryte Magazine » par exemple, vous pouvez lire comment optimiser les images dans le processus de création. Pour les boutiques en ligne avec des milliers d’images de produits et des pages web avec de nombreux contenus éditoriaux, cela peut cependant devenir très complexe. Le problème peut être résolu par l’optimisation automatique des images.
Pour les aperçus de produits et autres sites Web qui n’affichent pas de nombreuses images qu’après le défilement, nous recommandons une intégration dynamique par le biais d’un chargement paresseux. Cela signifie que les images ne sont demandées par le serveur que lorsqu’elles doivent effectivement être sorties sur la fenêtre d’affichage. Entre-temps, des espaces réservés et des indicateurs de progression sont affichés pour que la mise en page ne soit pas modifiée et que l’utilisateur remarque que les images sont en cours de chargement. Avec l’outil « wao.io Lazy Loading », cela peut être configuré automatiquement pour les sites Web.
- Optimisation manuelle ou automatique des images.
- « Lazy Loading » pour les sites web avec beaucoup d’images.
TTI – Le temps de l’interactivité
La dernière mesure de cette série est lorsque le site Web est chargé et prêt à interagir. La plupart des tests de vitesse de page utilisent cette valeur comme base d’analyse.
Si vous avez pris en compte tous les problèmes décrits et mis en œuvre les mesures correspondantes, en particulier celles de la FCP et de la FMP, alors vous êtes également prêt pour une bonne valeur TTI.
Conclusion
Nous avons comparé les 4 premières valeurs mesurées pour déterminer la vitesse de la page et montré les bloqueurs de performance ainsi que les solutions possibles pour l’optimisation. Il s’est avéré que la vitesse de page ne peut pas seulement être mesurée comme une valeur. Les stations de mesure, de l’appel de la page jusqu’au site Web fini, ont chacune leur propre signification pour l’être humain et la machine.
