Optimiser son site Web

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. <tr>
  2. <td>
  3. Ma cellule
  4. </td>
  5. </tr>


  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.

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 09/12/2003, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/html-optimisation-disposition.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.