Performance Web
Optimiser le chargement de son site
Sommaire
• Pourquoi optimiser la performance de son site ?
• Optimiser le temps de réponse aux requêtes
• Minimiser la qua...
Pourquoi de l’optimisation ?
La performance et Google
• Google annonce que la rapidité des sites est pris en compte dans
l’algorithme de son moteur de ...
Janvier 2011 (http archive)
http://httparchive.org
Janvier 2014 (http archive)
http://httparchive.org
Minimiser le temps de réponse
A bas les redirections !
• La redirection HTTP 3XX
• La redirection par meta refresh
ou Javascript
Content Delivery Network (CDN)
Minimiser la quantité de données à
télécharger
Toujours utiliser la compression
On compresse le contenu de notre site avec gzip ou deflate pour
prendre moins de place su...
On met en cache nos contenu statique
Configuration Apache Entête de la réponse HTTP
Toujours minimifier ses fichiers CSS et
JS
Source Taille Normal (en ko) Taille minimifier (en ko)
jQuery 2.1.0 239 81,6
jQ...
On évite la duplication de code
On évite d’inclure plusieurs fois la même librairies
Toujours savoir ce qu’il y a dans not...
Le lazy loading
Quelques plugins
https://github.com/toddmotto/echo
http://www.appelsiini.net/projects/lazyload
Bien Structurer sa page
Le css en haut !
• Pour une bonne première visualisation du site par le visiteur
• Pour éviter de repeindre la page
On évite les @import
Le JavaScript en bas !
Solutions intermédiaires de chargement
des JS
Solutions intermédiaires de chargement
des JS
http://davidwalsh.name/html5-async
Pas d’inclusion de script pour le fun
• Tout ce qui est scripts de réseaux sociaux inutilisés sur la page, on ne
charge pas
Bonne utilisations des medias
Les feuilles de sprites
Choisir le bon Format d’image :
JPEG, PNG, …
• Le PNG est pour tout ce qui est élément du site( logo, …)
• Les JPGs pour l...
Choisir le bon Format d’image :
JPEG, PNG, …
BMP - 263 Ko PNG - 90 Ko JPEG - 12 Ko
Mettez l’image à la bonne taille
JPEG - 200x200 – 7,64 KoJPEG - 300x300 – 12 Ko
Privilégier les propriété CSS aux images
Utiliser les DataURI’s pour les petites
images
• Par exemple, les images de chargements ou les fausses images
blanches.
Mettez toujours une image de couverture
pour vos videos
Autres méthodes et débats
Cache HTML5 (ou le web offline)
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
http://www.html5roc...
Choisissez les composants CSS du
frameworkhttp://www.lesscss.org/
http://sass-lang.com/
http://compass-style.org/
CSS inline VS CSS
externalisé
https://medium.com/coding-design/24888fbbd2e2
http://www.feedthebot.com/pagespeed/optimize-c...
Quelques Liens
• http://www.feedthebot.com/pagespeed/
• http://gtmetrix.com/recommendations.html
The End
Prochain SlideShare
Chargement dans…5
×

Améliorer la rapidité de son site web

740 vues

Publié le

A l’heure de l’explosion de la navigation par mobile et tablette, les technologies web évoluent et leurs utilisations elles-aussi !

Au vu de ce constat, nos pages web et leurs développements associés sont amenés à s’adapter eux-aussi pour rendre la navigation plus agréable pour l’utilisateur. Dans cette objectif, nos pages doivent pouvoir se charger rapidement avec des contraintes de performances nouvelles.

Google l’a bien compris et prend donc en compte depuis 2010 la performance au chargement de vos pages dans son algorithme de classement pour son moteur de recherche. Et oui ! La performance impacte aussi votre référencement !

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
740
Sur SlideShare
0
Issues des intégrations
0
Intégrations
258
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Améliorer la rapidité de son site web

  1. 1. Performance Web Optimiser le chargement de son site
  2. 2. Sommaire • Pourquoi optimiser la performance de son site ? • Optimiser le temps de réponse aux requêtes • Minimiser la quantité de données à télécharger • Bien Structurer sa page • Optimiser l’utilisation des medias
  3. 3. Pourquoi de l’optimisation ?
  4. 4. La performance et Google • Google annonce que la rapidité des sites est pris en compte dans l’algorithme de son moteur de recherche. • Tout site trop lent est déclassé
  5. 5. Janvier 2011 (http archive) http://httparchive.org
  6. 6. Janvier 2014 (http archive) http://httparchive.org
  7. 7. Minimiser le temps de réponse
  8. 8. A bas les redirections ! • La redirection HTTP 3XX • La redirection par meta refresh ou Javascript
  9. 9. Content Delivery Network (CDN)
  10. 10. Minimiser la quantité de données à télécharger
  11. 11. Toujours utiliser la compression On compresse le contenu de notre site avec gzip ou deflate pour prendre moins de place sur le traffic.
  12. 12. On met en cache nos contenu statique Configuration Apache Entête de la réponse HTTP
  13. 13. Toujours minimifier ses fichiers CSS et JS Source Taille Normal (en ko) Taille minimifier (en ko) jQuery 2.1.0 239 81,6 jQuery UI 1.10.4.js 427 224 Angular 1.2.10 711 98 Bootstrap 2.3.2.css 120 98 Foundation 5.0.3.css 135 105
  14. 14. On évite la duplication de code On évite d’inclure plusieurs fois la même librairies Toujours savoir ce qu’il y a dans notre CSS
  15. 15. Le lazy loading Quelques plugins https://github.com/toddmotto/echo http://www.appelsiini.net/projects/lazyload
  16. 16. Bien Structurer sa page
  17. 17. Le css en haut ! • Pour une bonne première visualisation du site par le visiteur • Pour éviter de repeindre la page
  18. 18. On évite les @import
  19. 19. Le JavaScript en bas !
  20. 20. Solutions intermédiaires de chargement des JS
  21. 21. Solutions intermédiaires de chargement des JS http://davidwalsh.name/html5-async
  22. 22. Pas d’inclusion de script pour le fun • Tout ce qui est scripts de réseaux sociaux inutilisés sur la page, on ne charge pas
  23. 23. Bonne utilisations des medias
  24. 24. Les feuilles de sprites
  25. 25. Choisir le bon Format d’image : JPEG, PNG, … • Le PNG est pour tout ce qui est élément du site( logo, …) • Les JPGs pour les photographies, les images
  26. 26. Choisir le bon Format d’image : JPEG, PNG, … BMP - 263 Ko PNG - 90 Ko JPEG - 12 Ko
  27. 27. Mettez l’image à la bonne taille JPEG - 200x200 – 7,64 KoJPEG - 300x300 – 12 Ko
  28. 28. Privilégier les propriété CSS aux images
  29. 29. Utiliser les DataURI’s pour les petites images • Par exemple, les images de chargements ou les fausses images blanches.
  30. 30. Mettez toujours une image de couverture pour vos videos
  31. 31. Autres méthodes et débats
  32. 32. Cache HTML5 (ou le web offline) https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache http://www.html5rocks.com/en/tutorials/appcache/beginner/
  33. 33. Choisissez les composants CSS du frameworkhttp://www.lesscss.org/ http://sass-lang.com/ http://compass-style.org/
  34. 34. CSS inline VS CSS externalisé https://medium.com/coding-design/24888fbbd2e2 http://www.feedthebot.com/pagespeed/optimize-css-delivery.html
  35. 35. Quelques Liens • http://www.feedthebot.com/pagespeed/ • http://gtmetrix.com/recommendations.html
  36. 36. The End

×