SlideShare une entreprise Scribd logo
1  sur  74
Télécharger pour lire hors ligne
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
Nos clients
Enjeux
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
Synthetic Monitoring
RHUM
moyenne
9xème percentile
médiane
moyenne
9xème percentile
médiane
ceux qui vivent dans les datacenters
taux de conversion
Show me the money
Impact Calculator
Impact Calculator
Impact Calculator
Impact Calculator
Impact Calculator
Impact Calculator
Impact Calculator
Pendant ce temps
chez …
! 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
Impacts SEO
! “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
Comment faire ?
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
SpeedIndex : de 9000 à 2800
R
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 !»
Avec Fasterize ?
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 !
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
Monitoring - RUM
Conclusion
DIY
! 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
Questions ?
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

Contenu connexe

Tendances

Web performance - appliquer les règles de base
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de base
Jonathan Buttigieg
 

Tendances (16)

Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Mobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lentMobile first : évitez de perdre des clients à cause d'un site trop lent
Mobile first : évitez de perdre des clients à cause d'un site trop lent
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Le prix de la pub
Le prix de la pubLe prix de la pub
Le prix de la pub
 
Allenta
AllentaAllenta
Allenta
 
Meetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières annéesMeetup Webperf : résumé des 3 dernières années
Meetup Webperf : résumé des 3 dernières années
 
Un point sur le mobile first index et ses conséquences - Andréa Bryand - Peti...
Un point sur le mobile first index et ses conséquences - Andréa Bryand - Peti...Un point sur le mobile first index et ses conséquences - Andréa Bryand - Peti...
Un point sur le mobile first index et ses conséquences - Andréa Bryand - Peti...
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017
 
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI AlsaceIndustrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
Industrialisation de Drupal : Usines à Sites, retour sur le cas CCI Alsace
 
Web performance - appliquer les règles de base
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de base
 
Nice meetup
Nice meetupNice meetup
Nice meetup
 

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

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

REX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerceREX : la webperf chez RueDuCommerce
REX : la webperf chez RueDuCommerce
 
Webperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalitéWebperf & SEO : les mythes et la réalité
Webperf & SEO : les mythes et la réalité
 
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEOCore Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
Core Web Vitals, les indicateurs de vitesse qui réconcilient UX et SEO
 
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
Core web vitals pour unifier UX et SEO - Stephane Rios - SEO Camp'us paris 2020
 
Webinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdfWebinar - Construire le cahier des charges de son site web.pdf
Webinar - Construire le cahier des charges de son site web.pdf
 
Web perf Silicon Comte
Web perf Silicon ComteWeb perf Silicon Comte
Web perf Silicon Comte
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Réussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPressRéussir la Construction du cahier des charges de son site web WordPress
Réussir la Construction du cahier des charges de son site web WordPress
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Virtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessiblesVirtua : Performances Magento : Solutions efficaces et accessibles
Virtua : Performances Magento : Solutions efficaces et accessibles
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
Webperf et SEO : quelles métriques suivre ? Quelles optimisations privilégier ?
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LilleLes chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
 
ITIS Commerce - Migration PrestaShop - 20150205
ITIS Commerce  - Migration PrestaShop - 20150205ITIS Commerce  - Migration PrestaShop - 20150205
ITIS Commerce - Migration PrestaShop - 20150205
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 

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
  • 9.
  • 10.
  • 11. Sur mobile 53% des visites sont abandonnées si le site mobile met plus de 3s à charger !
  • 12. 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
  • 13. • Response time, TTFB • DomReady, Load Time • Start Render, Speed Index • TTFC, FID • TTI, FCI
  • 15. RHUM
  • 17. moyenne 9xème percentile médiane ceux qui vivent dans les datacenters
  • 18.
  • 19.
  • 21. Show me the money
  • 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 !
  • 34. Et pourtant … CLASSEMENT JDN MARS 2017
  • 35. Waterfall Le temps serveur représente – de 10% du temps de chargement BACKEND FRONTEND
  • 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
  • 38. ! “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
  • 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
  • 42. • TTFB • Start Render • Speed Index • First Interactive • Backend • CDN • FEO • …
  • 43. Backend / Frontend / Third-Parties
  • 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
  • 48. SpeedIndex : de 9000 à 2800
  • 49. R
  • 51. La remontada Mars 2017 Décembre 2017 Février 2018 Mars 2018
  • 52. Impact Business : Taux de conversion Taux de conversions site mobile : +56% par à N-1
  • 53. ! Organisation ! Normalisation ! Nettoyage ! Audit ! Mesures ! Chargement Third Parties « On a ouvert la boite de Pandore !»
  • 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
  • 66.
  • 67. DIY
  • 68.
  • 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
  • 74. 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