CSS bloquant l'affichage

Ilya Grigorik

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 le plus rapidement possible et à utiliser des types et des requêtes multimédias pour débloquer l'affichage.

Dans la section 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 tous deux des ressources bloquant le rendu. Le code HTML est évident, car sans le DOM, nous n'aurions rien à afficher. En revanche, l'exigence CSS peut être moins évidente. Que se passerait-il si nous essayions d'afficher une page typique sans bloquer l'affichage sur CSS ?

Résumé

• Par défaut, le CSS est traité comme une ressource bloquant le rendu.
• Les types de médias et les requêtes multimédias nous permettent de marquer certaines ressources CSS comme non bloquantes pour le rendu.
• Le navigateur télécharge toutes les ressources CSS, quel que soit leur comportement bloquant ou non bloquant.

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 de droite est souvent appelée Flash of Unstyled Content (FOUC) (Flash de contenu non stylisé). Le navigateur bloque l'affichage jusqu'à ce qu'il dispose à la fois du DOM et du CSSOM.

Le CSS est une ressource bloquant l'affichage. Transmettez-le au client dès que possible pour optimiser le délai de premier rendu.

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 préférable de ne pas avoir à bloquer le rendu sur ces ressources.

Les "types de médias" et les "requêtes multimédias" CSS nous permettent de répondre aux cas d'utilisation suivants:

<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 se compose d'un type de contenu multimédia et d'une ou plusieurs expressions qui vérifient les conditions de fonctionnalités multimédias spécifiques. Par exemple, notre première déclaration de feuille de style ne fournit pas de type de média ni de requête. Elle s'applique donc dans tous les cas. Autrement dit, 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 par exemple réorganiser la mise en page, modifier les polices et d'autres éléments de conception importants 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 multimédia", qui est exécutée par le navigateur: si les conditions correspondent, le navigateur bloque l'affichage jusqu'à ce que la feuille de style soit téléchargée et traitée.

Grâce aux requêtes multimédias, nous pouvons 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 média et aux requêtes, car ils ont un impact important 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 est bloquante pour le rendu et correspond dans toutes les conditions.
• La deuxième déclaration est également bloquante pour 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, la première et la deuxième déclaration sont en fait équivalentes.
• La troisième déclaration contient une requête multimédia dynamique, qui est évaluée lorsque la page est chargée. Selon l'orientation de l'appareil pendant le chargement de la page, portrait.css peut ou non être bloquant pour le rendu.
• La dernière déclaration n'est appliquée que lorsque la page est imprimée ("print"). Elle n'est donc pas bloquante pour le rendu lors du premier chargement de la page dans le navigateur.

Enfin, notez que le "blocage du rendu" ne fait référence qu'à la question de savoir si le navigateur doit maintenir 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 non bloquantes.

Commentaires