Par défaut, CSS est traité comme une ressource qui bloque l'affichage, ce qui signifie que le navigateur n'affiche aucun contenu traité tant que le CSSOM n'a pas été créé. Assurez-vous que votre CSS utilise des formats simples, diffusez-le le plus rapidement possible, et utilisez des types de médias et des requêtes pour débloquer l'affichage.
Lors de la construction de l'arborescence de rendu, nous avons constaté que le chemin critique du rendu nécessite à la fois le DOM et le CSSOM pour construire l'arborescence de rendu. Cela a un impact important sur les performances: HTML et CSS sont tous deux des ressources qui bloquent l'affichage. Le code HTML est évident, car sans le DOM, nous n'aurions rien à afficher, mais l'exigence CSS peut être moins évidente. Que se passe-t-il si nous essayons d'afficher une page standard sans bloquer l'affichage dans CSS ?
Résumé
- Par défaut, CSS est considéré comme une ressource de blocage de l'affichage.
- Les types de contenus multimédias et les requêtes multimédias nous permettent de marquer certaines ressources CSS comme ne bloquant pas l'affichage.
- Le navigateur télécharge toutes les ressources CSS, quel que soit le comportement bloquant ou non bloquant.
L'exemple ci-dessus, qui montre le site Web du NYTimes avec et sans CSS, montre pourquoi l'affichage est bloqué jusqu'à ce que le CSS soit disponible. Sans CSS, la page est relativement inutilisable. L'expérience de droite est souvent appelée "Flash of Unstyled Content" (FOUC). Le navigateur bloque l'affichage jusqu'à ce qu'il contienne à la fois le DOM et le CSSOM.
CSS est une ressource qui bloque l'affichage. Transmettez-le au client dès que possible afin d'optimiser le délai de premier affichage.
Toutefois, que se passe-t-il si certains styles CSS 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 intéressant que nous ne devions pas bloquer l'affichage sur ces ressources.
Les "types de support" 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 multimédia est constituée d'un type de contenu et de zéro, une ou plusieurs expressions qui vérifient les conditions de certains éléments géographiques multimédias. Par exemple, notre première déclaration de feuille de style ne fournit ni type de média, ni requête. Elle s'applique donc dans tous les cas, autrement dit, elle bloque toujours l'affichage. En revanche, la deuxième déclaration de feuille de style ne s'applique que lors de l'impression du contenu, par exemple si vous souhaitez réorganiser la mise en page, modifier les polices, etc. Cette déclaration ne doit donc pas bloquer l'affichage de la page lors de son premier chargement. Enfin, la dernière déclaration de la feuille de style fournit une "requête média", qui est exécutée par le navigateur. Si les conditions sont remplies, le navigateur bloque l'affichage jusqu'à ce que la feuille de style soit téléchargée et traitée.
Les requêtes média nous permettent d'adapter notre présentation à des cas d'utilisation spécifiques, comme l'affichage par rapport à l'impression, ainsi qu'à des conditions dynamiques telles que les changements d'orientation de l'écran, les événements de redimensionnement, etc. Lorsque vous déclarez vos composants de feuille de style, soyez particulièrement attentif au type de support et aux requêtes, car ils ont un impact considérable sur les performances du chemin d'affichage critique.
Prenons quelques exemples pratiques:
<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 est celle qui bloque l'affichage 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 aucun 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 lors du chargement de la page. Selon l'orientation de l'appareil pendant le chargement de la page, portrait.css peut bloquer ou non l'affichage.
- La dernière déclaration n'est appliquée que lors de l'impression de la page. Elle ne bloque donc pas l'affichage lors du premier chargement de la page dans le navigateur.
Enfin, notez que le "blocage de l'affichage" se réfère uniquement à la nécessité pour le navigateur de maintenir l'affichage 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 non bloquantes.