SlideShare une entreprise Scribd logo
Johan GIBOSIXavier KOCKELBERGH Frédéric VAN CAUWENBERGE
Lorenzo BLYWEERT
SEO – Expérience Utilisateur - Conversion
LES 7 COMMANDEMENTS POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
NOTRE TERRAIN DE JEU
B2C B2B
Retail
Services
Food Industrie
Etc.
La digitalisation du commerce
Finance
DOUBLE EXPERTISE POUR
VOTRE COMMERCE CONNECTÉ
Transformation
e-Commerce
Aligner stratégie, outils,
et organisations
Performance
& Clients
Conversion, CRM
& E-marketing
CONVERSION :
UN ACCOMPAGNEMENT DE A À Z
Taggage
Collecte de
data
Audit conversion
AB testing
Opti temps réponse
Formation
Coaching
Management de
transition
+13
Années d’expertise
ABOUT US
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
POURQUOI MESURER ?
53% des mobinautes
abandonnent si le temps de
chargement est supérieur à 3
sec.
GOOGLE
POURQUOI MESURER ?
CONVERSION
-1 sec de chargement
= - 10% de CA
= - 13,6 milliards $ par an
Pour Amazon
+0,7 sec de chargement
= +20% conversion
POURQUOI MESURER ?
USER EXPERIENCE
7/10 internautes
ne reviennent pas sur un site où ils
ont eu des difficultés de navigation
POURQUOI MESURER ?
Détection des régressions
Identification d’optimisations
Positionnement concurrence
‘’On ne peut améliorer que ce que l’on mesure !
‘’
Stratégie d’entreprise
SEO
L’écosystème digital
Plateforme d’affiliation
Tags d’affiliés
Outils Marketing Tiers
CDN
Clients
Robots
POURQUOI MESURER ?
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
LES MÉTRIQUES A SURVEILLER
Temps techniques
Temps total (tiers)
PERFORMANCES
ELEMENTS
PAGES
INDICATEURS
WEBPERF
PERFORMANCES
Temps DNS
Temps de connexion
Temps d'obtention
du 1er octet
Temps de
chargement
HTML
Temps de chargement
des éléments pages
LES GRANDES ÉTAPES
TECHNIQUES DU CHARGEMENT
StartToRender
Délai avant
l’affichage d’un
premier élément sur
la page
Important pour le
visiteur : c’est un
élément de
réassurance,
l’utilisateur voit la page
se charger
Important pour le SEO
également :
pogosticking (allers-
retours dans les SERP)
Fullyloaded
Chargement complet
de la page ainsi que
des ressources
asynchrones (JS
partenaires par
exemple)
Visuallycomplete
Délai avant le
chargement complet
de la partie au-
dessus de la ligne de
flottaison
TimetoFirstByte
Délai avant
réception du début
de la réponse HTML
Recommandation
Google : < 200 ms
DNS
Connexion
réseau
Traitement
serveur
LES MÉTRIQUES A SURVEILLER
PERFORMANCES
ELEMENTS
PAGES
INDICATEURS
WEBPERF Poids de page
Nombre d’éléments
POIDS DE PAGE &
NOMBRE D’ÉLÉMENTS
70% des éléments présents
sur vos pages proviennent de tiers
88% des temps de chargement
de vos pages proviennent de tiers
LES MÉTRIQUES A SURVEILLER
PERFORMANCES
ELEMENTS
PAGES
INDICATEURS
WEBPERF
Apdex
Temps ressenti utilisateur
Speed Index
EXPÉRIENCE UTILISATEUR
EXPÉRIENCE UTILISATEUR
0s 4s1s 2s 3s
A
B0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
0s 1s 2s 3s 4s
progressionduchargement(en%)
Speed Index page A
page B
EXPÉRIENCE UTILISATEUR
Un Bon Speed Index
Compris entre 1000 & 2000
sur Desktop
Compris entre 2000 & 3000
sur Mobile
TIP #1 :
LAZYLOAD & LIGNE DE FLOTTAISON
Les images représentent souvent
une partie importante du poids
d’une page
- Le lazyload permet de retarder le
chargement des images, jusqu’à
ce qu’elle apparaissent sur
l’écran du visiteur (au scroll)
- Seules les images utiles sont
chargées, au bon moment
EXPÉRIENCE UTILISATEUR
Apdex=
60x1pt + 30x0,5pt +10x0
100 internautes au total
Frustrante
> 12sec
Score : 0 pt
Tolérable
> 3sec & < 12sec
Score : 0,5 pt
Satisfaisante
< 3sec
Score : 1 pt
Votre score
Apdex est de
0,85/1
CAS D’UN PARCOURS
Objectifs
- Achat
- Espace personnel
- Souscription
- ....
3 sec
Chargement. Ne pas
excéder au risque de
dégrader l’expérience
des internautes
- 80/20
- Micro-conversion
- Étape anxiogène
Pourquoi un parcours ?
CAS D’UN PARCOURS
Etude menée par Netvigie de Janvier à Juillet 2017, sur 50 sites e-commerce Français et internationaux)
Indicateurs webperf
PIMKIE: NOS MÉTRIQUES
- 3 indicateurs pour un suivi
mensuel
- Un rythme de relevé basé sur
notre fréquence de TMA
PIMKIE: QUELQUES OPTIMISATIONS
- Identification de l’inefficacité de
certains éléments/blocs,
- Prise de décision: les supprimer.
Une HP revue
Objectifs
- Remonter la ligne de flottaison
- Optimiser les temps de
chargement
30%
Gain de
performances
DOM
PIMKIE: QUELQUES OPTIMISATIONS
Révision du panier
Objectifs
Modification d’une fonctionnalité
coûteuse en temps de calcul.
PIMKIE: QUELQUES OPTIMISATIONS
75 pts Gain de score
Speed Index
238ms ►101ms :
57,6% gain de perf
Révision du panier
Objectifs
Modification d’une fonctionnalité
coûteuse en temps de calcul.
CONTEXTE DE NAVIGATION
55%
e-commerçants
Frc. vendent à
l’international
90% des
internautes ont
une approche
cross device
LE MOBILE
Depuis Septembre 2017 50%
des recherches sur Google en France
se font sur mobile
MOBILE MOMENT
LE MOBILE
8/10 mobinautes se disent gênés
par les temps de chargement sur mobile
PERFORMANCES
8,8sec le temps de chargement
moyen d’une page sur mobile en France
LE MOBILE
- HTML ultra léger
- Affichage instantané de la page
AMP
(Accelerated Mobile Pages)
Permet de diviser les temps de chargement par 2
PWA
(Progressive Web App)
- Temps de chargement réduit
- Ergonomique et accessible hors connexion
- Moins contraignant que le développement d’une app
- SEO friendly : indexation
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
COMMENT S’ORGANISER ?
‘’Impossible de faire porter le problème à un seul acteur
‘’
50%
Business
50%
Technique
(dev, infra)
COMMENT S’ORGANISER ?
‘’Souvent, les torts sont partagés
‘’
RESPONSE TIME
‘’Il faut aborder le problème globalement
‘’
COMMENT S’ORGANISER ?
COMMENT S’ORGANISER ?
‘’Et le résoudre durablement
‘’
‘’Nommer votre Responsable Temps de réponse
‘’
COMMENT S’ORGANISER ?
La responsabilité du temps
de réponse doit être
portée par une seule
personne (mais partagée à
tous)
Analogie : Juriste ou Expert
SEO qui ont une expertise et
qui la partagent en interne.
‘’Nommer votre Responsable Temps de réponse
‘’
COMMENT S’ORGANISER ?
Ses missions :
- Définition et choix des
outils de mesure
- Définition des KPIs et
suivi
- Cadrage amont des
projets
- Diffuser la culture
temps de réponse
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
Photographe
Custom
Plateforme e-commerce Front web
Résolutions web standard : 72 DPI
Ecran retina :
Mini : 144 DPI
Compression avancée en JPG, PNG.
Des tailles différentes en fonction des
devices et avec les écrans HD et
Retina.
OPTIMISE LA CHAINE DE
PUBLICATION DES IMAGES
‘’1) La chaine de publication de votre catalogue produits
‘’
Avec l’animation commerciale, de nombreux éléments changent dans votre page
-> Mais peuvent augmenter sensiblement votre temps de réponse.
Pub / Adserving
Slider
Push Produits
Bannières
1) Création d’une charte de compression des images :
Formats / Tailles / Poids maximum
Et ajout dans les briefs graphiques.
2) Limiter le nombre d’image nécessaires à votre
business
-> Valider les bons emplacements avec votre webanalytics et des
cartes de chaleur.
Bonnes pratiques :
OPTIMISE LA CHAINE DE
PUBLICATION DES IMAGES
‘’2) La chaine de publication de l’animation de votre site
‘’
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
UTILISATEUR
Device
Réseau
BACK
Réseau
Cache
Configuration
FRONT
HTML
CSS
JavaScript
Médias
TEMPS DE
REPONSE
L’IMPONDERABLE L’OPTIMISABLE
UN TEMPS DE RÉPONSE
PAS TOUJOURS MAITRISABLE
LES ACTEURS DU
TEMPS DE RÉPONSE
Utilisateur
Device (problèmes de performances,
mauvaise utilisation, perception de
lenteur)
Réseau (Type de connexion,
perturbations réseau…)
Back
Performances (Utilisation CPU…)
Réseau (HTTP/2, congestion…)
Cache (trop court, désactivé, non
spécifié…)
Bases de données
Firewalls
Front
HTML
CSS
JS (site, frameworks, partenaires…)
Médias (images, vidéos…)
Requêtes
Réponses
Requêtes
Réponses
BACK: QUELQUES PISTES
D’OPTIMISATIONS TECHNIQUES
Cache
Redirections ConfigHTTP/2
Trop
courtCache
Non
spécifié
Firewall SécuritéMIME
TraficMonitoring Pics
FRONT: QUELQUES PISTES
D’OPTIMISATIONS TECHNIQUES
Templating
mobile HTMLQualité
du DOM
QualitéCSS Minification
Concaténation
Minification
Concaténation JSQualité
Compression
des images
Lazyload
Médias CDN
TIP #2 :
INTÉGRER UNE VIDÉO YOUTUBE
Bonne pratique : charger le lecteur
vidéo de Youtube « à la demande »
et non pas au chargement de la
page
- Le lecteur vidéo « embedded » alourdit
la page de 500+ kB
- L’astuce consiste à afficher un aperçu au
format image de la vidéo, et charger le
lecteur Youtube uniquement au clic :
1. En mode pop-in
2. En remplacement de l’aperçu de
la vidéo
TU SURVEILLERAS LES MÉTRIQUES
TU CONNAÎTRAS
L’IMPORTANCE DE LA MESURE
TU T’ORGANISERAS
CHAINE DE PUBLICATION
PROJET & IT
TU OPTIMISERAS TON
TAG MANAGENEMENT
LES 7 COMMANDEMENTS
POUR RÉDUIRE VOS
TEMPS DE CHARGEMENT
BACK & FRONT : TU RESPECTERAS
LES BEST PRACTICES
OPTIMISER SON
TAG MANAGEMENT
OPTIMISER SON
TAG MANAGEMENT
Waterfall de fnac.com
Représentation du chargement des
éléments
Même s’ils sont chargés à la fin, Les tags
doivent quand même se charger chez
l’internaute. (et ralentissent le chargement)
Tag externe
1) TAG ASYNCHONE :
Il commence à se charger dès que la page
est chargée dans le navigateur.
2) TIMEOUT :
Durée maximale pendant laquelle le tag
peut se charger.
3) LE BON TAG :
Demander systématiquement aux
partenaires le tag le plus léger.
4) FAIRE DU TRI :
Retirer systématiquement le tag quand le
partenaire est inactif.
Bonnes pratiques
OPTIMISER SON
TAG MANAGEMENT
Des questions ?
Merci pour votre
attention !Xavier KOCKELBERGH
xavierk@netvigie.com
Johan GIBOSI
Frédéric VAN CAUWENBERGE
fvancauwenberge@expertime.com
Lorenzo BLYWEERT
lblyweert@expertime.com

Contenu connexe

Tendances

10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug
StardustTesting
 
Scrum night kanban chez Google
Scrum night kanban chez GoogleScrum night kanban chez Google
Scrum night kanban chez Google
Yannick Quenec'hdu
 
Témoignage Wonderbox - refonte site globale & tests utilisateurs
Témoignage Wonderbox - refonte site globale & tests utilisateursTémoignage Wonderbox - refonte site globale & tests utilisateurs
Témoignage Wonderbox - refonte site globale & tests utilisateurs
Ferpection
 
Comment accélérer le DevOps avec l’ATDD/BDD?
Comment accélérer le DevOps avec l’ATDD/BDD?Comment accélérer le DevOps avec l’ATDD/BDD?
Comment accélérer le DevOps avec l’ATDD/BDD?
Danka Zindovic-Dana
 
Open xke kanban à grande échelle
Open xke kanban à grande échelleOpen xke kanban à grande échelle
Open xke kanban à grande échelle
Yannick Quenec'hdu
 
Accélérer les tests d’acceptation avec un DSL et du refactoring
Accélérer les tests d’acceptation avec un DSL et du refactoringAccélérer les tests d’acceptation avec un DSL et du refactoring
Accélérer les tests d’acceptation avec un DSL et du refactoring
Laurent PY
 
TIAD : DevOps & continuous delivery dans le cloud
TIAD : DevOps & continuous delivery dans le cloudTIAD : DevOps & continuous delivery dans le cloud
TIAD : DevOps & continuous delivery dans le cloud
The Incredible Automation Day
 
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
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum Day
Samuel Le Berrigaud
 
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
devops REX
 
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
Cedric GAUTIER
 
Model de qualité @ msdevmtl
Model de qualité @ msdevmtlModel de qualité @ msdevmtl
Model de qualité @ msdevmtl
MSDEVMTL
 
Devops, ça change quoi pour moi développeur ?
Devops, ça change quoi pour moi développeur ?Devops, ça change quoi pour moi développeur ?
Devops, ça change quoi pour moi développeur ?
antony_guilloteau
 
DevOps vu par les ops
DevOps vu par les opsDevOps vu par les ops
DevOps vu par les ops
Michel HUBERT
 
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
Peak Ace
 
Cahier de charges fonctionnels synthèse
Cahier de charges fonctionnels synthèseCahier de charges fonctionnels synthèse
Cahier de charges fonctionnels synthèse
Chef De Projet Détendu
 
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
Couthaïer FARFRA
 
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
LeClubQualiteLogicielle
 
Clean Architecture et Code patrimonial
Clean Architecture et Code patrimonialClean Architecture et Code patrimonial
Clean Architecture et Code patrimonial
Agile Montréal
 

Tendances (20)

10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug10 bonnes pratiques pour des apps et sites ecommerce sans bug
10 bonnes pratiques pour des apps et sites ecommerce sans bug
 
Scrum night kanban chez Google
Scrum night kanban chez GoogleScrum night kanban chez Google
Scrum night kanban chez Google
 
Témoignage Wonderbox - refonte site globale & tests utilisateurs
Témoignage Wonderbox - refonte site globale & tests utilisateursTémoignage Wonderbox - refonte site globale & tests utilisateurs
Témoignage Wonderbox - refonte site globale & tests utilisateurs
 
Comment accélérer le DevOps avec l’ATDD/BDD?
Comment accélérer le DevOps avec l’ATDD/BDD?Comment accélérer le DevOps avec l’ATDD/BDD?
Comment accélérer le DevOps avec l’ATDD/BDD?
 
Open xke kanban à grande échelle
Open xke kanban à grande échelleOpen xke kanban à grande échelle
Open xke kanban à grande échelle
 
Accélérer les tests d’acceptation avec un DSL et du refactoring
Accélérer les tests d’acceptation avec un DSL et du refactoringAccélérer les tests d’acceptation avec un DSL et du refactoring
Accélérer les tests d’acceptation avec un DSL et du refactoring
 
TIAD : DevOps & continuous delivery dans le cloud
TIAD : DevOps & continuous delivery dans le cloudTIAD : DevOps & continuous delivery dans le cloud
TIAD : DevOps & continuous delivery dans le cloud
 
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...
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum Day
 
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
[devops REX 2016] Comment l’IT peut arrêter de se faire vanner par les devs ?
 
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
JFTL2015 - Comment tester les performances ressenties par l’utilisateur d’une...
 
Model de qualité @ msdevmtl
Model de qualité @ msdevmtlModel de qualité @ msdevmtl
Model de qualité @ msdevmtl
 
Devops, ça change quoi pour moi développeur ?
Devops, ça change quoi pour moi développeur ?Devops, ça change quoi pour moi développeur ?
Devops, ça change quoi pour moi développeur ?
 
DevOps vu par les ops
DevOps vu par les opsDevOps vu par les ops
DevOps vu par les ops
 
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
SMX Paris 2018 - Comment optimiser votre visibilité en développant des synerg...
 
Cahier de charges fonctionnels synthèse
Cahier de charges fonctionnels synthèseCahier de charges fonctionnels synthèse
Cahier de charges fonctionnels synthèse
 
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
REX Kanban dans plusieurs contextes, par Couthaïer Farfra (Agile4Me)
 
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
20130113 02 - TMMI, un modèle pour rentabiliser une organisation de test et a...
 
Clean Architecture et Code patrimonial
Clean Architecture et Code patrimonialClean Architecture et Code patrimonial
Clean Architecture et Code patrimonial
 

Similaire à Les 7 commandements pour réduire vos temps de chargement

Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner
Frédéric Van Cauwenberge
 
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
 
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
 
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Paris Retail Week
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
Object Vingt Trois
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
Alexandre Thuriot
 
L'expérience utilisateur : tendances et mesure de l'UX
L'expérience utilisateur : tendances et mesure de l'UXL'expérience utilisateur : tendances et mesure de l'UX
L'expérience utilisateur : tendances et mesure de l'UX
Julie DULOT
 
Stratégies digitales : l'importance d'un site rapide
Stratégies digitales : l'importance d'un site rapide Stratégies digitales : l'importance d'un site rapide
Stratégies digitales : l'importance d'un site rapide
Fasterize
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
X2i
 
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
Thierry Pires
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
Oxalide
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Damien Jubeau
 
L'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numériqueL'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numérique
Thom. Poole
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
USERADGENTS
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
Philippe YONNET
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
Semrush France
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
iProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
Madeline Pinthon
 
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
Brigitte Marandon
 
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
 

Similaire à Les 7 commandements pour réduire vos temps de chargement (20)

Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner
 
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 !
 
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...
 
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
L'expérience utilisateur : tendances et mesure de l'UX
L'expérience utilisateur : tendances et mesure de l'UXL'expérience utilisateur : tendances et mesure de l'UX
L'expérience utilisateur : tendances et mesure de l'UX
 
Stratégies digitales : l'importance d'un site rapide
Stratégies digitales : l'importance d'un site rapide Stratégies digitales : l'importance d'un site rapide
Stratégies digitales : l'importance d'un site rapide
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
 
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
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
L'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numériqueL'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numérique
 
MobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile PagesMobiliTeaTime #13 : Accelerated Mobile Pages
MobiliTeaTime #13 : Accelerated Mobile Pages
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
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
 
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
 
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 7 commandements pour réduire vos temps de chargement

  • 1. Johan GIBOSIXavier KOCKELBERGH Frédéric VAN CAUWENBERGE Lorenzo BLYWEERT SEO – Expérience Utilisateur - Conversion LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT
  • 2. NOTRE TERRAIN DE JEU B2C B2B Retail Services Food Industrie Etc. La digitalisation du commerce Finance
  • 3. DOUBLE EXPERTISE POUR VOTRE COMMERCE CONNECTÉ Transformation e-Commerce Aligner stratégie, outils, et organisations Performance & Clients Conversion, CRM & E-marketing
  • 4. CONVERSION : UN ACCOMPAGNEMENT DE A À Z Taggage Collecte de data Audit conversion AB testing Opti temps réponse Formation Coaching Management de transition
  • 6. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 7. POURQUOI MESURER ? 53% des mobinautes abandonnent si le temps de chargement est supérieur à 3 sec. GOOGLE
  • 8. POURQUOI MESURER ? CONVERSION -1 sec de chargement = - 10% de CA = - 13,6 milliards $ par an Pour Amazon +0,7 sec de chargement = +20% conversion
  • 9. POURQUOI MESURER ? USER EXPERIENCE 7/10 internautes ne reviennent pas sur un site où ils ont eu des difficultés de navigation
  • 10. POURQUOI MESURER ? Détection des régressions Identification d’optimisations Positionnement concurrence ‘’On ne peut améliorer que ce que l’on mesure ! ‘’ Stratégie d’entreprise SEO
  • 11. L’écosystème digital Plateforme d’affiliation Tags d’affiliés Outils Marketing Tiers CDN Clients Robots POURQUOI MESURER ?
  • 12. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 13. LES MÉTRIQUES A SURVEILLER Temps techniques Temps total (tiers) PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF
  • 14. PERFORMANCES Temps DNS Temps de connexion Temps d'obtention du 1er octet Temps de chargement HTML Temps de chargement des éléments pages
  • 15. LES GRANDES ÉTAPES TECHNIQUES DU CHARGEMENT StartToRender Délai avant l’affichage d’un premier élément sur la page Important pour le visiteur : c’est un élément de réassurance, l’utilisateur voit la page se charger Important pour le SEO également : pogosticking (allers- retours dans les SERP) Fullyloaded Chargement complet de la page ainsi que des ressources asynchrones (JS partenaires par exemple) Visuallycomplete Délai avant le chargement complet de la partie au- dessus de la ligne de flottaison TimetoFirstByte Délai avant réception du début de la réponse HTML Recommandation Google : < 200 ms DNS Connexion réseau Traitement serveur
  • 16. LES MÉTRIQUES A SURVEILLER PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF Poids de page Nombre d’éléments
  • 17. POIDS DE PAGE & NOMBRE D’ÉLÉMENTS 70% des éléments présents sur vos pages proviennent de tiers 88% des temps de chargement de vos pages proviennent de tiers
  • 18. LES MÉTRIQUES A SURVEILLER PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF Apdex Temps ressenti utilisateur Speed Index
  • 20. EXPÉRIENCE UTILISATEUR 0s 4s1s 2s 3s A B0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 0s 1s 2s 3s 4s progressionduchargement(en%) Speed Index page A page B
  • 21. EXPÉRIENCE UTILISATEUR Un Bon Speed Index Compris entre 1000 & 2000 sur Desktop Compris entre 2000 & 3000 sur Mobile
  • 22. TIP #1 : LAZYLOAD & LIGNE DE FLOTTAISON Les images représentent souvent une partie importante du poids d’une page - Le lazyload permet de retarder le chargement des images, jusqu’à ce qu’elle apparaissent sur l’écran du visiteur (au scroll) - Seules les images utiles sont chargées, au bon moment
  • 23. EXPÉRIENCE UTILISATEUR Apdex= 60x1pt + 30x0,5pt +10x0 100 internautes au total Frustrante > 12sec Score : 0 pt Tolérable > 3sec & < 12sec Score : 0,5 pt Satisfaisante < 3sec Score : 1 pt Votre score Apdex est de 0,85/1
  • 24. CAS D’UN PARCOURS Objectifs - Achat - Espace personnel - Souscription - .... 3 sec Chargement. Ne pas excéder au risque de dégrader l’expérience des internautes - 80/20 - Micro-conversion - Étape anxiogène Pourquoi un parcours ?
  • 25. CAS D’UN PARCOURS Etude menée par Netvigie de Janvier à Juillet 2017, sur 50 sites e-commerce Français et internationaux)
  • 26. Indicateurs webperf PIMKIE: NOS MÉTRIQUES - 3 indicateurs pour un suivi mensuel - Un rythme de relevé basé sur notre fréquence de TMA
  • 27. PIMKIE: QUELQUES OPTIMISATIONS - Identification de l’inefficacité de certains éléments/blocs, - Prise de décision: les supprimer. Une HP revue Objectifs - Remonter la ligne de flottaison - Optimiser les temps de chargement 30% Gain de performances DOM
  • 28. PIMKIE: QUELQUES OPTIMISATIONS Révision du panier Objectifs Modification d’une fonctionnalité coûteuse en temps de calcul.
  • 29. PIMKIE: QUELQUES OPTIMISATIONS 75 pts Gain de score Speed Index 238ms ►101ms : 57,6% gain de perf Révision du panier Objectifs Modification d’une fonctionnalité coûteuse en temps de calcul.
  • 30. CONTEXTE DE NAVIGATION 55% e-commerçants Frc. vendent à l’international 90% des internautes ont une approche cross device
  • 31. LE MOBILE Depuis Septembre 2017 50% des recherches sur Google en France se font sur mobile MOBILE MOMENT
  • 32. LE MOBILE 8/10 mobinautes se disent gênés par les temps de chargement sur mobile PERFORMANCES 8,8sec le temps de chargement moyen d’une page sur mobile en France
  • 33. LE MOBILE - HTML ultra léger - Affichage instantané de la page AMP (Accelerated Mobile Pages) Permet de diviser les temps de chargement par 2 PWA (Progressive Web App) - Temps de chargement réduit - Ergonomique et accessible hors connexion - Moins contraignant que le développement d’une app - SEO friendly : indexation
  • 34. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 35. COMMENT S’ORGANISER ? ‘’Impossible de faire porter le problème à un seul acteur ‘’
  • 36. 50% Business 50% Technique (dev, infra) COMMENT S’ORGANISER ? ‘’Souvent, les torts sont partagés ‘’
  • 37. RESPONSE TIME ‘’Il faut aborder le problème globalement ‘’ COMMENT S’ORGANISER ?
  • 38. COMMENT S’ORGANISER ? ‘’Et le résoudre durablement ‘’
  • 39. ‘’Nommer votre Responsable Temps de réponse ‘’ COMMENT S’ORGANISER ? La responsabilité du temps de réponse doit être portée par une seule personne (mais partagée à tous) Analogie : Juriste ou Expert SEO qui ont une expertise et qui la partagent en interne.
  • 40. ‘’Nommer votre Responsable Temps de réponse ‘’ COMMENT S’ORGANISER ? Ses missions : - Définition et choix des outils de mesure - Définition des KPIs et suivi - Cadrage amont des projets - Diffuser la culture temps de réponse
  • 41. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 42. Photographe Custom Plateforme e-commerce Front web Résolutions web standard : 72 DPI Ecran retina : Mini : 144 DPI Compression avancée en JPG, PNG. Des tailles différentes en fonction des devices et avec les écrans HD et Retina. OPTIMISE LA CHAINE DE PUBLICATION DES IMAGES ‘’1) La chaine de publication de votre catalogue produits ‘’
  • 43. Avec l’animation commerciale, de nombreux éléments changent dans votre page -> Mais peuvent augmenter sensiblement votre temps de réponse. Pub / Adserving Slider Push Produits Bannières 1) Création d’une charte de compression des images : Formats / Tailles / Poids maximum Et ajout dans les briefs graphiques. 2) Limiter le nombre d’image nécessaires à votre business -> Valider les bons emplacements avec votre webanalytics et des cartes de chaleur. Bonnes pratiques : OPTIMISE LA CHAINE DE PUBLICATION DES IMAGES ‘’2) La chaine de publication de l’animation de votre site ‘’
  • 44. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 46. LES ACTEURS DU TEMPS DE RÉPONSE Utilisateur Device (problèmes de performances, mauvaise utilisation, perception de lenteur) Réseau (Type de connexion, perturbations réseau…) Back Performances (Utilisation CPU…) Réseau (HTTP/2, congestion…) Cache (trop court, désactivé, non spécifié…) Bases de données Firewalls Front HTML CSS JS (site, frameworks, partenaires…) Médias (images, vidéos…) Requêtes Réponses Requêtes Réponses
  • 47. BACK: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES Cache Redirections ConfigHTTP/2 Trop courtCache Non spécifié Firewall SécuritéMIME TraficMonitoring Pics
  • 48. FRONT: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES Templating mobile HTMLQualité du DOM QualitéCSS Minification Concaténation Minification Concaténation JSQualité Compression des images Lazyload Médias CDN
  • 49. TIP #2 : INTÉGRER UNE VIDÉO YOUTUBE Bonne pratique : charger le lecteur vidéo de Youtube « à la demande » et non pas au chargement de la page - Le lecteur vidéo « embedded » alourdit la page de 500+ kB - L’astuce consiste à afficher un aperçu au format image de la vidéo, et charger le lecteur Youtube uniquement au clic : 1. En mode pop-in 2. En remplacement de l’aperçu de la vidéo
  • 50. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  • 52. OPTIMISER SON TAG MANAGEMENT Waterfall de fnac.com Représentation du chargement des éléments Même s’ils sont chargés à la fin, Les tags doivent quand même se charger chez l’internaute. (et ralentissent le chargement) Tag externe
  • 53. 1) TAG ASYNCHONE : Il commence à se charger dès que la page est chargée dans le navigateur. 2) TIMEOUT : Durée maximale pendant laquelle le tag peut se charger. 3) LE BON TAG : Demander systématiquement aux partenaires le tag le plus léger. 4) FAIRE DU TRI : Retirer systématiquement le tag quand le partenaire est inactif. Bonnes pratiques OPTIMISER SON TAG MANAGEMENT
  • 54. Des questions ? Merci pour votre attention !Xavier KOCKELBERGH xavierk@netvigie.com Johan GIBOSI Frédéric VAN CAUWENBERGE fvancauwenberge@expertime.com Lorenzo BLYWEERT lblyweert@expertime.com