Johan GIBOSIXavier KOCKELBERGH Frédéric VAN CAUWENBERGELorenzo BLYWEERT
SEO – Expérience Utilisateur - Conversion
LES 7 COMMANDEMENTS POUR RÉDUIRE VOSTEMPS DE CHARGEMENT
NOTRE TERRAIN DE JEU
B2C B2B
Retail ServicesFood 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
+ 13Anné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.
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 EXPERIENCE7/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
INDICATEURSWEBPERF
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 ÉTAPESTECHNIQUES DU CHARGEMENT
Star
t To
Rend
er
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)
Fully
load
ed
Chargement complet de la page ainsi que des ressources asynchrones (JS partenaires par exemple)
Visu
ally
com
plet
e
Délai avant le chargement complet de la partie au-dessus de la ligne de flottaison
Tim
e to
Firs
t Byt
e
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
INDICATEURSWEBPERF 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
INDICATEURSWEBPERF
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
pro
gre
ssio
n d
u c
harg
emen
t (e
n%
)
Speed Index page Apage B
EXPÉRIENCE UTILISATEUR
Un Bon Speed Index
Compris entre 1000 & 2000sur Desktop
Compris entre 2000 & 3000sur 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> 12secScore : 0 pt
Tolérable> 3sec & < 12secScore : 0,5 pt
Satisfaisante< 3secScore : 1 pt
Votre score Apdex est de 0,85/1
CAS D’UN PARCOURS
Objectifs
- Achat- Espace personnel- Souscription- ....
3 secChargement. 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
chargement30%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 tempsde réponse doit êtreportée par une seulepersonne (mais partagée àtous)
Analogie : Juriste ou ExpertSEO qui ont une expertise etqui 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 DPIEcran 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 DEPUBLICATION 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 maximumEt 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 DEPUBLICATION 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
UTILISATEURDeviceRéseau
BACKRéseauCache
Configuration
FRONTHTML
CSSJavaScript
Médias
TEMPS DE REPONSE
L’IMPONDERABLE L’OPTIMISABLE
UN TEMPS DE RÉPONSE PAS TOUJOURS MAITRISABLE
LES ACTEURS DUTEMPS 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éesFirewalls
Front
HTMLCSSJS (site, frameworks, partenaires…)
Médias (images, vidéos…)
Requêtes
RéponsesRequêtes
Réponses
BACK: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES
CacheRedirections ConfigHTTP/2
Trop courtCache Non
spécifié
Firewall SécuritéMIME
TraficMonitoring Pics
FRONT: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES
Templatingmobile HTMLQualité
du DOM
QualitéCSS MinificationConcaténation
MinificationConcaténation JSQualité
Compression des images
LazyloadMé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-in2. 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
Johan GIBOSI
Frédéric VAN [email protected]
Lorenzo [email protected]