Quelles actions pour améliorer les
performances d'affichage de votre site
dans les navigateurs Web ?
8 décembre 2015
Webin...
PAGE 2
Qui est aYaline ?
Depuis 1995, un positionnement
d’entreprise intégrée dans une seule
technologie [Open Source] afi...
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 ...
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 importan...
PAGE 8
Ralentissements, pages trop longues à s'ouvrir, abandons de
paniers...
Plus le site est rapide, plus les clients
ac...
PAGE 9
Dépendance aux opérateurs télécom
Coupure totale possible si une seule liaison Internet
Saturation de la bande pass...
PAGE 10
Évolution de la volumétrie
Augmentation du nombre de sites (plateforme multi-site),
du nombre de produits, de trai...
PAGE 11
Interruption de service
Les interruptions planifiées
Pour des mises à jour applicatives
Les interruptions non plan...
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éra...
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...
PAGE 16
Mes pages sont trop/très lentes…
La meilleure façon d'économiser les ressources ?
 c'est encore de ne pas les sol...
PAGE 17
Mes pages sont trop/très lentes…
Première requête faite au reverse proxy
Avec appel à l'environnement d'exécution
...
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...
PAGE 19
Ma plateforme est surchargée
Optimisation de la configuration serveur :
Sélectionner les versions les plus perfor...
PAGE 20
Ma base de données est ‘overbookée’
Surveiller / détecter les requêtes lentes (longues)
les analyser et les optimi...
PAGE 21
Mon code
Lors des développements (debug)
Organiser des revues de code par des pair
Profiling précis pour les trans...
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 seco...
PAGE 24
Performances d'affichage Navigateur Web
Étapes clés dans l'affichage d'une page web
19/09/201219/09/2012
Affichage...
PAGE 25
Performances d'affichage Navigateur Web
Minifier JS/CSS/HTML : organiser le contenu des
fichiers html/css/js (espa...
PAGE 26
Performances d'affichage Navigateur Web
Limiter le nombre de requêtes HTTP (sprite css,
base64, combiner, utilisat...
PAGE 27
Performances d'affichage Navigateur Web
Expiration des pages : bien paramétrer les durées de
vie pour éviter des a...
PAGE 28
Performances d'affichage Navigateur Web
Chargement des CSS en haut de page
Fichier JavaScript en bas de page
Pas d...
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 ...
PAGE 32
Vos questions
PAGE 33
Les experts aYaline à votre service
Audit du site actuel
Préconisations sur les performances
Maintenance correctiv...
Vos contacts
4 allée des frères Montgolfier
86360 Chasseneuil-du-Poitou - France
Tel : 05 49 41 46 00 - contact@ayaline.co...
Prochain SlideShare
Chargement dans…5
×

Amélioration des performances eCommerce - Webinaire par aYaline

569 vues

Publié le

Quelles actions pour améliorer les performances d'affichage de votre site dans les navigateurs Web ? Comment augmenter son chiffre d'affaires en augmentant les performances de son site e-commerce. Le contenu de ce webinaire est focalisé sur les leviers techniques d'amélioration des performances.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
569
Sur SlideShare
0
Issues des intégrations
0
Intégrations
30
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Amélioration des performances eCommerce - Webinaire par aYaline

  1. 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. 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. 3. PAGE 3 Animateur Pascal Borreli, Architecte PHP Symfony Core Contributeur
  4. 4. PAGE 4 Quelles actions pour améliorer les performances d'affichage de votre site dans les navigateurs Web ?
  5. 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. 6. PAGE 6 Quelques problèmes ayant une influence sur les performances
  7. 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. 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. 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. 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. 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. 12. PAGE 12 Quels sont les points d’amélioration ?
  13. 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. 14. PAGE 14 Axe d'optimisation : Performances de traitements des requêtes HTTP
  15. 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. 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. 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. 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. 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. 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. 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. 22. PAGE 22 Axe d'optimisation : Performances d'affichage Navigateur Web
  23. 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. 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. 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. 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. 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. 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. 29. PAGE 29 Performances d'affichage Navigateur web Outils en ligne
  30. 30. PAGE 30 Conclusion
  31. 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
  32. 32. PAGE 32 Vos questions
  33. 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. 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

×