SlideShare une entreprise Scribd logo
Quelles actions pour améliorer les
performances d'affichage de votre site
dans les navigateurs Web ?
8 décembre 2015
Webinar aYaline
Performances
aYaline – contact@ayaline.com - 0549414600
PAGE 2
Qui est aYaline ?
Depuis 1995, un positionnement
d’entreprise intégrée dans une seule
technologie [Open Source] afin de garantir
le succès des projets de ses clients
aYaline, partenaire &
Solutions :
• E-Tourisme
• E-Commerce
• E-Collectivités
• Open Source
100%
En France sur Poitiers, Nantes, Paris, au
Maroc et en Tunisie
PAGE 3
Animateur
Pascal Borreli, Architecte PHP
Symfony Core Contributeur
PAGE 4
Quelles actions pour améliorer les
performances d'affichage de votre site dans
les navigateurs Web ?
PAGE 5
Introduction
Leviers fonctionnels / métiers
Leviers marketing
Leviers techniques
Cette conférence se concentre sur les leviers
techniques
Augmentation des performances du site
=
Augmentation du chiffre d'affaires
PAGE 6
Quelques problèmes ayant une
influence sur les performances
PAGE 7
Saturation à l’ouverture des Soldes
Très (trop) grand nombre de visiteurs en très peu
de temps
Trafic plus important que prévu
Campagne marketing générant un trafic vers une
page trop gourmande en ressources, c’est-à-
dire non optimisée
PAGE 8
Ralentissements, pages trop longues à s'ouvrir, abandons de
paniers...
Plus le site est rapide, plus les clients
achètent !
Exemple de temps de parcours optimisé jusqu'à la
commande
Villatech.fr : 15 étapes en 18 secondes
PAGE 9
Dépendance aux opérateurs télécom
Coupure totale possible si une seule liaison Internet
Saturation de la bande passante
Problème de réciprocité (peering) entre fournisseurs de
réseau Internet
Internet est un réseau de réseaux, d’où les accords de réciprocité
PAGE 10
Évolution de la volumétrie
Augmentation du nombre de sites (plateforme multi-site),
du nombre de produits, de traitements, etc.
Tâches planifiées (crons) de synchronisation entre
systèmes d’informations
Trop de requêtes sur la base de données, surcharge des
serveurs
PAGE 11
Interruption de service
Les interruptions planifiées
Pour des mises à jour applicatives
Les interruptions non planifiées
Surcharge entraînant un blocage
Coupure Internet
Panne matérielle
Défaillance logicielle
Attaques informatiques
Etc.
Rendre transparent les interruptions de service
PAGE 12
Quels sont les points d’amélioration ?
PAGE 13
Les points d'amélioration de la performance
1 Requête vers le site
2 Infrastructure du site
3 Traitement de génération de la réponse
4 Envoi de la réponse
5 Affichage de la page demandée
PAGE 14
Axe d'optimisation : Performances
de traitements des requêtes HTTP
PAGE 15
Solliciter le moins possible les serveurs d'exécution
Temps d'utilisation moyen des ressources
ms ms 0,1 s X s 0,X s
ms
PAGE 16
Mes pages sont trop/très lentes…
La meilleure façon d'économiser les ressources ?
 c'est encore de ne pas les solliciter
Mise en œuvre de caches via reverse proxy
Ex. Varnish, Nginx, Squid, HAProxy, etc.
Permet de mettre en cache des pages HTML complètes
donc sans solliciter les environnements d'exécution
des pages dynamiques
gain spectaculaire : de plusieurs secondes à 0.1s
Attention : tout le site ne peut pas être en mis en cache (ex. : processus
commande, espace client...)
Solliciter le moins possible les serveurs d'exécution
PAGE 17
Mes pages sont trop/très lentes…
Première requête faite au reverse proxy
Avec appel à l'environnement d'exécution
Solliciter le moins possible les serveurs d'exécution
1
2
3
4
Reverse
proxy
Application
PHP/Java
1 à 5s
PAGE 18
Mes pages sont trop/très lentes…
Première requête : 1 à 5s
Solliciter le moins possible les serveurs d'exécution
0,1s
Requêtes suivantes : 0,1s
PAGE 19
Ma plateforme est surchargée
Optimisation de la configuration serveur :
Sélectionner les versions les plus performantes des briques logicielles (en
général les dernières), par ex PHP :
PHP 7 est env. 2 fois plus rapide que PHP 5.6
PHP 5.6 est env. 10% plus rapide que PHP 5.5
PHP 5.5 est env. 10% plus rapide que PHP 5.4
PHP 5.4 est env. 20% plus rapide que PHP 5.3
PHP 5.3 est env. 30% plus rapide que PHP 5.2
Accélérateurs PHP (mise en cache des opcodes - pré-compilation) =>
Opcache (PHP 5.5+), APC, eAccelerator, etc. Gain temps d'exécution :
20 à 30%
Optimisation du système d'exploitation
Externaliser les éléments statiques
CDN ou serveur dédié aux éléments statiques
Configuration durée de vie des caches
Balises d’entêtes HTTP : mod_expires / Etags
Les caches ne suffisent pas
PAGE 20
Ma base de données est ‘overbookée’
Surveiller / détecter les requêtes lentes (longues)
les analyser et les optimiser régulièrement
génération d'index / optimisations requêtes SQL
MySQL
Bien choisir les types de tables (MyISAM ou InnoDB)
privilégier InnoDB pour les accès concurrents lecture /
écriture
Optimisation configuration serveur base de données
caches SQL / taille des buffers
en fonction de l'évolution de la volumétrie et du
comportement de la base sur une période donnée
Optimiser la base de données
PAGE 21
Mon code
Lors des développements (debug)
Organiser des revues de code par des pair
Profiling précis pour les transactions lentes ou
importantes (tunnel de commande) avec des outils
comme :
Blackfire.io (de préférence)
XHProf ou Xdebug.
En analysant les logs Intégration / Recette / Prod (RUM)
En utilisant des outils comme New Relic permettant de
montrer les temps frontend et backend de toutes les
requêtes non cachées
Optimiser le code source
PAGE 22
Axe d'optimisation : Performances
d'affichage Navigateur Web
PAGE 23
Performances d'affichage Navigateur Web
A quoi sert de très bons temps de réponse…
… si la page met plusieurs secondes à s'afficher sur le
navigateur ?
… si la page ne permet pas à l'internaute d'interagir
avant la fin de son chargement ?
PAGE 24
Performances d'affichage Navigateur Web
Étapes clés dans l'affichage d'une page web
19/09/201219/09/2012
Affichage du Titre
(Time To Title)
Début de l'affichage
(Time To First Paint)
Temps d'affichage
(Time To Display)
Temps avant interaction /
Temps de chargement
(Time To Interact / Load
Time) déclenchement du
DomReady
PAGE 25
Performances d'affichage Navigateur Web
Minifier JS/CSS/HTML : organiser le contenu des
fichiers html/css/js (espaces, tabulations, etc.)
Compression par le serveur (Gzip) des contenus textes
(html/css/js/xml/json/etc.)
Compression lossless/lossy des images
Optimisation du HTML (web sémantique)
Utilisation du SVG (haute résolution / peu de place) en
lieu et place de certaines images (pixélisées)
Réduire la taille des objets
PAGE 26
Performances d'affichage Navigateur Web
Limiter le nombre de requêtes HTTP (sprite css,
base64, combiner, utilisation des caches navigateur,
etc.)
Utilisation de CDN
Pre-calcul du DNS des différent domaines de la page
(prefetch)
Minimiser les appels DNS (limiter les temps de
résolution)
Eliminer les Redirections
Optimiser le temps de chargement
PAGE 27
Performances d'affichage Navigateur Web
Expiration des pages : bien paramétrer les durées de
vie pour éviter des appels inutiles
Permettre la mise en cache des requêtes Ajax : éviter
des appels inutiles
Pas de CSS/JS inclus dans la page : à externaliser en
fichier externe
Bien gérer les caches
PAGE 28
Performances d'affichage Navigateur Web
Chargement des CSS en haut de page
Fichier JavaScript en bas de page
Pas d’expression CSS
Asynchroniser les JavaScript (async, defer, ..)
Optimiser le temps d'interprétation
PAGE 29
Performances d'affichage Navigateur web
Outils en ligne
PAGE 30
Conclusion
PAGE 31PAGE 31
Conclusion
Ne pas négliger les performances d’affichage sur le
navigateur Web
20% d’efforts pour améliorer de 80% ses résultats !!!
80% de effets produits par 20% des causes
Economiser l’environnement d’exécution
en utilisant les caches
en optimisant la configuration des serveurs
et en optimisant la base de données
PAGE 32
Vos questions
PAGE 33
Les experts aYaline à votre service
Audit du site actuel
Préconisations sur les performances
Maintenance corrective et évolutive
Hébergement et infogérance H24
Vos contacts
4 allée des frères Montgolfier
86360 Chasseneuil-du-Poitou - France
Tel : 05 49 41 46 00 - contact@ayaline.com
www.ayaline.com
Pascal BORRELI – Expert technique
pborreli@ayaline.com
Sébastien DAUNIT – Directeur de projets
sdaunit@ayaline.com

Contenu connexe

Tendances

Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
Adyax
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
Eric D.
 
Migration sharepoint 2013
Migration sharepoint 2013Migration sharepoint 2013
Migration sharepoint 2013
Michael Nokhamzon
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec Firephp
Damien Seguy
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHP
Jean-Marc Fontaine
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
Jean-François Vial
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
Chi Nacim
 
Accélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces webAccélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces web
Grégoire Larreur de Farcy
 
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
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
haricot
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
Aurélien Denis
 
La performance de vos applications Drupal
La performance de vos applications DrupalLa performance de vos applications Drupal
La performance de vos applications Drupal
Oxalide
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre site
WebxFrance
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
Jean-Pierre Vincent
 
WebSocket avec Java EE 7
WebSocket avec Java EE 7WebSocket avec Java EE 7
WebSocket avec Java EE 7
Florian Beaufumé
 
Automatisez votre gestion de MongoDB avec MMS
Automatisez votre gestion de MongoDB avec MMSAutomatisez votre gestion de MongoDB avec MMS
Automatisez votre gestion de MongoDB avec MMS
MongoDB
 
20120402 nantes gtug - app engine
20120402   nantes gtug - app engine20120402   nantes gtug - app engine
20120402 nantes gtug - app engineGDG Nantes
 
Architectures.Phpquebec1007
Architectures.Phpquebec1007Architectures.Phpquebec1007
Architectures.Phpquebec1007
Damien Seguy
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
Aurélien Denis
 

Tendances (20)

Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
Migration sharepoint 2013
Migration sharepoint 2013Migration sharepoint 2013
Migration sharepoint 2013
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec Firephp
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHP
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
 
Accélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces webAccélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces web
 
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
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
La performance de vos applications Drupal
La performance de vos applications DrupalLa performance de vos applications Drupal
La performance de vos applications Drupal
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre site
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
WebSocket avec Java EE 7
WebSocket avec Java EE 7WebSocket avec Java EE 7
WebSocket avec Java EE 7
 
Automatisez votre gestion de MongoDB avec MMS
Automatisez votre gestion de MongoDB avec MMSAutomatisez votre gestion de MongoDB avec MMS
Automatisez votre gestion de MongoDB avec MMS
 
20120402 nantes gtug - app engine
20120402   nantes gtug - app engine20120402   nantes gtug - app engine
20120402 nantes gtug - app engine
 
Architectures.Phpquebec1007
Architectures.Phpquebec1007Architectures.Phpquebec1007
Architectures.Phpquebec1007
 
Zenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX AmadeusZenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX Amadeus
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
 

En vedette

RIO SONORA
RIO SONORARIO SONORA
RIO SONORA
Dalexandromv
 
Catalogue Medicalstore particulier 2014
Catalogue Medicalstore particulier 2014Catalogue Medicalstore particulier 2014
Catalogue Medicalstore particulier 2014
sebastienhuyghe
 
Microscopio optico.
Microscopio optico.Microscopio optico.
Microscopio optico.
Nazareth Av
 
Pubizza by purecom
 Pubizza by purecom Pubizza by purecom
Pubizza by purecom
PUBIZZA
 
Tema 2
Tema 2Tema 2
Redes Locales Basico Actividad 1 Yefer Villate
Redes Locales Basico Actividad 1 Yefer VillateRedes Locales Basico Actividad 1 Yefer Villate
Redes Locales Basico Actividad 1 Yefer Villate
Yefer Cortes
 
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
National Adaptation Plan Global Support Programme
 
Cuestionario de informatica[1]
Cuestionario de informatica[1]Cuestionario de informatica[1]
Cuestionario de informatica[1]
gabu
 
P abarza leal
P abarza lealP abarza leal
P abarza leal
kavieraxd
 
Web 2.0
Web 2.0Web 2.0
el internet
el internetel internet
el internet
lavymr
 
Alexandra cedeño
Alexandra cedeñoAlexandra cedeño
Alexandra cedeño
AlexandraC_87
 
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos GrandonesCÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
Cristián Mauricio Jeria Rojas
 
14 1728 inventario de armamento y personal
14 1728 inventario de armamento y personal14 1728 inventario de armamento y personal
14 1728 inventario de armamento y personal
aulamilitar
 
Lahon & Partners
Lahon & Partners Lahon & Partners
Lahon & Partners BWN2012
 
El regimiento de voluntarios de segorbe 1808
El regimiento de voluntarios de segorbe 1808El regimiento de voluntarios de segorbe 1808
El regimiento de voluntarios de segorbe 1808
aulamilitar
 
Parcial 2 gbi
Parcial 2 gbiParcial 2 gbi
Parcial 2 gbi
27108125
 
Decálogo de la paz Natalia
Decálogo de la paz NataliaDecálogo de la paz Natalia
Decálogo de la paz Natalia
dalcala56
 
10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar
aulamilitar
 

En vedette (20)

RIO SONORA
RIO SONORARIO SONORA
RIO SONORA
 
Catalogue Medicalstore particulier 2014
Catalogue Medicalstore particulier 2014Catalogue Medicalstore particulier 2014
Catalogue Medicalstore particulier 2014
 
Microscopio optico.
Microscopio optico.Microscopio optico.
Microscopio optico.
 
Pubizza by purecom
 Pubizza by purecom Pubizza by purecom
Pubizza by purecom
 
Tema 2
Tema 2Tema 2
Tema 2
 
Redes Locales Basico Actividad 1 Yefer Villate
Redes Locales Basico Actividad 1 Yefer VillateRedes Locales Basico Actividad 1 Yefer Villate
Redes Locales Basico Actividad 1 Yefer Villate
 
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
Guinée Equatoriale - PNA - expérience en adaptation au changement climatique...
 
Cuestionario de informatica[1]
Cuestionario de informatica[1]Cuestionario de informatica[1]
Cuestionario de informatica[1]
 
P abarza leal
P abarza lealP abarza leal
P abarza leal
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
el internet
el internetel internet
el internet
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
Alexandra cedeño
Alexandra cedeñoAlexandra cedeño
Alexandra cedeño
 
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos GrandonesCÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
CÁTEDRA DE D ERECHO R OMANO Profesor D. Javier Barrientos Grandones
 
14 1728 inventario de armamento y personal
14 1728 inventario de armamento y personal14 1728 inventario de armamento y personal
14 1728 inventario de armamento y personal
 
Lahon & Partners
Lahon & Partners Lahon & Partners
Lahon & Partners
 
El regimiento de voluntarios de segorbe 1808
El regimiento de voluntarios de segorbe 1808El regimiento de voluntarios de segorbe 1808
El regimiento de voluntarios de segorbe 1808
 
Parcial 2 gbi
Parcial 2 gbiParcial 2 gbi
Parcial 2 gbi
 
Decálogo de la paz Natalia
Decálogo de la paz NataliaDecálogo de la paz Natalia
Decálogo de la paz Natalia
 
10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar
 

Similaire à Amélioration des performances eCommerce - Webinaire par aYaline

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
Adyax
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
X2i
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
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
 
Conférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.FrConférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.Fr
Oxalide
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
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
Swissgento eCom Genève
 
Importance du chargement des pages
Importance du chargement des pagesImportance du chargement des pages
Importance du chargement des pagesBoulada
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Damien Jubeau
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Kenny Dits
 
[2018] Comment gérer le cache d’un site web à fort trafic ?
[2018] Comment gérer le cache d’un site web à fort trafic ?[2018] Comment gérer le cache d’un site web à fort trafic ?
[2018] Comment gérer le cache d’un site web à fort trafic ?
LAHAXE Arnaud
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
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
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
Aymeric Bouillat
 
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
PrestaShop
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
AntoineLEGRAND18
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
Adrien Russo
 

Similaire à Amélioration des performances eCommerce - Webinaire par aYaline (20)

Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
Gestion des performances Magento et Hebergement
Gestion des performances Magento et HebergementGestion des performances Magento et Hebergement
Gestion des performances Magento et Hebergement
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
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é...
 
Conférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.FrConférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.Fr
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
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
 
Importance du chargement des pages
Importance du chargement des pagesImportance du chargement des pages
Importance du chargement des pages
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
[2018] Comment gérer le cache d’un site web à fort trafic ?
[2018] Comment gérer le cache d’un site web à fort trafic ?[2018] Comment gérer le cache d’un site web à fort trafic ?
[2018] Comment gérer le cache d’un site web à fort trafic ?
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
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 ?
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
Barcamp 3 PrestaShop - Conférence Optimisations et Hébergement de votre site ...
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 

Dernier

Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
Asher256
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
Asher256
 
Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
RDM-ROW history
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
Asher256
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
ABO IPTV PREMIUM
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
RDM-ROW history
 

Dernier (6)

Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
 
Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
 
Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
 

Amélioration des performances eCommerce - Webinaire par aYaline

  • 1. Quelles actions pour améliorer les performances d'affichage de votre site dans les navigateurs Web ? 8 décembre 2015 Webinar aYaline Performances aYaline – contact@ayaline.com - 0549414600
  • 2. PAGE 2 Qui est aYaline ? Depuis 1995, un positionnement d’entreprise intégrée dans une seule technologie [Open Source] afin de garantir le succès des projets de ses clients aYaline, partenaire & Solutions : • E-Tourisme • E-Commerce • E-Collectivités • Open Source 100% En France sur Poitiers, Nantes, Paris, au Maroc et en Tunisie
  • 3. PAGE 3 Animateur Pascal Borreli, Architecte PHP Symfony Core Contributeur
  • 4. PAGE 4 Quelles actions pour améliorer les performances d'affichage de votre site dans les navigateurs Web ?
  • 5. PAGE 5 Introduction Leviers fonctionnels / métiers Leviers marketing Leviers techniques Cette conférence se concentre sur les leviers techniques Augmentation des performances du site = Augmentation du chiffre d'affaires
  • 6. PAGE 6 Quelques problèmes ayant une influence sur les performances
  • 7. PAGE 7 Saturation à l’ouverture des Soldes Très (trop) grand nombre de visiteurs en très peu de temps Trafic plus important que prévu Campagne marketing générant un trafic vers une page trop gourmande en ressources, c’est-à- dire non optimisée
  • 8. PAGE 8 Ralentissements, pages trop longues à s'ouvrir, abandons de paniers... Plus le site est rapide, plus les clients achètent ! Exemple de temps de parcours optimisé jusqu'à la commande Villatech.fr : 15 étapes en 18 secondes
  • 9. PAGE 9 Dépendance aux opérateurs télécom Coupure totale possible si une seule liaison Internet Saturation de la bande passante Problème de réciprocité (peering) entre fournisseurs de réseau Internet Internet est un réseau de réseaux, d’où les accords de réciprocité
  • 10. PAGE 10 Évolution de la volumétrie Augmentation du nombre de sites (plateforme multi-site), du nombre de produits, de traitements, etc. Tâches planifiées (crons) de synchronisation entre systèmes d’informations Trop de requêtes sur la base de données, surcharge des serveurs
  • 11. PAGE 11 Interruption de service Les interruptions planifiées Pour des mises à jour applicatives Les interruptions non planifiées Surcharge entraînant un blocage Coupure Internet Panne matérielle Défaillance logicielle Attaques informatiques Etc. Rendre transparent les interruptions de service
  • 12. PAGE 12 Quels sont les points d’amélioration ?
  • 13. PAGE 13 Les points d'amélioration de la performance 1 Requête vers le site 2 Infrastructure du site 3 Traitement de génération de la réponse 4 Envoi de la réponse 5 Affichage de la page demandée
  • 14. PAGE 14 Axe d'optimisation : Performances de traitements des requêtes HTTP
  • 15. PAGE 15 Solliciter le moins possible les serveurs d'exécution Temps d'utilisation moyen des ressources ms ms 0,1 s X s 0,X s ms
  • 16. PAGE 16 Mes pages sont trop/très lentes… La meilleure façon d'économiser les ressources ?  c'est encore de ne pas les solliciter Mise en œuvre de caches via reverse proxy Ex. Varnish, Nginx, Squid, HAProxy, etc. Permet de mettre en cache des pages HTML complètes donc sans solliciter les environnements d'exécution des pages dynamiques gain spectaculaire : de plusieurs secondes à 0.1s Attention : tout le site ne peut pas être en mis en cache (ex. : processus commande, espace client...) Solliciter le moins possible les serveurs d'exécution
  • 17. PAGE 17 Mes pages sont trop/très lentes… Première requête faite au reverse proxy Avec appel à l'environnement d'exécution Solliciter le moins possible les serveurs d'exécution 1 2 3 4 Reverse proxy Application PHP/Java 1 à 5s
  • 18. PAGE 18 Mes pages sont trop/très lentes… Première requête : 1 à 5s Solliciter le moins possible les serveurs d'exécution 0,1s Requêtes suivantes : 0,1s
  • 19. PAGE 19 Ma plateforme est surchargée Optimisation de la configuration serveur : Sélectionner les versions les plus performantes des briques logicielles (en général les dernières), par ex PHP : PHP 7 est env. 2 fois plus rapide que PHP 5.6 PHP 5.6 est env. 10% plus rapide que PHP 5.5 PHP 5.5 est env. 10% plus rapide que PHP 5.4 PHP 5.4 est env. 20% plus rapide que PHP 5.3 PHP 5.3 est env. 30% plus rapide que PHP 5.2 Accélérateurs PHP (mise en cache des opcodes - pré-compilation) => Opcache (PHP 5.5+), APC, eAccelerator, etc. Gain temps d'exécution : 20 à 30% Optimisation du système d'exploitation Externaliser les éléments statiques CDN ou serveur dédié aux éléments statiques Configuration durée de vie des caches Balises d’entêtes HTTP : mod_expires / Etags Les caches ne suffisent pas
  • 20. PAGE 20 Ma base de données est ‘overbookée’ Surveiller / détecter les requêtes lentes (longues) les analyser et les optimiser régulièrement génération d'index / optimisations requêtes SQL MySQL Bien choisir les types de tables (MyISAM ou InnoDB) privilégier InnoDB pour les accès concurrents lecture / écriture Optimisation configuration serveur base de données caches SQL / taille des buffers en fonction de l'évolution de la volumétrie et du comportement de la base sur une période donnée Optimiser la base de données
  • 21. PAGE 21 Mon code Lors des développements (debug) Organiser des revues de code par des pair Profiling précis pour les transactions lentes ou importantes (tunnel de commande) avec des outils comme : Blackfire.io (de préférence) XHProf ou Xdebug. En analysant les logs Intégration / Recette / Prod (RUM) En utilisant des outils comme New Relic permettant de montrer les temps frontend et backend de toutes les requêtes non cachées Optimiser le code source
  • 22. PAGE 22 Axe d'optimisation : Performances d'affichage Navigateur Web
  • 23. PAGE 23 Performances d'affichage Navigateur Web A quoi sert de très bons temps de réponse… … si la page met plusieurs secondes à s'afficher sur le navigateur ? … si la page ne permet pas à l'internaute d'interagir avant la fin de son chargement ?
  • 24. PAGE 24 Performances d'affichage Navigateur Web Étapes clés dans l'affichage d'une page web 19/09/201219/09/2012 Affichage du Titre (Time To Title) Début de l'affichage (Time To First Paint) Temps d'affichage (Time To Display) Temps avant interaction / Temps de chargement (Time To Interact / Load Time) déclenchement du DomReady
  • 25. PAGE 25 Performances d'affichage Navigateur Web Minifier JS/CSS/HTML : organiser le contenu des fichiers html/css/js (espaces, tabulations, etc.) Compression par le serveur (Gzip) des contenus textes (html/css/js/xml/json/etc.) Compression lossless/lossy des images Optimisation du HTML (web sémantique) Utilisation du SVG (haute résolution / peu de place) en lieu et place de certaines images (pixélisées) Réduire la taille des objets
  • 26. PAGE 26 Performances d'affichage Navigateur Web Limiter le nombre de requêtes HTTP (sprite css, base64, combiner, utilisation des caches navigateur, etc.) Utilisation de CDN Pre-calcul du DNS des différent domaines de la page (prefetch) Minimiser les appels DNS (limiter les temps de résolution) Eliminer les Redirections Optimiser le temps de chargement
  • 27. PAGE 27 Performances d'affichage Navigateur Web Expiration des pages : bien paramétrer les durées de vie pour éviter des appels inutiles Permettre la mise en cache des requêtes Ajax : éviter des appels inutiles Pas de CSS/JS inclus dans la page : à externaliser en fichier externe Bien gérer les caches
  • 28. PAGE 28 Performances d'affichage Navigateur Web Chargement des CSS en haut de page Fichier JavaScript en bas de page Pas d’expression CSS Asynchroniser les JavaScript (async, defer, ..) Optimiser le temps d'interprétation
  • 29. PAGE 29 Performances d'affichage Navigateur web Outils en ligne
  • 31. PAGE 31PAGE 31 Conclusion Ne pas négliger les performances d’affichage sur le navigateur Web 20% d’efforts pour améliorer de 80% ses résultats !!! 80% de effets produits par 20% des causes Economiser l’environnement d’exécution en utilisant les caches en optimisant la configuration des serveurs et en optimisant la base de données
  • 33. PAGE 33 Les experts aYaline à votre service Audit du site actuel Préconisations sur les performances Maintenance corrective et évolutive Hébergement et infogérance H24
  • 34. Vos contacts 4 allée des frères Montgolfier 86360 Chasseneuil-du-Poitou - France Tel : 05 49 41 46 00 - contact@ayaline.com www.ayaline.com Pascal BORRELI – Expert technique pborreli@ayaline.com Sébastien DAUNIT – Directeur de projets sdaunit@ayaline.com