Le principe :

Sur votre site vous utilisez une feuille de style, des fichiers javascripts ainsi que des images qui sont les mêmes sur plusieurs de vos pages (voir sur toutes…). L’objectif est de ne les servir qu’une seule fois à chaque visiteur.
Pour cela, les navigateurs ont un cache (également appelés « fichiers temporaires »), qui lui permet de réutiliser des éléments qu’il a déjà chargé, pour peu que votre site lui ai indiqué de tenir ce comportement.

Gain estimé :

Les éléments statiques sont assez nombreux et volumineux, que ce soit les librairies javascript (jQuery, les lightbox, etc …) ou encore les images (une belle bannière en header du site, etc …), on accumule les kilo-octets…
Lorsque ces éléments sont mis en cache, le volume de données transférées se voit ainsi divisé par 6 ou 10.

Comment ?

Ce comportement peut être défini dans un fichier .htaccess, voici le code à insérer :

<ifModule mod_headers.c>
  <FilesMatch "\.(js|css|ico|jpg|jpeg|png|gif)$">
    Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
    Header unset ETag
    FileETag None
    Header unset Last-Modified
    Header set Cache-Control "max-age=864000, public"
  </FilesMatch>
</ifModule>

Il faut également activer le mod_headers sur le serveur Apache (par ex : « sudo a2enmod headers » sous debian/ubuntu)

Analyse du code :

• « Header set Expires … » : indique au navigateur un date d’expiration dans un futur (assez) lointain
• « Header unset ETag » : va nous permettre de débrayer le système de validation de contenu du navigateur, ainsi c’est notre Cache-Control qui va gérer la mise en cache.
• « FileEtag None » : idem ci-dessus
• « Header unset Last-Modified » : comme pour les Etag, nous ne voulons pas que ce soit le navigateur qui décide de rafraichir le contenu
• « Header set Cache-Control … » : Nous indiquons au cache du navigateur que le contenu est valide pendant 10 jours (exprimé en secondes)

Conclusion :

Cette technique est assez simple à mettre en place, permet d’économiser de la bande passante et de servir ses pages plus rapidement à chaque visiteur (à partir de sa seconde page vue…).
Il y a donc tout à gagner en adoptant cette pratique.

Les sites s’allourdissent (sans parler des pubs, du flash, etc …). Bref ! C’est la crise, faut alléger tout ça ! (oui, je sais que la crise n’a rien à voir, mais c’est dans l’ère du temps ).

Je vais parler aujourd’hui d’un petit bout de php qui ne fera de mal à personne : Minify.

Minify est un script codé en php5 qui permet de réduire et de réunir efficacement les fichiers CSS et Javascript.
Cette application supprime tous les caractères inutiles à l’interprétation du code par les navigateurs, à savoir les espaces et les commentaires.
De plus, elle concatène ces scripts entre eux, ce qui permet de réduire le nombre de requêtes effectuées par le navigateur de vos visiteurs (ce qui implique un temps de chargement ainsi qu’une charge en bande passantes réduits).
Autre atout, les fichiers crées sont envoyés avec un encodage HTTP (gzip/deflate), ce qui signifie qu’au moment de l’envoi au navigateur, ils vont être (g)zippés (compressés).

Au niveau de l’installation, c’est assez simple puisqu’un assistant de création d’URL est fourni avec l’outil pour permettre une integration plus aisée à vos créations existantes ou futures. Le fichier readme explique tout ça bien mieux que moi ^^

Cette petite application est simple, mais diablement efficace. De plus, elle est gratuite et sous licence BSD (une des nombreuses licences OpenSource).

Via : WebAppers