Support de notre petit-déjeuner co-organisé avec notre partenaire Expertime Consulting sur le thème des temps de chargement. Retrouvez le contenu de notre présentation : nos stats webperf, nos tips et astuces pour vous permettre d'optimiser vos temps de chargement.
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
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
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
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
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.
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
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