Core Web Vitals, ou Signaux Web Essentiels 2021 : Le guide complet pour tout comprendre
Dans ce dossier sur les Core Web Vitals de Google, vous retrouverez 6 vidéos qui traitent en détail de la relation entre l’UX et la Web performance, des indicateurs de performance pris en compte par Google, historiques et nouveaux (les fameux signaux web essentiels), et des outils disponibles pour auditer la performance de votre site, à savoir le Pagespeed Insights, et le Chrome Dev Tool.
Les vidéos sont à regarder dans l'ordre suivant :
1. La pyramide UX - Core Web Vitals - UX et Web performance
2. La psychologie dans l’UX - Core Web Vitals - UX et Web performance
3. Introduction aux nouveaux facteurs - Core Web Vitals - Indicateurs de performance Google
4. Tout savoir sur le LCP, FID et CLS - Core Web Vitals - Indicateurs de performance Google
5. Utiliser Pagespeed Insights pour auditer votre performance - Core Web Vitals
6. Utiliser Chrome Dev Tool pour auditer votre performance - Core Web Vitals
A propos de Mouad Boulaabi, Senior SEO Architect :
Avec 10 ans d’expérience dans le SEO, et un background d’ingénieur système Linux, Mouad met à contribution ses connaissances techniques et SEO tous les jours au profit de clients grands comptes (Luxe, Assurance, Ecommerce, internationaux, …) mais aussi de grandes startup.
Complètement team player : « J’aime être impliqué dans toutes les dimensions du projet ayant un rapport de près ou de loin avec le SEO. »
Quelques étapes de son parcours en agences SEO avant d’arriver chez SmartKeyword :
- Aposition / Iprospect
- Search Foresight
- Publicis Media
Il a aussi été chez l’annonceur pour parfaire sa formation :
- Etsy.com (France)
- Agoda.com groupe Booking (Thaïlande)
Pour plus d’informations, visitez notre site web smartkeyword.io
Tout savoir sur le LCP, FID et CLS - Core Web Vitals - Indicateurs de performance Google (transcription)
Ce qui est chargement on va parler de LCP. Ce qui est interactivité, ce sera plutôt le FID. Et ce qui est stabilité visuelle, on va parler de CLS. C'est quoi le LCP ? L'acronyme c'est Largest Contentfull Paint. C'est qu'est-ce qui est de plus large sur votre page et qui va s'afficher. Si on prend en exemple ici, on l'a avec Instagram. Le site Instagram se charge. Là on a un FCP (on va voir tout à l'heure ce que c'est) il y a des éléments qui commencent à s'afficher. C'est pas le plus gros. On a un élément ici qui semble être le plus grand élément à afficher. C'est ici que le LCP commence à se charger On a le LCP et qui reste le même parce que vous avez vu c'est l'élément le plus large, le plus grand qu'on ait pour charger la page d'accueil d'Instagram. Si on prend un autre exemple. J'ai tapé une requête sur Google mobile. La requête Larry Page, le fameux Larry Page de chez Google. Pareil on a le FCP, très bien. On va voir ce que c'est, et nous ce qui nous intéresse c'est le LCP. C'est le contenu visuel (quand je dis contenu, attention on s'accordent sur les termes. je vous avais dit qu'on est précis, donc je le reste avec vous. Quand je dis contenu, c'est le contenu visuel). Donc le contenu visuel le plus large à charger, ma zone la plus large, c'est ça. C'est un contenu un peu biographique et du coup c'est mon LCP. Donc mon LCP commence à se charger à partir de cet instant-là. Ce que google recommande pour avoir une bonne expérience utilisateur, c'est que ce LCP arrive 2,5 secondes après le début du chargement de la page. Dès lors qu'il y a le FCP qui "s'enable", qui s'active, il faudrait dans l'idéal que deux secondes et demi après on ait le LCP. Quels sont les éléments qui sont pris en compte pour le pour le LCP ? Il y a une API qui existe pour ça, et comme c'est précisé dans l'API, les éléments qui sont pris en compte pour le calcul, c'est des éléments qui vont être vraiment sur tout ce qui est visuel. Tout ce qui est balises img, tout ce qui est élément images qu'on met dans un élément vectoriel svg, tout ce qui va être éléments vidéos, tout ce qui va être des éléments qui vont être chargés. Il y a des fonctions, par exemple, avec la fonction url, etc. Ça va être ça qui sera pris en compte sur comment vous faites pour gérer ce type de visuels. Pour la mesure, on verra tout à l'heure, qu'il existe des outils, soit des outils qu'on appelle "real user monitoring" ou soit des outils de "synthetic monitoring". Mais on peut le faire aussi avec javascript. Pourquoi ? Parce qu'il y a une librairie qui est dédiée. Et sur la console, vous pouvez simplement taper ça, et comme vous faites un get LCP, vous pouvez aussi faire du get FID. Vous allez pouvoir mesurer via javascript le score de votre page avec une seule fonction. Donc ça c'est possible et en plus sur internet il y a pas mal de projets qui sont disponibles qui utilisent des librairies de javascript de web vitals qui vous permettent de mener et avoir un projet in-house de a à z. Ensuite il y a le FID. (...)