Successfully reported this slideshow.
dernière édition : Kaelig Deloumeau-Prigent, le 12 mai 2010




    Optimiser les
performances de son
      site web
     ...
Pourquoi un site + rapide ?
Pourquoi un site + rapide ?

Google : + 0.4s = -0.6% de recherches (source)
Pourquoi un site + rapide ?

Google : + 0.4s = -0.6% de recherches (source)
Site lent = hausse du taux de rebond
Pourquoi un site + rapide ?

Google : + 0.4s = -0.6% de recherches (source)
Site lent = hausse du taux de rebond
En e-comm...
Pourquoi un site + rapide ?

Google : + 0.4s = -0.6% de recherches (source)
Site lent = hausse du taux de rebond
En e-comm...
Pourquoi un site + rapide ?

Google : + 0.4s = -0.6% de recherches (source)
Site lent = hausse du taux de rebond
En e-comm...
Marche à suivre
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Optimiser son serveur
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Optimiser son serveur
Tirer parti du cache du navig...
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Optimiser son serveur
Tirer parti du cache du navig...
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Optimiser son serveur
Tirer parti du cache du navig...
Marche à suivre

« Auditer » ses pages, savoir quelles mesures prendre
Optimiser son serveur
Tirer parti du cache du navig...
Ressources et outils
Ressources et outils

Google Webmaster Tools
Ressources et outils

Google Webmaster Tools
code.google.com/speed
Ressources et outils

Google Webmaster Tools
code.google.com/speed
Web page test
Ressources et outils

Google Webmaster Tools
code.google.com/speed
Web page test
Yahoo Developer Network
YSlow, SiteSpeed, Webkit inspector
Optimiser son serveur
Optimiser son serveur

DNS
Optimiser son serveur

DNS
Proxy HTTP
Optimiser son serveur

DNS
Proxy HTTP
Configuration adaptée au site
Optimiser les en-têtes HTTP
Optimiser les en-têtes HTTP

Compression gzip
Optimiser les en-têtes HTTP

Compression gzip
les headers de cache : Etags, expiration
Optimiser les en-têtes HTTP

Compression gzip
les headers de cache : Etags, expiration
Éviter les redirections http (301, ...
Optimiser le code HTML
Optimiser le code HTML

Externaliser les styles et les scripts
Optimiser le code HTML

Externaliser les styles et les scripts
Placer les CSS dans le head
Optimiser le code HTML

Externaliser les styles et les scripts
Placer les CSS dans le head
Placer les scripts en bas de pa...
Optimiser le code HTML

Externaliser les styles et les scripts
Placer les CSS dans le head
Placer les scripts en bas de pa...
Optimiser le code HTML

Externaliser les styles et les scripts
Placer les CSS dans le head
Placer les scripts en bas de pa...
Optimiser les images
Optimiser les images
Retirer les meta datas (exporter pour le web)
Optimiser les images
Retirer les meta datas (exporter pour le web)
Ne pas utiliser les gif
Optimiser les images
Retirer les meta datas (exporter pour le web)
Ne pas utiliser les gif
Choisir le bon format (jpg pour...
Ex. : ImageOptim
Ex. : ImageOptim



Retire les meta datas
Ex. : ImageOptim



Retire les meta datas
Applique successivement des algorithmes de compression
Diminuer le nombre de requêtes HTTP
Diminuer le nombre de requêtes HTTP

   Grouper les CSS et scripts
Diminuer le nombre de requêtes HTTP

   Grouper les CSS et scripts
      Combine.php
Diminuer le nombre de requêtes HTTP

   Grouper les CSS et scripts
      Combine.php
   Éviter les iframes
Diminuer le nombre de requêtes HTTP

   Grouper les CSS et scripts
      Combine.php
   Éviter les iframes
   Recharger ce...
Diminuer le nombre de requêtes HTTP

   Grouper les CSS et scripts
      Combine.php
   Éviter les iframes
   Recharger ce...
Images Sprites
Images Sprites


   Technique accessible et SEO-Friendly
Images Sprites


   Technique accessible et SEO-Friendly
   1 grande image < plusieurs petites
Images Sprites


   Technique accessible et SEO-Friendly
   1 grande image < plusieurs petites
   Moins de requêtes HTTP
À vous de jouer !
Merci !
Kaelig Deloumeau-Prigent
   twitter.com/kaelig
  kaelig.fr - lunaweb.fr
Optimisation des performances d'un site web
Optimisation des performances d'un site web
Prochain SlideShare
Chargement dans…5
×

Optimisation des performances d'un site web

4 409 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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

×