< link > et @import : optimiser le chargement des feuilles de style CSS / Optimiser les performances de son site web / Internet / Luxpopuli

Faire un don

Luxpopuli / Internet / Optimiser les performances de son site web / < link > et @import : optimiser le chargement des feuilles de style CSS

< link > et @import : optimiser le chargement des feuilles de style CSS

Date de publication: le mardi 24 février 2009 à 18h01
Dernière modification: par Pascal BOYER le jeudi 5 mars 2009 à 02h03
« Article précédent: Sprites ou comment optimiser le temps de chargement des images
» Article suivant: Éviter les expressions CSS

Placer les feuilles de style dans l'en-tête des pages HTML

Avant de poursuivre plus avant la lecture des règles de gestion des feuilles de style CSS, voici quelques éléments de réflexion générale à prendre en considération avant d'arrêter toute décision technique.

Affichage progressif d'une page web

On nomme affichage progressif d'une page web le fait que celle-ci soit affichée par le navigateur au fur et à mesure que ce dernier possède les éléments à afficher. C'est à dire au fur et à mesure que le navigateur télécharge les éléments à afficher.

L'affichage progressif présente les avantages suivants:

il indique au visiteur que son action est bien suivie d'effets,
il permet au visiteur de préjuger (de manière approximative) du temps d'attente,
en lui donnant quelque chose à voir, le visiteur est moins sujet à l'impatience.

Ces trois points, rendant l'expérience de l'utilisateur plus agréable, ne sont donc pas à négliger et ne sont pas étrangers à l'existence des barres de progression lors du chargement des objets flash, des images d'une galerie javascript, etc...

Comportement des navigateurs

Il est important de retenir que de nombreux navigateurs, et tout particulièrement Internet Explorer, bloquent l'affichage des éléments d'une page jusqu'à ce qu'il aient procédé au chargement des feuilles de style.
Ce comportement permet aux navigateurs de ne pas perdre le temps d'un premier affichage que des règles CSS viendraient modifier ultérieurement.

Il résulte de cela que des feuilles de style placées au bas des pages HTML empêchent leur affichage progressif et produisent, dans certains cas, le phénomène de la page blanche (temps pendant lequel le navigateur n'affiche rien ou presque dans l'attente de la fin du téléchargement des feuilles de style) suivit de l'affichage complet de la page «d'un seul coup».

:
Des études semblent montrer que de nombreux visiteurs se détournent d'un site dans la phase de la page blanche. Plus ce phénomène est long, et plus la perte de visiteurs est importante.

En plaçant les feuilles de styles au bas des pages HTML (cas 1), on devine aisément que les éléments à afficher se retrouvent plus rapidement en mémoire que lorsque leur téléchargement est retardé par celui, préalable, des feuilles de style placées tout en haut de l'en-tête des page HTML (cas 2).

En s'en tenant à la théorie, le cas 1 devrait engendrer un affichage des éléments, et donc de la page, plus rapide que dans le cas 2.

Mais dans la pratique, le comportement des navigateurs étant ce qu'il est, c'est bien dans le cas 2 que l'affichage des éléments est le plus rapide (en raison de son aspet progressif).

:
Il faut donc placer l'appel des feuilles de style le plus haut possible dans l'en-tête des pages HTML.

Il existe deux méthodes pour importer les feuilles de style CSS.

Télécharger les feuilles de style avec la balise <link>

:
La balise <link> ne peut être placée en dehors de l'en-tête d'une page HTML. <link> est donc obligatoirement placé entre les balises <head> et </head>.

Auquel cas, la syntaxe à positionner dans l'en-tête de la page html est la suivante:

<link rel="stylesheet" href="feuillesDeStyles/maFeuille0.css" type="text/css" media="screen" />
<link rel="stylesheet" href="feuillesDeStyles/maFeuille1.css" type="text/css" media="screen" />

Sous eZ Publish, une syntaxe possible est:

<link rel="stylesheet" href={"stylesheets/maFeuille0.css"|ezdesign} type="text/css" media="screen" />
<link rel="stylesheet" href={"stylesheets/maFeuille1.css"|ezdesign} type="text/css" media="screen" />

:
Cette syntaxe doit être placée en dehors des balises <style type="text/css"> et </style>

L'attribut média, dont le rôle est de restreindre l'objet auquel doit s'appliquer les règles de la feuille de style appelée, peut prendre les valeurs suivantes:

all
print
screen

Télécharger les feuilles de style avec la règle @import

La syntaxe imposée par cette règle ressemble à ceci:

<style type="text/css">
    @import url("feuillesDeStyles/maFeuille0.css");
    @import url("feuillesDeStyles/maFeuille1.css");
    @import url("feuillesDeStyles/maFeuille2.css");
</style>

Sous eZ Publish, une syntaxe possible est:

<style type="text/css">
     @import url({"stylesheets/maFeuille0.css"|ezdesign});
     @import url({"stylesheets/maFeuille1.css"|ezdesign});
     @import url({"stylesheets/maFeuille2.css"|ezdesign});
 </style>

:
La règle @import peut être également placée en début d'une feuille de style permettant ainsi d'importer une autre feuille de style. Il n'y a aucune limite de profondeur au chaînage des feuilles de style.

Quelle méthode privilégier: <link> ou @import ?

Avantages de la balise <link>

Respecte l'ordre de téléchargement des feuilles de style:
Je vous laisse découvrir ces deux articles très instructifs et contradictoires:
- http://www.webdesigner.com.fr/post/2008/07/14/185-import-vs-link
- http://performance.survol.fr/2008/04/css-et-import/
Compatible avec tous les navigateurs (même les plus anciens),
N'engendre aucun phénomène de page blanche puisqu'elle permet l'affichage progressif des pages.

Avantages de la règle @import

Plus rapide que <link>
Peut être placée n'importe où dans la page HTML,
Permet de chaîner les feuilles de style.

Conclusion

L'emploi de la balise <link> est à privilégier.

Commentaires

Right menu

Dernières publications

Dernières modifications