Performance d’un site web




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Pourquoi faire attention à la vitesse
                 de son site ?


           Impact sur le CA
           Impact sur la navigation
           Impact suspecté sur le référencement




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Pourquoi faire attention à la vitesse
                 de son site ?


           Exemples :
               100 ms de temps de chargement supplémentaire, et
               Amazon va perdre 1% de ses ventes
               500 ms de plus sur Google, c'est 20% de recherche en
               moins.
               2 secondes de plus chez Bing, et c'est plus de 4% de
               revenu en moins par utilisateur.



Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Comment mesure la vitesse ?


           Mesure ponctuelle : onglet réseau de Firebug




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Comment mesure la vitesse ?


           Mesure régulière :
               Essentielle pour voir les pics de charges, des anomalies
               passagère.

               Google Analytics  vitesse perçue par l’utilisateur
               Google Webmaster Tools  vitesse perçue par Google
               Cacti, MRTG, Nagios, Mumin, …  vitesse
               « reproductible »

Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Prix de l’optimisation




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


         Temps de chargement des pages
             Optimisation des images
             Compression CSS / Javascript / HTML
             Proximité du serveur
             Serveur « média » : CDN, Varnish
             Serveur « application » : Apache, Nginx




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


           Comment automatiser ? Cas pratique avec les images
               Une image envoyée par un utilisateur n’est jamais
               optimisée
               C’est au développeur de proposer une solution




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


           Comment automatiser ? Cas pratique avec les images
               Prestashop




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


Comment automatiser ? Cas pratique avec les images
  Prestashop
Axes de progrès


           Comment automatiser ? Cas pratique avec les images
               Drupal




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


          Comment automatiser ? Cas pratique avec les images
              Drupal




84110 Vaison la Romaine - 04 90 36 09 45
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


           Comment automatiser ? Cas pratique avec les images

                Utilisation avancée avec les CDN :

           1. Charger les images dans le CDN avec un traitement par
              batch : File Conveyor
           2. Diffuser les images via un CDN


Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


           Et pour aller plus loin ?
               Extension Firefox « Google PageSpeed »
               https://developers.google.com/speed/pagespeed/?hl=fr




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Axes de progrès


Et pour aller plus loin ?
  Extension Firefox « Google PageSpeed »
  https://developers.google.com/speed/pagespeed/?hl=fr
Hébergement


           Mutualisé / Serveur virtuel / Serveur dédié

           Performance / Disponibilité




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Génération des pages


           Installation de PHP :
               Module Apache / CGI
               Performance vs Sécurité ?




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Génération des pages


           Développement
               Performance vs Maintenance ?
               Bonnes pratiques
               Design pattern




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Génération des pages


           Cache d’opcode
               APC : précompilation et mise en RAM
               L’optimisation la plus facile à faire
               Le gain le plus efficace (environ de 20 à 40%)




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Génération des pages


           Base de données
               Extensions php : PDO / mysql / mysqli
               Lecture vs Ecriture
               Moteurs de stockage : InnoDB, MyIsam, Memory
               SQLite
               MySQL, MariaDB, Percona



Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Génération des pages


           Base de données MySQL
               Attention aux sauvegardes (LOCK, Sauvegarde Slave)
               Réplication / Cluster
               GeneralQuery, Slow Query, Bin, Error,
               Moteurs de stockage : InnoDB, MyIsam, Memory
               SQLite
               MySQL, MariaDB, Percona
               MySQLTuner
Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Cache


           Le cache est une mauvaise chose, mais il est
           nécessaire
               Gérer du cache fait baisser les performances
               Utiliser du cache donne des données obsolètes à
               l’utilisateur




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Cache


           Quoi mettre en cache :
               Cache du navigateur : images, css, html, js
               Cache applicatif web : « portions » de site
               Cache http
               Cache MySQL : requêtes




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Cache


           Où mettre en cache :
               Lents : fichier, base de données
               Rapides : mémoire vive




Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Gérer les pics d’activité


           Distribuer le cache en mémoire vive
               Memcache

           Répartir les lectures MySQL

           Utiliser un CDN



Barcamp e-commerce & SEO – Jeudi 4 avril 2013
commercial@vaisonet.com - www.vaisonet.com
Gérer les pics d’activité


          Des questions ?




84110 Vaison la Romaine - 04 90 36 09 45
commercial@vaisonet.com - www.vaisonet.com

Performance d'un site Internet

  • 1.
    Performance d’un siteweb Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 2.
    Pourquoi faire attentionà la vitesse de son site ? Impact sur le CA Impact sur la navigation Impact suspecté sur le référencement Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 3.
    Pourquoi faire attentionà la vitesse de son site ? Exemples : 100 ms de temps de chargement supplémentaire, et Amazon va perdre 1% de ses ventes 500 ms de plus sur Google, c'est 20% de recherche en moins. 2 secondes de plus chez Bing, et c'est plus de 4% de revenu en moins par utilisateur. Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 4.
    Comment mesure lavitesse ? Mesure ponctuelle : onglet réseau de Firebug Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 5.
    Comment mesure lavitesse ? Mesure régulière : Essentielle pour voir les pics de charges, des anomalies passagère. Google Analytics  vitesse perçue par l’utilisateur Google Webmaster Tools  vitesse perçue par Google Cacti, MRTG, Nagios, Mumin, …  vitesse « reproductible » Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 6.
    Prix de l’optimisation Barcampe-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 7.
    Axes de progrès Temps de chargement des pages Optimisation des images Compression CSS / Javascript / HTML Proximité du serveur Serveur « média » : CDN, Varnish Serveur « application » : Apache, Nginx Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 8.
    Axes de progrès Comment automatiser ? Cas pratique avec les images Une image envoyée par un utilisateur n’est jamais optimisée C’est au développeur de proposer une solution Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 9.
    Axes de progrès Comment automatiser ? Cas pratique avec les images Prestashop Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 10.
    Axes de progrès Commentautomatiser ? Cas pratique avec les images Prestashop
  • 11.
    Axes de progrès Comment automatiser ? Cas pratique avec les images Drupal Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 12.
    Axes de progrès Comment automatiser ? Cas pratique avec les images Drupal 84110 Vaison la Romaine - 04 90 36 09 45 commercial@vaisonet.com - www.vaisonet.com
  • 13.
    Axes de progrès Comment automatiser ? Cas pratique avec les images Utilisation avancée avec les CDN : 1. Charger les images dans le CDN avec un traitement par batch : File Conveyor 2. Diffuser les images via un CDN Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 14.
    Axes de progrès Et pour aller plus loin ? Extension Firefox « Google PageSpeed » https://developers.google.com/speed/pagespeed/?hl=fr Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 15.
    Axes de progrès Etpour aller plus loin ? Extension Firefox « Google PageSpeed » https://developers.google.com/speed/pagespeed/?hl=fr
  • 16.
    Hébergement Mutualisé / Serveur virtuel / Serveur dédié Performance / Disponibilité Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 17.
    Génération des pages Installation de PHP : Module Apache / CGI Performance vs Sécurité ? Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 18.
    Génération des pages Développement Performance vs Maintenance ? Bonnes pratiques Design pattern Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 19.
    Génération des pages Cache d’opcode APC : précompilation et mise en RAM L’optimisation la plus facile à faire Le gain le plus efficace (environ de 20 à 40%) Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 20.
    Génération des pages Base de données Extensions php : PDO / mysql / mysqli Lecture vs Ecriture Moteurs de stockage : InnoDB, MyIsam, Memory SQLite MySQL, MariaDB, Percona Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 21.
    Génération des pages Base de données MySQL Attention aux sauvegardes (LOCK, Sauvegarde Slave) Réplication / Cluster GeneralQuery, Slow Query, Bin, Error, Moteurs de stockage : InnoDB, MyIsam, Memory SQLite MySQL, MariaDB, Percona MySQLTuner Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 22.
    Cache Le cache est une mauvaise chose, mais il est nécessaire Gérer du cache fait baisser les performances Utiliser du cache donne des données obsolètes à l’utilisateur Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 23.
    Cache Quoi mettre en cache : Cache du navigateur : images, css, html, js Cache applicatif web : « portions » de site Cache http Cache MySQL : requêtes Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 24.
    Cache Où mettre en cache : Lents : fichier, base de données Rapides : mémoire vive Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 25.
    Gérer les picsd’activité Distribuer le cache en mémoire vive Memcache Répartir les lectures MySQL Utiliser un CDN Barcamp e-commerce & SEO – Jeudi 4 avril 2013 commercial@vaisonet.com - www.vaisonet.com
  • 26.
    Gérer les picsd’activité Des questions ? 84110 Vaison la Romaine - 04 90 36 09 45 commercial@vaisonet.com - www.vaisonet.com