Optimiser son site Web

Table des matières

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.

Version en cache

21/12/2024 17:00:40 Cette version de la page est en cache (à la date du 21/12/2024 17:00:40) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 09/12/2003, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/html-optimisation-disposition.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.