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 271 vues

Publié le

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

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

Aucun téléchargement
Vues
Nombre de vues
4 271
Sur SlideShare
0
Issues des intégrations
0
Intégrations
225
Actions
Partages
0
Téléchargements
135
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive












































  • 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

    ×