Joomla permet de créer des templates à la fois robustes et étonnants. En plus de la flexibilité de ces templates, beaucoup d’entre eux s’adaptent dynamiquement à vos contenus et vos extensions. C’est là une des grandes forces de de Joomla. Cependant, ces fonctionnalités peuvent parfois mener à des templates très complexes, et non optimisés pour les moteurs de recherche. Voici donc une liste de conseils qui pourra vous être utile si vous désirez acheter ou créer un nouveau template.

1. Utiliser peu d’images

Oui, les templates Joomla peuvent sembler étonnants, mais bien souvent aux dépens d’images qui vont occuper beaucoup de place sur la bande passante. Utiliser des images moins nombreuses et plus petites va permettre de diminuer le temps de chargement de vos pages.

Et lorsque vous utilisez une image, soyez bien certain qu’elle est appelée correctement, car une image non trouvée consomme énormément de bande passante.

Pour pouvoir réduire le nombre d’images, la première chose à faire est de savoir combien sont utilisées. Pour cela, vous pouvez vous servir de la Web Developer Toolbar de Firefox, et choisissez « View Image Information ». Vous obtiendrez ainsi une nouvelle fenêtre, avec la liste de toutes les images appelées sur votre page.

2. Optimiser les images

Réduire la taille des images et leur nombre est une première étape. Mais quand elles sont nécessaires, il faut être certain qu’elles sont bien optimisées. L’objectif est de les compresser au maximum, tout en veillant à conserver la plus grande qualité possible. Optimiser les images signifie également de bien connaître les différents formats d’images (PNG, JPG ou GIF) pour les utiliser à bon escient (cet article pourra vous y aider). Pour convertir vos images, vous pourrez utiliser un éditeur comme The GIMP ou Photoshop.

3. Externaliser le code Javascript

Les templates Joomla! font généralement appel à des librairies Javascript plutôt lourdes, bien souvent pour n’utiliser que peu de fonctions parmi toutes celles disponibles. Il est donc conseiller d’utiliser un fichier ne contenant simplement que les fonctions utiles.

Si vous devez ajouter vos propres fonctions, veillez bien à les regrouper dans un fichier externe, que vous appellerez ensuite dans le header du template. Vous allégerez ainsi le corps de votre template, et le rendrez beaucoup plus lisible pour les robots des moteurs de recherche.

Si un template utilise une librairie Javascript (Mootools ou JQuery, pour ne citer que les plus connues), assurez-vous qu’il s’agisse bien d’une librairie reconnue, mature, et qui a été optimisée pour fonctionner rapidement. Vous pourrez généralement trouver le nom de la librairie utilisée dans la liste des fonctionnalités du template.

4. Ne rien cacher

Contrôlez également les sources de votre template à la recherche de liens ou de portions de codes cachées. N’importe quel code PHP que vous ne reconnaissez pas ou qui n’appelle pas des contenus du core de Joomla peut être malveillant.

A lien sans rapport vers un mauvais site, ou une « ferme de liens » (des sites se renvoyant les uns vers les autres) insérée dans votre template est très pénalisant aux yeux des moteurs de recherche. Il y a trois façons de le contrôler les sources :

  • Tout d’abord, une fois que la page est chargée avec le template concerné, effectuez un clic droit  sur le site et choisissez « Voir le code source ». Analysez le code à la recherche de liens non soupçonnés, ou effectuez directement une recherche sur toutes les occurrences de l’attribut « href ».
  • Deuxième solution, analyser le PHP brut. Vous pourrez distinguer le code Joomla, qui sera facile à identifier par son sens et sa syntaxe. Un des « tours » les plus utilisés est l’utilisation des feuilles de style (CSS), souvent sous la forme : style= »display:none; ».
  • Le troisième solution consiste à utiliser des outils, tel les Google Webmasters Tools par exemple, qui permettent notamment de lister les liens sortants de votre site.

5. Simplifier au maximum

Ok, Joomla est un outil puissant. Il dispose de plus de fonctionnalités et d’options de personnalisation que vous n’en avez généralement besoin. Mais cela ne signifie pas que vous devez obligatoirement utiliser toutes ces fonctionnalités. Il faut bien garder à l’esprit que chaque nouvelle fonctionnalité va créer au moins une nouvelle requête vers le serveur, et ainsi augmenter le temps de chargement.

Cela demande autant de compétences de créer un template simple et agréable qu’il en faut pour un template complexe. Pour bien distinguer les templates trop complexes, jetez simplement un œil au nombre de positions de modules définies et à la longueur de la liste des fonctionnalités. Avez-vous réellement besoin de 35 positions de modules différentes!?

6. Bannir l’utilisation de tableaux

Les tableau peuvent parfois être utiles, mais en terme d’optimisation pour le référencement, il est conseillé d’utiliser plutôt les feuilles de style. Les raisons sont nombreuses, la première étant certainement la question de la « priorité« . Joomla génère une quantité importante de code XHTML. Et quand un moteur de recherche regarde votre site, il considère que l’élément le plus important est le premier qu’il rencontre. Ce qui peut pousser votre contenu principal en 2ème ou 3ème position à ses yeux. Utiliser les feuilles de style pour positionner les éléments vous permet donc de placer votre contenu en premier.

Il est facile de contrôler si un template utilise des tableaux ou des feuilles de style. Jeter simplement un oeil au code source, vous devriez y voir bon nombre de balises « div » et « span », et non des balises « tr » ou « td ».

7. Prévenir des éventuels conflits avec vos extensions

Les extensions occupent une place importante dans n’importe quel site Joomla. Assurez-vous bien quand vous utilisez une extension qu’elle a été codée pour fonctionner avec votre version de Joomla, et qu’elle n’entre en conflit avec aucune des fonctions de votre template. Comme l’industrie des templates Joomla se développe, de nombreux designers réécrivent certaines propriétés des feuilles de style pour leus extensions. Veillez alors à ce que votre template et vos extensions ne rentrent pas en conflit, cela pourrait générer du code mal vu par les moteurs de recherche. Des outils existent pour contrôler ces éventuels conflits, JoomlaPerformance.com par exemple propose un composant à cet effet.

8. Utiliser les attributs ALT

Toutes les images d’un template doivent être identifiées à l’aide de la propriété « alt ». Cette bonne pratique n’est pas uniquement bonne en terme d’optimisation pour les moteurs de recherche, mais également pour les utilisateurs qui ne seront pas capables de visualiser les images (pour des raisons de sécurité par exemple). Analyser simplement encore une fois le code source de votre template, et assurez-vous que l’attribut « alt » de toutes vos images est bien défini. Principalement sur les images les plus importantes, comme le logo ou les images de l’en-tête de votre site.

Sources : traduction libre d’un article de Cyrus Patten, paru sur Alledia.

6 commentaires pour le moment

  • 1 Delpit | 24 mai 2009 à 16 h 27 min

    Ok ! je vais suivre ces conseils !

  • 2 Mentoroner | 9 juin 2009 à 10 h 50 min

    Interressant tous ça…

  • 3 Mentoroner | 9 juin 2009 à 10 h 50 min

    Par contre c’est dingue que vous n’ayez pas twitter…

  • 4 FraGueuR | 31 juillet 2009 à 13 h 38 min

    Une petite faute de frappe surement dans le dernier paragraphe : c’est l’attribut « alt » et non « tag » sur les balises img (bien dans le titre mais pas dans le texte).

    Je rajouterais une petite astuce pour les JS externalisé, pour les librairies JQuery ou MooTool vous pouvez les inclure en utilisant ceux d’un autre serveur qui l’utilise (les CDN de google sont balaises :D ) ça permet de les charger en parallèle ;) .

    Bonne continuation.

  • 5 Raphaël | 4 août 2009 à 13 h 16 min

    Merci pour la remarque FraGueuR, la faute vient d’être corrigée! ;-)

  • 6 honline | 5 septembre 2009 à 17 h 15 min

    Bonjour

    Merci pour cet intéressant sujet.

    eu .. j’aimerai savoir d’avantage sur le chargement en parallèle des scripts JS.

    Sur mon site joomla j’ai plusieurs scripts qui se chargent avant le contenu et ça empêchent le chargement en parallèle de tout autre contenu; et c’est vraiment pénible. car ça prend 7 secondes environ avant que le rendu de page ne soit fait. :(

    j’ai parcouru internet à la recherche de solutions. mais il y en a peux qui soient applicable a joomla :

    - la première solution et qui sera parfaite, c’est de mettre le chargement de scripts JS en dernier sur la page ( mais je sais pas comment l’appliquer pour joomla)

    - la deuxième solution est le chargement en parallèle des scripts tél que JQuery ou MooTool.. ( astuce proposé par FraGueuR ) et qu’on attend tous quelle soit détaillée

    Merci de votre aide

Laisser un commentaire