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 Eiscreme-Galerie 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 Bootstrap minimiert und gezippt wird, hat es immer noch ein Gewicht von etwa 20 KB, was weit über dem Grenzwert von 14 KB für den ersten Roundtrip liegt.
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 erfahren 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-Analyse für diese Website durch:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Klicken Sie auf Mobilgeräte.
- 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.
- Klicken Sie das Kästchen Speicherplatz freigeben an. Wenn diese Option ausgewählt ist, lädt Lighthouse keine Ressourcen aus dem Cache. So wird simuliert, wie die Seite für Erstbesucher erscheint.
- Klicken Sie auf Analysen 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 Verbesserungsmöglichkeit aufgeführt. Hier punktet Critical.
Optimieren
- Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
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, aber eine einfache Möglichkeit, den Erfolg des Vorgangs in der Konsole zu beurteilen.
Kritisch konfigurieren
In der folgenden Tabelle finden Sie einige nützliche Optionen für kritische Fehler. Alle verfügbaren Optionen findest du auf GitHub.
| Option | Typ | Erklärung |
|---|---|---|
base |
String | Das Basisverzeichnis für Ihre Dateien. |
src |
String | HTML-Quelldatei |
dest |
String | Das Ziel für die Ausgabedatei. Wenn CSS eingefügt ist, ist die Ausgabedatei HTML. Andernfalls ist die Ausgabe eine CSS-Datei. |
width, height |
Zahlen | Breite und Höhe des Darstellungsbereichs in Pixeln. |
dimensions |
Array | Enthält Objekte mit den Eigenschaften „Breite“ und „Höhe“. Diese Objekte stellen die Darstellungsbereiche dar, für die Sie das Targeting mit „above the fold“-CSS festlegen möchten. Wenn Sie Medienabfragen in Ihrem CSS haben, können Sie kritisches CSS generieren, das mehrere Darstellungsbereiche abdeckt. |
inline |
boolean | Wenn dieser Parameter 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 komprimiert 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ügen Sie sie critical.js hinzu oder spielen Sie mit den Optionen.
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 dimensions-Array sind zwei Darstellungsbereiche angegeben: 300 × 500 für extra kleine Bildschirme und 1.280 × 720 für Standard-Laptop-Bildschirme.
Die Option minify wird weggelassen, da „kritisch“ das extrahierte CSS automatisch minimiert, wenn mehrere Darstellungsbereiche 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 Konsole Folgendes aus, um kritisches 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
Führen Sie die Schritte am Anfang des Codelabs aus, um die Lighthouse-Leistungsanalyse noch einmal auszuführen. Die Ergebnisse, die Sie erhalten, sehen in etwa so aus:
