Veröffentlicht: 17. August 2018
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-Ressourcen 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 werden standardmäßig vom Parser blockiert, es sei denn, sie sind als async gekennzeichnet oder werden mit einem speziellen 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
Asynchrone Ressourcen heben die Blockierung des Dokumentparsers auf und ermöglichen es dem Browser, das Blockieren des CSSOM vor der Ausführung des Scripts zu vermeiden. 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 die von XMLHttpRequests in unload-Handlern gesendeten Daten einzuschränken. Da solche Anfragen für viele Browser
synchron sind, können sie Seitenübergänge verlangsamen, was sich manchmal merklich bemerkbar macht. Im folgenden Code wird gezeigt, wie mit navigator.sendBeacon() Daten im pagehide-Handler anstelle im unload-Handler an den Server gesendet werden.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
Die Methode fetch() bietet eine bessere Möglichkeit, Daten asynchron anzufordern. fetch() verarbeitet Antworten mithilfe von Promise-Objekten anstelle mehrerer Event-Handler. Im Gegensatz zur Antwort auf eine XMLHttpRequest-Anfrage ist die fetch()-Antwort ein Streamobjekt. 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>
JavaScript-Parsing verschieben
Um die Arbeit zu minimieren, die der Browser für das Rendern der Seite ausführen muss, verschieben Sie alle nicht erforderlichen Scripts, die nicht für die Erstellung der sichtbaren Inhalte für das erste Rendern erforderlich sind.
Lange laufende JavaScript-Abläufe vermeiden
Langlaufendes JavaScript verhindert, dass der Browser das DOM, das CSSOM und die Seite rendert. Daher sollten Sie alle Initialisierungslogik, die nicht für das erste Rendern 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
CSS ist erforderlich, um den Renderbaum zu erstellen, und JavaScript blockiert beim ersten Erstellen der Seite häufig auf CSS. Achten Sie darauf, dass alle nicht wesentlichen CSS-Codes als nicht kritisch gekennzeichnet sind (z. B. Druck- und andere Medienanfragen) und dass die Menge an kritischen CSS und die für deren 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 Anfrage für das CSS so schnell wie möglich senden kann.
Vermeiden Sie CSS-Importe.
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 Umwege auf dem kritischen Pfad verursachen: Die importierten CSS-Ressourcen werden erst erkannt, nachdem das CSS-Stylesheet mit der @import-Regel selbst empfangen und analysiert 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 Umläufe im kritischen Pfad vermieden und bei korrekter Ausführung kann ein einmaliger Umlauf erzielt werden. Länge des kritischen Pfads, bei dem nur der HTML-Code eine blockierende Ressource ist.