Ergonomie, Rails et Architecture de l'information web (2.0)

Ayant récemment eu à me battre avec le couple improbable PHP5 et Oracle, je suis tombé sur cette excellente présentation faite par Oracle traitant de l’optimisation des performances de PHP dans un environnement base de données Oracle avec le driver OCI8.

Les problèmes de montée en charge sont choses courantes pour un site ou une application web une fois atteint un certain succès. Ces derniers sont bien trop souvent négligés, généralement jusqu’au jour où se trouve atteinte la limite critique entre l’inconfort et l’instabilité. Le trend actuel veut qu’il soit à la fois plus simple et moins cher de rajouter des machines que de reprendre son code en profondeur pour l’optimiser. Encore faut-il que l’application permette un redimensionnement de ce genre sans rentrer dans une phase de refactoring complet. Évidemment, avant d’en arriver à une solution aussi lourde, il vaut mieux s’assurer que tout a été fait pour exploiter au mieux les ressources disponibles, et cela passe notamment par un peu d’optimisation côté serveur.

Les problèmes de performances sur un site ou une application web proviennent plus souvent d’erreurs de développement que de soucis de montée en charge. Développée par Yahoo, Yslow, littéralement “pourquoi ça rame” est une extension Firefox qui permet d’effectuer des contrôles de performances sur 13 points clés d’un site web. Chaque point testé reçoit une note pouvant aller de A à F, et les problèmes rencontrés s’accompagnent de conseils tournés vers une optimisation du code. Plus la note est élevée, et plus votre site est rapide.

Pas moins de 13 points de contrôle

YSlow met en avant 13 bonnes pratiques fondamentales dans l’optimisation d’une page web :

1. Minimisez le nombre de requêtes HTTP.
2. Utilisez un réseau spécialisé dans la fourniture de contenus.
3. Ajoutez un en-tête d’expiration.
4. Compressez les contenus côté serveur.
5. Placez les feuilles de style en haut de la page.
6. Déplacez les Javascript en bas de page.
7. Proscrivez les expressions CSS.
8. Placez un maximum de javascript et de CSS dans des fichiers externes.
9. Minimisez les besoins en requêtes DNS.
10. Optimisez le javascript.
11. Évitez les redirections HTTP (301, 302).
12. Supprimez les scripts redondants.
13. Configurez les etags

Un premier test de performances me montre que la refonte en cours du site ne devra pas seulement être ergonomique ou graphique, mais qu’un gros travail d’optimisation est aussi nécessaire. Comme quoi les histoires de cordonnier…

À la fin de l’année dernière, j’ai commencé à m’intéresser au positionnement de ce site sur les moteurs de recherche. J’ai alors contacté Sébastien Billard qui tient l’excellent blog Référencement, Design et Compagnie afin qu’il me fasse profiter de ses lumières. Suite à ses réponses, j’ai commencé une refonte structurelle – et ergonomique – qui a amené à la version actuelle. Un mois plus tard, retour sur les améliorations effectuées et sur les résultats obtenus.

Conseils Structurels

• Remplir le champ <title> à l’aide du titre du billet suivie de la mention “Frédéric de Villamil.com”. Cela permet aux outils de référencement de bien distinguer les pages les unes des autres.
• Dans la structure du code, mettre le contenu de chaque billet avant la navigation, de telle sorte qu’il se retrouve à la première place. Là aussi, il s’agit d’éviter que les moteurs de recherche ne considèrent les contenus comme semblables d’une page à l’autre. Techniquement, cela se fait en jouant sur la position des éléments : le contenu, placé avant dans le code, est placé dans un float: right;, tandis qu’on laisse la navigation dans le flot de la page.
• Supprimer le lien sur le titre du billet en mode lecture puisqu’il pointe de toute manière vers la page en cours. Cela rajoute en plus un bon point pour l’accessibilité.
• Mettre le message “Répondre à ce billet” dans une balise <h3> et non une balise <h2>, cette dernière étant déjà utilisée par le titre du billet, hiérarchiquement supérieur au formulaire de réponse dans la structure de la page.

Conseils éditoriaux

• Ajouter une tagline reprenant les principaux mots clé du site. Sébastien m’avait suggéré “Ergonomie, web design, métiers du web : le blog de Frédéric de Villamil”, mais ma préférence est finalement allée à “Webdesign, Ergonomie et Métiers du Web (2.0)”. Côté sémantique structurelle, le titre du blog se trouve dans une balise <h1> et l’accroche juste en dessous dans une balise <h2>.
• Supprimer le paragraphe de présentation placé en haut de chaque page. Relativement long, celui-ci leurrait les outils de recherche en leur faisant croire que toutes les pages étaient semblables. Le résultat était catastrophique, puisque Google ne recensait que 4 pages différentes, et plus de 1500 doublons. Le paragraphe de présentation a finalement rejoint la navigation, en bas de page.
• Faire figurer les catégories sur l’ensemble des pages, et particulièrement sur celles des billets. Seul problème, je ne voulais plus de sidebar sur ce blog. J’ai finalement décidé de déroger en ce qui concerne les catégories, pour des raisons purement ergonomiques : ce système permet au lecteur d’embrasser le contenu du dernier billet et les thématiques du site d’un seul coup d’oeil, sans retomber dans la pollution visuelle entraînée par une sidebar “fourre tout”.
• Soumettre le site à des annuaires afin de varier la provenance de mes liens entrants, principalement des blogs à ce jour.

Les résultats

Source : google.com, les chiffres de google.fr peuvent être différentes.

Je referai le point sur ces mots clé dans 6 mois, afin de constater les évolutions à venir, en faisant une vérification sur ces mots clé chaque premier du mois, et en les comparant à mes statistiques en entrée. Je remercie Sébastien pour ces conseils qui ne m’ont absolument rien coûté, puisque la bière promise n’a pas encore été commandée. J’espère que vous pourrez à votre tour en profiter pour accroître la visibilité de votre site.

Alexander Kirk propose un excellent document envisageant 10 pistes réalistes pour optimiser la rapidité d’un site Internet, et plus encore d’une application Web dont les besoins en réactivité égalent les applications en client lourd.