Chasse aux gaspi #2

Pour faire suite au premier billet de la série chasse aux gaspis, voici la suite des trucs et astuces du barbablog pour fabriquer des pages qui se chargent comme des fusées dans votre navigateur préféré.

Idée numéro 2 : optimisez vos images

La règles de base pour faire un site rapide est de réduire la taille des fichiers appelés par votre page html. Parmi les fichiers appelés le plus souvent et en plus grand nombre on retrouve… les images.

La base

Diminuer le poids des images passe tout d’abord par une bonne optimisation de celles-ci.

La règle standard :

• jpg pour les photos,
• gif ou png pour les logos et les images avec à-plats de couleurs [1].

C’est une règle qui n’a pas valeur de loi. Il n’est pas impossible que dans certains cas un gif ou un png soit plus léger et moins dégradé pour une photo de petite taille. A chacun de faire sa cuisine pour aboutir à équilibre poids / qualité. La meilleure méthode moyen pour déterminer le format optimal reste encore la bonne méthode empirique (photoshop: ctrl + alt + maj + s)

Charger le moins d’images possible

Ce qui ralentit le chargement d’une page, c’est le nombre de fichiers appelés par la page html. Si vous réduisez le nombre de fichiers, vous accélérez le chargement. Ok, c’est une lapalissade, mais ça me permet de vous parler de 2 techniques indispensables à mettre tout de suite dans votre besace de webdesigner si vous ne les connaissez pas déjà :

Les sprites css

une technique css très élégante à utiliser avec un menu de type image. Cette technique comme son nom l’indique fonctionne sur le même principe que les sprites des jeux vidéo des années 80. Pour ceux qui ont joué à double dragon comme moi, ça leu parlera, pour les autres j’explique en 2 lignes et je les invite à voir l’explication en détail chez a list apart. Le principe consiste à utiliser en background une seule et unique image qui contient tous les états de transformation : hover, active et ‘normal‘. Au passage de la souris, on modifie les propriétés top et left en css pour placer l’image sur l’état qui va bien. C’est un peu fastidieux parfois car il faut le faire au pixel près, mais ça fait une belle économie de kilo octets. Et surtout, c’est la classe.

Les portes coulissantes

Autre technique que j’utilise parfois : les portes coulissante. Cette technique vous permet de n’utiliser que 2 images pour faire un menu avec des onglets, et ce sans vous préoccuper de la taille du texte à l’intérieur des onglets, ceux-ci étant extensibles. Pratique pour les menus textes.

Si jamais…

Si jamais vous avez un effet de rollover [2] sur votre page et si jamais il vous prenait l’idée saugrenue de le faire en javascript (ce qui est quand même une hérésie), il ne faut pas oublier de pré-charger les images. Sinon, lorsque l’utilisateur passera la souris sur l’image, si par malheur celle ci n’est pas en cache (et elle n’y sera pas la première fois puisqu’elle est appelée en javascript sur l’évènement hover et que celui-ci ne s’est pas encore produit), il attendra le temps que l’image se charge avant de voir se déclencher l’effet. Ce qui est plutôt moche.

Ceci dit, un rollover en javascript, c’est mal.

Pour la route

Pour la route, j’ai utilisé ces techniques pour la refonte d’un très chouette site, refonte dont je vous dirai quelques mots dès que le site en question aura revêtu son nouvel habit de lumière.

Re pour la route, je vous recommande à nouveau la lecture de l’article « Enhance your page performance » sur Thinkvtitamin.com : c’est là-dessus que j’ai piqué toutes mes idées 😉

Résumé de la chasse aux gaspis

• idée numéro 1 : Fichiers externes et syndication
• idée numéro 2 : optimisez vos images
• idée numéro 3 : compressez vos JS et vos CSS
• idée numéro 4 super bonus : le problème du onload

1. Pour le choix entre ces deux derniers formats, ça dépend si vous avez peur ou non du png.
2. Pour mémoire le rollover : je passe la souris sur une image et là hop ! une autre image s’affiche à la place. J’enlève la souris et hop ! ‘est la précédente qui revient.

Technorati Tags: chasse aux gaspi, css, optimisation