- Publié le 30 Août 2008 à 15:36
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 :
- le logo RSS est un PNG 24 bit pour que les arrondis soit vraiment arrondis, il restera donc seul
- 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) :
| Technique
| Image(s)
| CSS gzippée
| Total
| Ratio
|
|---|
| 6 GIF
| 1915
| 3067
| 4982
| 100%
|
| 6 PNG
| 1754
| 3067
| 4822
| 97%
|
| 1 GIF
| 3154
| 3068
| 6222
| 124%
|
| 1 PNG
| 1379
| 3068
| 4447
| 89%
|
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...
- Publié le 26 Août 2008 à 00:30
Un des premiers réflexe est probablement d'aller chercher l'appartement rêvé sur les sites d'agences immobilières, et ce n'est pas toujours aussi simple qu'on pourrait le penser. Sans même parler d'accessibilité, on est à la limite (et parfois pas du bon côté) de l'utilisabilité ! Finalement, le meilleur est une fois de plus celui qui applique le principe KISS.
Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher
Antoine de Saint-Exupéry
La FNAIM :
Vu de loin, ce formulaire a l'air vraiment bien, enfin pourvu que chaque GIF servant de titre ou de numérotation soit bien chargé ce qui a été trèèès long à ma première visite et l'est encore aux suivantes !??. Il faut aussi deviner dans la partie sélection du type de bien, un clic sur un type l'ajoute comme critère de recherche (façon checkbox), mais qu'un double clic sur un élément dé-sélectionne les autres. Mais les barres de sélection des tranches de prix, du nombre de pièces et de la surface c'est insupportable et pénible à utiliser surtout sur un PC portable et quand finalement la recherche ne fonctionne tout simplement pas... grrr Au suivant !
Foncia
Le formulaire de recherche sur le site de Foncia a au moins le bon goût d'être quasi inutilisable dès le premier champ et complètement inutilisable au deuxième ce qui est un gain de temps non négligeable ;-) En effet, ils ont visiblement voulu remplacer la bonne vieille balise <select> par un truc à base de <div> et de Javascript malheureusement sous Firefox en voulant choisir une option du menu déroulant, celui-ci disparaît. Sur le premier élément, on peut s'en sortir en passant la souris et en cliquant sur la scrollbar (!) mais sur les suivants point de scrollbar, point de salut ! Quasiment un champ sur deux inutilisables, ça fait beaucoup. Dans les mentions légales on peut lire Site optimisé pour Internet Explorer, ça doit être pour ça...
Orpi
Par rapport aux deux autres, il n'y a pas photo, c'est simple, c'est rapide, ça fonctionne et c'est relativement intuitif, reste que les intitulés blancs sur fond bleu clair c'est pas hyper lisible, mais c'est un détail par rapport au précédent.
- Publié le 23 Août 2008 à 19:45
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 :
- 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)
- 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.
- Publié le 05 Août 2008 à 22:48
Nouveau design, nouvelles couleurs, nouveaux templates, nouveaux bugs peut-être mais toujours eZ Publish ! ça me démangeait depuis un moment, je repoussais toujours en attendant l'intégration du composant Template d'eZ Components bien plus performant mais vue la nouvelle roadmap d'eZ Publish et le projet V, ce n'est pas encore pour tout de suite !
J'espère donc que c'est plus clair et lisible, moins buggé sous Internet Explorer notamment (fini les Peekaboo normalement) et surtout bien plus performant avec une gestion des caches plus fines (oui j'ai appris quelques trucs depuis Août 2006).
