Publié le 31 mars 2014
Par défaut, le CSS est traité comme une ressource bloquant le rendu, ce qui signifie que le navigateur n'affiche aucun contenu traité tant que le CSSOM n'est pas construit. Veillez à ce que votre CSS soit léger, à le diffuser aussi rapidement que possible et à utiliser des types et des requêtes média pour débloquer le rendu.
Dans la construction de l'arborescence de rendu, nous avons vu que le chemin de rendu critique nécessite à la fois le DOM et le CSSOM pour construire l'arborescence de rendu. Cela a une incidence importante sur les performances : le HTML et le CSS sont des ressources bloquant le rendu. Le HTML est évident, car sans le DOM, nous n'aurions rien à afficher, mais l'exigence CSS peut être moins évidente. Que se passerait-il si nous essayions d'afficher une page type sans bloquer le rendu sur le CSS ?
Résumé
- Par défaut, le CSS est traité comme une ressource bloquant le rendu.
- Les types et les requêtes média nous permettent de marquer certaines ressources CSS comme ne bloquant pas le rendu.
- Le navigateur télécharge toutes les ressources CSS, qu'elles bloquent ou non le rendu.
L'exemple précédent, qui montre le site Web du New York Times avec et sans CSS, explique pourquoi le rendu est bloqué jusqu'à ce que le CSS soit disponible. Sans CSS, la page est relativement inutilisable. L'expérience à droite est souvent appelée "Flash of Unstyled Content (FOUC)". Le navigateur bloque le rendu jusqu'à ce qu'il dispose à la fois du DOM et du CSSOM.
Le CSS est une ressource bloquant le rendu. Envoyez-le au client le plus rapidement possible pour optimiser le délai avant le premier rendu.
Toutefois, que se passe-t-il si nous avons des styles CSS qui ne sont utilisés que dans certaines conditions, par exemple lorsque la page est imprimée ou projetée sur un grand écran ? Il serait préférable de ne pas avoir à bloquer le rendu sur ces ressources.
Les "types média" et les "requêtes média" CSS nous permettent de répondre à ces cas d'utilisation :
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Une requête média se compose d'un type média et d'une ou plusieurs expressions qui vérifient les conditions de fonctionnalités média spécifiques. Par exemple, notre première déclaration de feuille de style ne fournit pas de type ni de requête média. Elle s'applique donc dans tous les cas, c'est-à-dire qu'elle bloque toujours le rendu. En revanche, la deuxième déclaration de feuille de style ne s'applique que lorsque le contenu est imprimé. Vous pouvez ainsi réorganiser la mise en page, modifier les polices et prendre d'autres décisions de conception importantes pour l'impression. Par conséquent, cette déclaration de feuille de style n'a pas besoin de bloquer le rendu de la page lors de son premier chargement. Enfin, la dernière déclaration de feuille de style fournit une "requête média", qui est exécutée par le navigateur : si les conditions correspondent, le navigateur bloque le rendu jusqu'à ce que la feuille de style soit téléchargée et traitée.
En utilisant des requêtes média, nous pouvons adapter notre présentation à des cas d'utilisation spécifiques, tels que l'affichage par rapport à l'impression, ainsi qu'à des conditions dynamiques telles que les modifications de l'orientation de l'écran, les événements de redimensionnement, etc. Lorsque vous déclarez vos éléments de feuille de style, faites très attention au type et aux requêtes média. Ils ont un impact considérable sur les performances du chemin de rendu critique.
Considérez ces deux exemples :
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- La première déclaration bloque le rendu et correspond à toutes les conditions.
- La deuxième déclaration bloque également le rendu :
"all"est le type par défaut. Par conséquent, si vous ne spécifiez pas de type, il est implicitement défini sur"all". Par conséquent, les première et deuxième déclarations sont en fait équivalentes. - La troisième déclaration comporte une requête média dynamique, qui est évaluée lorsque la page est chargée. Selon l'orientation de l'appareil lors du chargement de la page,
portrait.csspeut bloquer ou non le rendu. - La dernière déclaration n'est appliquée que lorsque la page est imprimée (
"print"). Elle ne bloque donc pas le rendu lorsque la page est chargée pour la première fois dans le navigateur.
Enfin, notez que "bloquer le rendu" ne fait référence qu'au fait que le navigateur doit ou non conserver le rendu initial de la page sur cette ressource. Dans les deux cas, le navigateur télécharge toujours l'élément CSS, mais avec une priorité inférieure pour les ressources ne bloquant pas le rendu.