Pablo Prieto - Blog - html

13 règles pour accélérer son site web

Pab. — Wed, 01 Aug 2007 11:24:00 +0200

Yahoo nous propose sur cette page 13 règles pour optimiser et accélérer l'affichage de son site.

En résumé et en français :

Minimiser le nombre de requêtes HTTP
Utiliser un réseau de diffusion de contenu ("Content Delivery Network")
Configurer un en-tête d'expiration pour tous les composants images, scripts et styles
Utiliser la compression Gzip
Placer les styles CSS dans la partie head de la page
Placer les scripts en bas de page
Eviter les expressions javascript dans les feuilles de styles
Utiliser des fichiers externes pour les scripts et les styles CSS
Réduire le nombre de résolutions DNS
Compresser le code Javascript (avec des outils comme JSMin)
Eviter les redirections
Retirer les scripts en double (visiblement ça arrive souvent quand on travaille en équipe...)
Configurer correctement les "entity tags" si besoin

Chaque règle est très bien expliquée et documentée, et Yahoo nous fournit même une extension pour Firebug permettant d'analyser la page en cours vis-à-vis de chacune de ces règles.

Apollo, WebKit et Windows

Pab. — Mon, 19 Mar 2007 17:37:00 +0100

Apollo vient de sortir aujourd'hui en version alpha sur le labs d'Adobe. En très bref, Apollo permet de créer des applications Internet riches (RIA) multi-plateformes en mixant Flash, HTML, CSS et JavaScript.

Une bonne nouvelle c'est que Apollo utilise WebKit pour le rendu HTML/CSS, c'est à dire le même moteur de rendu que Safari. Apollo permet donc d'avoir le moteur WebKit disponible sous Windows, ce qui est plutôt intéressant pour les designers qui veulent tester leurs pages sans avoir de mac sous la main...

Et justement, Adobe fournit dans ses exemples, une application dénommée Scout et qui permet d'afficher n'importe quelle page web au sein d'Apollo. Un bon plan pour vérifier le rendu d'un design html/css (presque) comme sous Safari ;) Grand luxe, Scout permet même d'analyser le DOM, le code source, ... un peu comme Firebug pour Firefox.

Je ne pense pas que la version de WebKit utilisée soit exactement la même que celle de Safari mais les différences de rendus sont à priori négligeables. Le moteur JavaScript en revanche n'est pas le même, donc prudence là dessus.

Pour utiliser Scout, installez d'abord Apollo puis télécharger ensuite Scout à partir de cette page (l'enregistrement sur le site d'Adobe est nécessaire).

Motif de conception : le fil d'Ariane

Pab. — Wed, 09 Aug 2006 13:59:00 +0200

Le fil d'Ariane (ou en anglais breadcrumbs trail) est un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Ariane représente le chemin de navigation et permet à l'internaute de se repérer dans le site et de remonter aux rubriques principales.

Plaçons-nous maintenant à la place du concepteur html, quelle est la "sémantique" HTML la plus appropriée pour cet élément ?

En parcourant un peu le web, on constate plusieurs manières de coder un fil d'Ariane, plus ou moins compliquées :

La version minimum, une suite de liens :

<a href="#">Accueil</a> &gt; <a href="#">Rubrique</a> &gt; Page en cours

La liste, ordonnée ou non :

<ul id="breadcrumb">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Rubrique</a></li>  
  <li>Page en cours</li>
</ul>

Et pour les perfectionnistes, la liste imbriquée, dont l'idée est de reproduire la hiérarchie entre les liens :

<ul id="breadcrumb">
  <li>
    <a href="#">Accueil</a>
    <ul>
      <li>
        <a href="#">Rubrique</a>
        <ul>
          <li>Page en cours</li>
        </ul>
      </li> 
    </ul>
  </li>
</ul>

Je n'ai jamais vraiment aimé cette manière de coder un fil d'Ariane sous forme de liste. Avec une liste simple, on perd la notion de hiérarchie. A l'inverse, la solution des listes imbriquées est trop complexe et n'apporte aucun confort supplémentaire en terme de lecture ou de navigation. En terme d'accessibilité, une suite de liens ne pose pas de souci, si ils sont séparés par un caractère (ici généralement un chevron ">" ou "»").

C'est une situation typique où, à mon avis, à défaut de balise appropriée, il faut savoir choisir la voie de la simplicité. Je préfère donc écrire les liens les uns à la suite des autres, dans un simple paragraphe :

<p id="breadcrumb">
  <a href="#">Accueil</a> &gt;
  <a href="#">Rubrique</a> &gt;
  <span>Page en cours</span>
</p>

L'élément span permet de prévoir, si besoin, un style CSS particulier pour le dernier élément, c'est à dire la page en cours.

Le (x)html dans sa forme actuelle ne prévoyant pas de balise spécifique pour ce type de composant (comme le seront les menus de navigation en XHTML 2), il convient à mon avis de faire simple, et ne pas être plus royaliste que le roi. Dans le cadre d'un projet professionnel, où il est généralement important de rester pragmatique, c'est la solution qui s'avère la plus souple et la plus rapide à mettre en place.