Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Talk performance web
Similar to Talk performance web (20)
Talk performance web
- 1. + Performance WEB Mettez vos sites sur orbite
- 2. + Emmanuel QUENTIN Architecte logiciel – Nurun Développeur certifié PHP & Magento @HereIComeSlowly
- 3. + Running faster
- 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. + 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. + Waterfall Début du rendu, fin de la page blanche
- 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. + 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. + 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. + Réduire le reflow Quand ? Redimensionnement fenêtre Changement taille police Changement contenu Pseudo classe ( :hover ) Changement de style en JS
- 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. + 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. + 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. + 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. + Outils Google page speed (module Chrome / Firefox) Yslow (module Chrome / Firefox) Web page test ( webpagetest.org )
- 16. +