SlideShare une entreprise Scribd logo
1  sur  32
1#seocamp
Performance Web :
vers la Speed Update,
un pas après l’autre
2#seocamp
Boris Schapira
3#seocamp
Google et la
Performance Web
4#seocamp
Google et la performance
Quelques dates pour se situer
2009 2010 … 2014 2015 2016 2017 2018
PageSpeed
Ranking WebPerf
Mobilegedon
Labels « Red Slow » & « Slow to load »
Mobile-First
CrUX dans PageSpeed
AMP
CrUX Report
Speed Update
5#seocamp
▪ « Ne jamais livrer une fonctionnalité qui nous ralentit »
▪ Toujours un sujet fondamental de communication,
même une fois Chrome en position de leadership
▪ De l’investissement sur la performance: outils,
frameworks, protocoles, services de conseils…
Une question de valeurs
La performance Web a toujours été au cœur des actions de Google
6#seocamp
« Speed isn’t just a feature,
it’s the feature »
« The Google Gospel of Speed », Urs Hoelzle, 2012
7#seocamp
▪ Des optimisations qui mènent à :
 Une réduction des coûts d’exploitation
 Une augmentation des gains publicitaires
▪ Évolution des usages, design de l’expérience mobile
▪ Essor des plateformes de contenus
▪ Capture des marchés émergents
▪ Croissance interne forte
Une question de business
La performance comme un impératif fondamental de fonctionnement
8#seocamp
Comment se mesure
la performance web ?
9#seocamp
« Qualité Web », Élie Sloïm et Laurent Denis
Chaque site propose une expérience différente
10#seocamp
Une variété d’indicateurs
Chaque projet doit trouver le jeu d’indicateurs qui lui convient
▪ Indicateurs collectés côté navigateur principalement
▪ Issus du navigateur ou basés sur l’analyse vidéo
▪ Collectés auprès de vrais utilisateurs, ou dans un
environnement synthétique
▪ Indicateurs d’affichage, d’interactivité
▪ Indicateurs techniques ou créés par le métier
▪ Temps de chargement
11#seocamp
▪ Time To First Byte (TTFB) : « temps de réponse serveur »
+ latence × 2
▪ Start Render : la page n’est plus « blanche »
▪ Visually Complete : partie visible de la page est
entièrement rendue
▪ Dom Content Loaded (DCL) : fin du chargement
principal (y compris les scripts)
Les indispensables « chargement »
Les indicateurs à connaître absolument
12#seocamp
Speed Index
Mesure la progressivité de l’affichage
100 %90 %80 %60 %
60 % 60 % 60 % 100 %
400 ms 800 ms 1200 ms 1600 ms 2000 ms
0 %
0 %
13#seocamp
Speed Index
Mesure la progressivité de l’affichage
0
10
20
30
40
50
60
70
80
90
100
Exemple A Exemple B
14#seocamp
Speed Index
Mesure la progressivité de l’affichage
100 %90 %75 %60 %
60 % 60 % 60 % 100 %
400 ms 800 ms 1200 ms 1600 ms 2000 ms
0 %
0 %
Speed Index : 1100
Speed Index : 1280
15#seocamp
▪ Nombre de requêtes : impact sur la latence HTTP
▪ Poids total : consommation de données et de CPU*
▪ Métriques personnalisées : répondent à la fois à une
problématique de mesure de contenus et de temps.
Exemple : « affichage du contenu principal »
* Attention au poids du JavaScript !
Les métriques de contenu
Les indicateurs à connaître absolument
16#seocamp
Moment auquel est rendu le
premier élément de contenu du
DOM : texte, image ou élément
<canvas>.
Mesuré via Google Chrome
First Contentful
Paint
La métrique au cœur de PageSpeed Insights
17#seocamp
Base de données anonymes collectées via Google Chrome
Chrome UX Report (CrUX)
18#seocamp
▪ Clé en main : vision RUM sans avoir à déployer quoi
que ce soit sur son site… ou celui de ses concurrents
▪ Pointu : nécessite des bases en statistiques et
manipulation de données complexes mais à partir
de là, pas mal de choses sont possibles.
Forces du CrUX
Une base de données géante !
19#seocamp
En RUM, toujours considérer la distribution dans son ensemble.
Attention, ici les données sont ramenées à 100 % par form factor. Requête Big Query
20#seocamp
▪ Exhaustivité : peu de sites concernés par pays
▪ Agrégations : par défaut, par pays, et sur des périodes
de temps non-contrôlées
▪ Modèle de données : limité en portée et en historique,
mais Big Query donne aussi accès aux données HTTP
Archive depuis 2010
Limitations du CrUX
Tout n’est pas rose au pays du Chrome UX Report
21#seocamp
« Vidéo : optimisez vos MP4 pour de meilleures performances », Boris Schapira
22#seocamp
Performance Web :
commencez dès lundi
23#seocamp
• Éviter l’indicateur de « Page Load Time »
(lui préférer le « Document Content Loaded Time » ou un Custom Timing)
• Échantillonner à 100% en dessous de 20k PV/jour
• Segmenter pour analyser : matériel, navigateur, FAI…
Du RUM avec Google Analytics
Pas besoin d’être un expert JS pour mettre en place du monitoring
24#seocamp
25#seocamp
Chaque localisation est un portefeuille de contextes différents
26#seocamp
• Contextes limités mais maitrisés
• Permettent de créer un contexte reproductible de
mesure permettant de valider des hypothèses
• Stabilité suffisante pour permettre la levée d’alertes
• Vision concurrentielle, en parcours
• Dareboost, mais pas que…
Attention : no free launch
Du synthétique pour faire levier
Contrôler, influer, proposer, tester, valider
27#seocamp
Expérimentez
Procédez par élimination, par
blocage, testez vos scripts tiers,
soyez curieux·ses !
28#seocamp
• Impliquez l’ensemble des équipes dans les
problématiques abordées
• Valorisez une culture de l’itération : certaines
optimisations ne feront sens que dans un tout
• Soyez patient·e·s et ne croyez pas aux formules
magiques !
Transverses et agiles
Une problématique complexe qui nécessite l’implication de tou·te·s
29#seocamp
Merci.
30#seocamp
● Un format vidéo l’a emporté sur les
autres il y a quelques années. Vous
devriez toujours l’utiliser plutôt que
d’avoir recourt à des GIF animés.
Question mug !
On ne va pas se quitter comme ça…
31#seocamp
● Un format vidéo l’a emporté sur les
autres il y a quelques années. Vous
devriez toujours l’utiliser plutôt que
d’avoir recourt à des GIF animés.
● Mais vu que le sujet est ici la
performance… quel est le troisième
mot de ce paragraphe ?
Question mug !
On ne va pas se quitter comme ça…
32#seocamp
MERCI AUX SPONSORS

Contenu connexe

Tendances

We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOErlé Alberton
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéPhilippe YONNET
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Patrick Valibus
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéFasterize
 
Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesJean-Pierre Vincent
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixDaniel Roch - SeoMix
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueSemrush France
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...David Groult
 
Performance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marchePerformance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marcheAymen Loukil
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Aymen Loukil
 
Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?Jean-Pierre Vincent
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webSemrush France
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021Philippe YONNET
 
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...iProspect France
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 

Tendances (20)

Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières années
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist technique
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
SEOCamp Day Lille - Avant de penser SXO, AMP et PBN, sécurisez d'abord les ba...
 
Performance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marchePerformance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marche
 
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
 
Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?Performance des tiers : combien coûte cet emplacement pub ?
Performance des tiers : combien coûte cet emplacement pub ?
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité web
 
Les jeudis de la découverte
Les jeudis de la découverteLes jeudis de la découverte
Les jeudis de la découverte
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
 
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 

Similaire à "Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapira - SEOCamp Lyon 2018

L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LilleL'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LillePeak Ace
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Aymen Loukil
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Peak Ace
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesiProspect France
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LilleLes chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LillePeak Ace
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Adrien Russo
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
Web perf Silicon Comte
Web perf Silicon ComteWeb perf Silicon Comte
Web perf Silicon ComteSilicon Comté
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Peak Ace
 
Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)LVLUP
 
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...SEO CAMP
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...SEO CAMP
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Philippe YONNET
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
 
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Fasterize
 
Webperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéWebperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéFasterize
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéFasterize
 

Similaire à "Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapira - SEOCamp Lyon 2018 (20)

L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LilleL'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - Lille
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LilleLes chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Web perf Silicon Comte
Web perf Silicon ComteWeb perf Silicon Comte
Web perf Silicon Comte
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)
 
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
 
Webperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la RéalitéWebperf et SEO : les Mythes et la Réalité
Webperf et SEO : les Mythes et la Réalité
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalité
 

"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapira - SEOCamp Lyon 2018

  • 1. 1#seocamp Performance Web : vers la Speed Update, un pas après l’autre
  • 4. 4#seocamp Google et la performance Quelques dates pour se situer 2009 2010 … 2014 2015 2016 2017 2018 PageSpeed Ranking WebPerf Mobilegedon Labels « Red Slow » & « Slow to load » Mobile-First CrUX dans PageSpeed AMP CrUX Report Speed Update
  • 5. 5#seocamp ▪ « Ne jamais livrer une fonctionnalité qui nous ralentit » ▪ Toujours un sujet fondamental de communication, même une fois Chrome en position de leadership ▪ De l’investissement sur la performance: outils, frameworks, protocoles, services de conseils… Une question de valeurs La performance Web a toujours été au cœur des actions de Google
  • 6. 6#seocamp « Speed isn’t just a feature, it’s the feature » « The Google Gospel of Speed », Urs Hoelzle, 2012
  • 7. 7#seocamp ▪ Des optimisations qui mènent à :  Une réduction des coûts d’exploitation  Une augmentation des gains publicitaires ▪ Évolution des usages, design de l’expérience mobile ▪ Essor des plateformes de contenus ▪ Capture des marchés émergents ▪ Croissance interne forte Une question de business La performance comme un impératif fondamental de fonctionnement
  • 8. 8#seocamp Comment se mesure la performance web ?
  • 9. 9#seocamp « Qualité Web », Élie Sloïm et Laurent Denis Chaque site propose une expérience différente
  • 10. 10#seocamp Une variété d’indicateurs Chaque projet doit trouver le jeu d’indicateurs qui lui convient ▪ Indicateurs collectés côté navigateur principalement ▪ Issus du navigateur ou basés sur l’analyse vidéo ▪ Collectés auprès de vrais utilisateurs, ou dans un environnement synthétique ▪ Indicateurs d’affichage, d’interactivité ▪ Indicateurs techniques ou créés par le métier ▪ Temps de chargement
  • 11. 11#seocamp ▪ Time To First Byte (TTFB) : « temps de réponse serveur » + latence × 2 ▪ Start Render : la page n’est plus « blanche » ▪ Visually Complete : partie visible de la page est entièrement rendue ▪ Dom Content Loaded (DCL) : fin du chargement principal (y compris les scripts) Les indispensables « chargement » Les indicateurs à connaître absolument
  • 12. 12#seocamp Speed Index Mesure la progressivité de l’affichage 100 %90 %80 %60 % 60 % 60 % 60 % 100 % 400 ms 800 ms 1200 ms 1600 ms 2000 ms 0 % 0 %
  • 13. 13#seocamp Speed Index Mesure la progressivité de l’affichage 0 10 20 30 40 50 60 70 80 90 100 Exemple A Exemple B
  • 14. 14#seocamp Speed Index Mesure la progressivité de l’affichage 100 %90 %75 %60 % 60 % 60 % 60 % 100 % 400 ms 800 ms 1200 ms 1600 ms 2000 ms 0 % 0 % Speed Index : 1100 Speed Index : 1280
  • 15. 15#seocamp ▪ Nombre de requêtes : impact sur la latence HTTP ▪ Poids total : consommation de données et de CPU* ▪ Métriques personnalisées : répondent à la fois à une problématique de mesure de contenus et de temps. Exemple : « affichage du contenu principal » * Attention au poids du JavaScript ! Les métriques de contenu Les indicateurs à connaître absolument
  • 16. 16#seocamp Moment auquel est rendu le premier élément de contenu du DOM : texte, image ou élément <canvas>. Mesuré via Google Chrome First Contentful Paint La métrique au cœur de PageSpeed Insights
  • 17. 17#seocamp Base de données anonymes collectées via Google Chrome Chrome UX Report (CrUX)
  • 18. 18#seocamp ▪ Clé en main : vision RUM sans avoir à déployer quoi que ce soit sur son site… ou celui de ses concurrents ▪ Pointu : nécessite des bases en statistiques et manipulation de données complexes mais à partir de là, pas mal de choses sont possibles. Forces du CrUX Une base de données géante !
  • 19. 19#seocamp En RUM, toujours considérer la distribution dans son ensemble. Attention, ici les données sont ramenées à 100 % par form factor. Requête Big Query
  • 20. 20#seocamp ▪ Exhaustivité : peu de sites concernés par pays ▪ Agrégations : par défaut, par pays, et sur des périodes de temps non-contrôlées ▪ Modèle de données : limité en portée et en historique, mais Big Query donne aussi accès aux données HTTP Archive depuis 2010 Limitations du CrUX Tout n’est pas rose au pays du Chrome UX Report
  • 21. 21#seocamp « Vidéo : optimisez vos MP4 pour de meilleures performances », Boris Schapira
  • 23. 23#seocamp • Éviter l’indicateur de « Page Load Time » (lui préférer le « Document Content Loaded Time » ou un Custom Timing) • Échantillonner à 100% en dessous de 20k PV/jour • Segmenter pour analyser : matériel, navigateur, FAI… Du RUM avec Google Analytics Pas besoin d’être un expert JS pour mettre en place du monitoring
  • 25. 25#seocamp Chaque localisation est un portefeuille de contextes différents
  • 26. 26#seocamp • Contextes limités mais maitrisés • Permettent de créer un contexte reproductible de mesure permettant de valider des hypothèses • Stabilité suffisante pour permettre la levée d’alertes • Vision concurrentielle, en parcours • Dareboost, mais pas que… Attention : no free launch Du synthétique pour faire levier Contrôler, influer, proposer, tester, valider
  • 27. 27#seocamp Expérimentez Procédez par élimination, par blocage, testez vos scripts tiers, soyez curieux·ses !
  • 28. 28#seocamp • Impliquez l’ensemble des équipes dans les problématiques abordées • Valorisez une culture de l’itération : certaines optimisations ne feront sens que dans un tout • Soyez patient·e·s et ne croyez pas aux formules magiques ! Transverses et agiles Une problématique complexe qui nécessite l’implication de tou·te·s
  • 30. 30#seocamp ● Un format vidéo l’a emporté sur les autres il y a quelques années. Vous devriez toujours l’utiliser plutôt que d’avoir recourt à des GIF animés. Question mug ! On ne va pas se quitter comme ça…
  • 31. 31#seocamp ● Un format vidéo l’a emporté sur les autres il y a quelques années. Vous devriez toujours l’utiliser plutôt que d’avoir recourt à des GIF animés. ● Mais vu que le sujet est ici la performance… quel est le troisième mot de ce paragraphe ? Question mug ! On ne va pas se quitter comme ça…