Les outils d'optimisation graphique :

Smush-it

Un service dont je ne peux plus me passer depuis que je vous l'ai présenté dans ce billet : Smush-it. C'est bien simple, une fois un projet découpé et prêt à être passé en développement, je passes systématiquement par cet outil afin de grappiller quelques kilo-octets ... ça peut ne pas paraître grand chose mais sur un site à trafic important, cela représente une belle économie de bande passante et le gain par rapport au temps passé sur cette opération n'est quand même pas négligeable. L'opération prends entre 30 secondes et 1minute, pourquoi s'en priver ?

PunyPNG

Smush-it est mort depuis quelques temps déjà et je m'étais résigné à retourner à ces vieux programmes (mais fidèles) que sont Pngcrush et optiPNG, puis un jour j'ai découvert ça : PunyPNG ! Et mon visage c'est transformé ... je me sens vraiment mieux à l'intérieur ! Il est possible d'uploader et optimiser un lot d'image directement comme avec feu smush-it.
Vous pouvez donc maintenant reprendre votre habitude d'optimiser toutes vos images en quelques minutes à la fin de votre découpe, bien plus rapide qu'avec les applications dédiées, mais surtout bien plus efficace et orienté web.

Converticon 2.0

Converticon est un service de création de favicon pour votre site web. Il ne m'arrives pas très souvent d'avoir à m'occuper de ce genre de choses mais quand on me demande de le faire, je suis bien content d'avoir sous la main un outil aussi rapide et pratique que converticon. L'opération est là aussi extrêmement rapide et simple. Vous êtes guidé comme pour l'installation d'un logiciel sur votre ordinateur, il suffit de choisir une image à convertir en favicon, sélectionner la taille de l'icone et lancer la conversion : c'est tout !

Optimisation du code

Scriptalizer

Une découverte récente pour moi que cet outil qui bien que pas complètement crossbrowser (il ne semble pas fonctionner avec la version 2 de Firefox), est devenu mon nouveau joujou très rapidement.
Pour faire simple, ce site permet de réduire le poids de vos développements javascript ou de vos feuilles de styles mais pas seulement ! Il est aussi possible de regrouper des documents javascript ou des feuilles de style ensemble (enfin chaque type de document mais vous aviez compris). Et comme vous avez pris l'habitude depuis que vous avez découvert le blog de Eric Daspet sur les performances d'essayer d'améliorer votre score sur YSlow ... vous rencontriez toujours un problème qui rendait une des règles longue et fastidieuse : "1. Make fewer HTTP requests" ... Pas facile de bien organiser ses développements en modules réutilisables et ensuite de se faire une séance de copier/coller des éléments nécessaires à votre nouveau projet pour faire un minimum de fichiers .js ou .css.
Et bien désormais c'est un jeu d'enfant ! une fois vos devs terminés, un tour sur le site de scriptalizer et hop on crée 2 fichiers : un .js et un .css, difficile de faire moins de requêtes HTTP.

Code beautifier

Compresser c'est bien mais parfois il peut être bien utile de reformater le code pour plus de lisibilité afin de faire des éventuelles retouches post production, code beautifier vous permet de choisir la mise en forme finale de votre code CSS. De ultra compact et illisible pour le commun des mortels à super lisible et aéré, le choix vous appartient.

Attention : L'outil ne permet pas de retrouver sa feuille de style avant minification mais juste de la rendre un peu plus lisible pour une modification occasionnelle avant de la reminifier. Par ailleurs il ne gères pas non plus les javascripts contrairement à scriptalizer.