améliorer la rapidité de son site web
DESCRIPTION
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 !TRANSCRIPT
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é
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