Retour sur test de vitesse de chargement

Rodrigoal · 23 Août 2023

Bonjour,

Je souhaiterais avoir des conseils sur la façon d'interpréter certains résultats :

https://gtmetrix.com/reports/www.vindeter.com/9trWBmqx/

https://www.webpagetest.org/result/230823_BiDcFH_8B9/1/experiments/#Quick

J'aimerais améliorer la vitesse de chargement de mon site mais j'ai du mal à comprendre les résultats de ces tests.

Merci d'avance pour votre aide.

Madrileño · 23 Août 2023

Bonjour,

Les outils vous indiquent les points à améliorer. Un site lent, n'aide pas à naviguer et n'aide donc pas l'utilisateur, surtout qu'aujourd'hui beaucoup d'utilisateurs des sites naviguent avec un mobile, c'est pour cette raison aussi que la vitesse est importante de nos jours.). Par exemple pour GTMetrix, celui-ci présente des informations sur : FCP/LCP/TBT/CLS.

Les acronymes :
- FCP : First Contentful Paint
- LCP : Largest Contentful Paint
- TBT : Total Blocking Time
- CLS : Cumulative Layout Shift

Pour mieux comprendre :

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements. In the above load timeline, FCP happens in the second frame, as that's when the first text and image elements are rendered to the screen. You'll notice that though some of the content has rendered, not all of it has rendered. This is an important distinction to make between First Contentful Paint (FCP) and Largest Contentful Paint (LCP) —which aims to measure when the page's main contents have finished loading.

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. The main thread is considered "blocked" any time there's a Long Task—a task that runs on the main thread for more than 50 milliseconds (ms). We say the main thread is "blocked" because the browser cannot interrupt a task that's in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond. If the task is long enough (anything above 50 ms), it's likely that the user will notice the delay and perceive the page as sluggish or janky. The blocking time of a given long task is its duration in excess of 50 ms. And the total blocking time for a page is the sum of the blocking time for each long task that occurs between FCP and TTI.

The Cumulative Layout Shift (CLS) is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. (See below for details on how individual layout shift scores are calculated.) A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration. The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

Source : web.dev

Suivant les outils, les calculs peuvent être différents et les résultats peuvent varier certaines fois. Si par exemple vous réalisez un test maintenant et dans 10 minutes, il se peut qu'il y ai quelques décalages concernant les notes, mais habituellement c'est stable. C'est bien de le préciser, puisque certaines fois il peut y avoir des différences. Quand c'est peu c'est normal, par contre si vous remarquez plusieurs secondes de différences, ce n'est pas normal et il faut vérifier s'il n'y a pas un autre problème avec le site.

Quand il y a un problème de site plus lent entre deux tests, c'est souvent le cache du site qui n'est pas activé ou qui c'est désactivé pendant certains tests. C'est vite corrigé en vidant le cache correctement ou en réactivant l'option (souvent des plugins sur WordPress - d'ailleurs vous utilisez vous-même "WP Fastest Cache", un plugin populaire de gestion du cache des pages).

On peut d'ailleurs citer la description du plugin "WP Fastest Cache" qui décrit bien son usage.

When a page is rendered, php and mysql are used. Therefore, system needs RAM and CPU. If many visitors come to a site, system uses lots of RAM and CPU so page is rendered so slowly. In this case, you need a cache system not to render page again and again. Cache system generates a static html file and saves. Other users reach to static html page. In addition, the site speed is used in Google’s search ranking algorithm so cache plugins that can improve your page load time will also improve your SEO ranking. Setup of this plugin is so easy. You don’t need to modify the .htacces file. It will be modified automatically. WP Fastest Cache is not only a wp cache plugin but also a speed optimization wordpress cache plugin.

Il faut aussi penser lorsque vous optimiserez le code, de toujours bien vérifier que tout est bien fait et réaliser plusieurs tests. Il arrive souvent d'avoir des corrections à faire après les corrections à cause d'un bug ou d'un oubli de code.

Il ne faut pas aussi oublier que vous avez présenté des tests concernant la page d'accueil du site. C'est bien, mais il ne faut pas aussi oublier de penser aux autres pages du site web actuel et donc à améliorer aussi celles-ci avec des améliorations identiques ou en même temps. Ainsi, vous pourrez gagner du temps et si vous réalisez des optimisations sur l'ensemble des pages en une fois, c'est moins long aussi et vous pourrez passer plus de temps à optimiser les autres éléments qui concernent le référencement naturel.

Concernant votre page d'accueil, voici quelques exemples de problèmes via GTMetrix :
- Des problèmes de redirections multiples (http > https www > https) (FCP/LCP)
- Des problèmes de lenteurs avec les fichiers utilisés par le site (FCP/LCP)
- Des problèmes avec des fichiers qui bloquent le rendu (FCP/LCP)
- Des problèmes de CSS qui ne sont pas utilisés sur la page (FCP/LCP)
- Des problèmes d'affichages potentiels avec le contenu (FCP/LCP)
- Des problèmes de JS qui ne sont pas utilisés sur la page (LCP)
- Des problèmes d'optimisations concernant les images (ALL)
ce sont des exemples et il y a d'autres problèmes à corriger.
Au moins le TBT et le CLS semblent OK pour le moment.

Concernant votre page d'accueil, WPT est plus clair dans les explications.

This site was very slow to connect and deliver initial code. It began rendering content with considerable delay. There were 28 render-blocking requests. The largest content rendered later than ideal.

28 éléments qui bloquent le rendu et une page très lente pour les utilisateurs (on remarque d'ailleurs que la première chose c'est encore le début du chargement "First byte timing relates to DNS, network latency, and the time it takes a server to connect and return a response.". C'est d'autant plus normal que lorsque l'on regarde ce qui était déjà indiqué par GTMetrix, les nombreux problèmes indiqués sont pour la majorité les mêmes. On retrouve à nouveau les lenteurs à cause des fichiers utilisés par le site, des problèmes avec les fichiers qui bloquent le rendu, des CSS et JS qui ne sont pas utilisés correctement, des optimisations manquantes et d'autres éléments qui ne sont pas forcément indiqués par l'outil qui présente des conseils généralistes. Il faut donc vérifier chaque erreur et corriger progressivement le site web que vous avez pour qu'il soit plus rapide et que ceci aide aussi le référencement naturel pour ce qui est du critère de la vitesse du site pour les moteurs.

L'outil WPT est quand même plus précis concernant les problèmes JS même s'il répète comme GTMetrix certains problèmes "By default, references to external JavaScript files will block the page from rendering while they are fetched and executed. Often, these files can be loaded in a different manner, freeing up the page to visually render sooner.". L'outil WPT est quand même plus intéressant sur les explications (et préférence pour son design). Ainsi WPT indique par exemple d'utiliser le Defer pour les fichiers JavaScript qui bloquent le rendu (il indique même "This experiment adds a defer attribute to render-blocking scripts, causing the browser to fetch them in parallel while showing the page. Deferred scripts still execute in the order they are defined in source. Example implementation: <script src="/wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js" defer></script>", ce qui permet de mieux comprendre l'erreur concernant la vitesse de la page. On retrouve aussi l'indication d'utiliser Async avec "This experiment adds an async attribute to render-blocking scripts, causing the browser to fetch them in parallel while showing the page. Async scripts are not guaranteed to execute in the order they are defined in source. Example implementation: <script src="/wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js" async></script>" et de vérifier les scripts Inline "This experiment embeds the contents of specified external scripts directly into the HTML within a script element. This increases the size of the HTML, but can often allow page page to display sooner by avoiding server round trips.Example implementation: <script>/* contents from /wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js here...*/</script>". Même s'ils proposent d'utiliser des options payantes, vous pouvez vous-même vérifier les erreurs, ce sont des corrections qui sont aussi pour la majorité déjà sur d'autres sujets du forum (vous pouvez utiliser le moteur en haut à droite du forum pour corriger certaines erreurs). On remarque aussi qu'ils parlent des problèmes de CSS et de problèmes de chargements.

Concernant les images, l'outil détecte certaines qui peuvent alourdir l'usage de la page, mais pour les images, c'est ce qui est le plus rapide. Il suffit de mettre les images au bon format, optimiser le poids de celles-ci, la bonne taille et c'est corrigé rapidement. Le plus long c'est de corriger pour de nombreuses pages, mais si c'est juste corriger la page d'accueil, c'est fait en quelques minutes pour chaque image. Vous pouvez aussi vous aider d'outils tels que The Gimp, Photoshop ou d'outils en ligne pour optimiser vos images et avoir un site plus rapide avec des images optimisées.

On retrouve aussi des problèmes avec les fonts qui présentent les textes des pages de votre page d'accueil et plus généralement votre site web. WPT indique : "When fonts are loaded with default display settings, like font-display="block", browsers will hide text entirely for several seconds instead of showing text with a fallback font." que vous pouvez donc corriger aussi. Aussi, les fonts de "3rd-party hosts" doivent aussi être gérées correctement. Il y a donc beaucoup de corrections à faire aussi à ce niveau pour que le site soit à jour.

L'outil WPT, présente aussi la possibilité d'utiliser un CDN pour gagner en temps de chargement. Comme ils disent "A Content Delivery Network (CDN) distributes a website's files throughout the world, reducing request latency.". C'est un choix qui peut aussi être fait pour optimiser certaines fois les sites.

Il semble que le problème de cache ait été aussi détecté comme problématique avec cet outil et plus précisément concernant certains fichiers externes utilisés par la page d'accueil du site web actuel. Donc, les fichiers de tiers, qui sont gérés en externe, ce qui est donc normal. On retrouve dans cette liste les outils populaires de Google tels que Google Analytics, Google Apis ou encore Google Tag Manager qui ne sont pas optimisés, voir même gérés correctement et qui perturbent le chargement du site au niveau de la vitesse.

Beaucoup de sujets et d'améliorations à faire.

Cordialement.

Icipierrot · 24 Août 2023

Rodrigoal a dit:
Bonjour,

Je souhaiterais avoir des conseils sur la façon d'interpréter certains résultats :

https://gtmetrix.com/reports/www.vindeter.com/9trWBmqx/

https://www.webpagetest.org/result/230823_BiDcFH_8B9/1/experiments/#Quick

J'aimerais améliorer la vitesse de chargement de mon site mais j'ai du mal à comprendre les résultats de ces tests.

Merci d'avance pour votre aide.

Bonjour, si c'est un site WordPress, ajoutez les extensions (plugins) LiteSpeed et Peformance Lab. Puis refaites l'essai, sans oublier de mesurer également votre vitesse de chargement avec Page Speed Insight.

Rodrigoal · 25 Août 2023

Madrileño a dit:
Bonjour,

Les outils vous indiquent les points à améliorer. Un site lent, n'aide pas à naviguer et n'aide donc pas l'utilisateur, surtout qu'aujourd'hui beaucoup d'utilisateurs des sites naviguent avec un mobile, c'est pour cette raison aussi que la vitesse est importante de nos jours.). Par exemple pour GTMetrix, celui-ci présente des informations sur : FCP/LCP/TBT/CLS.

Les acronymes :
- FCP : First Contentful Paint
- LCP : Largest Contentful Paint
- TBT : Total Blocking Time
- CLS : Cumulative Layout Shift

Pour mieux comprendre :

Source : web.dev

Suivant les outils, les calculs peuvent être différents et les résultats peuvent varier certaines fois. Si par exemple vous réalisez un test maintenant et dans 10 minutes, il se peut qu'il y ai quelques décalages concernant les notes, mais habituellement c'est stable. C'est bien de le préciser, puisque certaines fois il peut y avoir des différences. Quand c'est peu c'est normal, par contre si vous remarquez plusieurs secondes de différences, ce n'est pas normal et il faut vérifier s'il n'y a pas un autre problème avec le site.

Quand il y a un problème de site plus lent entre deux tests, c'est souvent le cache du site qui n'est pas activé ou qui c'est désactivé pendant certains tests. C'est vite corrigé en vidant le cache correctement ou en réactivant l'option (souvent des plugins sur WordPress - d'ailleurs vous utilisez vous-même "WP Fastest Cache", un plugin populaire de gestion du cache des pages).

On peut d'ailleurs citer la description du plugin "WP Fastest Cache" qui décrit bien son usage.

When a page is rendered, php and mysql are used. Therefore, system needs RAM and CPU. If many visitors come to a site, system uses lots of RAM and CPU so page is rendered so slowly. In this case, you need a cache system not to render page again and again. Cache system generates a static html file and saves. Other users reach to static html page. In addition, the site speed is used in Google’s search ranking algorithm so cache plugins that can improve your page load time will also improve your SEO ranking. Setup of this plugin is so easy. You don’t need to modify the .htacces file. It will be modified automatically. WP Fastest Cache is not only a wp cache plugin but also a speed optimization wordpress cache plugin.

Il faut aussi penser lorsque vous optimiserez le code, de toujours bien vérifier que tout est bien fait et réaliser plusieurs tests. Il arrive souvent d'avoir des corrections à faire après les corrections à cause d'un bug ou d'un oubli de code.

Il ne faut pas aussi oublier que vous avez présenté des tests concernant la page d'accueil du site. C'est bien, mais il ne faut pas aussi oublier de penser aux autres pages du site web actuel et donc à améliorer aussi celles-ci avec des améliorations identiques ou en même temps. Ainsi, vous pourrez gagner du temps et si vous réalisez des optimisations sur l'ensemble des pages en une fois, c'est moins long aussi et vous pourrez passer plus de temps à optimiser les autres éléments qui concernent le référencement naturel.

Concernant votre page d'accueil, voici quelques exemples de problèmes via GTMetrix :
- Des problèmes de redirections multiples (http > https www > https) (FCP/LCP)
- Des problèmes de lenteurs avec les fichiers utilisés par le site (FCP/LCP)
- Des problèmes avec des fichiers qui bloquent le rendu (FCP/LCP)
- Des problèmes de CSS qui ne sont pas utilisés sur la page (FCP/LCP)
- Des problèmes d'affichages potentiels avec le contenu (FCP/LCP)
- Des problèmes de JS qui ne sont pas utilisés sur la page (LCP)
- Des problèmes d'optimisations concernant les images (ALL)
ce sont des exemples et il y a d'autres problèmes à corriger.
Au moins le TBT et le CLS semblent OK pour le moment.

Concernant votre page d'accueil, WPT est plus clair dans les explications.

28 éléments qui bloquent le rendu et une page très lente pour les utilisateurs (on remarque d'ailleurs que la première chose c'est encore le début du chargement "First byte timing relates to DNS, network latency, and the time it takes a server to connect and return a response.". C'est d'autant plus normal que lorsque l'on regarde ce qui était déjà indiqué par GTMetrix, les nombreux problèmes indiqués sont pour la majorité les mêmes. On retrouve à nouveau les lenteurs à cause des fichiers utilisés par le site, des problèmes avec les fichiers qui bloquent le rendu, des CSS et JS qui ne sont pas utilisés correctement, des optimisations manquantes et d'autres éléments qui ne sont pas forcément indiqués par l'outil qui présente des conseils généralistes. Il faut donc vérifier chaque erreur et corriger progressivement le site web que vous avez pour qu'il soit plus rapide et que ceci aide aussi le référencement naturel pour ce qui est du critère de la vitesse du site pour les moteurs.

L'outil WPT est quand même plus précis concernant les problèmes JS même s'il répète comme GTMetrix certains problèmes "By default, references to external JavaScript files will block the page from rendering while they are fetched and executed. Often, these files can be loaded in a different manner, freeing up the page to visually render sooner.". L'outil WPT est quand même plus intéressant sur les explications (et préférence pour son design). Ainsi WPT indique par exemple d'utiliser le Defer pour les fichiers JavaScript qui bloquent le rendu (il indique même "This experiment adds a defer attribute to render-blocking scripts, causing the browser to fetch them in parallel while showing the page. Deferred scripts still execute in the order they are defined in source. Example implementation: <script src="/wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js" defer></script>", ce qui permet de mieux comprendre l'erreur concernant la vitesse de la page. On retrouve aussi l'indication d'utiliser Async avec "This experiment adds an async attribute to render-blocking scripts, causing the browser to fetch them in parallel while showing the page. Async scripts are not guaranteed to execute in the order they are defined in source. Example implementation: <script src="/wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js" async></script>" et de vérifier les scripts Inline "This experiment embeds the contents of specified external scripts directly into the HTML within a script element. This increases the size of the HTML, but can often allow page page to display sooner by avoiding server round trips.Example implementation: <script>/* contents from /wp-content/cache/wpfc-minified/f14zhe5t/e6z7d.js here...*/</script>". Même s'ils proposent d'utiliser des options payantes, vous pouvez vous-même vérifier les erreurs, ce sont des corrections qui sont aussi pour la majorité déjà sur d'autres sujets du forum (vous pouvez utiliser le moteur en haut à droite du forum pour corriger certaines erreurs). On remarque aussi qu'ils parlent des problèmes de CSS et de problèmes de chargements.

Concernant les images, l'outil détecte certaines qui peuvent alourdir l'usage de la page, mais pour les images, c'est ce qui est le plus rapide. Il suffit de mettre les images au bon format, optimiser le poids de celles-ci, la bonne taille et c'est corrigé rapidement. Le plus long c'est de corriger pour de nombreuses pages, mais si c'est juste corriger la page d'accueil, c'est fait en quelques minutes pour chaque image. Vous pouvez aussi vous aider d'outils tels que The Gimp, Photoshop ou d'outils en ligne pour optimiser vos images et avoir un site plus rapide avec des images optimisées.

On retrouve aussi des problèmes avec les fonts qui présentent les textes des pages de votre page d'accueil et plus généralement votre site web. WPT indique : "When fonts are loaded with default display settings, like font-display="block", browsers will hide text entirely for several seconds instead of showing text with a fallback font." que vous pouvez donc corriger aussi. Aussi, les fonts de "3rd-party hosts" doivent aussi être gérées correctement. Il y a donc beaucoup de corrections à faire aussi à ce niveau pour que le site soit à jour.

L'outil WPT, présente aussi la possibilité d'utiliser un CDN pour gagner en temps de chargement. Comme ils disent "A Content Delivery Network (CDN) distributes a website's files throughout the world, reducing request latency.". C'est un choix qui peut aussi être fait pour optimiser certaines fois les sites.

Il semble que le problème de cache ait été aussi détecté comme problématique avec cet outil et plus précisément concernant certains fichiers externes utilisés par la page d'accueil du site web actuel. Donc, les fichiers de tiers, qui sont gérés en externe, ce qui est donc normal. On retrouve dans cette liste les outils populaires de Google tels que Google Analytics, Google Apis ou encore Google Tag Manager qui ne sont pas optimisés, voir même gérés correctement et qui perturbent le chargement du site au niveau de la vitesse.

Beaucoup de sujets et d'améliorations à faire.

Cordialement.

Merci infiniment pour le temps que vous avez passé sur cette réponse détaillée !

Il apparait que le plugin Woocommerce soit très gourmand en requêtes .js et .css. De plus, la quasi totalité des fichiers hébergés sans CDN sont issus de ce plugin.

En le désactivant je gagne près de 3 secondes de chargement, mais mon but n'est pas de le désactiver.

Concernant le Defer Render-Blocking Scripts, cela n'a rien changé. Si je n'y arrive pas sans coder, je vais sûrement faire appel à un codeur pro pour m'aider à faire le ménage...

Question : comment utiliser un CDN ?

Rodrigoal · 25 Août 2023

Icipierrot a dit:
Bonjour, si c'est un site WordPress, ajoutez les extensions (plugins) LiteSpeed et Peformance Lab. Puis refaites l'essai, sans oublier de mesurer également votre vitesse de chargement avec Page Speed Insight.

Merci !

Les résultats diffèrent d'un jour à l'autre. Des fois c'est mieux avec LiteSpeed, des fois avec WP fastest cache. Comme je ne suis pas host sur LiteSpeed, je vais peut-être garder WPFC. Performance Lab n'a pas concrètement amélioré le temps de chargement.

Merci pour votre réponse

Rodrigoal · 25 Août 2023

Après plusieurs tests, je dois quand même dire que certaines fonctions de LiteSpeed sont très appréciables, notamment le chargement différé du contenu JS.