Script pour optimiser les images d'un site

L'optimisation des images est une manière simple et peu coûteuse d'améliorer les performances d'affichage d'un site au premier chargement (avec le cache navigateur vide) sans trop de problèmes. Smush it! a remis ce sujet à la mode et permet de voir facilement les images à optimiser pour une page donnée. Le problème est qu'avec ce service, on peut récupérer une archive zip avec les images optimisées mais en perdant l'arborescence des images ce qui peut être un peu fastidieux, il est aussi fastidieux d'utiliser l'extension Firefox sur toutes les pages d'une application web pour passer en revue toutes les images et si en plus les images ne sont pas publiquement accessibles son utilisation ne sera tout simplement pas possible.

Pour pallier à cela, j'ai écrit le script shell suivant pour l'optimisation des fichiers GIF et PNG qui :

  1. optimise tous les fichiers PNG avec pngcrush
  2. identifie les PNG 24 bits avec identify (qu'il est peut être possible de transformer en PNG 8 bits mais cela nécessite une vérification visuelle)
  3. convertit les fichiers GIF en PNG 8 bits avec convert si le fichier résultant est plus petit.

Il s'agit juste d'automatiser ces opérations. Selon les applications, le gain peut être sensible. La semaine dernière quand j'étais en déplacement avec une connectivité aléatoire j'aurai bien aimé que tous les sites aient fait cette opération et je ne suis pas le seul... Je l'ai d'ailleurs lancé sur le nouvel Online Editor de eZ Publish pour optimiser au maximum le futur éditeur WYSIWYG de ce CMS ce qui donne le bug #13751.

#! /bin/bash
# Give hints and optimize images
#
# Try to convert GIF in PNG if the resulted PNG is smaller
# Optimize PNG with pngcrush
# Display PNG24
#
# Need imagemagick and pngcrush
 
print_usage()
{
    echo "$1 [-w] [-d] -f dossier"
    echo "-w : optimise et modifie les fichiers"
    echo "-d : supprime les fichiers GIF transformés en PNG"
    echo "-f dossier : dossier où chercher des images"
}
 
# Display size in bytes
size()
{
    du -sb "$1" | sed "s/\t.*//g"
}
 
TMP=/tmp/optimize_img
DEBUG=1
DELETE_GIF=0
DIRECTORY=""
 
while getopts "dwf:" opt ; do
    case $opt in
        w ) DEBUG=0 ;;
        d ) DELETE_GIF=1 ;;
        f ) DIRECTORY=$OPTARG ;;
        h ) print_usage "$0"
            exit 0 ;;
        * ) print_usage "$0"
            exit 1 ;;
    esac
done
 
[ -z "$DIRECTORY" ] && print_usage "$0" && exit 1
[ ! -d "$DIRECTORY" ] && echo "$DIRECTORY n'existe pas" && exit 2
IMAGES_COUNT=`find "$DIRECTORY" -name \*.gif -o -name \*.png | wc -l`
[ $IMAGES_COUNT -eq 0 ] && echo "Aucune image à traiter" && exit 0
[ ! -d $TMP ] && mkdir $TMP
 
IFS=$'\n'
 
echo "### Optimisation des PNG :"
PNG_LIST=`find "$DIRECTORY" -iname \*.png`
for p in $PNG_LIST ; do
    PNG=`basename $p`
    pngcrush -rem alla -reduce -brute "$p" "$TMP/$PNG" > /dev/null
    ORI_SIZE=`size "$p"`
    OPT_SIZE=`size "$TMP/$PNG"`
    if [ $OPT_SIZE -lt $ORI_SIZE ] ; then
        echo ">> $p pngcrush optimise ce fichier (${OPT_SIZE}o < ${ORI_SIZE}o)"
        [ $DEBUG -eq 0 ] && cp "$TMP/$PNG" "$p"
    fi
    rm -f "$TMP/$PNG"
done
 
echo ""
echo "### PNG24 :"
for p in $PNG_LIST ; do
    TYPE=`identify -verbose "$p" | grep 'Type: TrueColor'`
    [ ! -z "$TYPE" ] && echo "$p"
done
 
echo ""
echo "### Optimisation des GIF en PNG :"
GIF_LIST=`find "$DIRECTORY" -iname \*.gif`
for g in $GIF_LIST ; do
    GIF=`basename $g`
    PNG=`echo $GIF | sed 's/.gif$/_not_opt.png/'`
    PNG_OPT=`echo $GIF | sed 's/.gif$/.png/'`
    convert "$g" "$TMP/$PNG"
    pngcrush -rem alla -reduce -brute "$TMP/$PNG" "$TMP/$PNG_OPT" > /dev/null
    if [ ! -f "$TMP/$PNG_OPT" ] ; then
        rm -f $TMP/*
        continue
    fi
    GIF_SIZE=`size "$g"`
    PNG_SIZE=`size "$TMP/$PNG_OPT"`
    if [ $PNG_SIZE -lt $GIF_SIZE ] ; then
        echo ">> $g : PNG plus petit (${PNG_SIZE}o < ${GIF_SIZE}o)"
        FINAL_PNG=`echo $g | sed 's/.gif$/.png/'`
        [ $DEBUG -eq 0 ] && cp "$TMP/$PNG_OPT" "$FINAL_PNG"
        [ $DELETE_GIF -eq 1 ] && rm "$g"
    fi
    rm -f "$TMP/$PNG" "$TMP/$PNG_OPT"
done
 
rm -rf "$TMP"

Install eZWebin Toolbar into an existing site

eZWebin is an extension providing a toolbar that lets you manage your content directly in the front-end of an eZ Publish site. When refreshing the design of this site, integrating the toolbar was one of my goals. Łukasz Serwatka had already published a nice article on how to create your own toolbar extension by copying files from the ezwebin extension. I don't like this solution because you have to copy again those files when the extension is upgraded (I'm lazy as all developers !). That's why I use the following steps on my blog.

Install and configure the ezwebin extension

If you don't have the ezwebin extension installed, you have to download and install it. Retrieve the ezwebin extension as a package on the eZ Publish 4.0 packages page (it should work with eZ Publish 4.0.1 to) and install it through the admin interface and finally activate it. As I have my own design, I don't need the others ezwebin_* packages. Then, you have to add ezwebin as an additional design, in the site.ini.append.php of your front end siteaccess you should have something like :

[DesignSettings]
SiteDesign=your_design_name
AdditionalSiteDesignList[]=ezwebin

Template modification

This step depends on your site. With most designs, you just need to add those lines of code in the pagelayout template before the {$module_result.content} :

{def $current_node_id = first_set( $module_result.node_id, 0 )
     $content_info = cond( is_set( $module_result.content_info ), $module_result.content_info, hash() )}
{if and( $current_node_id,
         $current_user.is_logged_in,
         and( is_set( $content_info.viewmode ), ne( $content_info.viewmode, 'sitemap' ) ),
         and( is_set( $content_info.viewmode ), ne( $content_info.viewmode, 'tagcloud' ) ) )}
<style type="text/css">
@import url({"stylesheets/websitetoolbar.css"|ezdesign(no)});
</style>
{include uri='design:parts/website_toolbar.tpl'}
{elseif or( $uri_string|begins_with( 'content/versionview' ),
            $uri_string|begins_with( 'content/edit' ) )}
<style type="text/css">
@import url({"stylesheets/websitetoolbar.css"|ezdesign(no)});
</style>
{/if}
{undef $current_node_id $content_info}

If you have several pagelayout templates, you can put this code in a template file and include it. It only adds the toolbar and/or a stylesheet if you are identified or if you edit or preview a content. The toolbar seems to be flexible enough to be included without major layout problem.

And then ?

These steps bring an easy to use interface to manage your content. You probably need to adjust your stylesheet(s) to have a nice edit form.

I also have two small problems :

  1. It's not possible to make an override condition to use a special pagelayout for edit mode. Depending on your layout, you may need to add some conditions to have only one column (or enough space) in edit mode. For instance, the toolbar of the new Online Editor needs 750px to be displayed on a single line (even if it works well when the toobar is displayed on many lines)
  2. content/versionview has a bug when it is used from the ezwebin toolbar. It doesn't use the right pagelayout if you have some override rules on it. I propose a patch in the bug report which works well for me.

Nevertheless, it works well and it's very convenient for a blog.

eZ Publish et l'accessibilité

Plusieurs études ont été réalisées cet été sur l'accessibilité du CMSeZ Publish :

Je passe rapidement sur le premier qui pour moi a une valeur toute relative quand on parle d'eZ Publish (et même de la plupart des autres CMS d'ailleurs) puisque l'étude se penche sur les templates par défaut. Mais qui utilise les templates par défaut d'eZ Publish ?

Les deux suivantes ont été réalisées par Rémi Farrot et sont déjà nettement plus intéressantes. La première au sujet de l'accessibilité du backoffice montre que celui ci n'est pas si mal de ce point de vue même si quelques points sont améliorables. Le plus gros problème dans le backoffice est semble t il posé par les menus contextuels sur les icônes (fonctionnalité ultra pratique cela dit). Parmi les autres points faibles relevés, on trouve aussi l'absence de l'attribut "for" sur les balises label, je viens de créer un rapport de bug sur ce point, c'est tellement pratique de cliquer sur les labels pour avoir le focus sur le champs associé !

La seconde étude de Rémi Farrot porte sur le code produit par les éditeurs WYSIWYG disponibles avec eZ Publish. La situation est nettement moins bonne dans ce registre, Online Editor 4.x comme le nouvel éditeur basé sur TinyMCE sont plutôt mauvais. Malgré tout, beaucoup de points peuvent être corrigés avec une configuration adéquate et encore plus avec le nouvel éditeur. Ce sera peut être l'objet d'un prochain billet...

eZ Conference 2008

La semaine dernière se déroulait l'eZ Conference 2008 à Skien en Norvège autour du CMS Open source eZ Publish. Cette année, la conférence se déroulait en même temps que l'Open Nordic.

Beaucoup de nouveautés et pas mal de retours intéressants sur de gros projets ont été présentés cette année à l'eZ Conférence 2008. D'un point de vue produit, eZ Systems dirige ses développements sur 2 axes :

  • amélioration de ce qu'on peut appeler le socle eZ Publish (correction des bugs, amélioration des performances, ...)
  • amélioration de l'expérience utilisateurs avec des nouveaux produits autour d'eZ Publish (eZ Flow, nouvel Online Editor, ...)

La grosse nouvelle est la mise à jour majeure de la roadmap d'eZ Publish par rapport au dernier developer day et les décalages de planning qui vont avec ;-)

La roadmap eZ Publish

La grosse nouveauté concerne le développement des nouvelles versions d'eZ Publish. En effet celui ci va se poursuivre sur 2 branches distinctes :

  • la branche 4.x
  • le projet V (la branche 5.x)

La branche 4.x se focalisera en plus des corrections de bug, sur des améliorations de performances avec la base de code actuelle. Cette version conservera en particulier le moteur de template actuel. Le but de cette branche est de conserver la compatibilité ascendante. Il semble que le principal soucis au niveau de l'intégration du composant Template des eZ Components soit le système d'override.

La branche 5.x (project V) vise à réécrire quasi complètement le noyau sous forme de micro kernel avec un maximum de fonctionnalité sous forme d'extensions. Il sera par exemple possible d'écrire son propre moteur de stockage pour par exemple se passer du versionning ou pour gérer de manière fine les données stockées dans eZ Publish.

À plus court terme, la sortie de la 4.1 est une question de semaines, elle comprendra :

Pour ces derniers bugs, le dernier obstacle est l'écriture d'un script pour tenter de récupérer un maximum de données.

Les versions 4.2 et suivantes vont voir apparaître les fonctionnalités suivantes :

  • Les object states permettant de faire des processus complexes de publication plus facilement.
  • Support de IIS et MS SQL pour l'hébergement avec PHP en fastcgi avec comme but 80 à 90% des performances d'un serveur Linux
  • Des plugins OpenOffice et MS Word permettant d'éditer des objets directement depuis ces traitements de texte
  • L'intégration d'un CSS Editor.

Les démonstrations de ces deux derniers produits étaient assez impressionnantes. Les plugins des traitements de texte permettent de parcourir et d'éditer directement depuis le logiciel les objets du site et de les sauvegarder sans passer par un export puis un réimport dans le backoffice. Le CSS Editor permet lui d'éditer la feuille de style directement depuis son navigateur. Ce produit est déjà en fonctionnement sur une usine à sites où les administrateurs de chaque site ont la possibilité de changer légèrement la mise en page (couleurs, images de fond, police, ...)

Quelques projets intéressants

eZ Publish est de plus en plus employé pour de gros sites que ce soit en terme d'audience, de volumétrie ou de technicité. Par exemple eZ Publish est utilisé sur Sport24.com (site que je connais bien :)), Europe1.fr ou Car and Driver sites à fort trafic où sont utilisées différentes techniques pour tenir la charge comme le mode cluster, de la prégénération statiques avec des SSI ou les ESI avec Akamaï (ou bientôt Varnish). En terme de volumétrie, Première remporte probablement la palme avec 700 000 objets de contenus. En terme de technicité nous avons pu assister à la présentation d'un projet de banque d'images avancée pour SanomaWSOY mettant en oeuvre eZ Publish avec eZ Find pour l'indexation de 400 000 images et de leurs meta données XMP.

eZ developer day à Paris le 17/04/2008

Voici un compte rendu du eZ developer day du 17/04/2008 qui s'est déroulé dans les locaux de Sun Microsystems réunissant une cinquantaine de développeurs intéressé par le CMS eZ Publish. Nous avons tout d'abord eu droit à une première présentation de la stratégie "Open Source" de Sun. Rien de très intéressant techniquement parlant, si ce n'est quelques fonctionnalités avancées d'Open Solaris comme le système de fichiers ZFS ou la solution de virtualisation et une volonté affichée avec l'ouverture de Solaris de concurrencer les distributions Linux autant au niveau professionnel avec des niveaux de support avancés qu'au niveau communautaire.

La suite était heureusement nettement plus intéressante. Comme en octobre dernier Paul Borgermans nous a présenté la roadmap des différents produits eZ (eZ Publish, eZ Components, eZ Flow, eZ Find, ...). Le moins qu'on puisse dire est que de grosses évolutions voire des révolutions sont en marche au moins au niveau d'eZ Publish.

La version 4.1 d'eZ Publish

Cette version devrait voir apparaître le très attendu Online Editor basé sur TinyMCE bien plus configurable et souple que l'actuel. La compatibilité avec l'existant sera assuré de manière transparente. Cette version verra aussi le retour de la compatibilité avec Oracle, le support de Solaris 10 ou encore une fonctionnalité d'expiration des mots de passe développé par un partenaire.

Une extension fournissant un flash permettant l'upload massif sera également fournie. La démonstration était vraiment bluffante, ce sera une alternative très intéressante au WebDAV, protocole qui manque cruellement de client fiable en particulier sous Windows.

La version 4.5 d'eZ Publish

Cette version verra beaucoup de changements internes selon 2 axes principaux

  1. L'intégration des eZ Components
  2. L'amélioration de performances

Le second étant en partie remplie par le premier. en vrac les nouveautés annoncées sont les suivantes :

  • allègement du code kernel en déplaçant plusieurs fonctionnalités dans des extensions permettant leur activation/désactivation simplement
  • nouveau système de template et donc de surcharge (override) bien plus performant. Paul citait un exemple d'un template complexe qui s'éxécute 20 fois plus rapidement avec le nouveau système !
  • amélioration du système de cache pour le rendre plus granulaire. Une possible implémentation de la norme ESI (Edge Side Includes) a également été évoquée pour être compatible avec Akamaï ou le reverse proxy Varnish.
  • support de IIS avec PHP en mode FastCGI ainsi que de MS SQL. D'autres SGBD pourrait également être supporté l'écriture de la couche d'interface nécessaire
  • introduction des "object states" personnalisables permettant de brancher facilement l'exécution d'un processus de workflow externe
  • refonte du fichier index.php dans le but de l'alléger et de le rendre plus performant mais aussi de pouvoir y brancher l'exécution d'un script sans passer par toute la pile d'eZ Publish lorsque le besoin de performances est important
  • réécriture du système multi-lingue et des URL alias car le code est actuel est complexe et est basé sur des opérations bit à bit en base de données ce qui compromet la portabilité sur différent SGBD
  • "dé-normalisation" de la base de données, en particulier dans un premier temps la gestion des utilisateurs permettant de supporter plus d'utilisateurs. La "dé-normalisation" au niveau des contenus a également été abordée mais reste pour le moment un projet à plus long terme...

ouf ! voila déjà une belle et ambitieuse liste rien que pour eZ Publish ! Cette version devrait paraître avant la fin de l'année.

eZ Find, eZ Flow, eZ Components

eZ Find 1.1 apportera la recherche par facets dans le courant du second trimestre 2008. La version 2.0 sera une réécriture complète via le composant Search des eZ Components de manière à profiter de l'ensemble des fonctionnalités de Solr.

De nouvelles version d'eZ Flow et d'eZ Components sont annoncées pour la eZ conférence en Norvège au mois de juin. Enfin, eZ Flow 2.0 est également annoncée pour la fin de l'année.

BarCamp !

L'après midi s'est terminé par un barcamp axé sur les questions apportées par les différents participants. Chacun a pu échanger sur ses "recettes de cuisine" eZ Publish, je retiens plusieurs points très en vrac :

  • PHP 5.3 apporte des gains significatifs de consomation mémoire
  • Le mode cluster d'eZ Publish pose souvent problème (d'où les améliorations annoncées). Des solutions de contournements ont été mises en place par plusieurs prestataires.
  • La gestion des utilisateurs est parfois problématique (volume, synchronisation LDAP, ...), là aussi des améliorations sont en cours.
  • Enfin au niveau du volume de contenus possibles dans eZ Publish, Paul explique qu'avec du bon matériel eZ Publish est capable de gèrer un million de contenus sans vrai problème même si c'est dépendant de l'organisation de l'aborescence.

Bon au final, mon sentiment sur cette après midi fort instructive est que le développement d'eZ Publish tente de combler les lacunes au niveau des (très) gros sites autant en terme de volume qu'en terme de performances.

Flux RSS des billets

Flux RSS des billets

Rechercher sur pwet.fr

À retenir

Derniers commentaires

Archives

Nuage de tags

Bioutifoul photos

Quelques liens

Licence d'utilisation

Contenu sous Licence Creative Commons By-Sa

Sauf mentions spécifiques, les billets et les photos publiés sur ce site sont placés sous la licence Creative Commons by-sa.

Pour toute utilisation dépassant le cadre de cette licence, merci de me contacter par e-mail.