Qu'est ce que la Web perf ? C'est un 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 …

1. La Web Performance par
Adista

2. vos Intervenants
// www.adista.fr
// blog.object23.fr
// Facebook
// @object_23
Jérémy
BESSon
LeadDev
04 77 92 30 51
jbesson@adista.fr
Olivier
Jan
Responsable Offre
Hébergement Web &
OpenSource
04 28 07 06 25
ojan@adista.fr
Josselin
Fournier
Consultant Digital
04 28 07 06 21
jfournier@adista.fr

3. Adista…

4. NotRe oFFRE
Object23 accélère
votre transformation digitale
en vous accompagnant
de bout en bout
dans vos projets digitaux.

5. uNE éQuIPE d’EXPERTS
L’équipe Object23 est composée de profils variés et complémentaires
pouvant répondre à toutes vos demandes

6. Nos technologies

7. PLAN
1. COMPRENDRE LA WEB PERFORMANCE
1. Du code source au rendu utilisateur
2. Qu’est ce que la Web Perf
3. L’importance de la Web Perf
2. COMMENT POUR L’E-COMMERCE
1. Le contexte du e-Commerce
2. Les technologies
3. Les bonnes pratiques
4. Les étapes d’une stratégie de Web Perf
3. ETUDE DE CAS
1. Résultat audit
2. Préconisations
3. Potentiel d’évolutions

8. Comprendre la
Web Performance

9. COMPRENDRE
DU CODE SOURCE AU RENDU UTILISATEUR

10. COMPRENDRE
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 …
QU’EST-CE QUE LA WEBPERF ?

11. COMPRENDRE
IMPORTANCE DE LA WEBPERF
Maximiser
l’expérience utilisateur
Réduire
les coûts
Faire la différence par
rapport à la concurrence
Améliorer
son Google ranking

12. Web performance &
e-Commerce

13. WEBPERF & E-COMMERCE
Le temps, c’est de l’argent !
80 % de la web perf se joue au niveau Frontend
Site indisponible, peu performant ou non fonctionnel = perte de CA
CONTEXTE DU E-COMMERCE

14. WEBPERF & E-COMMERCE
Au-delà de 4 secondes de temps de chargement, c’est 25% d’utilisateurs qui sont déjà parti voir ailleurs.
CONTEXTE DU E-COMMERCE

15. WEBPERF & E-COMMERCE
Plus d’histoires et de stats sur https://wpostats.com/
CONTEXTE DU E-COMMERCE

16. WEBPERF & E-COMMERCE
LES TECHNOLOGIES : HTTP2

17. WEBPERF & E-COMMERCE
Source : http://www.httpvshttps.com/
HTTPS/2 : 1.012 s
En moyenne 86% plus rapide
Et en bonus, un meilleur ranking dans
Google
LES TECHNOLOGIES : HTTPS
Source : http://www.httpvshttps.com/
HTTP = 11.786 s
Conditions du test : 360 images, pas de cache côté
serveur

18. WEBPERF & 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

19. WEBPERF & E-COMMERCE
LES TECHNOLOGIES : CACHE CACHE
1er rempart 2ème
rempart
3ème
rempart
4ème
rempart

20. WEBPERF & E-COMMERCE
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
LES BONNES PRATIQUES

21. WEBPERF & E-COMMERCE
- Mesurer
- Identifier point de contention
- Améliorer
- Répéter
MISE EN ŒUVRE DE LA WEBPERF

22. WEBPERF & E-COMMERCE
MESURER
Page Speed Yslow W3C Navigation timing Speed Index

23. Web performance étude
de cas

24. ETUDE DE CAS
RÉSULTAT AUDIT

25. ETUDE DE CAS
- Nombreuses redirections (47 au max sur sites testés)
- Pas de concaténation CSS et JS
- Pas de date d’expiration pour les fichiers médias
- Fichiers JS chargés en synchrone dans la balise <head>
- Des images redimensionnées dans le navigateur
RÉSULTAT AUDIT

26. ETUDE DE CAS
PRÉCONISATIONS
La ferme des animaux
- Supprimer le doublon du slider en home (DOM)
- Charger les scripts JS en bas de page (inline et chargement)
- Spécifier les tailles d’image du slider
- Remplacer addthis par un script local
Gain potentiel de 800ms sur le first paint

27. ETUDE DE CAS
PRÉCONISATIONS
Cadeau Maestro
- Charger les scripts JS en bas de page et en différé
- Retirer le CSS inutilisé dans la page (environ 70%)
- Eliminer les préfixes CSS inutiles
Gain potentiel de 200ms-400ms

28. ETUDE DE CAS
PRÉCONISATIONS
Shopix
- Charger les scripts JS en bas de page et en différé
- Retirer le CSS inutilisé dans la page (environ 88%)
- Eliminer les préfixes CSS inutiles
- Remplacer addthis par un script local
Gain potentiel de 400ms-600ms

29. Questions ?