Améliorez les performances du site Web via des téléchargements CSS parallèles?

J'optimisais le temps de chargement des pages d'un site Web. L'un des moyens consistait à combiner plusieurs requêtes HTTP pour CSS en une seule requête HTTP combinée. Mais l'un des examinateurs a posé une question intéressante: la paralysie du téléchargement de plusieurs fichiers CSS ne réduirait-elle pas les temps de chargement des pages?

Je n'ai jamais envisagé cette option, car la seule chose que j'ai lue sur Internet est que la réduction du nombre de requêtes HTTP (bloquantes) est la clé d'une page Web plus rapide (bien que Google Pagespeed Insights ne semble pas énoncer clairement cela 1 ).

Je vois quelques raisons pour lesquelles la parallellisation n'améliorerait pas les performances, ou n'a que très peu d'importance (contrebalancée par l'avantage d'utiliser moins de requêtes HTTP):

La mise en place d'une nouvelle connexion coûte cher. Bien que la configuration de plusieurs connexions puisse se faire en parallèle, les navigateurs utiliseront au plus environ 4 à 6 connexions (selon le navigateur), donc le téléchargement de CSS en parallèle bloquerait le téléchargement d'autres ressources comme JavaScript et les images.
La configuration d'une connexion HTTPS nécessite des données supplémentaires. J'ai lu que cela peut facilement être quelques Ko de données. Il s'agit de données supplémentaires qui doivent être envoyées via le fil, au lieu du CSS que nous voulons réellement envoyer.
En raison de l'algorithme TCP Slow Start, plus il y a de données envoyées via une connexion, plus la connexion sera rapide. Les connexions à durée de vie plus longue enverraient donc les données beaucoup plus rapidement que les nouvelles connexions. Voir par exemple le protocole SPDY, qui utilise une seule connexion pour améliorer les temps de chargement des pages.
TCP est une abstraction: il n'y a toujours (normalement) qu'une seule connexion sous-jacente. Ainsi, alors que plusieurs demandes sont utilisées, les données envoyées via le câble ne bénéficient pas nécessairement de plusieurs connexions pour améliorer la vitesse.
Les connexions Internet sont intrinsèquement peu fiables, en particulier sur mobile. Une demande peut être terminée beaucoup plus rapidement que l'autre. L'utilisation de plusieurs demandes CSS signifie que le rendu de la page Web est bloqué jusqu'à la fin de la dernière demande, ce qui peut être considérablement plus tard que la connexion moyenne.

Alors, y a-t-il un avantage à paralléliser les requêtes HTTP pour les fichiers CSS?

Remarque / mise à jour: tous les fichiers CSS bloquent le rendu. Les fichiers CSS qui ne l'ont pas déjà été ont été déplacés en dehors du chemin critique.

css performance

— ayke
source

J'ai vu quelque chose sur le code etsy comme site d'artisanat où ils recommandaient d'utiliser un seul domaine sans cookie pour les objets statiques (css, imgs, js). Il s'avère que les navigateurs modernes font un excellent travail avec les téléchargements parallèles à partir d'un seul domaine. En ce qui concerne plusieurs fichiers du même domaine (10 fichiers css contre 1 gros), je pense que vous préférez combiner et réduire un gros fichier et en faire une seule demande. Surtout avec CSS où votre site va probablement avoir besoin de tous les CSS pour être correct.

— Frank

D'une certaine manière, les navigateurs téléchargent déjà en parallèle en fonction du nombre de connexions disponibles. Il est basé sur le code HTML que le navigateur lit.

— Sun

Les fichiers CSS liés à partir de documents HTML sont ajoutés à la file d'attente de téléchargement parallèle lors de l'analyse du HTML; l'essentiel est que les liens JavaScript non asynchrones bloquent l'analyseur HTML, empêchant les balises ultérieures d'être ajoutées à la file d'attente de téléchargement jusqu'à ce que JavaScript soit téléchargé, analysé et exécuté. ^[1]

Voici un exemple qui force le navigateur à télécharger séquentiellement trois des quatre fichiers (au moins trois allers-retours):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

Voici l'exemple retravaillé afin que les 4 fichiers soient téléchargés en parallèle (au moins un aller-retour):

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

Autre remarque: les fichiers CSS sont (par défaut) bloquant le rendu, pas le blocage de l'analyseur; la page continuera à être analysée et le DOM construit, mais le rendu ne commencera pas tant que le CSSOM ne sera pas construit.

La principale raison de diviser votre CSS est d'obtenir les règles minimales nécessaires pour rendre le contenu au-dessus de la ligne de flottaison au client et analysé dès que possible. Le reste des règles, pour les choses qui ne sont pas immédiatement visibles, peuvent être marquées comme n'étant pas nécessairement bloquant le rendu avec des mediarequêtes dans la balise de lien, ou ajoutées à la page par du JavaScript chargé de manière asynchrone.

Donc, il n'y a aucun avantage clair à paralléliser vos téléchargements CSS juste pour lui-même. Mais comme toujours, mesurez et testez!

Pour une lecture plus approfondie, je recommande ces articles sur les «Principes fondamentaux du Web: optimisation des performances» de Google: https://developers.google.com/web/fundamentals/performance/

[1]: ceci ignore la fonction d'analyse spéculative de certains navigateurs:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— Robert K. Bell
source

Une autre bonne lecture, sur la façon de maintenir le téléchargement simultané de vos scripts, est ici: stackoverflow.com/questions/436411/…

— joshreesjones

Il convient de noter que tous les fichiers .js doivent être liés à la fin du code juste avant la balise de fermeture, de cette façon, ils ne bloquent rien.

— Chaoley

pouvez-vous élaborer "Donc, il n'y a aucun avantage clair à paralléliser vos téléchargements CSS juste pour lui-même"? Je ne pouvais pas en quelque sorte le comprendre à partir de la réponse ci-dessus

— gaurav5430

@ gaurav5430 Il ne semble pas y avoir de bonnes raisons de diviser les fichiers CSS, au-delà de l'optimisation du temps de rendu au-dessus de la ligne de flottaison (et peut-être de l'optimisation du cache?)

— Robert K. Bell