Unabhängig davon, ob Sie eine UI-Bibliothek verwenden oder Ihre Stile manuell erstellen, kommt es beim Rendern erheblich zu Verzögerungen, da der Browser CSS-Dateien herunterladen und parsen muss, bevor die Seite angezeigt werden kann.
Diese responsive Eiscremegalerie wurde mit Bootstrap erstellt. UI-Bibliotheken wie Bootstrap beschleunigen die Entwicklung, aber das geht oft zu aufgeblähten und unnötigen CSS, die die Ladezeiten verlangsamen können. Bootstrap 4 ist 187 KB groß, während Semantic UI, eine weitere UI-Bibliothek, mit einer beeindruckenden Größe von 730 KB unkomprimiert ist. Selbst wenn minimiert und mit gzip komprimiert wurde, wiegt Bootstrap immer noch etwa 20 KB und liegt damit weit über dem 14-KB-Grenzwert für den ersten Umlauf.
Kritisch ist ein Tool, mit dem CSS-Code extrahiert, reduziert und above the fold (ohne Scrollen sichtbar) eingefügt wird. So können Inhalte, die ohne Scrollen sichtbar sind, so schnell wie möglich gerendert werden, selbst wenn CSS für andere Teile der Seite noch nicht geladen wurde. In diesem Codelab lernen Sie, wie Sie das npm-Modul von Critical verwenden.
Messen
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
So führen Sie eine Lighthouse-Prüfung auf dieser Website aus:
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Klicken Sie auf Mobil.
- Klicken Sie das Kästchen Leistung an.
- Entfernen Sie die Häkchen aus den restlichen Kästchen im Bereich „Audits“.
- Klicken Sie auf Simuliertes schnelles 3G, 4-fache CPU-Verlangsamung.
- Aktivieren Sie das Kontrollkästchen Speicherinhalt löschen. Wenn diese Option ausgewählt ist, lädt Lighthouse keine Ressourcen aus dem Cache. Dadurch wird simuliert, wie Erstbesucher die Seite erleben würden.
- Klicken Sie auf Audits ausführen.
Wenn Sie auf Ihrem Computer einen Audit durchführen, können die genauen Ergebnisse variieren, aber in der Filmstreifenansicht werden Sie feststellen, dass die App eine Weile einen leeren Bildschirm hat, bevor der Inhalt schließlich gerendert wird. Aus diesem Grund ist First Contentful Paint (FCP) hoch und die Gesamtleistung ist nicht so gut.
Lighthouse hilft Ihnen bei der Behebung von Leistungsproblemen. Entsprechende Lösungen finden Sie im Bereich Empfehlungen. Ressourcen entfernen, die das Rendering blockieren wird als Chance aufgeführt. Hier hat „Kritisch“ die Chance, das zu tun.
Optimieren
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
Um den Vorgang zu beschleunigen, ist Critical bereits installiert und das Codelab enthält eine leere Konfigurationsdatei.
Fügen Sie in der Konfigurationsdatei critical.js einen Verweis auf „Critical“ hinzu und rufen Sie dann die Funktion critical.generate() auf. Diese Funktion akzeptiert ein Objekt, das die Konfiguration enthält.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
Die Fehlerbehandlung ist nicht obligatorisch, bietet aber eine einfache Möglichkeit, den Erfolg eines Vorgangs in der Konsole zu messen.
Kritisch konfigurieren
Die folgende Tabelle enthält einige nützliche wichtige Optionen. Sie können sich alle verfügbaren Optionen auf GitHub ansehen.
| Option | Typ | Erklärung |
|---|---|---|
base |
String | Das Basisverzeichnis für Ihre Dateien. |
src |
String | HTML-Quelldatei. |
dest |
String | Das Ziel für die Ausgabedatei. Bei Inline-CSS-Code ist die Ausgabedatei HTML. Andernfalls wird eine CSS-Datei ausgegeben. |
width, height |
Zahlen | Breite und Höhe des Darstellungsbereichs in Pixeln. |
dimensions |
Array | Enthält Objekte mit den Eigenschaften "width" und "height". Diese Objekte stellen die Darstellungsbereiche dar, für die Sie das Targeting mit „above the fold“-CSS festlegen möchten. Wenn Ihr CSS Medienabfragen enthält, können Sie wichtige CSS generieren, die mehrere Größen des Darstellungsbereichs abdecken. |
inline |
boolean | Wenn dieser Wert auf „true“ gesetzt ist, wird der generierte wichtige CSS-Code in die HTML-Quelldatei eingefügt. |
minify |
boolean | Wenn die Richtlinie auf „true“ gesetzt ist, wird der generierte kritische CSS-Code mit „Kritisch“ gekürzt. Kann beim Extrahieren von kritischem CSS-Code für mehrere Auflösungen weggelassen werden, da „Kritisch“ automatisch reduziert wird, um eine doppelte Aufnahme von Regeln zu vermeiden. |
Unten sehen Sie ein Konfigurationsbeispiel zum Extrahieren von wichtigem CSS-Code für mehrere Auflösungen. Füge es critical.js hinzu oder passe die Optionen an.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
In diesem Beispiel ist index.html sowohl die Quelldatei als auch die Zieldatei, da die Option inline auf „true“ gesetzt ist. Critical liest zuerst die HTML-Quelldatei, extrahiert wichtige CSS-Elemente und überschreibt dann index.html mit kritischem CSS-Code, der in <head> eingebettet ist.
Für das Array dimensions sind zwei Größen für den Darstellungsbereich angegeben: 300 × 500 für besonders kleine Bildschirme und 1.280 × 720 für Standard-Laptopbildschirme.
Die Option minify wird weggelassen, da „Kritisch“ den extrahierten CSS-Code automatisch reduziert, wenn mehrere Größen für den Darstellungsbereich angegeben sind.
Ausführung kritisch
Fügen Sie Ihren Skripts in package.json „Critical“ hinzu:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
Führen Sie in der Console folgenden Befehl aus, um wichtiges CSS zu generieren:
npm run critical
refresh
Im <head>-Tag von index.html wird nun kritischer CSS-Code zwischen <style>-Tags eingefügt, gefolgt von einem Script, das den Rest des CSS-Codes asynchron lädt.
Noch einmal messen
Folgen Sie der Anleitung zu Beginn des Codelabs, um die Lighthouse-Leistungsprüfung noch einmal durchzuführen. Die Ergebnisse, die Sie erhalten, sehen in etwa so aus:
