SlideShare une entreprise Scribd logo
La WebperformanceLA COURSE A LA PERFORMANCE DE VOTRE SITE E-COMMERCE
L’agence digitale
La Webperf en 3 points
1. COMPRENDRE LA WEB PERFORMANCE
• Du code source au rendu utilisateur
• Qu’est ce que la Web Perf
• L’importance de la Web Perf
2. COMMENT POUR L’E-COMMERCE
• Le contexte du e-Commerce
• Les technologies
• Les bonnes pratiques
• Les étapes d’une stratégie de Web Perf
3. LES ERREURS LES PLUS FREQUENTES
2
L’agence digitale
1. Comprendre la webperf
Du code source au rendu utilisateur
3
L’agence digitale
1. Comprendre la webperf
Qu’est-ce que la webperf ?
• Ensemble de :
• Méthodes
• Bonnes pratiques
• Technologies
• Outils
Permettant de maximiser l'expérience utilisateur d'un site web
et de diminuer les ressources permettant de le produire.
C’est une culture, une attitude, une obsession …
4
L’agence digitale
1. Comprendre la webperf
Importance de la webperf ?
5
L’agence digitale
Maximiser
l’expérience utilisateur
Réduire
les coûts
Maximiser
l’expérience utilisateur
Améliorer
son Google ranking
2. Web performance & e-Commerce
Contexte du e-commerce
Le temps, c’est de l’argent !
80 % de la web perf se joue au niveau Frontend (donc de la couche
Design de votre site)
Un site lent, indisponible, peu performant ou non fonctionnel, c’est
une perte de CA !
Sur l’image, on voit un internaute qui dort mais dans la réalité il est
parti sur le site de votre concurrent…
6
L’agence digitale
2. Web performance & e-Commerce
Contexte du e-commerce
Au-delà de 4 secondes de temps de chargement, c’est 25% d’utilisateurs qui sont déjà parti voir ailleurs.
Ajoutez à cela le fait qu’ils sont peut-être arrivés sur le site par une annonce Adwords, et donc payante, c’est
encore une raison supplémentaire d’améliorer votre performance
7
L’agence digitale
2. Web performance & e-Commerce
Contexte du e-commerce
Même les plus grands du Web et de l’e-Commerce sont logés à la même enseigne.
• Cas Google : +400 ms de temps de chargement, c’est une perte de 0,44% du volume des recherches
• Cas Amazon : une augmentation de 100ms de temps de chargement, ce sont 1% des ventes de perdues, et lorsque l’on sait
qu’Amazon avait un CA de 100M de dollars en 2015, on estime facilement les pertes de revenues engendrées
• Cas Shopzilla : pour ce comparateur de prix, le gain de 5s sur le chargement d’une page a permis l’augmentation du taux de
conversion et également des pages vues
8
L’agence digitale
2. Web performance & e-Commerce
Les Technologies : HTTP2
9
L’agence digitale
2. Web performance & e-Commerce
Les Technologies : HTTPS
10
L’agence digitale
Source : http://www.httpvshttps.com/
HTTPS/2 : 1.012 s
• En moyenne 86% plus rapide
• Et en bonus, un meilleur ranking dans
Google
Source : http://www.httpvshttps.com/
HTTP = 11.786 s
Conditions du test : 360 images, pas de cache côté serveur
2. Web performance & e-Commerce
Les Technologies : Cache Cache
Utiliser du cache pour ne solliciter les parties dynamiques uniquement quand nécessaire
• Cache navigateur
• Cache serveur
• Cache interpréteur
• Cache bases de données
11
L’agence digitale
1er rempart 2ème rempart 3ème rempart 4ème rempart
12
L’agence digitale
Pour illustrer les différents caches prenons le cas d’un site ne bénéficiant d’aucun cache, tous les visiteurs viennent
directement solliciter le code et la BDD.
De manière générale sur un site e-Commerce, on a 90% des visiteurs viennent pour avoir de l’info sur les produits.
Ces curieux peuvent être filtrés au travers d’un 1er rempart : Varnish. Avec ce 1er rempart, on déjà éviter à 90% du
trafic de ralentir le site
Sur les 10% restant, la moitié de ces visiteurs naviguent sur les pages catégories et cliquent sur les pages produits
sans l’intention d’acheter. Pour ces visiteurs flâneurs, on met en place 2 remparts avec APC et MemCache.
Il ne reste que 5% des visiteurs dans lesquels j’ai encore quelques indécis, qui ajoutent un ou plusieurs produits
dans son apnier mais qui ne converti pas. Ces abandonnistes qui font des requêtes sur la base de données, on
dresse un repart permettant de les cacher avec Query Cache.
Enfin, il reste 2 à 3% d’acheteurs pour qui le code et la BDD sont dédiées.
2. Web performance & e-Commerce
Les bonnes pratiques
Embarquer la « problématique » de la web performance le plus tôt possible et à tous les étages
• Utiliser les bons formats d’images (jpg, png, webp, gif)
• Ne pas redimensionner une image dans le navigateur
• Compresser tout ce qui est possible (HTML, CSS, JS) côté serveur
• Favoriser et utiliser au mieux le cache du navigateur
• Minimiser le nombre de requêtes (combiner JS CSS en un seul fichier)
• Minimifier les JS, CSS, HTML
• Pré-chargement de pages (en se basant sur le chemin habituel des internautes sur le site)
• Optimiser le start render en chargeant le strict nécessaire
• Optimiser le visually complete
• Minimiser le reflow en maitrisant les modifications de DOM et CSSOM
• Utiliser le GPU sur les éléments stratégiques
13
L’agence digitale
2. Web performance & e-Commerce
Mise en œuvre de la webperf
• Mesurer
• Identifier point de contention
• Améliorer
• Répéter
14
L’agence digitale
2. Web performance & e-Commerce
Mesurer
Voici quelques outils qui vous seront utiles pour mesurer le temps de chargement de votre site
15
L’agence digitale
PageSpeed
KPI de vitesse défini par
Google
Yslow
KPI de vitesse défini par
Yahoo
W3C Navigation
Timing
Speed Index
3. Les erreurs les plus frequentes
Utiliser des social sharer comme addThis, shareThis…
ERREUR
~500ms de temps de chargement supplémentaire
pour un taux d’utilisation parfois nul
16
L’agence digitale
3. Les erreurs les plus frequentes
Utiliser des images non optimisées sur son site…
ERREUR
Une image optimisée peut diviser son poids par 2 ou 3,
penser également aux images de contenu
17
L’agence digitale
3. Les erreurs les plus frequentes
Charger les fichiers et le code JS sans optimisation
ERREUR
L’exécution et le chargement d’un script JS peut considérablement augmenter le
temps de chargement de la page
18
L’agence digitale
Vous souhaitez optimiser la performance de votre site ?
Vous désirez améliorer le référencement de votre site ?
Vous aimeriez vous former aux techniques webmarketing ?
Vous souhaitez être accompagné sur le web ?
Vous réfléchissez à une campagne de webmarketing ?
19
Contactez-nous et, ensemble,
discutons de votre projet - 09 71 00 23 23 – bonjour@object23.fr
20
Découvrez notre oFFRE
Object23 accélère
votre transformation digitale
en vous accompagnant
de bout en bout
dans vos projets digitaux.
Stratégie digitale à long terme, projets ponctuels
ou spécifiques, Object23 est le partenaire adapté au
développement de votre performance.
www,object23,fr
www.adista.fr
L’agence digitale

Contenu connexe

Tendances

Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
Refficience
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
Refficience
 
Se rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seoSe rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seo
Marref Imen
 
Navigation à facettes et SEO
Navigation à facettes et SEONavigation à facettes et SEO
Navigation à facettes et SEO
Peak Ace
 
10 quick-wins pour optimiser votre conversion et taux de transformation
10 quick-wins pour optimiser votre conversion et taux de transformation10 quick-wins pour optimiser votre conversion et taux de transformation
10 quick-wins pour optimiser votre conversion et taux de transformation
Frédéric Van Cauwenberge
 
L'audit web
L'audit webL'audit web
L'audit web
Patrick DUHAUT
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
Philippe YONNET
 
Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner
Frédéric Van Cauwenberge
 
Le projet Amp
Le projet AmpLe projet Amp
Le projet Amp
Ouijden Dhemaid
 
Seo Toolbox
Seo ToolboxSeo Toolbox
Seo Toolbox
Marref Imen
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
Semrush France
 
2015 seo-campus-mobile
2015 seo-campus-mobile2015 seo-campus-mobile
2015 seo-campus-mobile
Olivier Andrieu
 
Google AMP & Progressive web apps : nouveaux paradigmes du search mobile
Google AMP & Progressive web apps : nouveaux paradigmes du search mobileGoogle AMP & Progressive web apps : nouveaux paradigmes du search mobile
Google AMP & Progressive web apps : nouveaux paradigmes du search mobile
Virginie Clève - largow ☕️
 
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
Alexandre Siahou
 
Stratégie de réferencement naturelle
Stratégie de réferencement naturelleStratégie de réferencement naturelle
Stratégie de réferencement naturelle
Marref Imen
 
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
Philippe YONNET
 
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é...
Peak Ace
 
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
Amen.fr
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
Digimood - Agence SEO / SEA
 
Réussir sa refonte de site sans perdre son référencement naturel
Réussir sa refonte de site sans perdre son référencement naturelRéussir sa refonte de site sans perdre son référencement naturel
Réussir sa refonte de site sans perdre son référencement naturel
Camille Thomas
 

Tendances (20)

Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 
Se rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seoSe rendre visible sur le web mobile avec le seo
Se rendre visible sur le web mobile avec le seo
 
Navigation à facettes et SEO
Navigation à facettes et SEONavigation à facettes et SEO
Navigation à facettes et SEO
 
10 quick-wins pour optimiser votre conversion et taux de transformation
10 quick-wins pour optimiser votre conversion et taux de transformation10 quick-wins pour optimiser votre conversion et taux de transformation
10 quick-wins pour optimiser votre conversion et taux de transformation
 
L'audit web
L'audit webL'audit web
L'audit web
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
 
Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner Temps de chargement / Présentation du petit déjeuner
Temps de chargement / Présentation du petit déjeuner
 
Le projet Amp
Le projet AmpLe projet Amp
Le projet Amp
 
Seo Toolbox
Seo ToolboxSeo Toolbox
Seo Toolbox
 
Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
2015 seo-campus-mobile
2015 seo-campus-mobile2015 seo-campus-mobile
2015 seo-campus-mobile
 
Google AMP & Progressive web apps : nouveaux paradigmes du search mobile
Google AMP & Progressive web apps : nouveaux paradigmes du search mobileGoogle AMP & Progressive web apps : nouveaux paradigmes du search mobile
Google AMP & Progressive web apps : nouveaux paradigmes du search mobile
 
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
SMX Paris 19 - Thalasso x Google x Atomic Search : How to boost your mobile p...
 
Stratégie de réferencement naturelle
Stratégie de réferencement naturelleStratégie de réferencement naturelle
Stratégie de réferencement naturelle
 
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
Petit dej search foresight e-commerce navigation à facettes et SEO 19 sept 2013
 
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é...
 
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
Seminaire Ecommerce Amen et Epages du 11 Septembre 2014
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Réussir sa refonte de site sans perdre son référencement naturel
Réussir sa refonte de site sans perdre son référencement naturelRéussir sa refonte de site sans perdre son référencement naturel
Réussir sa refonte de site sans perdre son référencement naturel
 

Similaire à Le livre blanc pour tout savoir de la webperf

L'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numériqueL'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numérique
Thom. Poole
 
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...
Peak Ace
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
Fasterize
 
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
Brigitte Marandon
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
Philippe YONNET
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Fasterize
 
Bien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerceBien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerce
Enzo
 
Bien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerceBien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerce
Enzo
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
X2i
 
L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LilleL'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - Lille
Peak Ace
 
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Paris Retail Week
 
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
Fasterize
 
Les 7 commandements pour réduire vos temps de chargement
Les 7 commandements pour réduire vos temps de chargementLes 7 commandements pour réduire vos temps de chargement
Les 7 commandements pour réduire vos temps de chargement
Julie DULOT
 
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...
Peak Ace
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
iProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
Madeline Pinthon
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
Peak Ace
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
Oxalide
 
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...
Peak Ace
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
Aymen Loukil
 

Similaire à Le livre blanc pour tout savoir de la webperf (20)

L'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numériqueL'argumentation commercial pour la vitesse dans le marketing numérique
L'argumentation commercial pour la vitesse dans le marketing numérique
 
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...
 
La vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploitéLa vitesse d’un site web : un levier de croissance peu exploité
La vitesse d’un site web : un levier de croissance peu exploité
 
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
 
Webinar Semrush Neper - quel ROI pour les pages amp
Webinar Semrush Neper - quel ROI pour les pages  ampWebinar Semrush Neper - quel ROI pour les pages  amp
Webinar Semrush Neper - quel ROI pour les pages amp
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Bien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerceBien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerce
 
Bien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerceBien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerce
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
 
L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - LilleL'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - Lille
 
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
Qualité des parcours clients : Maîtrisez votre écosystème digital pour renfor...
 
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
 
Les 7 commandements pour réduire vos temps de chargement
Les 7 commandements pour réduire vos temps de chargementLes 7 commandements pour réduire vos temps de chargement
Les 7 commandements pour réduire vos temps de chargement
 
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...
 
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
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
 
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...
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 

Dernier

Estimation élections européennes 2024 ELABE
Estimation élections européennes 2024 ELABEEstimation élections européennes 2024 ELABE
Estimation élections européennes 2024 ELABE
contact Elabe
 
Actualisation estimation élections européennes 2024
Actualisation estimation élections européennes 2024Actualisation estimation élections européennes 2024
Actualisation estimation élections européennes 2024
contact Elabe
 
Productivité et politique industrielles: deux défis à relever conjointement
Productivité et politique industrielles: deux défis à relever conjointementProductivité et politique industrielles: deux défis à relever conjointement
Productivité et politique industrielles: deux défis à relever conjointement
La Fabrique de l'industrie
 
Estimations ELABE BFMTV ABSTENTION élections européennes 2024
Estimations ELABE BFMTV ABSTENTION élections européennes 2024Estimations ELABE BFMTV ABSTENTION élections européennes 2024
Estimations ELABE BFMTV ABSTENTION élections européennes 2024
contact Elabe
 
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
contact Elabe
 
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
contact Elabe
 
L'Observatoire politique ELABE pour Les Echos - Juin 2024
L'Observatoire politique ELABE pour Les Echos - Juin 2024L'Observatoire politique ELABE pour Les Echos - Juin 2024
L'Observatoire politique ELABE pour Les Echos - Juin 2024
contact Elabe
 
Les Français et les élections européennes - 9ème vague
Les Français et les élections européennes - 9ème vagueLes Français et les élections européennes - 9ème vague
Les Français et les élections européennes - 9ème vague
contact Elabe
 
Les Français et les élections législatives
Les Français et les élections législativesLes Français et les élections législatives
Les Français et les élections législatives
contact Elabe
 
Comprendre le vote aux élections européennes du 9 juin 2024
Comprendre le vote aux élections européennes du 9 juin 2024Comprendre le vote aux élections européennes du 9 juin 2024
Comprendre le vote aux élections européennes du 9 juin 2024
contact Elabe
 
Webinaire_les aides aux investissements.pptx
Webinaire_les aides aux investissements.pptxWebinaire_les aides aux investissements.pptx
Webinaire_les aides aux investissements.pptx
Institut de l'Elevage - Idele
 
Deuxième actualisation estimation élections européennes 2024
Deuxième actualisation estimation élections européennes 2024Deuxième actualisation estimation élections européennes 2024
Deuxième actualisation estimation élections européennes 2024
contact Elabe
 

Dernier (12)

Estimation élections européennes 2024 ELABE
Estimation élections européennes 2024 ELABEEstimation élections européennes 2024 ELABE
Estimation élections européennes 2024 ELABE
 
Actualisation estimation élections européennes 2024
Actualisation estimation élections européennes 2024Actualisation estimation élections européennes 2024
Actualisation estimation élections européennes 2024
 
Productivité et politique industrielles: deux défis à relever conjointement
Productivité et politique industrielles: deux défis à relever conjointementProductivité et politique industrielles: deux défis à relever conjointement
Productivité et politique industrielles: deux défis à relever conjointement
 
Estimations ELABE BFMTV ABSTENTION élections européennes 2024
Estimations ELABE BFMTV ABSTENTION élections européennes 2024Estimations ELABE BFMTV ABSTENTION élections européennes 2024
Estimations ELABE BFMTV ABSTENTION élections européennes 2024
 
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
Etat de l’opinion - Journée CCR CAT « Protégeons l’assurabilité »
 
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
Sondage ELABE pour Les Echos et l'Institut Montaigne -Les Français et la guer...
 
L'Observatoire politique ELABE pour Les Echos - Juin 2024
L'Observatoire politique ELABE pour Les Echos - Juin 2024L'Observatoire politique ELABE pour Les Echos - Juin 2024
L'Observatoire politique ELABE pour Les Echos - Juin 2024
 
Les Français et les élections européennes - 9ème vague
Les Français et les élections européennes - 9ème vagueLes Français et les élections européennes - 9ème vague
Les Français et les élections européennes - 9ème vague
 
Les Français et les élections législatives
Les Français et les élections législativesLes Français et les élections législatives
Les Français et les élections législatives
 
Comprendre le vote aux élections européennes du 9 juin 2024
Comprendre le vote aux élections européennes du 9 juin 2024Comprendre le vote aux élections européennes du 9 juin 2024
Comprendre le vote aux élections européennes du 9 juin 2024
 
Webinaire_les aides aux investissements.pptx
Webinaire_les aides aux investissements.pptxWebinaire_les aides aux investissements.pptx
Webinaire_les aides aux investissements.pptx
 
Deuxième actualisation estimation élections européennes 2024
Deuxième actualisation estimation élections européennes 2024Deuxième actualisation estimation élections européennes 2024
Deuxième actualisation estimation élections européennes 2024
 

Le livre blanc pour tout savoir de la webperf

  • 1. La WebperformanceLA COURSE A LA PERFORMANCE DE VOTRE SITE E-COMMERCE L’agence digitale
  • 2. La Webperf en 3 points 1. COMPRENDRE LA WEB PERFORMANCE • Du code source au rendu utilisateur • Qu’est ce que la Web Perf • L’importance de la Web Perf 2. COMMENT POUR L’E-COMMERCE • Le contexte du e-Commerce • Les technologies • Les bonnes pratiques • Les étapes d’une stratégie de Web Perf 3. LES ERREURS LES PLUS FREQUENTES 2 L’agence digitale
  • 3. 1. Comprendre la webperf Du code source au rendu utilisateur 3 L’agence digitale
  • 4. 1. Comprendre la webperf Qu’est-ce que la webperf ? • Ensemble de : • Méthodes • Bonnes pratiques • Technologies • Outils Permettant de maximiser l'expérience utilisateur d'un site web et de diminuer les ressources permettant de le produire. C’est une culture, une attitude, une obsession … 4 L’agence digitale
  • 5. 1. Comprendre la webperf Importance de la webperf ? 5 L’agence digitale Maximiser l’expérience utilisateur Réduire les coûts Maximiser l’expérience utilisateur Améliorer son Google ranking
  • 6. 2. Web performance & e-Commerce Contexte du e-commerce Le temps, c’est de l’argent ! 80 % de la web perf se joue au niveau Frontend (donc de la couche Design de votre site) Un site lent, indisponible, peu performant ou non fonctionnel, c’est une perte de CA ! Sur l’image, on voit un internaute qui dort mais dans la réalité il est parti sur le site de votre concurrent… 6 L’agence digitale
  • 7. 2. Web performance & e-Commerce Contexte du e-commerce Au-delà de 4 secondes de temps de chargement, c’est 25% d’utilisateurs qui sont déjà parti voir ailleurs. Ajoutez à cela le fait qu’ils sont peut-être arrivés sur le site par une annonce Adwords, et donc payante, c’est encore une raison supplémentaire d’améliorer votre performance 7 L’agence digitale
  • 8. 2. Web performance & e-Commerce Contexte du e-commerce Même les plus grands du Web et de l’e-Commerce sont logés à la même enseigne. • Cas Google : +400 ms de temps de chargement, c’est une perte de 0,44% du volume des recherches • Cas Amazon : une augmentation de 100ms de temps de chargement, ce sont 1% des ventes de perdues, et lorsque l’on sait qu’Amazon avait un CA de 100M de dollars en 2015, on estime facilement les pertes de revenues engendrées • Cas Shopzilla : pour ce comparateur de prix, le gain de 5s sur le chargement d’une page a permis l’augmentation du taux de conversion et également des pages vues 8 L’agence digitale
  • 9. 2. Web performance & e-Commerce Les Technologies : HTTP2 9 L’agence digitale
  • 10. 2. Web performance & e-Commerce Les Technologies : HTTPS 10 L’agence digitale Source : http://www.httpvshttps.com/ HTTPS/2 : 1.012 s • En moyenne 86% plus rapide • Et en bonus, un meilleur ranking dans Google Source : http://www.httpvshttps.com/ HTTP = 11.786 s Conditions du test : 360 images, pas de cache côté serveur
  • 11. 2. Web performance & e-Commerce Les Technologies : Cache Cache Utiliser du cache pour ne solliciter les parties dynamiques uniquement quand nécessaire • Cache navigateur • Cache serveur • Cache interpréteur • Cache bases de données 11 L’agence digitale
  • 12. 1er rempart 2ème rempart 3ème rempart 4ème rempart 12 L’agence digitale Pour illustrer les différents caches prenons le cas d’un site ne bénéficiant d’aucun cache, tous les visiteurs viennent directement solliciter le code et la BDD. De manière générale sur un site e-Commerce, on a 90% des visiteurs viennent pour avoir de l’info sur les produits. Ces curieux peuvent être filtrés au travers d’un 1er rempart : Varnish. Avec ce 1er rempart, on déjà éviter à 90% du trafic de ralentir le site Sur les 10% restant, la moitié de ces visiteurs naviguent sur les pages catégories et cliquent sur les pages produits sans l’intention d’acheter. Pour ces visiteurs flâneurs, on met en place 2 remparts avec APC et MemCache. Il ne reste que 5% des visiteurs dans lesquels j’ai encore quelques indécis, qui ajoutent un ou plusieurs produits dans son apnier mais qui ne converti pas. Ces abandonnistes qui font des requêtes sur la base de données, on dresse un repart permettant de les cacher avec Query Cache. Enfin, il reste 2 à 3% d’acheteurs pour qui le code et la BDD sont dédiées.
  • 13. 2. Web performance & e-Commerce Les bonnes pratiques Embarquer la « problématique » de la web performance le plus tôt possible et à tous les étages • Utiliser les bons formats d’images (jpg, png, webp, gif) • Ne pas redimensionner une image dans le navigateur • Compresser tout ce qui est possible (HTML, CSS, JS) côté serveur • Favoriser et utiliser au mieux le cache du navigateur • Minimiser le nombre de requêtes (combiner JS CSS en un seul fichier) • Minimifier les JS, CSS, HTML • Pré-chargement de pages (en se basant sur le chemin habituel des internautes sur le site) • Optimiser le start render en chargeant le strict nécessaire • Optimiser le visually complete • Minimiser le reflow en maitrisant les modifications de DOM et CSSOM • Utiliser le GPU sur les éléments stratégiques 13 L’agence digitale
  • 14. 2. Web performance & e-Commerce Mise en œuvre de la webperf • Mesurer • Identifier point de contention • Améliorer • Répéter 14 L’agence digitale
  • 15. 2. Web performance & e-Commerce Mesurer Voici quelques outils qui vous seront utiles pour mesurer le temps de chargement de votre site 15 L’agence digitale PageSpeed KPI de vitesse défini par Google Yslow KPI de vitesse défini par Yahoo W3C Navigation Timing Speed Index
  • 16. 3. Les erreurs les plus frequentes Utiliser des social sharer comme addThis, shareThis… ERREUR ~500ms de temps de chargement supplémentaire pour un taux d’utilisation parfois nul 16 L’agence digitale
  • 17. 3. Les erreurs les plus frequentes Utiliser des images non optimisées sur son site… ERREUR Une image optimisée peut diviser son poids par 2 ou 3, penser également aux images de contenu 17 L’agence digitale
  • 18. 3. Les erreurs les plus frequentes Charger les fichiers et le code JS sans optimisation ERREUR L’exécution et le chargement d’un script JS peut considérablement augmenter le temps de chargement de la page 18 L’agence digitale
  • 19. Vous souhaitez optimiser la performance de votre site ? Vous désirez améliorer le référencement de votre site ? Vous aimeriez vous former aux techniques webmarketing ? Vous souhaitez être accompagné sur le web ? Vous réfléchissez à une campagne de webmarketing ? 19 Contactez-nous et, ensemble, discutons de votre projet - 09 71 00 23 23 – bonjour@object23.fr
  • 20. 20 Découvrez notre oFFRE Object23 accélère votre transformation digitale en vous accompagnant de bout en bout dans vos projets digitaux. Stratégie digitale à long terme, projets ponctuels ou spécifiques, Object23 est le partenaire adapté au développement de votre performance. www,object23,fr www.adista.fr