Veröffentlicht: 31. März 2014
Um die Zeit bis zum ersten Rendern so kurz wie möglich zu halten, 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 Aufwand entstehen für den Browser, die CPU und andere Ressourcen.
Ebenso ist die Länge des kritischen Pfades eine Funktion des Abhängigkeitsgraphen 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 ist, 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 darstellen. Um die Anzahl der Byte zu reduzieren, können wir die Anzahl der Ressourcen reduzieren (beseitigen oder als nicht kritisch kennzeichnen) und dafür sorgen, dass die Übertragungsgröße durch die Komprimierung und Optimierung jeder Ressource minimiert wird.
Die allgemeine Abfolge der Schritte zur Optimierung des kritischen Rendering-Pfads:
- Analysieren und charakterisieren Sie den 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 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.