Bienfaits de cette optimisation

Croyez le ou non mais les gains en terme de temps d'affichage peuvent être très important, voire même spéctaculaires si vous avez crée votre site en utilisant un logiciel de conception Web tel que, l'horrible, préhistorique et dangeureux FrontPage.
Ce genre de logiciel génère, en effet, un code inutilement lourd, sal et propriétaire, uniquement "optimisé Internet Explorer". Seul Macromedia Dreamwaver sort du lot mais son prix très élevé en refroidira plus d'un.

Les gains sont visibles dans tous les domaines :

• baisse de la consommation en bande passante.
• baisse du nombre de requêtes HTTP.
• accélération du chargement et de l'affichage des pages.
• meilleur référencement.

Procédure à suivre

Il m'est impossible de vous expliquer comment corriger toutes les erreurs que ces logiciels comettent lors de la génération du code. La meilleure chose à faire si vous avez créé votre site avec un éditeur comme FrontPage, c'est à dire un logiciel dans lequel vous n'aurez aucune ligne de code HTML / XHTML / CSS à entrer, est de recoder entièrement le site à la main.
Cette façon de voir les choses peut paraître trop radicale et excessive mais les avantages contenus dans la liste de gains annoncée en première partie de cet article seront surmultipliés avec, à la clef, un parfait affichage quelque soit le navigateur Internet utilisé.

Une autre solution existe et elle est bien plus rapide : passer vos pages dans notre nettoyeur de code HTML avec les options par défaut. Vous verrez que cet outil peut faire des miracles et vraiment alléger, otpimiser et épurer un code généré par de tels logiciels.

Il existe néanmoins quelques règles à toujours respecter :

Tabulations dans le code source

Les espaces crées dans l'éditeur HTML vous permettent de mieux organiser votre code source. Certes, mais sachez que cette "mise en forme", qui ne sera jamais perçue par le lecteur à moins qu'il n'affiche les sources de la page, est couteuse en temps d'affichage et en poids. Il est préférable de s'en passer pour optimiser un maximum la page.

Par exemple, voici le genre de code que l'on retrouve souvent (les espaces tabulation sont, pour plus de clareté, matérialisés par un point) :

<table>
.	<tr>
.	.	<th>Case 1</th>

.	.	<th>Case 2</th>
.	</tr>
.	<tr>
.	.	<td>Case 1</td>
.	.	<td>Case 2</td>

.	</tr>
</table>

Il serait donc plus approprié de supprimer les espaces inutiles afin de gagner en poids et en rapidité d'affichage. Voici le résultat :

<table>
<tr>
<th>Case 1</th>
<th>Case 2</th>
</tr>
<tr>
<td>Case 1</td>
<td>Case 2</td>
</tr>
</table>

Vous pouvez bien sûr aller encore plus loin (en supprimant des retours à la ligne) mais cela peut être génant pour la relecture du code.

A vous de trouver le meilleur rapport entre l'optimisation et le confort de relecture de votre code ;o) N'hésitez pas à vous servir de notre outil gratuit : le nettoyeur de code HTML en cochant la case "Supprimer les tabulations"

Fonctions déjà présentes dans le navigateur

Avant d'ajouter une fonction déjà présente dans les navigateurs Internet demandez-vous si ce "double-emploi" est nécessaire, s'il pourrait apporte quelque chose au visiteur.

On lit souvent sur les sites "d'intégristes W3" qu'un lien vers les favoris ou encore un lien permettant l'impression de la page est inutile. En fait, employer ces fonctions peut se révéler pratique pour l'utilisateur mais aussi, et surtout, lui donner l'idée de se servir de cette fonction.
Par exemple on imagine mal un site sur lequel il serait inscrit "Imprimez cette page s'il vous plaît, pour cela allez dans le menu (etc.)". En effet, contrairement à ce que croient ces fous des standards, tout le monde ne connait pas à la perfection son navigateur et / ou ses fonctions.

Il est par contre inutile de créer des fonctions de rafraîchissement automatique ou manuel des page, des boutons "Page précédente" ou autre fonctions que tout le monde utilise sans difficulté.

Fonctions n'apportant rien à la richesse des articles

Certaines fonctions, pourtant très à la mode, ne servent à rien et consomment de précieux octets inutilement. Prenons l'exemple des fonctions qui indiquent, en temps réel, l'heure et / ou la date à l'internaute. Je vous rapelle qu'il y a une horloge en bas à droite de l'écran sur tous les systèmes :o)
Bien sur si vous avez un site de presse (comme celui des Echos par exemple) l'affichage de la date se justifie.

Certains scripts Javascript permettent d'afficher un texte dans la barre d'état en bas du navigateur. Il peut, en plus, bouger, clignoter, etc. Les seuls effets de ce genre de pratique sont d'agacer le lecteur et de détourner son attention du principal : votre article.

Conclusion

La règle d'or est donc de se poser cette question à chaque fois : cet ajout, qui va alourdir ma page, est il nécessaire à la lecture du site ? Est il indispensable au visiteur ?
Si ce n'est pas le cas alors il est inutile.

Vous pouvez aussi vous dire, qu'après tout 2 ko de code Javascript dans une page n'est pas si énorme et que l'enlever ne vaut pas la chandelle. Allez donc voir la page de calcul de la consommation de la bande passante. Vous serez surpris de savoir que ces 2 ko pourraient vous coûter très cher ;o)

Imprimer cette page | Ajouter aux favoris
Revenir en haut de la page