améliorer la rapidité de son site web

Performance WebOptimiser le chargement de son site

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

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

• Tout site trop lent est déclassé

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 sur le traffic.

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

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

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

Le lazy loading

Quelques pluginshttps://github.com/toddmotto/echohttp://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 les photographies, les images

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.html5rocks.com/en/tutorials/appcache/beginner/

Choisissez les composants CSS du framework

http://www.lesscss.org/http://sass-lang.com/http://compass-style.org/

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

Quelques Liens

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

The End