Decaps' crypt

Never gonna give you up, never gonna let you down.

8 conseils et outils pour créer/maintenir/optimiser un site web

Trop souvent, les sites longs à charger, le sont rarement à cause d'un contenu conséquent mais de la conception du site. Ce sont souvent des erreurs récurrentes, facilement corrigeables. Je vais donc essayer de donner des optimisations faciles à mettre en place ainsi que des conseils qui me paraissent importants, pour améliorer cela.

Attention, les conseils de cette liste sont destinés à des développeurs dont le niveau va de débutant à intermédiaire. Développeur aguerri, je t'invite à passer ton chemin.


1. Faire attention au poids des images utilisées.

Même si aujourd'hui les connexions sont plutôt rapides (excepté sur les mobiles...), plus un site s'affiche rapidement plus l'expérience utilisateur peut se faire dans de bonnes conditions. Par ailleurs, la vitesse de chargement d'une page est désormais un facteur pris en compte par Google pour le référencement.

Sur l'un des site en question, la bannière était une image BMP qui faisait la moitié du poids du site (571 KB / 1.14 MB). Sur une autre page, une image de 2000 par 3000 px pesant plus de 2 MB, alors qu'elle était affichée en 200 par 260px...

Pour régler ce problème, si le cas est "grave", il faut commencer avec un logiciel de retouche, en redimensionnant et en enregistrant dans un format adapté (JPEG, PNG, etc). Ensuite, ou dans le cas d'optimisation, il faut utiliser un compresseur d'image. Ils sont nombreux, et certains sont utilisables directement en ligne. Pour ma part, j'utilise principalement PunyPNG. Smush.it maintenant racheté par Yahoo!, est lui aussi une référence.


2. Ne pas utiliser plusieurs frameworks JavaScript en même temps

Cela peut fonctionner sans soucis, mais le problème n'est pas là. En effet, non seulement en terme de poids ce n'est pas optimal (duplicité de fonctions entre les frameworks), mais en plus ça complexifiera la maintenance à venir. Evitez donc et votre futur vous vous remerciera.


3. Minifier le CSS et le JS

Tout d'abord, pour ceux qui ne le saurait pas, la minification est un terme anglais qui décrit "le processus de suppression des caractères inutiles du code source, sans changer ses fonctionnalités". Et donc permet de "réduire la quantité de données qui doit être transférée" (cf. Wikipédia).

Pour les frameworks, ces versions minifiées, repérables par un ".min." avant l'extension, sont généralement proposées sur le même site, autant les utiliser. Par exemple, la version actuelle de jQuery (1.7.1) non compactée pèse 229 KB, or la minifiée ne pèse plus que 31 KB. Ce gain conséquent (-87%) est facile à obtenir, il serait dommage de s'en priver.

Vous pouvez bien sûr minifier vos propres fichiers CSS et JS à l'aide d'outils comme YUI Compressor. Cela peut paraître logique, mais faites cependant bien attention à garder les versions non compactées, sur lesquelles vous pourrez effectuer les modifications à venir.


4. Activer la compression des fichiers

En restant dans l'optique d'accélérer l'affichage, mais à un niveau un peu plus avancé, il est possible de demander au serveur de compresser à la volée les fichiers qui seront envoyés.

Dans le cas d'un serveur Apache 2, avec le module mod_deflate activé, il suffit d'ajouter dans le fichier .htaccess (de le créer si il n'existe pas) les lignes suivantes :
  1. SetOutputFilter DEFLATE
  2. AddOutputFilterByType DEFLATE text/javascript application/javascript text/css application/xhtml+xml text/xml text/html text/plain application/json
Libre à vous de modifier les types MIME en fonction de vos besoins. Cependant, sachez qu'il est inutile de compresser les fichiers binaires, telles que les images ou vidéos.

Pour plus d'informations sur mod_deflate, veuillez lire la documentation fournie par Apache.


5. Activer le cache serveur

Toujours dans le fichier .htaccess, si le module mod_expires est activé, voici une configuration simple, qui affectera un délai d'expiration du cache de 14 jours par défaut :
  1. ExpiresActive on
  2. ExpiresDefault "access plus 14 days"
Il est possible de choisir le délai d'expiration par type de fichier. Par exemple pour mettre un délai d'expiration d'un mois sur les fichiers CSS, il faudrait ajouter :
  1. ExpiresByType text/css "access plus 1 month"
Pour plus d'informations sur mod_expires, veuillez lire la documentation fournie par Apache.


6. Respecter les normes et conventions

Qu'elles soient fixées par un environnement ou par soi-même, les normes et conventions sont faites pour être suivies. Elles facilitent grandement les maintenances futures et leur non respect vous donnera juste envie de vous crever les yeux quand vous devrez y revenir (cf. votre futur vous).


7. Suivre autant que possible les recommandations W3C

Ceci aura pour effet d'améliorer l’accessibilité de votre site. Pour ce faire, vous pouvez utiliser les validateurs W3C, pour le CSS, le code HTML ou encore les flux RSS. Ils vous aideront à détecter des possibles erreurs ainsi qu'à respecter les recommandations.


8. Aérer et commenter le code

Cela peut paraître évident, mais il est nécessaire de bien indenter et d'aérer son code, toujours dans l'optique des maintenances à venir. N'oubliez pas non plus, de commenter les fonctions ou portions qui seraient susceptibles de poser problème.


Bonus

Pour ceux qui souhaiteraient aller plus loin, l'outil fourni par Yahoo! YSlow, le DOMMonster ainsi que le site GTMetrix vous donneront les directives nécessaires pour continuer à optimiser et peaufiner votre site.

Créer des URLs "SEO friendly"

Pour ceux qui ne seraient pas encore au courant, SEO est l'acronyme de Search Engine Optimization.

Bref, si vous désirez rendre vos chaînes de caractères utilisables dans vos URLs, voici une fonction PHP qui répondra à vos attentes :
  1. function formatUrl($url) {
  2.     // Convert special characters with a dash
  3.     $url = preg_replace("`&(amp;)?#?[a-z0-9]+;`i", "-", htmlspecialchars($url));
  4.     // Convert in UTF-8
  5.     $url = htmlentities($url, ENT_COMPAT, 'utf-8');
  6.     // Replace some special characters with their equivalent
  7.     $url = preg_replace("`&([a-z])(acute|uml|circ|grave|ring|cedil|slash|tilde|caron|lig);`i", "\\1", $url);
  8.     // Replace all non alpha numeric characters with a dash
  9.     $url = preg_replace(array("`[^a-z0-9]`i","`[-]+`"), "-", $url);
  10.     $url = strtolower(trim($url, '-'));
  11.     return $url;
  12. }

Elle transformera la chaîne suivante :
Ceci e Ä un ä test é < > \" flÎdelï ô tàc t'ac ! ?N./mùl^p 
En ceci :
ceci-e-a-un-a-test-e-flideli-o-tac-t-ac-n-mul-p

Le saviez-vous ? Refresh saviez_vous Loading

VDM Refresh vdm Loading