[Tuto] Améliorer la vitesse d'affichage des pages

[le petit marocain]

De quoi s'agit il ?

Coder votre site WEB proprement et correctement c'est bien, l'optimiser c'est mieux.

Il existe une optimisation simple à mettre en place et efficace, un système de cache dans le navigateur de vos visiteurs.

Le cache ? C'est quoi ?

Une mémoire cache ou antémémoire est, en informatique, une mémoire qui enregistre temporairement des copies de données reçues, afin de diminuer le temps d'accès (en lecture ou en écriture).

Autrement dit, le navigateur gardera temporairement une copie des images, scripts et autres, afin des les ré-afficher plus rapidement lors de la prochaine visite du visiteur sur votre site.

Le cache des contenus statiques est géré automatiquement par les serveurs et navigateurs, mais il est possible de l'optimiser en donnant une date de validité aux éléments.

Ceci accélère le chargement de votre site, économise la bande passante de votre compte et allège le travail du serveur.

Comment s'y prendre ?

Si htaccess est activé, placez simplement un fichier texte .htaccess à la racine de votre site donc, dans le dossier public_html ou WWW:

# Mise en cache pour 1 mois

Code:

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

# Mise en cache pour une semaine

Code:

<FilesMatch ".(js|css|pdf|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

# Mise en cache pour 1 journée

Code:

<FilesMatch ".(html|htm|php)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>

Conclusion

Avec ce fichier texte, le navigateur de votre visiteur gardera temporairement images et icônes dans son cache c'est à dire que le chargement s'effectuera beaucoup plus rapidement la prochaine fois !


Inspiré de www.commentcamarche.net (sebsauvage).

[Luckyz]

Super !
Je le ferai probablement 

[le hollandais volant]

Je l'ai déjà fait, mais je sais pas comment voir si ça marche^^

En tout cas, pour améliorer la vitesse des pages !

- optimiser les images (permet de gagner plus de 50% sur les images en moyenne)
- utiliser GZip pour compresser le code (plus de 60% de gagné sur le code)
- faire le moins de requettes HTTP possible (combiner les fichiers CSS entre eux, idem pour le JS)

- pour les images en slider, ou en fond de bloc CSS : utiliser la méthode des "portes coulissantes" pour n'avoir qu'une seule image et non plusieurs. Le rendu sera bien meilleure et le poids des pages diminuera un petit peu aussi.
- Faire un code propre et valide W3C : ça évitera au navigateur d'avoir à calculer des corrections au code, et fera donc un affichage plus rapide.
Même remarque pour les images : donnez leurs une largeur et une hauteur : la place occupée sera donnée et le navigateur n'aura pas à le recalculer, pour afficher le contexte de la page correctement.

Pour le flash :

[jom006]

Good tuto, j'utilise aussi cette méthode et comme a dit le hollandais volant, on sais pas si ça marche juste que j'ai analysé mon site avec " http://gtmetrix.com/ " et j'ai bien constaté quelque millisecondes de moins ^^