A l’ère du mobile-first, les utilisateurs s’attendent à naviguer et acheter de façon fluide n’importe où et n’importe quand. Le temps de chargement est donc devenu LE critère le plus important pour les utilisateurs et cette exigence se reflète dans vos taux de conversion mobile.
Depuis plus d'un an, RueDuCommerce est classé par le JDN comme le site mobile e-commerce le plus rapide de France. Comment les équipes de Rue Du Commerce ont-elles relevé ce défi ? Comment a-t-on mesuré les améliorations sur l’expérience utilisateur ? Quels sont les bénéfices sur les utilisateurs et sur le business ?
Stéphane Rios, CEO de Fasterize et Aniss Boumrigua, Responsable du site RueDuCommerce.fr, vous partagent leurs expériences et leurs bonnes pratiques.
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
30. ! Application : gros monolithe
! 4 frameworks PHP maison (!)
! Déploiement manuel
! Pas de CI/CD
! No security
! No scalability
16 ans de dette technique
31. ! Refonte from scratch
○ Fiche produit
○ Moteur de recherche / Liste produit
○ Home Page
○ Panier / Paiement / Espace client
○ DAM
Modernisation de la plate-forme web
32. Déploiement
AVANT TYPE DE PAGE APRES
1500ms Fiche produit
45ms
1200ms Liste produit
150ms
900ms Moteur de recherche
150ms
RESULTATS
33. 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 !
36. ! 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
40. 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
44. ! Start Render
! First ContentFul Paint
! Speed Index
! First Interactive
! Visually Complete
Métriques UX
45. ! 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 »
46. 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
47. 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
55. 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
56. 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.
58. 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
59. 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 !
60. 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 !
61. 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
62. 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.
63. Vous gardez la main !
Dashboard
Contrôle total sur le fonctionnement Personnalisation de votre configuration
69. ! 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 ?
70. ! 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
71. ! Suivi du classement du JDN
! Suivi des indicateurs WebPerf
○ Mise en place d’un Budget WebPerf
! WebPerf ≠ projet IT
! WebPerf = Exigence technique
Culture WebPerf
72. ! 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