Améliorer la Performance d’un Site Web par l’Arborescence

Vous avez essayé de d’optimiser vos images, vos script et vos feuilles de style, seulement rien y fait. Votre site est beaucoup trop lent. Heureusement il existe encore un axe d’amélioration pour tout ceux qui ne veulent pas dépenser dans des modules accélérateurs de chargement.

 

“Lorsque le trajet est lent, le chemin le plus court est emprunté.”

Mettons-nous d’accord, le principal problème de la performance web est le temps de chargement d’une page. Nous avons ici deux variables : le Temps de Chargement (TC) & la Page (P). La variable TC est dépendante et associée à P. En effet, le temps de chargement est attribué à chacune des pages. Donc pour réduire le temps de chargement total d’un parcours utilisateur, soit le temps de chargement par page est court, soit le nombre de page est réduit. Et c’est ce deuxième process qui est intéressant car moins étudié.

 

La méthode à utiliser lorsque ses performances sont amoindries, c’est une arborescence réduite. En effet, si malgré tout vos efforts et votre budget investi, la rapidité de chargement n’est pas au rendez-vous, cette autre solution s’impose.

 

Méthode #1 : Compacter les pages sans référencement

Si certaines pages ont un impact déterminant en terme de référencement, d’autres trop “généralistes” peuvent êtres compactées et compilées. Je pense aux pages produits qui, en plus d’être informatives, apporte un contenu qualitatif et précis parfait pour le référencement. À l’opposé certaines pages de catégories de produits peuvent ou doivent revoir leur balance contenu référencé et contenu lourd. Et il est vrai que les pages de catégories de produits sont gourmandes au chargement en raison des multiples images.

Vous allez me dire : “En quoi saturer une page avec encore plus de produits et donc d’images va améliorer le chargement de mon site ?”C’est exact, et c’est en mettant un peu les mains dans le cambouis, c’est-à-dire dans le code, que nous allons charger uniquement les données choisies par l’utilisateur

 

Une catégorie = Un filtre.

Vous voyez maintenant le rapport avec le.référencement ? Les systèmes de filtres affichent et masquent une sélection de produits selon un choix utilisateur. Ce qui est très intéressant, c’est que cette segmentation peut être ultra fine mais également adapté à chacun des visiteurs. De plus, changer de display est bien plus rapide que le chargement d’une nouvelle page, tout en sachant que tout les scripts, les feuilles de style et le cadre (header, navigation, side bar, footer) doivent se recharger.

 

Système de filtre pour les pages de catégories produits

 

En revanche, la solution de catégories compilées avec système de filtres doit s’accompagner du chargement partiel des produits de la catégorie. C’est à dire 2 ou 3 lignes de produits avec un bouton “Voir les X produits” ou une pagination visible.

 

“Justement, qu’en est-il de la pagination ?”

On peut apercevoir sur la toile, et surtout dans le e-commerce, des catégories assez larges avec un nombre incroyable de produits. Ces derniers sont soit affichées par petits segments chargeables à la suite comme proposé plus haut avec un bouton “Voir les X produits suivants” ou “Charger la suite”, soit diffusés par petit nombre avec un nombre de pages ahurissant.

Page Catégories Produits par pagination Page Catégories Produits compilées
En haut, un exemple de pages de catégories avec une pagination, jusqu’à 38 pages !
En dessous, une page de catégorie qui se charge par paliers avec un bouton pour afficher la suite

 

Ce point amène à une seconde méthode pour optimiser le chargement de ses pages de catégories produits, gourmandes en requêtes et en poids. Elle fait suite à cet article, introduisant le mode de réflexion d’une optimisation de performance web, au delà des images, du CSS et des scripts.

Posted in SEM