Les 7 commandements pour réduire vos temps de chargement de son site web: Présentation du petit déjeuner sur le temps de chargement et temps de réponse. 7 actions prioritaires à mener pour réduire son temps de chargement de son site web

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

5. +
13Années d’expertise
ABOUT US

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

19. EXPÉRIENCE UTILISATEUR

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 #2 :
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
> 7sec
Score : 0 pt
Tolérable
> 3sec & < 7sec
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

45. 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

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 #1 :
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

51. OPTIMISER SON
TAG MANAGEMENT

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