Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?

1. Make it fast, keep it fast #ec1to1 #webperf Le site le plus rapide de France

2. • CEO Fasterize • CTO RueDuCommerce pendant 10 ans

3. ! RueDuCommerce depuis 2008 ! Responsable Front-Office ○ Catalogue ○ Panier ○ Espace Client ! Focus mobile Aniss Boumrigua

4. Agenda Présentations Pourquoi un site rapide ? Comment faire un site rapide ? Comment Fasterize peut vous aider ? Takeaway

5. ! Création en 1999 ! Marketplace en 2007 ! Sous pavillon Carrefour depuis 2016 ! 8 millions d’offres actives ! 5 millions de VU par mois RueDuCommerce.com Tout le monde connait RueDuCommerce !

6. Fasterize Data Plus de 600 millions de pages traitées par mois Concrètement 19 ans (ou 18 969 584 s) économisés chaque mois Partenaires JDN, Google Business Leader européen du FEO (Front End Optimization) Société Éditeur SaaS français créé en 2011 Fondateur Stéphane Rios, ex-CTO de Rueducommerce

7. Nos clients

8. Enjeux

9. Sur mobile 53% des visites sont abandonnées si le site mobile met plus de 3s à charger !

10. Sur mobile 46% des consommateurs disent qu’attendre des pages qui se chargent est ce qu’il détestent le plus quand il surfent sur mobile

11. • Response time, TTFB • DomReady, Load Time • Start Render, Speed Index • TTFC, FID • TTI, FCI

12. Synthetic Monitoring

13. RHUM

14. moyenne 9xème percentile médiane

15. moyenne 9xème percentile médiane ceux qui vivent dans les datacenters

16. taux de conversion

17. Show me the money

18. Impact Calculator

25. Pendant ce temps chez …

26. ! Application : gros monolithe ! 4 frameworks PHP maison (!) ! Déploiement manuel ! Pas de CI/CD ! No security ! No scalability 16 ans de dette technique

27. ! Refonte from scratch ○ Fiche produit ○ Moteur de recherche / Liste produit ○ Home Page ○ Panier / Paiement / Espace client ○ DAM Modernisation de la plate-forme web

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

29. 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 !

30. Et pourtant … CLASSEMENT JDN MARS 2017

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

32. ! Priorité IT & Marketing ! Budget ! Sensibilisation en interne « Faire de la webperf une priorité de l’entreprise » Lancement du projet en Septembre 2017 Prise de conscience

33. Impacts SEO

34. ! “Mobilegeddon” ! AMP ! Index Mobile-First ! Chrome UX Reports (CrUX) intégré dans PageSpeed Insights ! Nouveaux outils TestMySite ! Google Speed Update ! Chrome Lite Pages 2015 - 2018

35. Comment faire ?

36. Organisation Pas que des outils et des techniques Conception en amont, au coeur du projet Des objectifs de perf partagés et connus à l’avance Contrôle par une personne transverse, garante du sujet webperf et soutenue au plus haut niveau Equipes IT en position d’aller vite

37. Comment faire ? (techniquement)

38. • TTFB • Start Render • Speed Index • First Interactive • Backend • CDN • FEO • …

39. Backend / Frontend / Third-Parties

40. ! Start Render ! First ContentFul Paint ! Speed Index ! First Interactive ! Visually Complete Métriques UX

41. ! Plus de serveurs ! Cache ○ But : répondre plus vite et au plus près de l’internaute ○ plusieurs types : Block / FullPage / APC / HTTP ○ protège et soulage les backends ! CDN = Cache distribué ○ Ne répond pas à toutes les situations ■ tout n’est pas cachable (mais ESI/Ajax) ■ le monde est vaste ■ les latences réseaux peuvent être importantes ! CMS Les « anciennes solutions »

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

43. 6 mois d’optimisation … • 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

44. SpeedIndex : de 9000 à 2800

46. Classement JDN Décembre 2017 Janvier 2018

47. La remontada Mars 2017 Décembre 2017 Février 2018 Mars 2018

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

49. ! Organisation ! Normalisation ! Nettoyage ! Audit ! Mesures ! Chargement Third Parties « On a ouvert la boite de Pandore !»

50. Avec Fasterize ?

51. Une solution Saas Nous accélérons l’affichage des sites web Une solution 100% compatible Pour tous les CMS du marché CMS propriétaire Expert Webperf

52. Comment ça marche ? Fasterize récupère les pages et les ressources demandées aux serveurs d'origine et analyse le code html, le javascript, le css et les images. 2 2 Fasterize applique les règles d’optimisation.  Chacune de ces règles est préalablement sélectionnée et testée par nos experts techniques afin de garantir la qualité de nos services. 3 Client web Fasterize génère le contenu optimisé à la volée avant de le renvoyer au navigateur. Celui-ci est bien sûr mis en cache si la réponse du serveur d'origine le permet. 4 Serveur d’origine 4 Le navigateur transmet une requête http vers la plateforme. Fasterize intercepte les requêtes des internautes vers le site (comme un proxy). 1 1 3 Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.

53. Automatisation Notre vision Vitesse UX

54. 50 règles industrialisées Remix Modification de l’ordre du chargement de la page Defer JS Progressive JPEG  CSS on top  SmartCache Minification  JS/CSS/HTML Compression  GZIP / Brotli Fonts Images Slim Réduction du poids des objets Reduce Diminution du nombre de requêtes Lazy loading Concaténation  JS/CSS HTTP 2  Multiplexage Early Hint  Préchargement   Compression intelligente

55. La puissance du SmartCache SmartCache Le SmartCache permet de mettre en cache les pages dynamiques. Plus précisément : il permet de mettre en cache la partie statique d’une page. Pour ça, nous identifions les parties dynamiques et statiques d’une page web. Ensuite, les parties statiques sont cachées tandis que les parties dynamiques sont chargées en Ajax dans un second temps. Et tout ça automatiquement !

56. La puissance du SmartCache SmartCache Le SmartCache permet de mettre en cache les pages dynamiques. Plus précisément : il permet de mettre en cache la partie statique d’une page. Pour ça, nous identifions les parties dynamiques et statiques d’une page web. Ensuite, les parties statiques sont cachées tandis que les parties dynamiques sont chargées en Ajax dans un second temps. Et tout ça automatiquement !

57. Mise en oeuvre ~ 6-8 semaines SET UP Personnalisation de la configuration et configuration du (multi) CDN TEST Recette fonctionnelle du site fasterizé BOOST Activation des optimisations pour tous les internautes DISCOVERY Branchement du site sans optimisations, collecte des infos du site, monitoring KICK-OFF Audit technique  et préparation de votre configuration

58. Disponibilité & Support Une plateforme hautement tolérante aux pannes, architecture complètement distribuée Plusieurs modes possibles 99,99% SLA ! Je désactive les optimisations : le trafic passe par Fasterize mais votre code et vos ressources ne sont pas optimisées. ! Je débranche : le trafic est redirigé directement sur votre serveur d’origine (délai de propagation : 20 secondes) ! En cas d'indisponibilité de Fasterize : le trafic est automatiquement redirigé vers votre serveur d’origine.

59. Vous gardez la main ! Dashboard Contrôle total sur le fonctionnement Personnalisation de votre configuration

60. Monitoring - RUM

61. Conclusion

62. DIY

63. ! 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 et l’ensemble de la société C’est quoi le secret ?

64. ! Sensibilisation à la WebPerf ! Intégration des widgets marketing ! Travail d‘ intégration + difficile et + long ! Rapatriement des ressources critiques ! Les Third Parties ○ Grosse variation de SpeedIndex ○ Impact l’interactivité Les points de douleur

65. ! Suivi du classement du JDN ! Suivi des indicateurs WebPerf ○ Mise en place d’un Budget WebPerf ! WebPerf ≠ projet IT ! WebPerf = Exigence technique Culture WebPerf

66. ! Investir sur un outil de monitoring ! Sensibiliser en interne ! Mettre en production vite et souvent ! Communiquez en interne et en externe ! Faire de la veille ! Benchmarker ! suivez vos concurrents Conclusion

67. Questions ?

68. Contacts Stéphane RIOS CEO Fasterize +33 6 30 26 44 80 s@fasterize.com Marc NAGGAR Sales Director +33 6 31 05 64 71 marc@fasterize.com Henri DE CHALAIN Sales Manager +33 6 51 95 72 18 henri@fasterize.com www.fasterize.com linkedin.com/company/fasterize @fasterize

Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?

Plus De Contenu Connexe

Diaporamas pour vous (16)

Similaire à Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ? (20)

Plus récents (20)