Optimiser son site Web

Contents

Certains experts nous affirment qu'il est possible d'optimiser le code en supprimant par exemple les balises de fermeture, qui ne sont pas nécessaires en HTML. Ils vont même jusqu'à préconiser de ne plus placer les guillemets autour des attributs.
Je suis absolument contre ce style de procédés.
Je pense que l'optimisation ne peut en aucun cas se faire en profitant du laxisme du langage HTML, et l'arrivée du XHTML me conforte dans cette idée : nous devons observer une syntaxe rigoureuse (fermeture des balises, même de la ligne <hr />, etc.) afin que le code soit interprété le plus rapidement possible, et d'une manière identique sous une majorité de navigateurs.

Supprimer les retours à la ligne

En tant que programmeur, j'ai toujours vanté les mérites d'un code lisible et bien documenté. J'ai conçu mes premières pages Web à l'aide de vi et notepad, et j'étais très fier de mes indentations et du code ventilé que j'avais produit.
Mais dans notre chasse au moindre bit superflu, il devient évident qu'il est possible d'alléger notre code en évitant ces retours à la ligne intempestifs et ces espaces qui ne sont nécessaires qu'au concepteur et aux deux ou trois curieux.

Ces deux styles de syntaxe produisent le même effet, mais le deuxième (même s'il est moins agréable à la lecture) est plus rapide.

  1. <table>
  2. 	<tr>
  3. 		<td>
  4. 			Ma cellule
  5. 		</td>
  6. 	</tr>
  7. </table>


  1. <table><tr><td>Ma cellule</td></tr></table>

Le code de l'infobrol est soumis à une compression automatique qui supprime le formattage du code HTML (espaces, indentations, retours à la ligne…). Lors d'une navigation en tant que membre identifié, le code envoyé est formaté selon les préférences de l'utilisateur.

Il est fort probable qu'un jour les navigateurs (Netscape, Opera, et pourquoi pas, nous pouvons toujours y croire, ce malheureux Internet Explorer) intégreront des outils permettant d'afficher le code source proprement, ou méme suivre les actions locales en JavaScript.

Supprimer les espaces

Nous avons découvert qu'il était possible d'alléger notre code en supprimant les retours à la ligne, mais il est aussi possible de supprimer les espaces inutiles.

Ces deux styles de syntaxe produisent eux-aussi le même effet.

  1. <style type="text/css">
  2. 	<!--
  3. 	body
  4. 	{
  5. 		font-family: Verdana, Arial, Helvetica, sans-serif;
  6. 		font-size: 9px;
  7. 	}
  8. 	-->
  9. </style>


  1. <style type="text/css"><!-- body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9px;}--></style>

Les espaces et les retours à la ligne du code ne sont pas reproduits lors de l'affichage (sauf si nous utilisons les balises <pre>). L'exemple suivant montre le code qui sera affiché comme ceci :

Code

  1. <p>
  2. Ceci        est un 
  3.  
  4. test                                               avec              des       
  5.  
  6.  
  7.  
  8.  
  9. espaces
  10. </p>

Résultat

Ceci est un test avec des espaces

Remarque

Les différents codes présentés dans les autres pages ont un but didactique, je respecterais donc l'indentation et les retours à la ligne pour préserver la lisibilité du code.

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 09/12/2003, last modified the 26/10/2018
Source of the printed document:https://www.gaudry.be/en/html-optimisation-disposition.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.