Blog/Développement : Performances, Web - Appeler les CSS très tôt ...

Accueil / Blog / Développement / Appeler les CSS très tôt ...

lun.		Appeler les CSS très tôt ... Catégorie : Développement. Tags : Performances, Web.
02	/02
	09

"Précédemment dans la série des performances sur le Web" : je vous avais expliqué comment compresser vos composants à base de texte côté serveur via la méthode Gzip (ou Deflate). La conclusion à tirer de cette amélioration était son rapport efficacité/ressources élevé. En effet, pour une petite ligne de code, vous et vos visiteurs y gagnerez beaucoup ! Parlons maintenant de la règle numéro 5 : mettre les CSS en haut.

J’en avais déjà parlé dans le quatrième paragraphe de ce billet, le principe pour cette règle d’optimisation est le même, à savoir permettre à la page de faire son rendu progressivement et ainsi que le visiteur ait accès plus rapidement au fond (à l’information recherchée) qu’à la forme (le Web Design et tous les évènements JavaScript par exemple). Pour ce faire, l’équipe de Yahoo - ayant mené toutes sortes de recherches sur la question des performances - nous conseille fortement d’appeler nos feuilles de style CSS très tôt dans la page c’est à dire entre les balises <head> et </head>.

Je pense qu’il n’est pas nécessaire de s’étendre sur le sujet car il me semble que cette pratique - de surcroit recommandée aussi dansles spécifications HTML du W3C - est plus que courante ; cependant, il y a une subtilité concernant la méthode d’appel des CSS, il existe en effet la méthode dite "link" :

<link rel="stylesheet" type="text/css" href="maSuperCSS.css" />

et la méthode dite "import" :

<style type="text/css">@import url(maSuperCSS.css);</style>

Ces deux méthodes ont toutes deux pour effet d’appliquer vos styles dans vos pages ; certains vous diront que choisir "import" est une bonne pratique pour se faciliter la vie lorsqu’il s’agit de regrouper de vos différents fichiers afin de créer des feuilles de style "dynamiques", alors que d’autres vous diront - du point de vue des performances - qu’utiliser "link" n’est pas bloquant donc plus rapide et à conseiller si l’on souhaite rejoindre les recommandations données par l’équipe Yahoo.

Ce que j’en dis : puisque vous avez normalement déjà (dans la mesure du possible) regroupé vos fichiers en un seul, il me semble alors qu’utiliser la méthode "import" perd toute son utilité ; préférez donc en général (sauf rares cas exceptionnels où vous ne pourrez pas faire autrement) la méthode "link" et le problème sera réglé.

Enfin, une dernière petite précision concernant les sélecteurs CSS : sachez que le rendu pour un élément du DOM ciblé de la manière suivante (exemple donné arbitrairement) : table#monTableau tr td.maCellule {...} sera moins rapide que pour : .maCellule {...} En effet, contrairement à ce que l’on pourrait croire, donner plus de précision dans le ciblage n’aide pas le moteur de rendu du navigateur, ceci lui fait au contraire calculer plus de choses. En plus, simplifier vos sélecteurs allègera vos CSS, c’est tout bénef’ !

Cordialement.

Icone commentaires. 0 commentaire.

Billet lu 0 fois. Écrit par : Sebastien P.

< Billet précédent | Haut de la page | Billet suivant >

Le module de commentaires est temporairement désactivé.
Merci de votre compréhension.

Le flux RSS du Blog.

Le flux RSS des com.

Point gris. Ce Blog a pour principale vocation de traiter des nouveautés liées à la plateforme Web pour DJ Your-Mix, cependant certains billets traiteront aussi d’Internet dans la vie de tous les jours ainsi que de développement informatique en général. Nous vous souhaitons une bonne lecture.