SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
1#seocampSEO CAMP Day LYON 2019
Comment transformer la performance web
en croissance et conversion utilisateur
Alexandre Thuriot
2#seocampSEO CAMP Day LYON 2019
3#seocampSEO CAMP Day LYON 2019
4#seocampSEO CAMP Day LYON 2019
https://blog.resoneo.com/2019/04/webperf-les-cles-dun-site-beaucoup-rapide-seo-campus/
5#seocampSEO CAMP Day LYON 2019
Tout le monde en parle … Less is More !
6#seocampSEO CAMP Day LYON 2019
Dareboost
Et ce ne sont pas les outils qui manquent
Lighthouse Page Speed Insight
WebPageTest Fasterize GTMetrix
avec des audits et recommandations toujours plus détaillés
Sans parler de plugins All In One … / WP Rocket ..
7#seocampSEO CAMP Day LYON 2019
La culture de la performance web ?
Webperf = Fonctionnalité ?
La performance Web ne consiste pas seulement à comprendre ce qui fait qu'un site
est rapide. Il s'agit de sensibiliser les développeurs et les non-développeurs que c’est
essentiel pour le business.
La performance est une fonctionnalité et doit être priorisée en tant que telle !
= La webperf est priorisée quand quelqu’un arrive à démontrer que les concurrents sont meilleurs.
8#seocampSEO CAMP Day LYON 2019
La priorisation de la webperf chez le client …
La priorisation doit être objective et basée sur des hypothèses mesurables !
Dans ces conditions la performance web est généralement laissée aux développeurs qui s’ils le souhaitent peuvent prendre cette
responsabilité. En pratique, les développeurs se concentrent sur la qualité et la delivrabilité des demandes.
La performance web n’est jamais priorisée car n’étant pas monitorée il est pour beaucoup trop complexe de déterminer son R.O.I
9#seocampSEO CAMP Day LYON 2019
Comment créer une culture webperf ?
Comprendre, Auditer, Mesurer, Séduire, Améliorer, Evaluer
Expliquer le Pourquoi !
10#seocampSEO CAMP Day LYON 2019
Qui doit assumer les optimisations ?
Travailler la webperf nécessite de travailler sur toutes les étapes de construction d’’une requête http : DNS Réseau / Hébergement / Cache / Développements / CDN / Images .
C’est pourquoi la mise en place d’une stratégie d’amélioration continue de la performance web doit inclure tous les métiers de l’entreprise qui interagissent avec le site
web. (Admin système / Devs / SEO / UX / Marketing / Sales …)
Périmètre de la performance web
11#seocampSEO CAMP Day LYON 2019
Time To First Byte : 1er octet reçu par le
navigateur, c’est à dire la vitesse à
laquelle le serveur renvoi le premier
octet de donnée.
TTFB
Il s’agit de la spmmes des ressources
téléchargés par le navigateur du client
pour afficher la page (html, images, js,
css …)
Poids des pages
correspond au moment ou les premiers
éléments de la page apparaissent à l’écran
Start Render
Somme des ressources téléchargeés par
le navigateur pour executer le rendu et le
tracking de la page demandée.
Nombre de requêtes
Etape 1 : suivre des KPI
Les premiers éléments à suivre
Simple à suivre / simple à expliquer
12#seocampSEO CAMP Day LYON 2019
Etape 2 : La perception de la performance
Auditer la cinématique de chargement des pages
Le Speed Index met en lumière le
rythme auquel les éléments au-
dessus de la ligne de flottaison
s’affichent. Cet indice de
performance de chargement de
page indique à quelle vitesse le
contenu d'une page commence à
être visible. Plus le score est proche
de zéro, mieux c'est.
Speed Index
> améliorer vos conversions
13#seocampSEO CAMP Day LYON 2019
https://requestmap.webperf.tools/
Request Map Generator
On commence par quoi ?
= A faire sur son site / ses soncurrents !
14#seocampSEO CAMP Day LYON 2019
Benchmark
Moyenne du Web
Poids moyen d’une page web en 2018
HTTP Archive
Répartition des ressources
Cumul du poids des ressources téléchargées par
un navigateur (après compressions)
Images 45%
Javascript 35%
Font 10%
CSS 5%
Selon Dareboost, une page web génère en moyenne 122 requêtes
= A faire sur son site / ses soncurrents !
15#seocampSEO CAMP Day LYON 2019
CrUX : Chrome User Experience
https://web.dev/chrome-ux-report-data-studio-dashboard
= A faire sur son site / ses soncurrents !
16#seocampSEO CAMP Day LYON 2019
Créer une matrice avec toutes vos données et appuyez sur les points en souffrance vs concurrence
Passer en mode
Quick Wins
17#seocampSEO CAMP Day LYON 2019
Gestion des images : Lancer un audit
= permet d’avoir un score de la gestion des images ; mais surtout permet d’avoir un objectif chiffré
18#seocampSEO CAMP Day LYON 2019
Les images
pour les nuls
▪ Optimisation de la compression
▪ Sélection du format d’image
▪ Taille optimale
▪ Support des navigateurs
▪ Privilégier WebP
▪ Téléchargement de l’image optimisée
en 1 clic
19#seocampSEO CAMP Day LYON 2019
API CDN
• Les CDN d’images sont initialement utilisés pour
localiser les images au plus proche de
l’internaute.
• Depuis quelques temps, il est possible d’utiliser les
CDN comme un service d’optimisation et
traitement avec des fonctionnalités difficiles à
reproduire en interne.
• Pour quelques euros par mois, cela permet de
mettre ses ressources sur des fonctionnalités
coeur-business.
Content Delivery Network
20#seocampSEO CAMP Day LYON 2019
Optimiser
Le chargement
▪ Suppression librairie Javascript
▪ <img src =‘’ dans la page (SEO)
▪ Fonctionne aussi sur les <iframe>
En fonction du device, de la taille de l’écran, du réseau et
de l’interraction utilisateur : le navigateur préchargera de
façon dynamique les images.
21#seocampSEO CAMP Day LYON 2019
Javascript
Processing Time
57%
Third Party
Code
Influence du JS
100 KB de Javascript
augmente en moyenne le
Start To Render d’1 seconde.
= Limiter les ressources Javascript au strict minimum !
22#seocampSEO CAMP Day LYON 2019
Centraliser la gestion de vos scripts
Utilisation d’un TMS (Tag Manager Service)
▪ Appels Asynchrones des librairies JS
▪ Configuration dynamique
▪ Ajout / Suppression / Planification des scripts
▪ Configuration à la page
▪ 0 devs
23#seocampSEO CAMP Day LYON 2019
JS : Mise au régime !
▪ Code Coverage (Green / Red) via la console
du navigateur (F12)
▪ Segmenter l’appel aux ressources JS / CSS en
fonction du pattern des pages
▪ Limiter les librairies tierces
▪ Utiliser les dernièers versions des librairies
▪ Favoriser les développements natifs
24#seocampSEO CAMP Day LYON 2019
Single Point Of Failure
La majorité des sites Internet exploitent les Polices héberées sur Google Fonts.
En cas de problème réseau cela peut impacter fortement le rendu de la page.
Le SPOF …
25#seocampSEO CAMP Day LYON 2019
Perdre 20% de poids en 10min …
Utiliser la compression Brotli à la place de Gzip
> S’installe très simplement sur Apache / Ngnix. Faites la demande à votre admin système ou votre hébergeur.
26#seocampSEO CAMP Day LYON 2019
… https – Keep-Alive et résolution DNS
Le fait de ne pas activer le
Keep-Alive en https est
catastrophique.
A chaque appel d’une
ressource sur le site le
navigateur revalide toutes la
chaîne SSL Negociation.
Cela ajoute entre 150 et 200
ms par fichiers au temps de
téléchargement global.
Lorsqu’il est activé, le Keep-
Alive permet au navigateur
de valider une seule fois le
protocole SSL.
27#seocampSEO CAMP Day LYON 2019
… https - http/2 & Keep Alive
Avant
Après
28#seocampSEO CAMP Day LYON 2019
Solution All in One :
AMP Instant Everywhere
▪ Format dédié mobile
▪ Priorisation chargement des
ressources pour le 1er écran
▪ Limitation Javascript
▪ Mécanisme de cache distribué
▪ Images Webp
▪ Compression Brotli
▪ …
> Migrer vers AMP peut être une solution pour améliorer sa webperf mobile !
29#seocampSEO CAMP Day LYON 2019
Cela me rapporte
combien d’améliorer
ma webperf ?
30#seocampSEO CAMP Day LYON 2019
Les gains statistiques
La performance web comme fonctionnalité améliore l’usage
Aller / Retour entre la SERP et la page de votr
site. Analyse de la pertinence du résultat par
l’analyse comportementale de l’internaute.
(Augmentation des analytics)
PogoSticking
La page se chargeant rapidement, la fonction de
la page est affichée et comprise plus rapidement
par l’internaute. Celui étant moins stressé, gagne
en confiance ett sera plus facile à séduire.
Taux de conversion
L’optimisation du site par la suppression de
l’inutile permet de simplifier son architecture
dans le but de garder uniquement l’essentiel.
Connaissance technique
Comportement de l’internaute sur votre site.
Fait-il une interaction supplémentaire ?
Taux de rebond métier
> Considérer toutes les fonctionnalités de votre site comme un ‘one click add to cart”
Utiliser ces indicateurs pour enclencher l’étape 2 et aller plus loin dans l’optimisation
31#seocampSEO CAMP Day LYON 2019
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
32#seocampSEO CAMP Day LYON 2019
https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
33#seocampSEO CAMP Day LYON 2019
Migration AMP
https://www.thinkwithgoogle.com/intl/fr-fr/inspirations/success-stories/greenweez-booste-de-80-son-taux-de-conversion-mobile-avec-amp/
34#seocampSEO CAMP Day LYON 2019
Maintenir les performances pour de
nombreux sites est tout aussi
difficile, sinon plus difficile que
d’être le plus rapide une fois
40% des grandes marques
régressent sur leurs performances
après 6 mois.
Katie Hempenius Addy Osmani
https://www.youtube.com/watch?v=YJGCZCaIZkQ
35#seocampSEO CAMP Day LYON 2019
Comment éviter de chuter et
grossir à nouveau ?
36#seocampSEO CAMP Day LYON 2019
Définition d’un budget de Performance
37#seocampSEO CAMP Day LYON 2019
Intégration continue / build
Test de non regression du contrat de performance à intégrer dans le process de mise en production
38#seocampSEO CAMP Day LYON 2019
MERCI AUX SPONSORS
39#seocampSEO CAMP Day LYON 2019
Question Mug
● Quel paramètre faut-il déclarer au
moment de l’appel des Google Fonts
pour afficher son contenu 1s plus
rapidement ?

Contenu connexe

Tendances

100 jours pour développer son trafic !
100 jours pour développer son trafic !100 jours pour développer son trafic !
100 jours pour développer son trafic !Erlé Alberton
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitAymeric Bouillat
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEODigimood - Agence SEO / SEA
 
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesComment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesMadeline Pinthon
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Search Foresight
 
Atelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatAtelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatmaurice LARGERON
 
L'incidence des Performances sur le SEO
 L'incidence des Performances sur le SEO L'incidence des Performances sur le SEO
L'incidence des Performances sur le SEOPeak Ace
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEOPeak Ace
 
Astuces pour mieux ranker sur google images [seogoodvibes]
Astuces pour mieux ranker sur google images [seogoodvibes]Astuces pour mieux ranker sur google images [seogoodvibes]
Astuces pour mieux ranker sur google images [seogoodvibes]Sebastien Thibert
 
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
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOErlé Alberton
 
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
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherchePeak Ace
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiseriProspect France
 
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformesProgressive Web Apps - Créer des applications Web et Mobiles multiplateformes
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformesMathieu Molinaro
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanésemrush_webinars
 
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
 
Les critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GoogleLes critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GooglePhilippe YONNET
 
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
 

Tendances (20)

100 jours pour développer son trafic !
100 jours pour développer son trafic !100 jours pour développer son trafic !
100 jours pour développer son trafic !
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Atelier WP SEO - Nathalie Couture
Atelier WP SEO - Nathalie CoutureAtelier WP SEO - Nathalie Couture
Atelier WP SEO - Nathalie Couture
 
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesComment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
 
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
Synodiance > SEO et Speech Processing : Futur enjeu SEO ? - SEO Campus 2015 -...
 
Atelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternatAtelier wp seo bordeaux par alternat
Atelier wp seo bordeaux par alternat
 
L'incidence des Performances sur le SEO
 L'incidence des Performances sur le SEO L'incidence des Performances sur le SEO
L'incidence des Performances sur le SEO
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
 
Astuces pour mieux ranker sur google images [seogoodvibes]
Astuces pour mieux ranker sur google images [seogoodvibes]Astuces pour mieux ranker sur google images [seogoodvibes]
Astuces pour mieux ranker sur google images [seogoodvibes]
 
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...
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
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...
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherche
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
 
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformesProgressive Web Apps - Créer des applications Web et Mobiles multiplateformes
Progressive Web Apps - Créer des applications Web et Mobiles multiplateformes
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
 
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
 
Les critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon GoogleLes critères de qualité de vos pages web selon Google
Les critères de qualité de vos pages web selon Google
 
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
 

Similaire à Comment transformer la performance web en croissance et conversion utilisateur

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 à 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
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autreSEO Camp Association
 
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
 
SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...
SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...
SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...SEO CAMP
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesiProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 
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
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 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
 
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
 
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
 
Le référencement naturel - CCI Occitanie - Cibleweb
Le référencement naturel - CCI Occitanie - CiblewebLe référencement naturel - CCI Occitanie - Cibleweb
Le référencement naturel - CCI Occitanie - CiblewebCibleWeb
 
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
 
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfJulien Dereumaux
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressJulien Dereumaux
 
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
 
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
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO CAMP
 
Livre blanc stratégies marketing les dessous de la performance web
Livre blanc stratégies marketing les dessous de la performance webLivre blanc stratégies marketing les dessous de la performance web
Livre blanc stratégies marketing les dessous de la performance webThierry Pires
 

Similaire à Comment transformer la performance web en croissance et conversion utilisateur (20)

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 à 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...
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autre
 
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 inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...
SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...
SEO inclusive : vos visiteurs ne sont pas (que) des robots - Mathile Touchebo...
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
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...
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 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
 
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
 
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
 
Le référencement naturel - CCI Occitanie - Cibleweb
Le référencement naturel - CCI Occitanie - CiblewebLe référencement naturel - CCI Occitanie - Cibleweb
Le référencement naturel - CCI Occitanie - Cibleweb
 
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 ?
 
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPress
 
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
 
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
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
Livre blanc stratégies marketing les dessous de la performance web
Livre blanc stratégies marketing les dessous de la performance webLivre blanc stratégies marketing les dessous de la performance web
Livre blanc stratégies marketing les dessous de la performance web
 

Comment transformer la performance web en croissance et conversion utilisateur

  • 1. 1#seocampSEO CAMP Day LYON 2019 Comment transformer la performance web en croissance et conversion utilisateur Alexandre Thuriot
  • 4. 4#seocampSEO CAMP Day LYON 2019 https://blog.resoneo.com/2019/04/webperf-les-cles-dun-site-beaucoup-rapide-seo-campus/
  • 5. 5#seocampSEO CAMP Day LYON 2019 Tout le monde en parle … Less is More !
  • 6. 6#seocampSEO CAMP Day LYON 2019 Dareboost Et ce ne sont pas les outils qui manquent Lighthouse Page Speed Insight WebPageTest Fasterize GTMetrix avec des audits et recommandations toujours plus détaillés Sans parler de plugins All In One … / WP Rocket ..
  • 7. 7#seocampSEO CAMP Day LYON 2019 La culture de la performance web ? Webperf = Fonctionnalité ? La performance Web ne consiste pas seulement à comprendre ce qui fait qu'un site est rapide. Il s'agit de sensibiliser les développeurs et les non-développeurs que c’est essentiel pour le business. La performance est une fonctionnalité et doit être priorisée en tant que telle ! = La webperf est priorisée quand quelqu’un arrive à démontrer que les concurrents sont meilleurs.
  • 8. 8#seocampSEO CAMP Day LYON 2019 La priorisation de la webperf chez le client … La priorisation doit être objective et basée sur des hypothèses mesurables ! Dans ces conditions la performance web est généralement laissée aux développeurs qui s’ils le souhaitent peuvent prendre cette responsabilité. En pratique, les développeurs se concentrent sur la qualité et la delivrabilité des demandes. La performance web n’est jamais priorisée car n’étant pas monitorée il est pour beaucoup trop complexe de déterminer son R.O.I
  • 9. 9#seocampSEO CAMP Day LYON 2019 Comment créer une culture webperf ? Comprendre, Auditer, Mesurer, Séduire, Améliorer, Evaluer Expliquer le Pourquoi !
  • 10. 10#seocampSEO CAMP Day LYON 2019 Qui doit assumer les optimisations ? Travailler la webperf nécessite de travailler sur toutes les étapes de construction d’’une requête http : DNS Réseau / Hébergement / Cache / Développements / CDN / Images . C’est pourquoi la mise en place d’une stratégie d’amélioration continue de la performance web doit inclure tous les métiers de l’entreprise qui interagissent avec le site web. (Admin système / Devs / SEO / UX / Marketing / Sales …) Périmètre de la performance web
  • 11. 11#seocampSEO CAMP Day LYON 2019 Time To First Byte : 1er octet reçu par le navigateur, c’est à dire la vitesse à laquelle le serveur renvoi le premier octet de donnée. TTFB Il s’agit de la spmmes des ressources téléchargés par le navigateur du client pour afficher la page (html, images, js, css …) Poids des pages correspond au moment ou les premiers éléments de la page apparaissent à l’écran Start Render Somme des ressources téléchargeés par le navigateur pour executer le rendu et le tracking de la page demandée. Nombre de requêtes Etape 1 : suivre des KPI Les premiers éléments à suivre Simple à suivre / simple à expliquer
  • 12. 12#seocampSEO CAMP Day LYON 2019 Etape 2 : La perception de la performance Auditer la cinématique de chargement des pages Le Speed Index met en lumière le rythme auquel les éléments au- dessus de la ligne de flottaison s’affichent. Cet indice de performance de chargement de page indique à quelle vitesse le contenu d'une page commence à être visible. Plus le score est proche de zéro, mieux c'est. Speed Index > améliorer vos conversions
  • 13. 13#seocampSEO CAMP Day LYON 2019 https://requestmap.webperf.tools/ Request Map Generator On commence par quoi ? = A faire sur son site / ses soncurrents !
  • 14. 14#seocampSEO CAMP Day LYON 2019 Benchmark Moyenne du Web Poids moyen d’une page web en 2018 HTTP Archive Répartition des ressources Cumul du poids des ressources téléchargées par un navigateur (après compressions) Images 45% Javascript 35% Font 10% CSS 5% Selon Dareboost, une page web génère en moyenne 122 requêtes = A faire sur son site / ses soncurrents !
  • 15. 15#seocampSEO CAMP Day LYON 2019 CrUX : Chrome User Experience https://web.dev/chrome-ux-report-data-studio-dashboard = A faire sur son site / ses soncurrents !
  • 16. 16#seocampSEO CAMP Day LYON 2019 Créer une matrice avec toutes vos données et appuyez sur les points en souffrance vs concurrence Passer en mode Quick Wins
  • 17. 17#seocampSEO CAMP Day LYON 2019 Gestion des images : Lancer un audit = permet d’avoir un score de la gestion des images ; mais surtout permet d’avoir un objectif chiffré
  • 18. 18#seocampSEO CAMP Day LYON 2019 Les images pour les nuls ▪ Optimisation de la compression ▪ Sélection du format d’image ▪ Taille optimale ▪ Support des navigateurs ▪ Privilégier WebP ▪ Téléchargement de l’image optimisée en 1 clic
  • 19. 19#seocampSEO CAMP Day LYON 2019 API CDN • Les CDN d’images sont initialement utilisés pour localiser les images au plus proche de l’internaute. • Depuis quelques temps, il est possible d’utiliser les CDN comme un service d’optimisation et traitement avec des fonctionnalités difficiles à reproduire en interne. • Pour quelques euros par mois, cela permet de mettre ses ressources sur des fonctionnalités coeur-business. Content Delivery Network
  • 20. 20#seocampSEO CAMP Day LYON 2019 Optimiser Le chargement ▪ Suppression librairie Javascript ▪ <img src =‘’ dans la page (SEO) ▪ Fonctionne aussi sur les <iframe> En fonction du device, de la taille de l’écran, du réseau et de l’interraction utilisateur : le navigateur préchargera de façon dynamique les images.
  • 21. 21#seocampSEO CAMP Day LYON 2019 Javascript Processing Time 57% Third Party Code Influence du JS 100 KB de Javascript augmente en moyenne le Start To Render d’1 seconde. = Limiter les ressources Javascript au strict minimum !
  • 22. 22#seocampSEO CAMP Day LYON 2019 Centraliser la gestion de vos scripts Utilisation d’un TMS (Tag Manager Service) ▪ Appels Asynchrones des librairies JS ▪ Configuration dynamique ▪ Ajout / Suppression / Planification des scripts ▪ Configuration à la page ▪ 0 devs
  • 23. 23#seocampSEO CAMP Day LYON 2019 JS : Mise au régime ! ▪ Code Coverage (Green / Red) via la console du navigateur (F12) ▪ Segmenter l’appel aux ressources JS / CSS en fonction du pattern des pages ▪ Limiter les librairies tierces ▪ Utiliser les dernièers versions des librairies ▪ Favoriser les développements natifs
  • 24. 24#seocampSEO CAMP Day LYON 2019 Single Point Of Failure La majorité des sites Internet exploitent les Polices héberées sur Google Fonts. En cas de problème réseau cela peut impacter fortement le rendu de la page. Le SPOF …
  • 25. 25#seocampSEO CAMP Day LYON 2019 Perdre 20% de poids en 10min … Utiliser la compression Brotli à la place de Gzip > S’installe très simplement sur Apache / Ngnix. Faites la demande à votre admin système ou votre hébergeur.
  • 26. 26#seocampSEO CAMP Day LYON 2019 … https – Keep-Alive et résolution DNS Le fait de ne pas activer le Keep-Alive en https est catastrophique. A chaque appel d’une ressource sur le site le navigateur revalide toutes la chaîne SSL Negociation. Cela ajoute entre 150 et 200 ms par fichiers au temps de téléchargement global. Lorsqu’il est activé, le Keep- Alive permet au navigateur de valider une seule fois le protocole SSL.
  • 27. 27#seocampSEO CAMP Day LYON 2019 … https - http/2 & Keep Alive Avant Après
  • 28. 28#seocampSEO CAMP Day LYON 2019 Solution All in One : AMP Instant Everywhere ▪ Format dédié mobile ▪ Priorisation chargement des ressources pour le 1er écran ▪ Limitation Javascript ▪ Mécanisme de cache distribué ▪ Images Webp ▪ Compression Brotli ▪ … > Migrer vers AMP peut être une solution pour améliorer sa webperf mobile !
  • 29. 29#seocampSEO CAMP Day LYON 2019 Cela me rapporte combien d’améliorer ma webperf ?
  • 30. 30#seocampSEO CAMP Day LYON 2019 Les gains statistiques La performance web comme fonctionnalité améliore l’usage Aller / Retour entre la SERP et la page de votr site. Analyse de la pertinence du résultat par l’analyse comportementale de l’internaute. (Augmentation des analytics) PogoSticking La page se chargeant rapidement, la fonction de la page est affichée et comprise plus rapidement par l’internaute. Celui étant moins stressé, gagne en confiance ett sera plus facile à séduire. Taux de conversion L’optimisation du site par la suppression de l’inutile permet de simplifier son architecture dans le but de garder uniquement l’essentiel. Connaissance technique Comportement de l’internaute sur votre site. Fait-il une interaction supplémentaire ? Taux de rebond métier > Considérer toutes les fonctionnalités de votre site comme un ‘one click add to cart” Utiliser ces indicateurs pour enclencher l’étape 2 et aller plus loin dans l’optimisation
  • 31. 31#seocampSEO CAMP Day LYON 2019 https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
  • 32. 32#seocampSEO CAMP Day LYON 2019 https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
  • 33. 33#seocampSEO CAMP Day LYON 2019 Migration AMP https://www.thinkwithgoogle.com/intl/fr-fr/inspirations/success-stories/greenweez-booste-de-80-son-taux-de-conversion-mobile-avec-amp/
  • 34. 34#seocampSEO CAMP Day LYON 2019 Maintenir les performances pour de nombreux sites est tout aussi difficile, sinon plus difficile que d’être le plus rapide une fois 40% des grandes marques régressent sur leurs performances après 6 mois. Katie Hempenius Addy Osmani https://www.youtube.com/watch?v=YJGCZCaIZkQ
  • 35. 35#seocampSEO CAMP Day LYON 2019 Comment éviter de chuter et grossir à nouveau ?
  • 36. 36#seocampSEO CAMP Day LYON 2019 Définition d’un budget de Performance
  • 37. 37#seocampSEO CAMP Day LYON 2019 Intégration continue / build Test de non regression du contrat de performance à intégrer dans le process de mise en production
  • 38. 38#seocampSEO CAMP Day LYON 2019 MERCI AUX SPONSORS
  • 39. 39#seocampSEO CAMP Day LYON 2019 Question Mug ● Quel paramètre faut-il déclarer au moment de l’appel des Google Fonts pour afficher son contenu 1s plus rapidement ?