+    Performance WEB      Mettez vos sites sur orbite
+    Emmanuel QUENTIN             Architecte logiciel – Nurun         Développeur certifié PHP & Magento                @H...
+    Running faster
+    Pourquoi ?       Taux de conversion           Un acheteur n’aime pas attendre           Amazon : Perte d’1% du C.A...
+    Pourquoi ?       Taux de rebond           500ms de chargement : 20% de recherche en moins chez Google       Econom...
+    Waterfall        Début du rendu, fin de la page blanche
+    Waterfall       Le frontend et le réseau représentent 90% du boulot       Le téléchargement dépend de           Re...
+    Les solutions côté frontend !       DNS prefetching           <link rel="dns-prefetch" href="//assets.foo.com"> # S...
+    Les solutions côté frontend !       Diminuer le temps de chargement et le nombre de requêtes HTTP           Concate...
+    Réduire le reflow       Quand ?           Redimensionnement fenêtre           Changement taille police           ...
+    Réduire le reflow       Comment ?           Diminuer la profondeur du DOM           Supprimer les règles CSS inuti...
+    Autour du backend       Caching HTTP           Header Expires           Header ETag (entity tag)       Caching ap...
+    Autour du backend       Serveur WEB           Compression gzip (mod_deflate d’Apache)           Module d’expiratio...
+    Autour du backend       Prévoir ses applications de façon scalables           Master/slave MySQL – NoSQL          ...
+    Outils       Google page speed (module Chrome / Firefox)       Yslow (module Chrome / Firefox)       Web page test...
+
Prochain SlideShare
Chargement dans…5
×

Talk performance web

605 vues

Publié le

Petite introduction aux méthodes et outils à mettre en place pour que vos pages s'affichent avant même de les demander.

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

Aucun téléchargement
Vues
Nombre de vues
605
Sur SlideShare
0
Issues des intégrations
0
Intégrations
82
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Talk performance web

  1. 1. + Performance WEB Mettez vos sites sur orbite
  2. 2. + Emmanuel QUENTIN Architecte logiciel – Nurun Développeur certifié PHP & Magento @HereIComeSlowly
  3. 3. + Running faster
  4. 4. + Pourquoi ?  Taux de conversion  Un acheteur n’aime pas attendre  Amazon : Perte d’1% du C.A. toutes les 100ms  2/5 visiteurs abandonnent leur panier si chargement > 3s  Référencement  Pris en compte par Google (officiel)  30% de poids en moins : 30% de trafic en plus  Augmentation de la note affectée à AdWords
  5. 5. + Pourquoi ?  Taux de rebond  500ms de chargement : 20% de recherche en moins chez Google  Economie de bande passante  Montée en charge facilitée
  6. 6. + Waterfall Début du rendu, fin de la page blanche
  7. 7. + Waterfall  Le frontend et le réseau représentent 90% du boulot  Le téléchargement dépend de  Recherche DNS (~20/100ms)  Connexion TCP  Téléchargement du contenu  Le Javascript bloque les autres téléchargements (le relou)  Les navigateurs limitent les téléchargements en parallèle par domaine (les relous)
  8. 8. + Les solutions côté frontend !  DNS prefetching  <link rel="dns-prefetch" href="//assets.foo.com"> # Sauf IE < 10  Déporter l’inclusion des Javascripts à la fin du <body>  Rendre asynchrone le chargement des plugins sociaux  Mettre en place des domaines spécifiques (ou CDN) pour augmenter le chargement en parallèle
  9. 9. + Les solutions côté frontend !  Diminuer le temps de chargement et le nombre de requêtes HTTP  Concatener et minifier les JS/CSS  Utiliser les sprites pour les images  Outil d’optimisation d’image (Pngcrush)  CDN géolocalisé (réduit la latence)
  10. 10. + Réduire le reflow  Quand ?  Redimensionnement fenêtre  Changement taille police  Changement contenu  Pseudo classe ( :hover )  Changement de style en JS
  11. 11. + Réduire le reflow  Comment ?  Diminuer la profondeur du DOM  Supprimer les règles CSS inutiles  Simplifier les règles CSS  Spécifier les dimensions des images
  12. 12. + Autour du backend  Caching HTTP  Header Expires  Header ETag (entity tag)  Caching applicatif  Fichier, Memcache, Redis  Cache d’opcode (PHP) : APC, Zend Optimiser (surement dans PHP 5.5)  Reverse Proxy  Varnish, Nginx, Squid
  13. 13. + Autour du backend  Serveur WEB  Compression gzip (mod_deflate d’Apache)  Module d’expiration (mod_expire d’Apache)  Base de donnnées  Index  Optimisation des requêtes (EXPLAIN, Last_query_cost)  Table temporaire, dénormalisation
  14. 14. + Autour du backend  Prévoir ses applications de façon scalables  Master/slave MySQL – NoSQL  Queue de message (AMQP) : RabbitMQ, ZeroMQ, ZendQueue  CRON  Appels I/O asynchrones (NodeJS)
  15. 15. + Outils  Google page speed (module Chrome / Firefox)  Yslow (module Chrome / Firefox)  Web page test ( webpagetest.org )
  16. 16. +

×