Frontend performance enhancements with admin2++ eZ Publish extension

• Publié le 23 mars 2010 à 14:29
• 4 commentaires

About a month ago, I created a new project called admin2++ on projects.ez.no. As written in the project page, the purpose of this project is to go further in the administration interface refresh both on the frontend performance and on the features for users to achieve what I wrote last november on the admin interface refresh of eZ Publish. On the frontend performance side, changes are quite hidden but are there, so it's time to do some advertising :-) In fact, it's more or less an application of my talk in Geneva on frontend performance with eZ Publish.

Current enhancements on frontend performance

The admin2++ extension provides the following enhancements to eZ Publish admin2 interface :

• the twenties background images have been incorporated into three sprites images to decrease the number of HTTP requests. This also decreases the total background images size from about 30Kb to 6Kb.
• PNG Content class icons and PNG admin2 design images have been optimized. Here again the total size of icons and images is decreased from about 200Kb to 147Kb.
• the admin2++ extension provides parts of Apache2 config files to enable GZip compression and set a far future Expires header where possible
• I also replaced the code using YUI3 (drag'n drop of sub-items when sorting with priority) or YUI2 (Date picker) JavaScript frameworks by a code based on jQuery and jQueryUI as jQuery is used for most features of admin2 and jQueryUI is used for others features provided by the extension. This avoids loading three JavaScript frameworks.
• Most of the JavaScript code executed in page has been deferred to DOM ready event instead of DOM load.
• The login page preloads the most used images and all the JavaScript files needed by the admin interface. I tried to configure eZ Publish/eZJSCore so that the JavaScript pack file generated by eZJSCore operators is the same on all pages. The browser downloads the JavaScript on the login page and then it always uses its cache on others pages. I'm happy to see that a part of this has been ported in the eZ Publish trunk :-)

What is missing, future developments ?

I wanted to override ezdesign and ezimage operators to automatically add the last modification date of a ressource in file URI so a far future header can be set on all design ressources without any browser cache issue. Unfortunately, overriding template operators is not possible for the moment. Currently, the expires is set to only seven days in expires.conf provided in the extension for most design ressources.

In addition, a lot of others small improvements would be possible like minifying inline JavaScript code or part of the HTML itself, ... and as usual, it lacks some documentation on how to set it up.

xzoom : un petit outil bien pratique pour le montage HTML

• Publié le 22 septembre 2009 à 00:31
• 0 commentaire

xzoom fait partie de ces petits outils peu connus mais qui peuvent rendre de grands services. xzoom permet de d'agrandir une zone de l'écran quasiment en temps réel, en d'autres termes, à partir du moment où une zone a été choisie (en glissant sur la zone à partie de sa fenêtre), la fenêtre de xzoom se met à jour en même temps que la zone concernée (à l'inverse de xmag par exemple). Cet outil est une aide précieuse pour le montage / l'intégration HTML/CSS lorsqu'il faut caler des blocs avec plus ou moins de contrastes au pixel près.

L'exemple typique d'utilisation est de mettre la fenêtre toujours au dessus des autres dans un coin de l'écran après avoir choisi la zone sur laquelle zoomer. Il est ensuite beaucoup moins fatiguant de vérifier l'alignement correct de zones précises d'une page par un simple rafraîchissement.

Mes yeux remercient l'auteur de xzoom mais continuent de maudir Internet Explorer :-)

Optimiser son site : limiter le nombre de requêtes HTTP

• Publié le 30 août 2008 à 15:36
• 0 commentaire

Limiter le nombre de requêtes HTTP est la première règle (la plus efficace) pour l'optimisation d'un site bien avant la configuration de l'entête d'expiration et la compression gzip des contenus textuels, mais il peut aussi s'agir de la plus complexe à mettre en place. Si il est assez simple de rassembler les feuilles de style CSS et les fichiers Javascript pour limiter le nombre de téléchargements, le cas des images est un peu plus complexe. On peut appliquer la technique dite des CSS Sprites sur les images utilisées pour la décoration via la propriété CSS background. Cette technique consiste à rassembler les images en un seul fichier et à jouer avec la position pour n'afficher que la zone voulue. En effet un navigateur mettra moins de temps à télécharger 1 fichier que 6 petits fichiers de taille totale équivalente et en plus le fichier réunissant les 6 premiers est généralement plus petit, double bénéfice donc. Au niveau montage, il faut par contre savoir qu'une dimension doit nécessairement être fixée ou au moins contrôlée (par exemple le texte contenu est toujours le même), il ne me semble pas possible de remplacer des images qui se répètent sur les axes X et Y à la fois.

J'ai donc expérimenté cela sur ce site dont le design est suffisamment simple. Le design utilise 8 images via la feuille de style, mais 2 restent un peu à part :

1. le logo RSS est un PNG 24 bit pour que les arrondis soit vraiment arrondis, il restera donc seul
2. l'image utilisée en fond des citations est assez large alors que toutes les autres le sont beaucoup moins ou sont répètées sur l'axe horizontale, elle reste intacte également.

Les 6 images restantes sont à l'origine des GIF, j'en ai profité pour les convertir en PNG pour comparer les tailles des différents agencements, ce qui donne le tableau récapitulatif suivant (les tailles sont en octets) :

Je suis très étonné par la taille du GIF rassemblant les 6 images d'origine. Pour le reste, le PNG est légèrement plus efficace presque partout et le CSS Sprites à base de PNG est 11% plus petit que les 6 GIF originaux (et presque autant avec les 6 PNG), j'ai aussi l'impression que l'affichage du site est un peu plus rapide avec ou sans cache navigateur. Il faut quand même noter que cette technique fait légèrement grossir la feuille de style mais comme celle-ci est compressée l'augmentation est plus que faible (1 octet !) et en m'y replongeant j'ai trouvé quelques optimisations qui ont largement compensées cet écart et je n'ai pas encore réellement minifié la feuille de style...

Finalement sur ce site rien de très compliqué, la mise en page est très simple, le plus dur étant d'ordonner correctement les images pour ne pas se retrouver avec une belle mosaïque. Pour voir un exemple un peu plus complexe, on peut étudier le montage du site Yahoo.fr par exemple même si il ne s'agit pas non plus de la page la plus complexe du monde...