Um die Zeit bis zum ersten Rendering schnellstmöglich zu gewährleisten, müssen drei Variablen minimiert werden:
- 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 diese Ressourcen, desto weniger Arbeit 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 ihrer Bytezahl: Einige Ressourcendownloads können erst gestartet werden, nachdem eine vorherige Ressource verarbeitet wurde, und je größer die Ressource, desto mehr Roundtrips für den Download.
Und je weniger kritische Byte der Browser herunterladen muss, desto schneller können die Inhalte verarbeitet und auf dem Bildschirm angezeigt werden. Um die Anzahl der Byte zu reduzieren, können wir die Anzahl der Ressourcen reduzieren (beseitigen oder unkritisch machen) und dafür sorgen, dass wir die Übertragungsgröße minimieren, indem wir jede Ressource komprimieren und optimieren.
Die allgemeine Abfolge von Schritten zur Optimierung des kritischen Rendering-Pfads sieht so aus:
- Analysieren und charakterisieren Sie Ihren kritischen Pfad: Anzahl der Ressourcen, Byte, Länge.
- Minimieren Sie die Anzahl kritischer Ressourcen, indem Sie sie beseitigen, Downloads verschieben, sie als asynchron kennzeichnen 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 den kritischen Pfad zu verkürzen.