Le web avance et cet article date de octobre 2010, son contenu peut ne plus être pertinent ou d'actualité.

Un bon site est un site optimisé !

Aujourd’hui, avec les débits que nous avons à disposition, beaucoup de développeurs web délaissent l’optimisation de leurs sites, mais au niveau des débits tout le monde n’est pas logé à la même enseigne. Mais même pour une personne qui possèderait un débit que beaucoup considéreraient comme insuffisant, voir un site s’afficher lentement est devenu anormal. Pire d’après une étude américaine, 50 % des utilisateurs quitteraient un site si celui-ci met trop de temps à s’afficher. En l’occurence, lors de cette étude “trop de temps” signifie supérieur à 4 secondes.

Mais comment accélérer l’affichage d’un site ? Tout d’abord le b-a ba :

  • Mettre le code CSS et JavaScript dans des fichiers externes, ou tout du moins pour les CSS, ne pas en avoir dans les balises <body>
  • Optimiser la taille de ses images, Photoshop possède par exemple une fonction pour enregistrer pour le web afin de compresser un peu plus jpeg, png et gif (ne pas oublier d’incorporer le profil de couleur pour les jpeg au risque sinon d’avoir des teintes différentes). Cela a beau être assez simple, encore trop de site n’optimisent pas leurs images, si bien qu’une pauvre page statique peut dépasser le méga-octet ! Et pas d’excuse pour ceux ne possédant pas Photoshop, Yahoo a mis en ligne un outil peut-être même plus performant  : smush.it
  • Ne pas redimensionner ses images en CSS
  • Ne pas appeler d’élèments introuvables (éviter les erreurs 404)
  • Ne pas avoir de JavaScript ou de CSS dupliqué
  • Indiquer un doctype

Voici pour les bases, qui je pense sont connues et appliqué par tous. Malgré cela, il reste encore énormément de choses à optimiser sur un site pour rendre son affichage plus rapide. En effet, voici une liste non exhaustive de manipulations qui ont fait gagner près de 40 % en vitesse d’affichage sur les quelques sites que j’ai optimisés dernièrement :

  • Utiliser des sprites CSS, pour notamment tout ce qui est changement de background avec un hover ou un focus
  • Indiquer la taille (width) et la hauteur des images (height) dans les balises <img> afin d’aider le navigateur à afficher plus rapidement la-dite image
  • Activer dans le .htacces la compression gzip:[cc lang=’apache’ ]# compress text, html, javascript, css, xml:
    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# Or, compress certain file types by extension:SetOutputFilter DEFLATE

    [/cc]

     

  • Compresser le code html, CSS et JavaScript, cependant il faudra sacrifier la lisibilité du code si l’on doit revenir dessus. A voir selon les cas donc.
  • Minimiser le nombre d’appels de fichiers externe, donc fusionner dans la mesure du possible les fichiers JavaScripts et CSS
  • Indiquer via le .htacces une durée de vie en cachedes éléments d’au moins un jour, une semaine ou un mois selon le type :[cc lang=’apache’ ]#cache html and htm files for one day
    <FilesMatch “.(html|htm)$”>
    Header set Cache-Control “max-age=43200”
    #cache css, javascript and text files for one week
    <FilesMatch “.(js|css|txt)$”>
    Header set Cache-Control “max-age=604800”

    #cache flash and images for one month
    <FilesMatch “.(flv|swf|ico|gif|jpg|jpeg|png)$”>
    Header set Cache-Control “max-age=2592000”

    #disable cache for script files
    <FilesMatch “.(pl|php|cgi|spl|scgi|fcgi)$”>
    Header unset Cache-Control
    [/cc]

Il y a certainement de nombreux éléments qui pourront venir compléter cette liste, n’hésitez pas à les partager, je suis preneur !

Enfin, pour vérifier l’optimisation de son site, l’outil GTmetrix analyse votre site avec l’outil de Google : Page Speed, ainsi qu’avec l’outil de Yahoo : Yslow.

Il est bien entendu plus aisé d’optimiser un site statique qu’un site dynamique tel un blog surtout s’il a été créé avec un CMS, mais dans tous les cas on voit la différence entre l’avant et l’après. Par exemple, la nouvelle version de mon site personnel, constitué d’une page statique, qui sera mise en ligne courant novembre, obtient une note de “A” pour chacun des deux outils, avec 92 % sous Yslow et 90 % sous Page Speed ; tandis que ce blog obtient un score de 86 % sous Yslow et 79 % sous Page Speed mais son temps d’affichage est légèrement supérieur à 4 secondes…

PS : suivant la configuration des serveurs certaines règles .htaccess peuvent retourner une erreur 500.

 

Màj : pour optimiser plus encore, il est possible d’utiliser un script php : minify, qui se charge de compresser et de fusionner les fichiers css ou javascript entre eux.

Publié le par Edouard dans Développement , Optimisation , PHP