Veröffentlicht: 31. März 2014
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 Rendering der Seite blockieren könnte. Je weniger dieser Ressourcen vorhanden sind, desto weniger Arbeit haben der Browser, die CPU und andere Ressourcen.
Ebenso ist die Länge des kritischen Pfades eine Funktion des Abhängigkeitsdiagramms zwischen den kritischen Ressourcen und ihrer Bytegröße: Einige Ressourcendownloads können erst gestartet werden, nachdem eine vorherige Ressource verarbeitet wurde. Je größer die Ressource, desto mehr Rundreisen sind für den Download erforderlich.
Je weniger kritische Bytes der Browser herunterladen muss, desto schneller kann er Inhalte verarbeiten und auf dem Bildschirm anzeigen. Um die Anzahl der Bytes zu reduzieren, können wir die Anzahl der Ressourcen reduzieren (entfernen oder nicht kritisch machen) und die Übertragungsgröße minimieren, indem wir jede Ressource komprimieren und optimieren.
Die allgemeine Abfolge der Schritte zur Optimierung des kritischen Rendering-Pfads:
- Analysieren und charakterisieren Sie Ihren kritischen Pfad: Anzahl der Ressourcen, Byte, Länge.
- Anzahl kritischer Ressourcen minimieren: Sie können sie entfernen, den Download verschieben, als asynchron kennzeichnen und andere wichtige Aspekte berücksichtigen.
- Optimieren Sie die Anzahl der kritischen Bytes, um die Downloadzeit (Anzahl der Roundtrips) zu verkürzen.
- 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.