13 juin 2007 #

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 :

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

  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: , ,

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Tiens, toi qui est un expert, de mon coté ça va mieux depuis la migration, non?

    En tout cas, c’est valide…

  2. En tout cas, c’est valide !
    Après, si tu veux tester les performances de ton site, je ne peux que te recommander d’installer l’extension firebug sur ton firefox préféré -laquelle extension te permet de voir le temps de chargement de chaque élément de ta page. D’ailleurs, je te le recommande tiens.

  3. Très juste tout ça. A propos du préchargement, on peut le faire en javascript, mais aussi avec CSS en mettant les images concernées en display: none à la fin de la page.

  4. […] idée numéro 2 : 2 images en 1 […]

  5. Ouep… J’ai déjà testé l’extension après la première partie de ce billet…

    J’ai des bugs dans mes javascript (même pas les miens mais ceux des autres), et des images sont longues à charger, je me suis débarrassé de la blog roll de dailymotion…

    Quand technorati est hors ligne, le chargement devient trèèèèèèès long.

Mentions

  • Chasse aux gaspis #1

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.