Talk performance web

442 views
369 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
442
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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. +

×