les 7 commandements pour réduire vos temps de chargement

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.

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

xavierk@netvigie.com

Johan GIBOSI

Frédéric VAN CAUWENBERGEfvancauwenberge@expertime.com

Lorenzo BLYWEERTlblyweert@expertime.com