web-dev-qa-db-fra.com

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

J'optimisais le temps de chargement d'un site Web. L'un des moyens consistait à combiner plusieurs requêtes HTTP pour CSS en une requête HTTP combinée. Mais l'un des relecteurs a posé une question intéressante: la parallélisation du téléchargement de plusieurs fichiers CSS ne réduirait-elle pas le 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 l'indiquer clairement 1 ).

Je vois quelques raisons pour lesquelles la parallellisation n’améliorerait pas les performances, ou n’aurait que peu d’importance (compensée par l’avantage d’utiliser moins de requêtes HTTP):

  • L'installation d'une nouvelle connexion coûte cher. Bien que la configuration de plusieurs connexions puisse se faire en parallèle, les navigateurs utilisent au maximum environ 4 à 6 connexions (selon le navigateur). Par conséquent, le téléchargement de CSS en parallèle empêcherait le téléchargement d'autres éléments tels que JavaScript et les images.
  • La configuration d’une connexion HTTPS nécessite des données supplémentaires. J'ai lu que cela peut facilement représenter quelques Ko de données. Il s’agit de données supplémentaires qui doivent être envoyées par fil, au lieu du CSS que nous souhaitons réellement envoyer.
  • En raison de l'algorithme TCP Slow Start, plus le nombre de données envoyées via une connexion est important, plus la connexion sera rapide. Ainsi, des connexions plus longues enverraient 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, même si plusieurs requêtes sont utilisées, les données envoyées sur le réseau 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 les mobiles. Une demande peut être terminée beaucoup plus rapidement que l'autre. L'utilisation de plusieurs requêtes CSS signifie que le rendu de la page Web est bloqué jusqu'à la fin de la dernière requête, ce qui peut être beaucoup plus tard que la moyenne des connexions.

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

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

cssperformance
15
ayke

Les fichiers CSS liés à partir de documents HTML sont ajoutés à la file d'attente de téléchargement parallèle à mesure que le code HTML est analysé. L'essentiel est que les liens JavaScript non asynchrones bloquent l'analyseur HTML, empêchant l'ajout de balises ultérieures à 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 oblige le navigateur à télécharger trois des quatre fichiers de manière séquentielle (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é pour 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 bloquent le rendu, pas 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 la scission de vos CSS est d'obtenir le minimum de règles nécessaires pour rendre le contenu au-dessus du pli au client, puis analysé le plus rapidement possible. Le reste des règles, pour les éléments qui ne sont pas immédiatement visibles, peut être marqué comme ne bloquant pas nécessairement le rendu avec les requêtes media dans la balise link, ou ajouté à la page par du code JavaScript chargé de manière asynchrone.

Il n’ya donc aucun avantage clair à paralléliser vos téléchargements CSS uniquement pour vous-même. Mais comme toujours, mesurez et testez!

Pour en savoir plus, je vous recommande les articles suivants sur Google: "Principes fondamentaux du Web: optimiser les performances": https://developers.google.com/web/fundamentals/performance/

[1]: Ceci ignore la fonctionnalité 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

14
Robert K. Bell