DSC_0298.jpg DSC_0001.jpg DSC_0426.jpg

 i need more coffee

Atteint depuis mon plus jeune âge d'hippopotomonstrosesquippedaliophobie (cultivez vous ça ne fera pas de mal) j'ai décidé de faire un blog sur ma maladie (be feeeaar..).
Blague à part c'est un blog totalement axé génie logiciel que vous trouverez ici. Du PHP, du J2EE, et évidement toutes les technologies qui leur sont liées.

Have fun !

Optimisation du web

L'optimisation de son site internet est une préoccupation grandissante dans le monde des webmasters depuis quelques années. Certains moteurs de recherches, Google en tête, ont même provoqué un vent frais sur le sujet en expliquant ouvertement que plus le site serait léger et mieux il sera indexé.

Il est loin le temps des iframes, des design fait en <table>, du script placé en brute dans la page et du style CSS placé dans le code source. Mais l'est il vraiment ? Ces dernières années, alors même que l'on tend à un web plus propre (adieu IE6) plus rapide (adieu IE6 II) et plus ouvert (adieu flash, bonjour HTML5) on se rend compte que certains sites restent toujours à la traine.

Voici quelques élements à observer si l'on souhaite faire décoller son site de l'age de glace.

Le code source de la page

  • Votre code doit être exempt d'erreur Xhtml. Pour le vérifier il existe des outils proposés par le W3C
  • Autant que possible le Javascript doit être externalisé. Idem pour le CSS.
  • Oubliez l'utilisation de <table> pour organiser vos designs, passez au CSS. Oubliez également l'Iframe qui tue complètement le référencement du contenu affiché dans une iframe.

Autour du code

  • Régroupez autant que possible les appels externes à Javascript dans un minimum de fichier, cela aura pour effet de réduire le nombre de requête HTTP nécessaire pour télécharger tous les scripts.
  • De la même façon, regroupez les feuilles de Style. Notez que CmsMadeSimple le fait déjà (en tout cas, toutes les feuilles de styles pour un même média)

Les images

  • Banissez l'utilisation d'une image de très grande taille même réduite via les balises HTML width et height qui n'ont aucun effet sur la quantité d'information a télécharger par le client. Optez pour des miniatures avec éventuellement un lien vers l'image d'origine. Certains script de type lightbox existent est sont une très bonne alternative pour afficher de belles images sans nécessiter de pré-chargement trop long
  • N'hésitez pas à optimiser vos images en testant le rapport qualité/poids de chaque extensions possibles : gif, jpg et png. Chacunes d'elles ayant ses spécificités et ses limites (la transparence du png n'est pas géré sous IE6 par exemple) il faudra faire attention à ce point.
  • Re-Compressez vos images sans perte de qualité avec des outils spécialisés appelés loss-less, (+ d'infos)
  • Avec un peu d'astuce on peut combiner en une seule image différentes images afin de réduire le nombre de requêtes HTTP. on appel ce procédé le Sprites CSS est c'est très pratique pour les images utilisées en décoration dans un site internet. Voici un exemple réalisé pour les cannettes au dessus de cette page. Notez que ce n'est certainement pas ainsi que l'on réduit le poids total de l'image / des images, mais ça réduit bien le temps de chargement de la page.

Le logiciel

Un Cms est un outils dynamique puisque le front-office est toujours regénéré à partir des modifications effectuées dans le back-office. Ce dynamisme peut très vite devenir un frein si à chaque chargement d'une page il faut regénérer le menu, regénérer le texte à afficher, regénérer la sitebar, regénérer les feuilles de styles et ainsi de suite. Pour ce faire certain logiciel utilisent un moteur de template qui gère une mise en cache.

En français : je modifie une page, le cache est vidé. Un visiteur arrive, le cache se génère et donne le résultat au visiteur. Un autre visiteur arrive, le cache est directement présenté au visiteur : gain de temps énorme puisque très peu de choses sont recalculés par PHP entre les deux visites.

Tous les CMS ne se valent pas sur ce terrain. CmsMadeSimple est l'un de ceux qui bénéficient de la plus belle gestion du cache à la connaissance.

Le serveur

La partie bien trop souvent ignorée, le serveur joue pourtant une énorme part du jeu de l'optimisation. Plutôt que de lister les points à avoir sur un super serveur, je vais plutôt pointer les défauts habituellement rencontré sur un hébergement et les conséquences que cela engendre.

Un serveur mutualisé : ces serveurs grands public sont généralement saturés (au moins durant les heures de pointent : 17h - 19h, les requêtes PHP mettent donc beaucoup plus de temps à être résolues et le site est plus lent.

Un serveur de base de donnée mutualisé : toutes les données de CmsMadeSimple sont stockée en base. C'est ainsi d'ailleurs que la plupart des CMS fonctionnent. Cependant le principe est le même, si le serveur est commun le site connaitra d'abomminables ralentissements. J'ai eu le cas avec un ami qui allait se fâcher avec moi pour un site trop lent à son gout. Il a néamoins suivit mon conseil en faisant changer le serveur de base de donnée par son hébergeur (non sans devoir râler un coup). Le résultat fut un gain de temps de 50% sur la durée de chargement de la page... Voilà ce que c'est que minimiser le coût d'un serveur SQL trop chargé.

Apache, le serveur applicatif le plus proposé de nos jours sur le marché des hébergeur grand public est généralement configuré par défaut... avec plein de défaut d'optimisation. Un fichier .htaccess créé à la racine de votre hébergement peut accélérer le temps de génération. Voici celuis que j'utilise habituellement :

<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico|JPG)$">
ExpiresActive on
ExpiresDefault "access plus 1 months"
</filesmatch>
</ifmodule>

On force la mise en cache des fichiers statiques (ça évite de devoir les re-télécharger systématiquement)

#Turn Off ETag
Header unset ETag
FileETag None

On coupe le flag ETAG qui n'est utile que dans le cas de loadbalancing, bien loin des besoins habituels d'un site internet classique. En désactivant l'ETag, l'header HTTP sera moins lourd => gain de poids => vitesse accrue.

#Suppression si possible des cookies pour les fichiers plats
<IfModule mod_headers.c>
    <FilesMatch "\\.(js|css|jpg|png|jpeg|gif)$">
        RequestHeader unset Cookie
        Header unset Set-Cookie
        Header set Cache-Control "max-age=86400"
    </FilesMatch>
</IfModule>

Autant que possible on désactive le mécanisme des cookies pour les images & co.

<filesmatch ".(php|html|css|js)$">
SetOutputFilter DEFLATE
</filesmatch>

On active la compression Gzip ou Deflate pour les fichiers plats afin de gagner de la place sur la bande passante et donc gagner en vitesse de chargement des pages.

Trichez

Appenez les règles d'internet pour mieux les contourner ! Ainsi lorsque l'on sait que les navigateurs ne télécharge que 10 fichiers à la fois par domaine (inclus : vos images, vos fichiers css, vos fichiers js, la page elle même et ainsi de suite...) on se rend très vite compte qu'ils se ralentissent d'eux même... après tout il serait tellement plus rapide de lancer tous les téléchargements en simultanés (blague)... toujours est il qu'il est possible de contourner ce phénomène simplement en créant un sous domaine à votre site, exemple : http://static.monsite.tld et faire pointer toutes vos images vers ce sous domaine sans pour autant changer leur localisation sur le serveur.

La mise en place d'un tel système est très simple : il suffit de créer une règle DNS et la faire pointer au même endroit que la règle de base www (en général l'adresse IP de votre serveur)

A noter que certains hébergeurs low-cost ne permettent pas ce genre de manipulation, mais çà vaut le coup de tenter.

Les outils du Webmaster

En premier point, consultez le sensationnel GTMetrix, ce site qui mesure le taux de qualité de votre site internet selon deux outils mondialement reconnu : Yslow et PageSpeed. Régulièrement mis à jour, passer votre site sur ce grill vous assure une performance sans égal grâce à ses très nombreux conseils donnés et la mise en surbrillance des points à améliorer sur votre site.

Je redonne l'excellant validateur W3C qui vous permet de valider le code de votre site

Autre outils : DOM Monster!, un petit script qui donne de nombreux conseils fort utiles pour améliorer votre site internet.

Bilan

La liste n'est évidement présente que pour être améliorée, vous pouvez également donner votre avis en postant un commentaire ci dessous.

 

comments powered by Disqus