Verbessern Sie die Leistung Ihrer Website durch parallele CSS-Downloads?

Ich habe die Ladezeit einer Website optimiert. Eine Möglichkeit bestand darin, mehrere HTTP-Anforderungen für CSS in einer kombinierten HTTP-Anforderung zu kombinieren. Einer der Gutachter stellte jedoch eine interessante Frage: Würde das parallele Herunterladen mehrerer CSS-Dateien die Ladezeiten der Seite nicht verringern?

Ich habe diese Option nie in Betracht gezogen, da das Einzige, was ich im Internet gelesen habe, darin besteht, dass das Verringern der Anzahl (blockierender) HTTP-Anforderungen der Schlüssel zu einer schnelleren Webseite ist (obwohl Google Pagespeed Insights diese 1 nicht eindeutig anzugeben scheint ).

Ich sehe ein paar Gründe, warum Parallellisierung die Leistung nicht oder nur sehr wenig verbessert (aufgewogen durch den Vorteil, weniger HTTP-Anforderungen zu verwenden):

Das Einrichten einer neuen Verbindung ist teuer. Während das Einrichten mehrerer Verbindungen parallel erfolgen kann, verwenden Browser (je nach Browser) höchstens 4 bis 6 Verbindungen. Wenn Sie also CSS parallel herunterladen, wird das Herunterladen anderer Elemente wie JavaScript und Bilder blockiert.
Das Einrichten einer HTTPS-Verbindung erfordert einige zusätzliche Daten. Ich habe gelesen, dass dies leicht ein paar KB Daten sein können. Dies sind einige zusätzliche Daten, die über das Internet gesendet werden müssen, anstatt das CSS, das wir tatsächlich senden möchten.
Aufgrund des TCP Slow Start-Algorithmus ist die Verbindung umso schneller, je mehr Daten über eine Verbindung gesendet wurden. Langlebigere Verbindungen senden die Daten also tatsächlich viel schneller als neue Verbindungen. Siehe zum Beispiel das SPDY-Protokoll, das eine einzelne Verbindung verwendet, um die Ladezeiten für Seiten zu verbessern.
TCP ist eine Abstraktion: Es gibt (normalerweise) immer noch nur eine zugrunde liegende Verbindung. Während also mehrere Anforderungen verwendet werden, profitieren die über das Kabel gesendeten Daten möglicherweise nicht unbedingt von mehreren Verbindungen, um die Geschwindigkeit zu verbessern.
Internetverbindungen sind von Natur aus unzuverlässig, insbesondere auf Mobilgeräten. Eine Anforderung wird möglicherweise erheblich schneller als die andere ausgeführt. Wenn Sie mehrere Anforderungen für CSS verwenden, wird das Rendern der Webseite blockiert, bis die letzte Anforderung abgeschlossen ist. Dies kann erheblich später sein als die durchschnittliche Verbindung.

Gibt es also überhaupt einen Vorteil bei der Parallelisierung von HTTP-Anforderungen für CSS-Dateien?

Hinweis / Update: Alle CSS-Dateien sind renderblockierend. CSS-Dateien, die noch nicht aus dem kritischen Pfad verschoben wurden.

css performance

— Ayke
quelle

Ich habe etwas in Etsys Code als Bastelseite gesehen, wo empfohlen wurde, nur eine einzige Domäne ohne Cookies für statische Objekte (CSS, IMGS, JS) zu verwenden. Es stellt sich heraus, dass moderne Browser mit parallelen Downloads von einer einzigen Domain hervorragende Arbeit leisten. Bei mehreren Dateien aus derselben Domain (10 CSS-Dateien vs 1 große) ist es meiner Meinung nach besser, eine große Datei zu kombinieren und zu verkleinern und nur eine Anfrage zu stellen. Speziell bei CSS, wo Ihre Site wahrscheinlich das gesamte CSS benötigt, um korrekt auszusehen.

— Frank

In gewisser Weise werden Browser bereits parallel heruntergeladen, basierend auf der Anzahl der verfügbaren Verbindungen. Es basiert auf dem HTML-Code, den der Browser liest.

— So,

Aus HTML-Dokumenten verknüpfte CSS-Dateien werden beim Analysieren des HTML-Codes zur parallelen Download-Warteschlange hinzugefügt. Das Wichtigste ist, dass nicht asynchrone JavaScript-Links den HTML-Parser blockieren und verhindern, dass spätere Tags zur Download-Warteschlange hinzugefügt werden, bis JavaScript heruntergeladen, analysiert und ausgeführt wird. ^[1]

Das folgende Beispiel zwingt den Browser, drei der vier Dateien nacheinander herunterzuladen (mindestens drei Roundtrips):

<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>

Das folgende Beispiel wurde überarbeitet, sodass alle 4 Dateien gleichzeitig heruntergeladen werden (mindestens ein Roundtrip):

<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>

Ein weiterer Hinweis: CSS-Dateien sind (standardmäßig) renderblockierend und nicht parserblockierend. Die Seite wird weiterhin analysiert und das DOM erstellt. Das Rendern beginnt jedoch erst, wenn das CSSOM erstellt wurde.

Der Hauptgrund für die Aufteilung Ihres CSS besteht darin, die Mindestregeln zu erhalten, die erforderlich sind, um den Inhalt ohne Scrollen für den Client zu rendern und so schnell wie möglich zu analysieren. Die restlichen Regeln für Dinge, die nicht sofort sichtbar sind, können mit mediaAbfragen im Link-Tag als nicht notwendigerweise rendersperrend markiert oder durch asynchron geladenes JavaScript zur Seite hinzugefügt werden.

Es ist also kein klarer Vorteil, Ihre CSS-Downloads nur für sich selbst zu parallelisieren. Aber wie immer messen und testen!

Zum Lesen empfehle ich die folgenden Artikel zu "Webgrundlagen: Optimieren der Leistung" von Google: https://developers.google.com/web/fundamentals/performance/

[1]: Dies ignoriert die Speculative Parsing-Funktion einiger Browser:

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
quelle

Eine weitere gute Lektüre darüber, wie Sie Ihre Skripte gleichzeitig herunterladen können, finden Sie hier: stackoverflow.com/questions/436411/…

— joshreesjones

Es ist erwähnenswert, dass alle .js-Dateien am Ende des Codes direkt vor dem schließenden Body-Tag verlinkt werden sollten, damit sie nichts blockieren.

— Chaoley

Können Sie näher erläutern, "Es ist also kein klarer Vorteil, Ihre CSS-Downloads nur für sich selbst zu parallelisieren"? Ich konnte es irgendwie nicht aus der obigen Antwort

— herausfinden

@ gaurav5430 Es scheint keine guten Gründe für die Aufteilung von CSS-Dateien zu geben, abgesehen von der Optimierung der Renderzeit (und möglicherweise der Cache-Optimierung?)

— Robert K. Bell