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 !

1. Performance Web
Optimiser le chargement de son site

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. Pourquoi de l’optimisation ?

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. Janvier 2011 (http archive)
http://httparchive.org

6. Janvier 2014 (http archive)
http://httparchive.org

7. Minimiser le temps de réponse

8. A bas les redirections !
• La redirection HTTP 3XX
• La redirection par meta refresh
ou Javascript

9. Content Delivery Network (CDN)

10. Minimiser la quantité de données à
télécharger

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. On met en cache nos contenu statique
Configuration Apache Entête de la réponse HTTP

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. 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. Le lazy loading
Quelques plugins
https://github.com/toddmotto/echo
http://www.appelsiini.net/projects/lazyload

16. Bien Structurer sa page

17. Le css en haut !
• Pour une bonne première visualisation du site par le visiteur
• Pour éviter de repeindre la page

18. On évite les @import

19. Le JavaScript en bas !

20. Solutions intermédiaires de chargement
des JS

21. Solutions intermédiaires de chargement
des JS
http://davidwalsh.name/html5-async

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. Bonne utilisations des medias

24. Les feuilles de sprites

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. Choisir le bon Format d’image :
JPEG, PNG, …
BMP - 263 Ko PNG - 90 Ko JPEG - 12 Ko

27. Mettez l’image à la bonne taille
JPEG - 200x200 – 7,64 KoJPEG - 300x300 – 12 Ko

28. Privilégier les propriété CSS aux images

29. Utiliser les DataURI’s pour les petites
images
• Par exemple, les images de chargements ou les fausses images
blanches.

30. Mettez toujours une image de couverture
pour vos videos

31. Autres méthodes et débats

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. Choisissez les composants CSS du
frameworkhttp://www.lesscss.org/
http://sass-lang.com/
http://compass-style.org/

34. CSS inline VS CSS
externalisé
https://medium.com/coding-design/24888fbbd2e2
http://www.feedthebot.com/pagespeed/optimize-css-delivery.html

35. Quelques Liens
• http://www.feedthebot.com/pagespeed/
• http://gtmetrix.com/recommendations.html

36. The End