In diesem Leitfaden werden die PageSpeed Insights-Regeln im Kontext untersucht: worauf es bei der Optimierung des kritischen Rendering-Pfads zu achten ist und warum.
JavaScript und CSS entfernen, die das Rendering blockieren
Damit Sie möglichst schnell zum ersten Rendern gelangen, sollten Sie die Anzahl der kritischen Ressourcen auf der Seite minimieren und (wenn möglich) eliminieren, die Anzahl der heruntergeladenen kritischen Byte minimieren und die Länge des kritischen Pfads optimieren.
JavaScript-Verwendung optimieren
JavaScript-Ressourcen blockieren standardmäßig den Parser, es sei denn, sie sind als async gekennzeichnet oder über ein spezielles JavaScript-Snippet hinzugefügt. Der Parser, der JavaScript blockiert, zwingt den Browser dazu, auf das CSSOM zu warten, und unterbricht die DOM-Erstellung, was wiederum die Zeit bis zum ersten Rendern erheblich verzögern kann.
Asynchrone JavaScript-Ressourcen bevorzugen
Bei asynchronen Ressourcen wird die Blockierung des Dokumentparsers aufgehoben, sodass der Browser vor dem Ausführen des Skripts eine Blockierung durch CSSOM vermeiden kann. Wenn das Skript das Attribut async verwenden kann, bedeutet dies oft auch, dass es für das erste Rendering nicht erforderlich ist. Sie können Skripts nach dem ersten Rendering asynchron laden.
Synchrone Serveraufrufe vermeiden
Verwenden Sie die Methode navigator.sendBeacon(), um Daten zu begrenzen, die von XMLHttpRequests in unload-Handlern gesendet werden. Da viele Browser synchrone Anfragen dieser Art erfordern, können sie Seitenübergänge verlangsamen. Der folgende Code zeigt, wie Sie mit navigator.sendBeacon() Daten im pagehide-Handler an den Server senden, nicht im unload-Handler.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
Die neue Methode fetch() bietet eine einfache Möglichkeit, um Daten asynchron anzufordern. Da die Funktion noch nicht überall verfügbar ist, sollten Sie sie vor der Verwendung testen. Diese Methode verarbeitet Antworten mit Promise-Objekten statt mit mehreren Event-Handlern. Im Gegensatz zur Antwort auf eine XMLHttpRequest-Anfrage ist eine Abrufantwort ein Stream-Objekt, das in Chrome 43 beginnt. Das bedeutet, dass beim Aufruf von json() auch ein Promise zurückgegeben wird.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
Die Methode fetch() kann auch POST-Anfragen verarbeiten.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
Parsen von JavaScript später verschieben
Um den Arbeitsaufwand, den der Browser zum Rendern der Seite ausführen muss, zu minimieren, verschieben Sie alle nicht unbedingt erforderlichen Skripts, die für die Erstellung des sichtbaren Inhalts für das erste Rendering nicht entscheidend sind.
Lange laufendes JavaScript vermeiden
Lang andauerndes JavaScript hindert den Browser daran, das DOM und CSSOM zu erstellen und die Seite zu rendern. Daher sollten Sie jede Initialisierungslogik und -funktionalität, die für das erste Rendering nicht unbedingt erforderlich ist, auf später verschieben. Wenn eine lange Initialisierungssequenz ausgeführt werden muss, sollten Sie sie in mehrere Phasen aufteilen, damit der Browser dazwischen andere Ereignisse verarbeiten kann.
CSS-Nutzung optimieren
Zur Erstellung der Rendering-Struktur ist CSS erforderlich. Häufig werden bei der ersten Konstruktion der Seite JavaScript-Blöcke in CSS-Code blockiert. Achten Sie darauf, dass alle nicht wesentlichen CSS-Ressourcen als nicht kritisch gekennzeichnet sind (z. B. Druck- und andere Medienanfragen) und dass die Menge an kritischem CSS-Code und die für die Bereitstellung benötigte Zeit so gering wie möglich ist.
CSS in den Dokumentkopf einfügen
Geben Sie alle CSS-Ressourcen so früh wie möglich im HTML-Dokument an, damit der Browser die <link>-Tags erkennen und die CSS-Anfrage so schnell wie möglich senden kann.
CSS-Importe vermeiden
Die CSS-Importanweisung (@import) ermöglicht es einem Stylesheet, Regeln aus einer anderen Stylesheet-Datei zu importieren. Vermeiden Sie diese Anweisungen jedoch, da sie zusätzliche Roundtrips in den kritischen Pfad einbringen: Die importierten CSS-Ressourcen werden erst erkannt, nachdem das CSS-Stylesheet mit der @import-Regel selbst empfangen und geparst wurde.
CSS-Ressourcen, die das Rendering blockieren, inline einbinden
Für eine optimale Leistung sollten Sie den kritischen CSS-Code direkt in das HTML-Dokument einfügen. Dadurch werden zusätzliche Roundtrips im kritischen Pfad vermieden und bei korrekter Ausführung kann eine kritische Pfadlänge „eines Roundtrip“ geliefert werden, bei der nur der HTML-Code eine blockierende Ressource ist.