StarNablog Ceci n'est pas un blog de geek. Enfin presque.

Face au cache pensez au Javascript !

Attention, vous ne trouverez pas dans cet article un palliatif parfait aux problématiques de cache et de performances sur des projets eZ publish .

Vous n'êtes pas sans savoir que le Javascript est un langage de script s'exécutant côté client. Comprendre que la page web dynamique ou non et servi au navigateur avec le code Javascript et c'est le navigateur qui prend en charge son exécution. Cette propriété en fait un allié de poids lorsqu'il est question de jongler avec les problématiques de cache. L'objectif derrière l'utilisation du Javascript est de déléguer à ce dernier certains traitements afin d'alléger le serveur. Je vous en propose une application concrète avec les galeries photos de ce site.

Afin d'améliorer la navigation au sein des galeries photos, j'ai rajouté une vue d'ensemble de toutes les photos de la galerie à laquelle appartient la photo courante sous cette dernière, comme vous pouvez le constater sur cette photo . Afin que l'internaute puisse se repérer parmi toutes les miniatures, l'idée était de mettre en évidence la miniature de la photo courante.

cf : Le cadre blanc autour de la vignette mise en évidence ci-dessus.

Il était tout à fait possible de faire ceci entièrement à base de templating avec quelque chose comme :

{foreach $image_siblings as $sibling}
    {if $sibling.node_id|eq( $node.node_id )}
    {node_view_gui view=sibling content_node=$sibling exergue=1}
    {else}
    {node_view_gui view=sibling content_node=$sibling exergue=0}
    {/if}
{/foreach}

où exergue contrôle la mise en évidence de l'élément. Mais cela aboutit à une utilisation des ressources machines relativement importante. En effet, avec un schéma comme celui-ci, on définit implicitement qu'il sera nécessaire de recalculer l'ensemble des vignettes pour chaque image de la galerie, et donc traiter parfois plus de 30 nodes , une opération qu'il serait judicieux d'éviter autant que possible, vous en conviendrez avec moi. C'eût été d'autant plus dommage que ce bloc de vignettes ne varie pas du tout d'une image à l'autre (excepté pour la mise en évidence de l'image courante).

On cherchera donc logiquement à avoir ce bloc calculé qu'une seule fois et répéter là où nécessaire. Par chance, c'est précisément ce que font les cache-blocks :) :

{cache-block keys=array( 'galerie_quick_nav_' ,$node.parent.node_id ) subtree_expiry=$node.parent.url_alias expiry=864000}
{foreach $image_siblings as $sibling}
    {node_view_gui view=sibling content_node=$sibling}
{/foreach}
{/cache-block}

Via le paramètre keys on indique que le bloc sera commun à tous les noeuds ayant le même parent. Il ne sera calculé qu'une seule fois par galerie.

En l'état actuel, nous avons perdu en cours de route la mise en exergue de l'image courante. Et c'est là qu'intervient le Javascript . C'est ce dernier qui modifiera le style à la volée de l'image qu'il faut :

Cette solution offre un gain important en terme de consommation de ressources. Bien sur, ce type d'astuce n'est pas sans inconvénients.

Tout d'abord, il est possible que le javascript sur le navigateur du client soit désactivé ou tout simplement non géré (c'était le cas de 1,5% des visiteurs de ce blog sur le mois d'octobre à titre d'exemple). Selon l'utilisation qui en est faite, l'internaute peut alors y perdre en confort ou pire être dans l'incapacité d'utiliser tout ou partie du site.

D'autre part, en termes de référencement , il ne faut pas oublier que les robots des moteurs de recherche ne gère pas le javascript. Un menu tout en javascript (génération de liens à la volée) sera tout simplement inexistant pour un Googlebot . Impossible alors pour ce dernier de crawler et d'indexer le site.

C'est typiquement pour le contrôle des éléments de navigation d'un site que le javascript peut jouer un rôle salvateur. L'étendue de son utilisation se retrouve encore décuplé lorsqu'il est utilisé dans des routines à base d' AJAX .