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

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

• CEO Fasterize
• CTO RueDuCommerce
pendant 10 ans

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

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

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

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

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

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

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

moyenne
9xème percentile
médiane

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

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

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

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

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 !

Et pourtant …
CLASSEMENT JDN MARS 2017

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

! 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

! “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

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

Comment faire ?
(techniquement)

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

Backend / Frontend / Third-Parties

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

! 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 »

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

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

Classement JDN
Décembre 2017 Janvier 2018

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

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

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

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

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.

Automatisation
Notre vision
Vitesse UX

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

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 !

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

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.

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

! 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 ?

! 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

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

! 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

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 ?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

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

Ähnlich wie Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ? (20)

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