web2ajax : The Blog

Suite à l’article de Korben : GTmetrix vous aide à optimiser le temps de chargement de vos pages, je me suis dit que je pouvais améliorer significativement les temps de chargement de mes sites en améliorant les dates d’expiration des fichiers statiques (images, css et js), en retirant les ETags et en hébergeant les images sur Amazon S3.

On pourrait se dire que la première étape est inutile puisque les fichiers concernés devraient être sur Amazon, mais dans la pratique, on a toujours 2-3 images, issues d’un plugin wordpress par exemple, qui seront toujours appelées de votre serveur.

Expires : configuration de .htaccess + apache2

Il faut tout d’abord activer les extensions ‘expires.load’ et ‘headers.load’ ci ce n’est pas déjà fait.
Pour ce faire, on vérifie que l’action n’est pas activée :
ls /etc/apache2/mods-enabled/expires.load
ls /etc/apache2/mods-enabled/headers.load

Si vous avez : « ls: ne peut accèder /etc/apache2/mods-enabled/expires.load: Aucun fichier ou répertoire de ce type », c’est que l’extension n’est pas activée.

Pour l’activer :
ln -s /etc/apache2/mods-available/expires.load /etc/apache2/mods-enabled/expires.load
ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

Ensuite, on vérifie la config d’apache et on reload :
apache2ctl configtest
=> Syntax OK
/etc/init.d/apache2 reload
=> Reloading web server config: apache2.

Dans votre fichier .htaccess, il faut ajouter les lignes suivantes :
# BEGIN Expires + ETag remove

# END Expires + ETag remove

La date d’expiration par défaut est donc à 0s et pour les gif, jpeg, css, js… on passe la date à 30j ( 2 592 000 secondes).

Pour en savoir plus sur le pourquoi du comment il faut retirer les ETag, je vous invite à lire cet article : Best Practices for Speeding Up Your Web Site

Amazon Single Storage Service

Maintenant, on va mettre les fichiers statiques (images, css et js) sur Amazon S3.

Il vous faut tout d’abord vous rendre sur http://aws.amazon.com/s3/, créer un compte développeur si vous n’en avez pas, liez votre CB à ce compte et suivre les étapes pour activer votre compte.

Ensuite, il vous faut un client pour créer et mettre à jour vos instances, nommées buckets, une pour chaque site. Différents outils en ligne de commande ou libs sont également dispos pour scripter tout ça.
Personnellement, j’utilise cyberduck pour mac et voici la config :

Server : s3.amazonaws.com
Port : 443
Username : Access Key ID ( http://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key)
Password : The secret Access key

Maintenant, les répertoires à la racine sont les ‘buckets’, on va donc en créer un pour chaque site et ensuite, tout se comporte comme un FTP standard.

Intégration des fichiers statiques

Une fois tous vos fichiers copiés sur S3, il ne vous reste plus qu’à modifier les chemins des fichiers statiques dans vos templates.
L’url de base utilisée sera :

http://the_bucket_name.s3.amazon.com/repertoire/fichier.extension

Coût de l’opération

J’ai en fait trouvé les tarifs très cheap car on est à 0.15$ du Giga uploadé. Ca me convient, maintenant faut voir si ça contient à tout le monde ^^.
Ca me permet en tout cas, avec un pti serveur comme un kimsufi, d’héberger plusieurs sites et donc finalement de réduire les coûts, étant donné que je réduis significativement la charge du serveur.

Conclusion

Après ces ajustements effectués et d’après GTmetrix, je suis passé d’un score de 67% à 75% sous YSlow et de 72 à 86% pour Google Page Speed !
Yeah !

Si vous avez des questions, je suis là ^