Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimisation des performances d'un site web

4,458 views

Published on

À travers ces slides, découvrez les outils et techniques pour optimiser vos sites internet rapidement et efficacement.

Published in: Technology

Optimisation des performances d'un site web

  1. 1. dernière édition : Kaelig Deloumeau-Prigent, le 12 mai 2010 Optimiser les performances de son site web Cette création est mise à disposition selon le Contrat Paternité-Partage des Conditions Initiales à l'Identique 2.0 France disponible en ligne http:// creativecommons.org/licenses/by-sa/2.0/fr/ ou par courrier postal à Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
  2. 2. Pourquoi un site + rapide ?
  3. 3. Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source)
  4. 4. Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond
  5. 5. Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI
  6. 6. Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI Depuis peu de temps : impact SEO
  7. 7. Pourquoi un site + rapide ? Google : + 0.4s = -0.6% de recherches (source) Site lent = hausse du taux de rebond En e-commerce : impact sur le ROI Depuis peu de temps : impact SEO Mais aussi...
  8. 8. Marche à suivre
  9. 9. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre
  10. 10. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur
  11. 11. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur
  12. 12. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http
  13. 13. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http Optimiser les images
  14. 14. Marche à suivre « Auditer » ses pages, savoir quelles mesures prendre Optimiser son serveur Tirer parti du cache du navigateur Diminuer le nombre de requêtes http Optimiser les images Optimiser les scripts
  15. 15. Ressources et outils
  16. 16. Ressources et outils Google Webmaster Tools
  17. 17. Ressources et outils Google Webmaster Tools code.google.com/speed
  18. 18. Ressources et outils Google Webmaster Tools code.google.com/speed Web page test
  19. 19. Ressources et outils Google Webmaster Tools code.google.com/speed Web page test Yahoo Developer Network
  20. 20. YSlow, SiteSpeed, Webkit inspector
  21. 21. Optimiser son serveur
  22. 22. Optimiser son serveur DNS
  23. 23. Optimiser son serveur DNS Proxy HTTP
  24. 24. Optimiser son serveur DNS Proxy HTTP Configuration adaptée au site
  25. 25. Optimiser les en-têtes HTTP
  26. 26. Optimiser les en-têtes HTTP Compression gzip
  27. 27. Optimiser les en-têtes HTTP Compression gzip les headers de cache : Etags, expiration
  28. 28. Optimiser les en-têtes HTTP Compression gzip les headers de cache : Etags, expiration Éviter les redirections http (301, 302...) ≈75 à 1000 ms
  29. 29. Optimiser le code HTML
  30. 30. Optimiser le code HTML Externaliser les styles et les scripts
  31. 31. Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head
  32. 32. Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible
  33. 33. Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible Coder «light» : standards, extensibilité, simplicité
  34. 34. Optimiser le code HTML Externaliser les styles et les scripts Placer les CSS dans le head Placer les scripts en bas de page autant que possible Coder «light» : standards, extensibilité, simplicité D’autres bonnes pratiques, surtout efficaces côté client
  35. 35. Optimiser les images
  36. 36. Optimiser les images Retirer les meta datas (exporter pour le web)
  37. 37. Optimiser les images Retirer les meta datas (exporter pour le web) Ne pas utiliser les gif
  38. 38. Optimiser les images Retirer les meta datas (exporter pour le web) Ne pas utiliser les gif Choisir le bon format (jpg pour les photos, png pour les pictos) Exemple : linternaute.com Avant optimisation : 492 Ko Après optimisation : 353 Ko
  39. 39. Ex. : ImageOptim
  40. 40. Ex. : ImageOptim Retire les meta datas
  41. 41. Ex. : ImageOptim Retire les meta datas Applique successivement des algorithmes de compression
  42. 42. Diminuer le nombre de requêtes HTTP
  43. 43. Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts
  44. 44. Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php
  45. 45. Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes
  46. 46. Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes Recharger certaines parties de la page en AJAX
  47. 47. Diminuer le nombre de requêtes HTTP Grouper les CSS et scripts Combine.php Éviter les iframes Recharger certaines parties de la page en AJAX Utiliser des images sprites
  48. 48. Images Sprites
  49. 49. Images Sprites Technique accessible et SEO-Friendly
  50. 50. Images Sprites Technique accessible et SEO-Friendly 1 grande image < plusieurs petites
  51. 51. Images Sprites Technique accessible et SEO-Friendly 1 grande image < plusieurs petites Moins de requêtes HTTP
  52. 52. À vous de jouer !
  53. 53. Merci ! Kaelig Deloumeau-Prigent twitter.com/kaelig kaelig.fr - lunaweb.fr

×