Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

REX : la webperf chez RueDuCommerce

388 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

REX : la webperf chez RueDuCommerce

  1. 1. La #webperf chez RueDuCommerce.com " Le temps c’est de l’argent " Aniss Boumrigua @aboumrigua
  2. 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. 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. 4. Modernisation de la plate-forme web • Refonte from scratch • Fiche produit • Moteur de recherche • Liste produit • Home Page
  5. 5. Déploiement AVANT TYPE DE PAGE APRES 1500ms Fiche produit 45ms 1200ms Liste produit 150ms 900ms Moteur de recherche 150ms MONITORING RESULTATS
  6. 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. 7. Et pourtant … CLASSEMENT JDN MARS 2017
  8. 8. Waterfall Le temps serveur représente – de 10% du temps de chargement BACKEND FRONTEND
  9. 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. 10. Mesurer pour comprendre START RENDER SPEED INDEX https://speedcurve.com
  11. 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. 12. SpeedIndex de 9000 à 2800 de SpeedIndex
  13. 13. Résultats en image
  14. 14. Décembre 2017 Février 2018 Le classement du JDN Suivez @rueducommerce sur le classement du mois de mars
  15. 15. Benchmark concurrents
  16. 16. Impact Business Taux de conversions site mobile : +56% par à N-1
  17. 17. Impact Business Distribution du temps de chargement : 1 janvier 2018 – 7 Février 2018 1 janvier 2017 – 7 Février 2017
  18. 18. 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
  19. 19. FOCUS CHANTIERS TECHNIQUES
  20. 20. HTTPS + HTTP2 • Le passage au HTTPS dégrade les performances • HTTP2 permet de revenir à des performances HTTP
  21. 21. HTTPS + HTTP2 Optimisez vos connexions TLS : Limitez les domaines (unsharding)
  22. 22. lazyloading Html “La meilleure requête est celle qui n’arrive pas”
  23. 23. 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
  24. 24. 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
  25. 25. 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é
  26. 26. Interactivité Estimation de la latence d’action Estimation de la latence d’action
  27. 27. Plan 2018 • Poursuite des optimisations techniques • Monitoring RUM à exploiter • Améliorations UX • Optimisation des tiers • Communication
  28. 28. 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
  29. 29. Merci
  30. 30. Questions

×