Core Web Vitals : les comprendre et se préparer pour le SEO
•Télécharger en tant que PPTX, PDF•
0 j'aime•2,274 vues
Apprenez en plus sur le Core Web Vitals : KPI "UX" de Google et leur importance relative au SEO.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Core Web Vitals : les comprendre et se préparer pour le SEO
Similaire à Core Web Vitals : les comprendre et se préparer pour le SEO (20)
Plus de Digimood - Agence SEO / SEA
Plus de Digimood - Agence SEO / SEA (18)
Core Web Vitals : les comprendre et se préparer pour le SEO
- 1. Core Web Vitals Mieux les comprendre & Mieux se préparer Pierre SAUVÉ – le 1er décembre 2020
- 2. PRESENT -ATION • Agence SEO / SEA / Social Ads • Marseille / Montpellier / Paris / Annecy • Environ 160 clients actifs • 40 employés dont 22 au SEO DIGIMOOD • Consultant SEO / Team Leader • Montpellierain • Passionné par les problématiques techniques SEO • Cursus Dev/Web Dev Pierre Sauvé ^ ^
- 3. • Le webperf et le SEO • Les Core Web Vitals c’est quoi ? • Comment les mesurer ? • Le FCP • Le LCP • Le CLS • Leur avenir pour le SEO // Au menu aujourd’hui
- 4. #01 La webperf et le SEO Un enjeux dont on entend souvent parler et qui commence à prendre de plus en plus de place dans les débats notamment en étant ramené à l’importance de l’UX. Google se rapproche d’une vision de plus en plus « User centric » et les indicateurs d’expérience utilisateur sont de plus en plus important à prendre en compte. #03 L’émergence des nouveaux indicateurs • L’amalgame TTFB et temps de téléchargement • Une corrélation avec l’exploration qui n’est pas forcément iso #01 Les métriques “traditionnelles” Peu d’études d’impact qui prouvent vraiment une forte corrélation avec le ranking (Moz 2013) Léger impact potentiel du temps de téléchargement mais à double tranchant en cas de site techniquement mauvais. #02 Un impact parfois flou Evolution de Lighthouse au cours du temps : https://googlechrome.github.io/lighthouse/scorecalc/#FCP=3090&SI=9163&LCP=4795&TTI=19014&TBT=13238&CLS=0.08&FCI=18529&FMP=3790
- 5. #02 Web Vitals • Un programme made in Google • Uniformiser les signaux d’user experience en ligne • Rendre plus accessibles des données parfois floues • Une initiative qui est désormais une référence et qui est bien suivie par Google via https://web.dev/ • Les 3 indicateurs les plus importants Observation du 75ième percentile Distinction mobile et desktop Les Core Web Vitals Des mesures « secondaires »… … pour l’instant Les Web Vitals
- 6. VS Real User Monitoring Injection d’un code suivi (JS) Analyse en temps réel côté user Données macro site + utilisateurs Plus longs à mettre en place et impossible en dev Synthetic Monitoring Test “à distance” avec connexion bridée Idéal pour tester des déploiements Pas d’installation onsite Limitée à des exemples de pages X ou Y et à un scénario fictif donné • Webpagetest • GTMetrix • SpeedCurve • Dareboost • Lighthouse sur Chrome #03 LES MESURER La mesure de la webperf est complexe Grosse dépendance du device et de la connexion Beaucoup d’aléas si on se met “à la place de Google” Deux écoles se complémentent pour faire au mieux • Bibliothèque JS Web-Vitals • Extension Chrome • Analytics • Solarwinds (ex Pingdom) Méthodologie • Si problématique globale de webperf : 1 - mettre en place du RUM + SM sur les templates principaux 2 – isoler les soucis • Si refonte, changement, etc 1 - mettre en place des tests en Synthetic Monitoring (lighthouse très pratique) sur les templates concernés. 2 – analyser les hausses et baisses pour identifier les points améliorables
- 7. Chargement Mesure standard de vitesse Rapportée à l’élément le plus large LCP Largest Contentful Paint Stabilité de la page visuellement Alerte des décalages CLS Cumulative Layout Shift Délais avant l’interaction onpage Se concentre sur les clics, touches et pression de touches FID First Input Delay Interactivité Stabilité Les Cores Web Vitals
- 8. LCP Largest Contentful Paint Moment où le contenu principal s’affiche Complémentaire du FCP (First Contentful Paint) <img>, <image>, <video>, image de fond, éléments block Impact : gros taux de rebond, crawl plus long potentiellement Taille visible du plus gros élément du viewport Facilement récupérable sur Lighthouse (console Chrome) RUM : PageSpeed, Search Console, JS Web vitals SM : DevTools, Lighthouse… Mesurer Performances serveur Optimiser du chemin de rendu critique (PRPL) SSR ou Prerendering Optimisation des JS, CSS, Images, Fonts Ressources en cache Améliorer Chargement Bon Améliorable Mauvais 2,5s 4,0s https://web.dev/lcp/
- 9. FID First Input Delay Temps entre l’interaction d’un utilisateur et la réponse du navigateur Complémentaire du TTI (time to interactive) Plus complexe car instable selon le type d’interaction Impact : Taux de conversion mauvais Mesurable en RUM uniquement de façon plus complexe Remplacé par le TBT (total blocking time) sur du SM PageSpeed insight, Search Console ou JS web vitals Mesurer Réduction des appels tierces, defer loading, web workers (arrière plan) Split des codes JS pour un meilleur coverage Nettoyage récurrent des scripts inutiles Cache efficace Analyse des coûts (téléchargement, parsing/compilation, exécution et mémoire) Améliorer Interactivité https://web.dev/fid/ Requêtes Thread Principal Requêtes serveur Tâches du thread principal Thread principal en repos Début de la navigation Styles chargés Le navigateur affiche le contenu Premier input utilisateur Réponse à l’input utilisateur Bon Améliorable Mauvais 100ms 300ms
- 10. CLS Cumulative Layout Shift Mesure la stabilité visuelle de la page via le décalage des éléments Souvent l’illustration de trop de chargements asynchrones ou d’une mise en page mauvaise. Impact : UX déceptive / énervante Score = part de l’écran concernée * distance Différence entre les décalages attendus (interaction) ou inattendus Accessible en RUM et en SM et facilement visible sur Lighthouse notamment via la console. Cependant plus réels en RUM. Mesurer Délimiter les tailles sur les images et vidéo Pensez au espaces requis avec les ratio en CSS Pas d’insertion de contenu au dessus de l’existant (hors demande utilisateur) Réserver au préalable les emplacements de pub ou d’iframes Combiner <link rel=preload> sur les fonts et font-display: optional Améliorer Stabilité https://web.dev/lcp/ + https://web.dev/optimize-cls/ 0,75 x 0,25 = 0,1875 Bon Améliorable Mauvais 0,1 0,25
- 11. First Content Paint Souvent rapproché du « Start render » et ancien « Speed index » Affichage du premier élément pour l’user. FCP Total Blocking Time Assez récent et gagne en importance Addition des blocages du thread principal vis-à-vis de l’interactivité. TBT Time to first byte Temps de réponse serveur Très impacté par la charge <200 ms selon Google TTFB Time to interactive Perd du poids dans lighthouse Moins fiable car lié au CPU Moment où la page est pleinement interactive. TTI #Les autres “Web vitals” Moins en vue sur les outils, restent cependant importants notamment lors des évolutions de site / app pour être plus précis.
- 12. • Annonce officielle Google sur une prise en compte en mai 2021 dans le ranking • Evolution importante des outils comme des indicateurs, annonçant un suivi notable de Google • Un impact qui restera globalement secondaire • Pour l’instant peu d’impact sur le crawl des robots • Restera surement un critère secondaire car la webperf n’a pas d’impact sur la pertinence vis-à- vis de l’intention de recherche. Probablement pas de grosse révolution mais attendons de tester ! // …mais à quelle dose ? #Quel avenir pour le SEO & les Web vitals ? // Une prise en compte officielle…
- 13. QUESTIONS ?