Veröffentlicht: 17. August 2018
In diesem Leitfaden werden die PageSpeed Insights-Regeln im Kontext betrachtet: Worauf Sie bei der Optimierung des kritischen Rendering-Pfads achten sollten und warum.
JavaScript- und CSS-Ressourcen entfernen, die das Rendering blockieren
Um die kürzeste Zeit bis zum ersten Rendern zu erreichen, sollten Sie die Anzahl der kritischen Ressourcen auf der Seite minimieren und nach Möglichkeit eliminieren, die Anzahl der heruntergeladenen kritischen Bytes minimieren und die Länge des kritischen Pfads optimieren.
JavaScript-Nutzung 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. Wenn JavaScript vom Parser blockiert wird, muss der Browser auf das CSSOM warten und die Erstellung des DOM wird pausiert. Das kann wiederum die Zeit bis zum ersten Rendern erheblich verzögern.
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 Script das async-Attribut verwenden kann, ist es oft nicht für das erste Rendern erforderlich. Sie können Skripts nach dem ersten Rendern asynchron laden.
Synchrone Serveraufrufe vermeiden
Verwenden Sie die Methode navigator.sendBeacon(), um die von XMLHttpRequests in unload-Handlern gesendeten Daten einzuschränken. Da viele Browser solche Anfragen synchron ausführen müssen, können Seitenübergänge manchmal merklich verlangsamt werden. 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 mit Promises anstelle mehrerer Ereignishandler. Im Gegensatz zur Antwort auf eine XMLHttpRequest ist eine fetch()-Antwort ein Streamobjekt. Das bedeutet, dass ein Aufruf von json() ebenfalls ein Versprechen 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>
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 für das erste Rendern 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 zwischendurch 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 nicht erforderliches CSS als nicht kritisch gekennzeichnet ist (z. B. Druck- und andere Medienabfragen) und dass die Menge an kritischem CSS und die Zeit für die Bereitstellung 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 Anfrage für das CSS so schnell wie möglich senden kann.
Vermeiden Sie CSS-Importe.
Mit der CSS-Import-Direktive (@import) können Regeln aus einer anderen Stylesheet-Datei in ein Stylesheet importiert werden. 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 das kritische CSS direkt in das HTML-Dokument einfügen. Dadurch werden zusätzliche Umwege im kritischen Pfad vermieden. Bei richtiger Ausführung kann eine kritische Pfadlänge von „einem Umweg“ erreicht werden, bei der nur die HTML-Datei eine blockierende Ressource ist.