Aniss Boumrigua nous a présenté comment à l'occasion d'une refonte globale ils ont réussi à optimiser les performances de leur site et ainsi améliorer drastiquement leur taux de transformation

1. La #webperf chez
RueDuCommerce.com
" Le temps c’est de l’argent "
Aniss Boumrigua @aboumrigua

2. RueDuCommerce.com
• Création en 1999
• Marketplace en 2007
• Sous pavillon Carrefour 2016
• Volume d’affaire +400 Million €
• +4 millions d’offres actives
• 5 millions de visiteurs uniques par mois

3. 16 ans de dettes techniques sclérose la
performance du site
• Application : gros monolithe
• 4 frameworks PHP maison
• Déploiement manuel
• Pas de CI/CD
• No security
• No scalability

4. Modernisation de la plate-forme web
• Refonte from scratch
• Fiche produit
• Moteur de recherche
• Liste produit
• Home Page

5. Déploiement
AVANT TYPE DE PAGE APRES
1500ms Fiche produit
45ms
1200ms Liste produit
150ms
900ms Moteur de recherche
150ms
MONITORING
RESULTATS

6. Google et impact SEO
CRAWL GOOGLE X 10
"Google a indexé plus de 3
millions de page en une
seule nuit"
Le TTFB influence le temps de crawl

7. Et pourtant …
CLASSEMENT JDN MARS 2017

8. Waterfall
Le temps serveur représente – de 10% du temps de chargement
BACKEND FRONTEND

9. « Mise en place d’un plan d’action pour faire de la webperf une priorité
de l’entreprise »
• Priorité IT & Marketing
• Obtention d’un budget
• Sensibilisation en interne
Prise de conscience
Lancement du projet en Septembre 2017

10. Mesurer pour comprendre
START
RENDER
SPEED
INDEX
https://speedcurve.com

11. 6 mois d’optimisation …
• Nettoyer le head
• Limiter les domaines
• Différer les js
• Lazyloding (images et html)
• Svg VS Font icône
• http -> https -> http2
• Passage en adapatif
• Utiliser un CDN
• Lazyloading avis BazaarVoice
• Lazyloading Google AFS
• Lazyloading vidéos YOUTUBE
• Affichage synchrone du délais de livraison
• Affichage synchrone du paiement en Xfois
• Cache Varnish de 5 minutes sur les fiches produits
• Lazyloading des images sous la ligne de flottaison
• Compression des images lors du build projet
• Suppression de la redirection 302 de smart.js.
• Mise en place d’une URL unique par offre
• Mise en place de l'adaptatif
• Suppression des redirections javascript
• Mise en place de redirection serveur
• Mise en place d'une csp-report
• Unsharding du mts
• Changement System Font Stack sur le mobile
• Mise en place du preconnect sur media-rdc.com
• Mise en place du preload des woff
• Déplacer le script ONFOCUS dans TagCo
• Cache de 15 ans sur les assets
• Nettoyage des js/css
• Lazyloading du mini-panier
• Lazyloading des sous menus
• Inlining SVG des logos RDC et Carrefour
• Inlining SVG de Express illimité
• Utilisation des SVG sur la fiche produit
• Remplacer le domaine medias
• Suppression des sprites inutiles.
• Amélioration UX/UI des images miniatures
• Amélioration UX/UI du zoom
• suppression du JavaScript slider image.
• Mise en place de https
• Mise en place du http2
• Mise en place de Cloudflare sur medias-rdc.com
• Mise en place de Cloudflare sur www.rdc.fr
• Politique des redirections des anciennes pages
• Inlining image css / Svg
• Unsharding
• Lazyloading html / Preload des fonts
• Defer
• Lazyloading JavaScript autocompletion
• Suppression du conteneur haut page TagCo
• Unsharding du script TagCo bas de page
• New processus de synchronisation et
déploiement
• Unsharding du script AbTasty
• Mise en place d'un Feature flag AbTasty
• Découpage des CSS/JS pour la spécificité du checkOnly
• Appel du service mts en defer
• Affichage synchrone du paiement en 4x
• Unsharding des CSS
+ 100 OPTIMISATIONS
TECHNIQUES

12. SpeedIndex
de 9000 à 2800 de SpeedIndex

13. Résultats en image

14. Décembre 2017 Février 2018
Le classement du JDN
Suivez @rueducommerce sur le classement
du mois de mars

16. Benchmark concurrents

17. Impact Business
Taux de conversions site mobile : +56% par à N-1

18. Impact Business
Distribution du temps de
chargement :
1 janvier 2018 – 7 Février 2018
1 janvier 2017 – 7 Février 2017

19. C’est quoi le secret ?
• Se mettre en position d’aller vite
• + 100 optimisations webperf en 6 mois
• Patience
• 50ms par 50ms
• S’appuyer sur l’équipe Système et réseaux (ops)
• Embarquer le Marketing

20. FOCUS
CHANTIERS TECHNIQUES

21. HTTPS + HTTP2
• Le passage au HTTPS dégrade les performances
• HTTP2 permet de revenir à des performances HTTP

22. HTTPS + HTTP2
Optimisez vos connexions TLS : Limitez les domaines (unsharding)

23. lazyloading Html
“La meilleure requête est celle qui n’arrive pas”

24. Site adaptatif
• Un seul et unique nom de domaine
• Plus de redirection javascript
• Plus de redirection serveur
• Simplification optimisation SEO
• Nettoyage des Urls en m.rueducommerce.fr
• Ready pour l’index mobile first Google
https://www.rueducommerce.fr

25. Optimisations des fonts
LES DIFFERENTES TECHNIQUES
• RÉDUIRE LE POIDS DES FICHIERS ( WOFF2 )
• UTILISER LES SYSTEM FONTS
• UTILISER LES PROPRIÉTÉS CSS « FONT-DISPLAY »
• PRELOAD DES FONTS
• FOUT WITH CLASS
• L’INLINE / PRELOAD DES FONTS
UTILISATION DES SYSTEM FONTS SUR LA VERSION MOBILE

26. Points de douleur
• Sensibilisation à la webperformance
• Travail d‘ intégration plus difficile
• Rapatriement des ressources critiques
• Widgets marketing plus complexe à intégrer
• SEO
• Les tiers :
• Grosse variation de SpeedIndex
• Impact l’ interactivité

27. Interactivité
Estimation de la latence d’action
Estimation de la latence d’action

28. Plan 2018
• Poursuite des optimisations techniques
• Monitoring RUM à exploiter
• Améliorations UX
• Optimisation des tiers
• Communication

29. Conclusion
• Investir sur un outil de monitoring
• Mettre en production vite et souvent
• Communiquez en interne et en externe
• Faire de la veille
• Valorisation du travail d’intégration
• Benchmarker ! suivez vos concurrents
• Convaincre le Marketing

30. Merci

31. Questions