Le document présente des stratégies pour optimiser la performance des sites web, soulignant l'impact d'un chargement rapide sur le taux de rebond et le retour sur investissement, notamment en e-commerce. Il propose des mesures concrètes d'audit et d'optimisation, telles que l'optimisation des images, la réduction des requêtes HTTP, et l'utilisation de techniques comme les images sprites. Des ressources et outils sont également cités pour aider les développeurs dans ce processus.

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. Pourquoi un site + rapide ?

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

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

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

10. Marche à suivre

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

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

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

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

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

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

17. Ressources et outils

18. Ressources et outils
Google Webmaster Tools

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

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

21. Ressources et outils
Google Webmaster Tools
code.google.com/speed
Web page test
Yahoo Developer Network

22. YSlow, SiteSpeed, Webkit inspector

23. Optimiser son serveur

24. Optimiser son serveur
DNS

25. Optimiser son serveur
DNS
Proxy HTTP

26. Optimiser son serveur
DNS
Proxy HTTP
Configuration adaptée au site

27. Optimiser les en-têtes HTTP

28. Optimiser les en-têtes HTTP
Compression gzip

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

30. Optimiser les en-têtes HTTP
Compression gzip
les headers de cache : Etags, expiration
Éviter les redirections http (301, 302...) ≈75 à 1000 ms

31. Optimiser le code HTML

32. Optimiser le code HTML
Externaliser les styles et les scripts

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

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

35. 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é

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

37. Optimiser les images

38. Optimiser les images
Retirer les meta datas (exporter pour le web)

39. Optimiser les images
Retirer les meta datas (exporter pour le web)
Ne pas utiliser les gif

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

41. Ex. : ImageOptim

42. Ex. : ImageOptim
Retire les meta datas

43. Ex. : ImageOptim
Retire les meta datas
Applique successivement des algorithmes de compression

44. Diminuer le nombre de requêtes HTTP

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

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

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

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

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

50. Images Sprites

51. Images Sprites
Technique accessible et SEO-Friendly

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

53. Images Sprites
Technique accessible et SEO-Friendly
1 grande image < plusieurs petites
Moins de requêtes HTTP

54. À vous de jouer !

55. Merci !
Kaelig Deloumeau-Prigent
twitter.com/kaelig
kaelig.fr - lunaweb.fr