Devrait-on réellement parler d'"optimisation" HTML/CSS ? En réalité il s'agit tout simplement d'utiliser ces deux outils tels qu'ils ont été conçus et donc de coder proprement. Utiliser le couple HTML-CSS2 signifie que l'on sépare presque totalement la structure de son site de son aspect visuel. L'aspect visuel se retrouve dans un fichier à part, ce qui veut dire un gros gain sur la taille des pages puisque cette présentation est chargée à la première page et réutilisée ensuite.
Un exemple concret valant plus que mille mots, imaginons le scénario suivant : en moyenne vos pages HTML font 20ko et vos visiteurs visitent en moyenne 4 pages. Pour afficher ces 4 pages, votre visiteur aura donc dû télécharger 100ko depuis votre serveur. Si vous aviez utilisé une séparation totale de la structure et de l'apparence, votre page moyenne serait de 10ko et votre CSS de 5ko, la CSS est chargée lors de la visite de la première page ce qui veut dire que votre visiteur aura téléchargé (10+5) + (3x10) = 45ko. Vous avez divisé le coût de transfert de données de votre visiteur par deux.
Il est donc primordial de passer aux feuilles de styles (les CSS) dès que l'on recherche à diminuer la taille de ses fichiers HTML. Il est à noter aussi que dès que vous aurez mis toute votre mise en page dans un seul fichier externe, il vous sera possible de changer complètement la charte graphique de votre site en modifiant un seul fichier. On peut ainsi imaginer d'avoir une charte graphique de secours n'utilisant pas ou peu d'images lorsqu'Online ou le web a de gros problèmes de débit, ou bien lorsque vous vous savez que votre site va subir une hausse de fréquentation ponctuelle, si par exemple vous envoyez un courriel annonçant à vos 10.000 clients que vous faites une promotion à voir sur votre site ;).
En guise de démonstration, voici une page du CSS Zen Garden (c'est un site de démo et de coucours entre designers de stylage CSS d'un site type) :
L'une des erreurs classiques des débutants en CSS est de créer des feuilles de styles extrèmement redondantes, voici quelques principes de base :
PAS BIEN : .toto { border-color:red; border-width:1px; border-style:solid; padding-left: 0.5em; padding-right: 0.5em; padding-top: 0em; padding-bottom: 0em; } BIEN : .toto { border:1px solid red; padding: 0.5em 0; }
De nombreuses propriétés de style sont héritées des éléments parents, inutile donc de les redéfinir constamment.
PAS BIEN : body { color:red; font-family: verdana, sans-serif; } p { color:red; font-family: verdana, sans-serif; } BIEN : body { color:red; font-family: verdana, sans-serif; }
Dans l'exemple ci dessus, redéfinir les mêmes valeurs pour le paragraphe que pour Body n'a pas de sens puisqu'ils en héritent de body.
Définissez le style de vos balises HTML selon leurs parents au lieu de mettre des classes sur toutes les balises
PAS BIEN : .titrecol { color:red;} .cell {color:blue;} <table> <tr> <th class="titrecol">titre</th> <th class="titrecol">titre</th> <th class="titrecol">titre</th> </tr> <tr> <td class="cell">cellule</td> <td class="cell">cellule</td> <td class="cell">cellule</td> </tr> </table> BIEN : .tablo1 th { color:red;} .tablo1 td {color:blue;} <table class="tablo1"> <tr> <th>titre</th> <th>titre</th> <th>titre</th> </tr> <tr> <td>cellule</td> <td>cellule</td> <td>cellule</td> </tr> </table>
Aux débuts du web, celui-ci était essentielleement anglophone et les pages étaient envoyées avec le jeu de caractères ASCII 7 bits. Il n'était pas possible de mettre des accents dans nos phrases et le HTML inventa un palliatif, les entités HTML interprétées par le navigateur, lorsqu'on devait taper é on mettait é par exemple.
Cela fait des années que tous les navigateurs gèrent parfaitement les jeux de caractères autres que l'ASCII, nul besoin donc d'utiliser les entités HTML. Non seulement les pages avec entités sont entre 5% et 15% plus lourdes, mais en plus leur code source est beaucoup plus difficile à lire.
Tapez donc directement vos accents dans votre éditeur HTML favori et indiquez dans vos entêtes meta le jeu de caractères de notre langue, pour l'ensemble des langues occidentales, c'est l'ISO-8859-15 :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">