Chapter 1 : Optimisation du temps de chargement des pages
Si vous vous demandez Pourquoi optimiser le temps de chargement de vos pages web ?
Regardez la présentation suivante :
Maintenant, c’est l’heure des solutions au problème d’optimisation :
Optimisation du temps de chargement des images :
Comme expliqué dans le slide N° 54, le site Smush.it va vous permettre d’optimiser le poids des images. Le but est de réduire le poids des images pour qu’elles soient télécharger plus rapidement.
Optimisation des header HTTP :
Le but est de signaler au navigateur Internet du visiteur qu’il peut stocker certains éléments de la page web (voire tout) dans le cache (c’est à dire sur son ordinateur) pour éviter de le télécharger une seconde fois lors d’une prochaine visite. Donc le chargement de vos pages sera beaucoup plus rapide, voire beaucoup beaucoup beaucoup plus rapide.
Il suffit de définir les éléments à mettre en cache et on précise la durée.
1 installer les modules (peut être facultatif…)
Tapez dans la console en mode root :
‘a2enmod expires‘ puis appuyez sur la touche ‘entrée’
‘a2enmod headers‘ puis appuyez sur ‘entrée’
‘a2enmod deflate‘ puis appuyez sur ‘entrée’
2 configurer httpd.conf :
2.1 editer apache2.conf en tapant dans la console
/etc/apache2# vi httpd.conf
2.2 Allez à la fin du fichier
2.3 Appuyer sur ‘i‘ pour passer en mode insertion
2.4 Ajouter le texte de configuration convenant à vos désirs, ce qui devrait ressembler à ça :
ExpiresActive On
<Directory “Le chemin de votre dossier : /home/toto/public_html”>
ExpiresByType text/html “access plus 1 year”
ExpiresDefault “access plus 1 month”
</Directory>
Plus d’info sur la syntaxe de Mod Expires
2.5 Pour quitter Vi et sauvegarder le document, il faut appuyer sur la touche ‘Echap’, puis écrire ‘:wq! ‘.
3 Redémarrer Apache en tapant dans la console :
/etc/init.d/apache2 restart
Si Apache redémarre sans message d’erreur, vous pouvez souffler, vous venez d’éditer les fichiers de configuration d’Apache, Like a Nerd…
Besoin d'optimiser la vitesse de chargement du site web ?
Optimisation de la compression :
Le but est de compresser, au format gzip, certains éléments (voire tout mais je ne cautionne pas) usuellement , les fichiers javascript et css sont servis compressés. Le fait des les compresser va permettre de gagner du temps en faisant passer des fichiers plus petits dans les tuyaux de l’internet.
1 editer apache2.conf
/etc/apache2# vi apache2.conf
2 trouver les lignes et les décommenter ou les rajouter à la mano :
AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
et
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
puis rajouter la règle :
AddOutputFilterByType DEFLATE text/plain text/javascript text/js text/css application/x-javascript
pour qu’il gzip les fichier texte, javacsript et css
3 Redémarrer Apache :
/etc/init.d/apache2 restart
Optimisation des fichiers javascript (.js) et de style (.css)
Il faut aussi minifier ses fichiers javascript :
Minimiser les fichiers permet d’ôter tous les commentaires et espaces superflus pour avoir un fichier plus léger à transférer.
Pour ce faire il y a deux outils pratiques et gratuits : Minify Javascript et CSS Compress.
Si vous le souhaitez vous pouvez aussi utiliser des outils plus performants, mais plus complexes à utiliser comme Yui Compressor développé par Yahoo. Qui existe aussi en version online…
Google a sortir un outil plus puissant puisqu’il permet aussi de réunir tout les fichiers JS ou CSS dans un seul fichier.
Le but étant de diminuer le nombre de requêtes HTTP (l’élément le plus important en terme de performance).
Et maintenant MonBouquet se charge aussi vite que le vent ; )
[Update] Ooups, j’avais oublié les crédits :
Je remercie grandement Vincent pour les coups de mains sur la technique…
Related posts brought to you by Yet Another Related Posts Plugin.
Tu m’en fais un beau de nerd :-D. J’aime bien la présentation, ça me donne des idées. Toi tu y vas un peu plus à l’arrache, je m’explique : tu supposes, sans le dire, que le lecteur a une distribution Debian (ou disposant des a2enmod & co) et qu’il a installé les bons paquets. Moi je sais ça parce qu’en l’occurence c’est moi qui t’ai aidé. Enfin quoiqu’il arrive c’est bien :°).
J’oserais rajouter qu’une élément important aussi c’est d’optimiser Apache (ou le serveur web où l’application est) et le/les SGBD ou autres services dont l’application se sert. C’est mon problème actuel pour l’instant sur letshaveadream..
Yes! merci bien je ne connaissais pas pngcrush!
J’avais réalisé mon site (enfin c’est un brouillon…) dans le but d’avoir le moins de choses à télécharger : http://c-rom.net
Le but était d’obtenir quelque chose de graphiquement compliqué et d’avoir un site léger. Au final, je m’en sors avec un total de 4 png (45.2KB) que j’utilise comme des calques sous Photoshop :)
@ Vincent :
1/ Petit Trol : C’est vrai que cela suppose quelques paramètres, mais si quelqu’un fait tourner un serveur HTTP sur autre chose qu’Apache, il devrait se mettre sur Apache :)
2/ Tu as raison sur le fait d’optimiser tout ça, mais en général, ce qui est critique c’est le front.
3/ Merci ;)
@C-rom : Ton site est super rapide à charger : moins de 0.6 s chez moi… ça ne pose pas de problème.
Hum… tu as déjà regardé du côté de lighttpd? Et pour mon site, il est vide :) donc normal pour les 0.6s :)
Sinon j’ai adopté une autre solution pour un site que j’ai fait : http://www.nascape.be. Le but était de regrouper tous les temps de chargement en mettant tout le site dans une page et en l’animant par la suite. En gros on a un temps de chargement négligeable au début mais le reste du site est fluide. Mais bon ça marche pour les sites “Gallery”. (Bon l’exemple de nascape n’est pas top car l’hébergeur est vraiment au raz des pâquerettes).
En tout cas, monbouquet.com une fois chargé, il décoiffe!
J’en avais entendu parler, et j’ai vu du ‘powered by lighttpd’ sur de bien jolis sites.
Pour Nascape, tu t’en tires pas trop mal, même si Yslow te met un C…