Optimisations de base

Il n’y a pas de problème de performance tant qu’il n’y a pas de problème de performance. Néanmoins, lorsque je développe un nouveau site, il y a toujours quelques trucs de base que je fais.

Je conseille fortement l’installation de l’extension Yslow sous Firefox. Cette extension analyse votre page et vous suggère des façons d’améliorer les performances de celle-ci basé sur certaines règles de base. Vous y retrouverez les suggestions ci-dessous…

1. Ajouter une date d’expiration aux fichiers statiques

En ajoutant une date d’expiration dans le futur à vos fichier statiques (css, js, png, gif, jpg), cela évite aux navigateurs de retélécharger chaque fichier inutilement à chaque page vue. Ce code doit être ajouté dans un .htaccess.

  <FilesMatch "\.(js|css|gif|jpg|png)$">
     ExpiresActive On
     ExpiresDefault "access plus 10 years"
  </FilesMatch>

L’effet de bord est que si vous modifiez un de vos fichiers statiques, la modification ne sera pas pris en compte par le navigateur ayant déjà celui en cache. La solution est de simplement ajouter une version dans le url du fichier…

Fonction pour ajouter automatiquement une version

Vous pouvez toujours gérer manuellement le versionning ou encore, écrire une fonction qui génère une url avec version à partir de la date de modification du fichier.

/**
  * Return file url with version
  *
  * @param string $filename
  * @return string file url with version
  *
  */
function version($filename) {

  // Get file's version
  $version = filemtime(ABSPATH.$filename);

  return APP_URL.$filename."?v=".$version;

} // version()

n.b: ABSPATH correspond à la racine de votre projet et APP_URL correspond au URL de votre projet à la racine aussi.

2. Compresser le contenu

En compressant votre contenu avec Gzip, vous devriez réduire de 20% à 30% la taille des fichiers, donc moins de bandwith et plus rapide à télécharger par vos utilisateurs.

Assurez-vous que le module deflate soit actif sous Apache… Dans un terminal, effectuez la commande suivante:

a2enmod deflate

Et redémarrer Apache…

/etc/init.d/apache2 restart

Si vous êtes sur un hébergeur payant tel que MediaTemple ou iWeb, ce module est assurément actif. Par la suite, via un .htaccess, ajoutez les lignes suivantes:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

3. Compresser vos fichiers CSS

Encore une fois, plus les fichiers sont petit, mieux c’est. Je m’assure toujours de compresser les fichiers CSS de base de mes projets. À l’aide d’un script shell, j’enlève toutes les espaces inutiles et je réduis les styles sur une seule ligne.

Dans un script shell…

cat $1 | sed -e 's/^[ \t]*//g; s/[ \t]*$//g; s/\([:{;,]\) /\1/g; s/ {/{/g; s/\/\*.*\*\///g; /^$/d' | sed -e :a -e '$!N; s/\n\(.\)/\1/; ta' > $2

Et maintenant, éxécutez la commande suivante:

$> ./minify-css in.css out.css

Vous devriez normalement réduire vos fichier CSS de 10 à 15%.

4. Compresser vos fichiers javascript

Il existe plusieurs compresseur javascript. J’aime bien JSMin de Douglas Crockford.

require 'jsmin.php';
echo JSMin::minify(file_get_contents('main.js'));

Lorsqu’il y a plus de 1 fichier javascript dans une page, le plus possible, tentez de les compresser en un seul fichier. Moins de requêtes sur votre serveur, plus de performance.