Vitesse d'un site web: First Contentful Paint (FCP), First Input Delay (FID) et Total Blocking Time (TBT)

SEO Pour créer, rédiger et optimiser le SEO de vos pages web --> Contactez-nous


Quand vous utilisez Google Page Speed ou Lighthouse pour "auditer" un site web, vous regardez la vitesse (et d'autres éléments pour Lighthouse) du site (ou de la page précise que vous analysez pour être + exact).

Google vous présente un résultat et différents trucs comme FCP, FID, TBT..  Qu'est-ce que ça veut dire ? Et comment améliorer ces métriques et donc la vitesse du site ?

Notons tout d'abord que la vitesse REELLE du site peut être meilleure que celle notée par Google. Notamment si vous utilisez un bon CDN, il ne sera pas forcément pris en compte dans la vitesse estimée par Google Page Speed ou Lighthouse. le site sera-t-il alors pénalisé ou pas si sa vitesse "estimée" est null comparativement à la vitesse réelle avec CDN ? Nul ne le sait vraiment avec certitude.. Sans doute que tout dépend de chaque cas et notamment du passage ou pas des petites mains HUMAINES de Google (cf  les guidelines faits pour que ces petites mains humaines vérifient les sites web selon certains critères)

Définitions de First Contentful Paint (FCP), First Input Delay (FID) et Total Blocking Time (TBT)

First Contentful Paint (FCP)

Selon Google, "Le FCP mesure combien de temps il faut au navigateur pour afficher le premier élément du contenu DOM après qu’un utilisateur s’est rendu sur votre page. Les images, les éléments <canvas> autres que blanc, et SVG sur votre page sont considérés comme du contenu DOM; Tout ce qui se trouve dans un iframe n’est pas inclu."

En d'autres mots, le FCP calcule combien de temps il faut pour que le premier contenu du site arrive à l'écran..

First Input Delay (FID)

Selon Google, "Le First Input Delay (FID) mesure le temps entre le moment ou un utilisateur interagit avec votre site (par exemple, en cliquant sur un lien, en appuyant sur un bouton, ou en utilisant une fonction personnalisée avec JavaScript), et celui ou le navigateur est capable de répondre à cette interaction."

En d'autres mots, le FID calcule combien de temps il faut au couple navigateur/site pour réagir si quelqu'un interagit avec lui.

Total Blocking Time (TBT)

Le TBT est en relation étroite avec le FID puisqu'il calcule le temps cumulé durant lequel une page est dans l'incapacité de répondre efficacement à une interaction utilisateur (un clic, une frappe clavier, etc.) une fois que la page a commencé à afficher du contenu. 

Bon et maintenant comment améliorer TBT, FID, FCP ?

Améliorer ces 3 trucs permettra au site web d'avoir une meilleure vitesse donc comment faire ?

Déjà, il suffit de s'intéresser au TBT et au FCP puisque le FID sera logiquement meilleur quand le TBT sera amélioré (ça c'est pour vérifier que vous avez suivi donc n'opinez pas bêtement du bonnet !).

Vade Retro Satanas le javascript !

Hé oui, vous avez truffé le site de javascripts pour traquer les gens, mettre de la pub, mettre des décorations de Noël et voilà..

Le principal ennemi de la vitesse d'un site est le javascript ! Pourquoi ? Parce que le navigateur, quand il voit un javascript, doit l'étudier, le compiler puis l'exécuter donc ça prend du temps.

MOINS il y en a , PLUS le site va vite donc la première chose à faire est de supprimer TOUS les Javascripts inutiles.

En premier lieu, ceci passe par le choix d'un design qui n'en utilise pas des masses !

Une fois que vous avez réduit le nombre de javascript utilisées, alors vous pouvez optimiser leur utilisation.

Compression des javascripts: il existe tout un tas de solutions pour ce faire mais souvent (notamment dans wordpress et prestashop), elles peuvent se heurter au TEMPLATE qui exige que rien ne soit compressé, pour afficher les zigouigoui qu'il veut (souvent sans intérêt).

Exécuter le Javascript de manière asynchrone: par définition le javascript s'exécute de manière synchrone. Cela veut dire qu'il va s'exécuter ligne après ligne et que si une ligne prend du temps, tout est bloqué. 

Ceci dit, on peut forcer le javascript à s'exécuter de manière asynchrone --> les tâches sont en liste d'attente et s'exécutent une fois que le "tread" principal est exécuter. Concrètement, la page s'affiche et le navigateur traite les javascripts ensuite.

Lazy-loading: on peut fractionner le code et n'exécuter, telle la feignasse de base, que les trucs dont on a besoin (en gros procrastiner).

Notamment sous wordpress, un tas de plugins existent pour optimiser tout ceci mais avant de vous lancer, n'oubliez pas que le template peut "mal" réagir ET qu'il faut essayer ces plugins UN par UN (en mettre un tas, les activer et penser que ça va améliorer le truc risque fort de produire l'inverse..).

Enfin, ayez un peu de bon sens et par exemple: NE METTEZ PAS DE SLIDER QUI NE SERT A RIEN EN TETE DE PAGE !!!

 

 

Commentaires sur: Vitesse d'un site web: First Contentful Paint (FCP), First Input Delay (FID) et Total Blocking Time (TBT)

Poster un commentaire sur: Vitesse d'un site web: First Contentful Paint (FCP), First Input Delay (FID) et Total Blocking Time (TBT)







« Yohann Deprez ne paie pas les gens à qui il sous-traite ses projets web | Accueil | Le petit monde web de Selectra »



Besoin de SEO, de développement, de rédaction de contenu web ? Besoin d'un blog, de Wordpress, de Prestashop ou autres nouvelles "choses web" ? Envie de travailler dans ces domaines ? --> Contactez-nous