Um die schnellstmögliche Zeit für das erste Rendering zu erreichen, müssen wir drei Variablen minimieren:
- Die Anzahl der kritischen Ressourcen.
- Die Länge des kritischen Pfads.
- Die Anzahl der kritischen Byte.
Eine kritische Ressource ist eine Ressource, die das erste Rendern der Seite blockieren könnte. Je weniger dieser Ressourcen vorhanden sind, desto weniger Aufwand entstehen für den Browser, die CPU und andere Ressourcen.
Ebenso ist die Länge des kritischen Pfads eine Funktion des Abhängigkeitsdiagramms zwischen den kritischen Ressourcen und deren Byteanzahl: Einige Ressourcendownloads können erst initiiert werden, nachdem eine vorherige Ressource verarbeitet wurde, und je größer die Ressource ist, desto mehr Roundtrips dauert der Download.
Je weniger kritische Bytes der Browser herunterladen muss, desto schneller kann er Inhalte verarbeiten und auf dem Bildschirm darstellen. Um die Anzahl der Byte zu reduzieren, können wir die Anzahl der Ressourcen reduzieren (sie beseitigen oder sie nicht kritisch machen) und sicherstellen, dass wir die Übertragungsgröße durch Komprimieren und Optimieren jeder Ressource minimieren.
Die allgemeine Abfolge der Schritte zur Optimierung des kritischen Rendering-Pfads ist:
- Analysieren und charakterisieren Sie Ihren kritischen Pfad: Anzahl der Ressourcen, Byte, Länge.
- Minimieren Sie die Anzahl kritischer Ressourcen: Beseitigen Sie diese, verschieben Sie ihren Download, markieren Sie sie als asynchron usw.
- Optimieren Sie die Anzahl der kritischen Byte, um die Downloadzeit (Anzahl der Umläufe) zu reduzieren.
- Optimieren Sie die Reihenfolge, in der die verbleibenden kritischen Ressourcen geladen werden: Laden Sie alle kritischen Assets so früh wie möglich herunter, um die Länge des kritischen Pfads zu verkürzen.