Nous vous expliquons dans ce livre blanc ce qu’est la webperf, les bonnes méthodes et pratiques, les technologies et les outils à connaitre pour rendre l’expérience utilisateur unique, fluide et agréable sur votre site de vente en ligne. Pour illustrer ce thème nous avons réalisé une étude de cas, et la webperf devient plus claire !

1. La WebperformanceLA COURSE A LA PERFORMANCE DE VOTRE SITE E-COMMERCE
L’agence digitale

2. La Webperf en 3 points
1. COMPRENDRE LA WEB PERFORMANCE
• Du code source au rendu utilisateur
• Qu’est ce que la Web Perf
• L’importance de la Web Perf
2. COMMENT POUR L’E-COMMERCE
• Le contexte du e-Commerce
• Les technologies
• Les bonnes pratiques
• Les étapes d’une stratégie de Web Perf
3. LES ERREURS LES PLUS FREQUENTES
2
L’agence digitale

3. 1. Comprendre la webperf
Du code source au rendu utilisateur
3
L’agence digitale

4. 1. Comprendre la webperf
Qu’est-ce que la webperf ?
• Ensemble de :
• Méthodes
• Bonnes pratiques
• Technologies
• Outils
Permettant de maximiser l'expérience utilisateur d'un site web
et de diminuer les ressources permettant de le produire.
C’est une culture, une attitude, une obsession …
4
L’agence digitale

5. 1. Comprendre la webperf
Importance de la webperf ?
5
L’agence digitale
Maximiser
l’expérience utilisateur
Réduire
les coûts
Maximiser
l’expérience utilisateur
Améliorer
son Google ranking

6. 2. Web performance & e-Commerce
Contexte du e-commerce
Le temps, c’est de l’argent !
80 % de la web perf se joue au niveau Frontend (donc de la couche
Design de votre site)
Un site lent, indisponible, peu performant ou non fonctionnel, c’est
une perte de CA !
Sur l’image, on voit un internaute qui dort mais dans la réalité il est
parti sur le site de votre concurrent…
6
L’agence digitale

7. 2. Web performance & e-Commerce
Contexte du e-commerce
Au-delà de 4 secondes de temps de chargement, c’est 25% d’utilisateurs qui sont déjà parti voir ailleurs.
Ajoutez à cela le fait qu’ils sont peut-être arrivés sur le site par une annonce Adwords, et donc payante, c’est
encore une raison supplémentaire d’améliorer votre performance
7
L’agence digitale

8. 2. Web performance & e-Commerce
Contexte du e-commerce
Même les plus grands du Web et de l’e-Commerce sont logés à la même enseigne.
• Cas Google : +400 ms de temps de chargement, c’est une perte de 0,44% du volume des recherches
• Cas Amazon : une augmentation de 100ms de temps de chargement, ce sont 1% des ventes de perdues, et lorsque l’on sait
qu’Amazon avait un CA de 100M de dollars en 2015, on estime facilement les pertes de revenues engendrées
• Cas Shopzilla : pour ce comparateur de prix, le gain de 5s sur le chargement d’une page a permis l’augmentation du taux de
conversion et également des pages vues
8
L’agence digitale

9. 2. Web performance & e-Commerce
Les Technologies : HTTP2
9
L’agence digitale

10. 2. Web performance & e-Commerce
Les Technologies : HTTPS
10
L’agence digitale
Source : http://www.httpvshttps.com/
HTTPS/2 : 1.012 s
• En moyenne 86% plus rapide
• Et en bonus, un meilleur ranking dans
Google
Source : http://www.httpvshttps.com/
HTTP = 11.786 s
Conditions du test : 360 images, pas de cache côté serveur

11. 2. Web performance & e-Commerce
Les Technologies : Cache Cache
Utiliser du cache pour ne solliciter les parties dynamiques uniquement quand nécessaire
• Cache navigateur
• Cache serveur
• Cache interpréteur
• Cache bases de données
11
L’agence digitale

12. 1er rempart 2ème rempart 3ème rempart 4ème rempart
12
L’agence digitale
Pour illustrer les différents caches prenons le cas d’un site ne bénéficiant d’aucun cache, tous les visiteurs viennent
directement solliciter le code et la BDD.
De manière générale sur un site e-Commerce, on a 90% des visiteurs viennent pour avoir de l’info sur les produits.
Ces curieux peuvent être filtrés au travers d’un 1er rempart : Varnish. Avec ce 1er rempart, on déjà éviter à 90% du
trafic de ralentir le site
Sur les 10% restant, la moitié de ces visiteurs naviguent sur les pages catégories et cliquent sur les pages produits
sans l’intention d’acheter. Pour ces visiteurs flâneurs, on met en place 2 remparts avec APC et MemCache.
Il ne reste que 5% des visiteurs dans lesquels j’ai encore quelques indécis, qui ajoutent un ou plusieurs produits
dans son apnier mais qui ne converti pas. Ces abandonnistes qui font des requêtes sur la base de données, on
dresse un repart permettant de les cacher avec Query Cache.
Enfin, il reste 2 à 3% d’acheteurs pour qui le code et la BDD sont dédiées.

13. 2. Web performance & e-Commerce
Les bonnes pratiques
Embarquer la « problématique » de la web performance le plus tôt possible et à tous les étages
• Utiliser les bons formats d’images (jpg, png, webp, gif)
• Ne pas redimensionner une image dans le navigateur
• Compresser tout ce qui est possible (HTML, CSS, JS) côté serveur
• Favoriser et utiliser au mieux le cache du navigateur
• Minimiser le nombre de requêtes (combiner JS CSS en un seul fichier)
• Minimifier les JS, CSS, HTML
• Pré-chargement de pages (en se basant sur le chemin habituel des internautes sur le site)
• Optimiser le start render en chargeant le strict nécessaire
• Optimiser le visually complete
• Minimiser le reflow en maitrisant les modifications de DOM et CSSOM
• Utiliser le GPU sur les éléments stratégiques
13
L’agence digitale

14. 2. Web performance & e-Commerce
Mise en œuvre de la webperf
• Mesurer
• Identifier point de contention
• Améliorer
• Répéter
14
L’agence digitale

15. 2. Web performance & e-Commerce
Mesurer
Voici quelques outils qui vous seront utiles pour mesurer le temps de chargement de votre site
15
L’agence digitale
PageSpeed
KPI de vitesse défini par
Google
Yslow
KPI de vitesse défini par
Yahoo
W3C Navigation
Timing
Speed Index

16. 3. Les erreurs les plus frequentes
Utiliser des social sharer comme addThis, shareThis…
ERREUR
~500ms de temps de chargement supplémentaire
pour un taux d’utilisation parfois nul
16
L’agence digitale

17. 3. Les erreurs les plus frequentes
Utiliser des images non optimisées sur son site…
ERREUR
Une image optimisée peut diviser son poids par 2 ou 3,
penser également aux images de contenu
17
L’agence digitale

18. 3. Les erreurs les plus frequentes
Charger les fichiers et le code JS sans optimisation
ERREUR
L’exécution et le chargement d’un script JS peut considérablement augmenter le
temps de chargement de la page
18
L’agence digitale

19. Vous souhaitez optimiser la performance de votre site ?
Vous désirez améliorer le référencement de votre site ?
Vous aimeriez vous former aux techniques webmarketing ?
Vous souhaitez être accompagné sur le web ?
Vous réfléchissez à une campagne de webmarketing ?
19
Contactez-nous et, ensemble,
discutons de votre projet - 09 71 00 23 23 – bonjour@object23.fr

20. 20
Découvrez notre oFFRE
Object23 accélère
votre transformation digitale
en vous accompagnant
de bout en bout
dans vos projets digitaux.
Stratégie digitale à long terme, projets ponctuels
ou spécifiques, Object23 est le partenaire adapté au
développement de votre performance.
www,object23,fr
www.adista.fr

21. L’agence digitale