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

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 :

  1. Minimiser le nombre de requêtes HTTP
  2. Utiliser un réseau de diffusion de contenu ("Content Delivery Network")
  3. Configurer un en-tête d'expiration pour tous les composants images, scripts et styles
  4. Utiliser la compression Gzip
  5. Placer les styles CSS dans la partie head de la page
  6. Placer les scripts en bas de page
  7. Eviter les expressions javascript dans les feuilles de styles
  8. Utiliser des fichiers externes pour les scripts et les styles CSS
  9. Réduire le nombre de résolutions DNS
  10. Compresser le code Javascript (avec des outils comme JSMin)
  11. Eviter les redirections
  12. Retirer les scripts en double (visiblement ça arrive souvent quand on travaille en équipe...)
  13. 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.

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Apollo, WebKit et Windows

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).

Scout

Elements en ligne et marges internes

Les bugs d'IE7

Il n'aura pas fallu longtemps avant de découvrir qu'IE7 avait lui aussi quelques petits problèmes d'interprétation, notamment en matière de DOM et CSS... plusieurs sites recensent déjà les bugs spécifiques à cette version :


Ces quelques liens sont donc à garder sous le coude en cas de désaccord profond entre IE7 et les autres.

Alors attention, IE7 reste néanmoins une grande avancée par rapport à son prédécesseur, et certain de ces bugs CSS listés dans cette page ne sont pas très critiques, c'est à dire qu'on a peu de chance de les croiser tous les jours (à la différence d'un peekaboo bug par exemple sous IE6). Bref si vous voulez mon avis, IE7 est un bon navigateur même si il a ses limites, comme les autres ;)

La fusion des marges, partie 2

La fusion des marges, partie 1

IE6 et PNG, je t'aime moi non plus

Malgré le bug d'IE6 empêchant l'affichage des PNG transparents (32 bits) il existe quelques solutions de contournement. Je vais essayer de rassembler dans ce billet les différents techniques utilisées, en insistant sur leur fiabilité dans la pratique, si vous décidez de les utiliser dans le cadre d'un projet professionnel.

Lire la suite...