In diesem Leitfaden werden die PageSpeed Insights-Regeln im Kontext untersucht: worauf Sie bei der Optimierung des kritischen Rendering-Pfads achten sollten und warum.
JavaScript und CSS entfernen, die das Rendering blockieren
Damit das erste Rendering möglichst schnell dauert, sollten Sie die Anzahl der kritischen Ressourcen auf der Seite minimieren und (falls möglich) eliminieren, die Anzahl der heruntergeladenen kritischen Byte minimieren und die Länge des kritischen Pfads optimieren.
JavaScript-Nutzung optimieren
JavaScript-Ressourcen blockieren standardmäßig den Parser, wenn sie nicht als async gekennzeichnet sind oder über ein spezielles JavaScript-Snippet hinzugefügt werden. Der Parser, der JavaScript blockiert, zwingt den Browser, auf das CSSOM zu warten, und pausiert die DOM-Erstellung, was wiederum die Zeit bis zum ersten Rendering erheblich verzögern kann.
Asynchrone JavaScript-Ressourcen bevorzugen
Asynchrone Ressourcen heben die Blockierung des Dokumentparsers auf und ermöglichen dem Browser, eine Blockierung durch CSSOM vor der Skriptausführung zu vermeiden. Wenn das Skript das Attribut async verwenden kann, bedeutet dies oft auch, dass es für das erste Rendering nicht erforderlich ist. Es empfiehlt sich, Skripts nach dem ersten Rendering asynchron zu laden.
Synchrone Serveraufrufe vermeiden
Verwenden Sie die Methode navigator.sendBeacon(), um Daten einzuschränken, die über XMLHttpRequests in unload-Handlern gesendet werden. Da viele Browser erfordern, dass solche Anfragen synchron erfolgen, können sie Seitenübergänge verlangsamen, was manchmal deutlich sichtbar ist. Der folgende Code zeigt, wie Sie mit navigator.sendBeacon() Daten im pagehide-Handler und nicht im unload-Handler an den Server senden.
<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, Daten asynchron anzufordern. Da sie noch nicht überall verfügbar ist, sollten Sie vor der Verwendung die Funktionserkennung verwenden, um zu prüfen, ob sie vorhanden ist. Diese Methode verarbeitet Antworten mit Promises anstelle mehrerer Event-Handler. Im Gegensatz zur Antwort auf einen XMLHttpRequest handelt es sich bei einer Abrufantwort ab Chrome 43 um ein Streamobjekt. Das bedeutet, dass ein Aufruf von json() auch ein Promise-Objekt zurückgibt.
<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 auf später verschieben
Um den Arbeitsaufwand, den der Browser beim Rendern der Seite ausführen muss, möglichst gering zu halten, schiebe alle nicht unbedingt erforderlichen Skripts zurück, die für die Erstellung des sichtbaren Inhalts für das erste Rendering nicht entscheidend sind.
JavaScript mit langer Ausführungszeit vermeiden
Lang andauerndes JavaScript hindert den Browser daran, das DOM und CSSOM zu erstellen und die Seite zu rendern. Daher sollten Sie alle Initialisierungslogik und -funktionen, die für das erste Rendering nicht unbedingt erforderlich sind, auf später verschieben. Wenn eine lange Initialisierungssequenz ausgeführt werden muss, sollten Sie diese in mehrere Phasen aufteilen, damit der Browser andere Ereignisse dazwischen verarbeiten kann.
CSS-Verwendung optimieren
CSS ist erforderlich, um die Rendering-Baumstruktur zu erstellen, und JavaScript blockiert CSS häufig bei der ersten Konstruktion der Seite. Achten Sie darauf, dass alle nicht wesentlichen CSS-Elemente als nicht kritisch gekennzeichnet sind (z. B. Druck- und andere Medienabfragen) und dass die Menge an kritischem CSS-Code und die Bereitstellungszeit so gering wie möglich sind.
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. Sie sollten diese Anweisungen jedoch vermeiden, da sie zusätzliche Roundtrips in den kritischen Pfad einfügen: 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
Um eine optimale Leistung zu erzielen, sollten Sie den wichtigen CSS-Code direkt in das HTML-Dokument einfügen. Dadurch werden zusätzliche Roundtrips im kritischen Pfad eliminiert und bei richtiger Anwendung kann ein kritischer Pfad von einem Roundtrip geliefert werden, bei dem nur der HTML-Code eine blockierende Ressource ist.