Combien de CSS critiques peuvent être insérés avant qu'il y ait un impact négatif sur les performances?
J'ai entendu dire que pour éviter les problèmes de blocage du rendu, il est bon d'inclure le CSS critique directement dans la balise <HEAD> en incluant le CSS réel dans les balises <STYLE>, puis de charger le reste du CSS de manière asynchrone.
De l'autre côté, j'ai lu qu'il est mauvais d'inclure trop de CSS.
Existe-t-il une limite pour les CSS critiques après quoi cela devient un impact négatif sur les performances?
À partir de 2011, vous constaterez une première baisse de performance après l'envoi de 14,6 Ko. Pour la page la plus rapide, tout votre code HTML de la le premier octet, y compris le code CSS critique, doit correspondre à cette quantité de données.
14,6 Ko correspond à la taille de la fenêtre d’un serveur HTTP fenêtre initiale d’encombrement TCP en supposant une valeur par défaut de TCP IW de 10 (convenue pour les principaux navigateurs Web de RFC 6928 ). Cette charge utile de 14,6 Ko représente la quantité de données que le serveur peut envoyer au client avant d’entendre un accusé de réception indiquant que les données ont été reçues (c’est-à-dire avant d’attendre le premier aller-retour réseau).
Si vous considérez la connexion HTTP comme une série d'expéditions par bateau du serveur au client, 14,6 Ko correspond au moment où le premier vaisseau de l'Explorer est plein, et le reste du code HTML doit rester en place et attendre les cargos.
Donc, si le début de votre code HTML - jusqu'à la fin de votre code CSS en ligne critique - est inférieur à 14,6 Ko, c'est optimal. En raison du fonctionnement du TCP contrôle de la congestion (en doublant la quantité de données envoyées à chaque acquittement en rafale), vous pouvez envoyer 98 Ko (14 Ko + 28 Ko + 56 Ko) en 3 allers-retours - donc Google recommande que tout le contenu au-dessus du pli soit rendu avec les 98 premiers Ko du document pour des raisons de vitesse de la page pour mobile.
En bref, 14,6 Ko est la limite supérieure du nombre de ressources en ligne critiques s’inscrivant dans le premier RTT. Pour tenir compte de trois recommandations RTT et Google, le seuil est de 98 Ko .