Unabhängig davon, ob Sie eine UI-Bibliothek verwenden oder Ihre Stile manuell erstellen, verzögert sich der Versand erheblich, da der Browser CSS-Dateien herunterladen und parsen muss, bevor er die Seite anzeigen kann.
Diese responsive Eiscreme-Galerie wurde mit Bootstrap erstellt. UI-Bibliotheken wie Bootstrap beschleunigen die Entwicklung, gehen jedoch häufig auf Kosten von aufgeblähtem und unnötigem CSS-Code, der Ihre Ladezeiten verlangsamen kann. Bootstrap 4 ist 187 KB groß, während Semantic UI, eine weitere UI-Bibliothek, unglaubliche 730 KB in unkomprimiertem Zustand hat. Selbst wenn die Daten reduziert und mit gzip komprimiert wurden, wiegt Bootstrap immer noch etwa 20 KB und liegt damit deutlich über dem Grenzwert von 14 KB für den ersten Roundtrip.
Kritisch ist ein Tool, mit dem CSS (ohne Scrollen sichtbar) extrahiert, minimiert und inline above the fold (ohne Scrollen sichtbar) eingefügt werden kann. Dadurch können „above the fold“-Inhalte so schnell wie möglich gerendert werden, selbst wenn CSS für andere Teile der Seite noch nicht geladen wurden. In diesem Codelab lernen Sie, wie Sie das npm-Modul von Critical verwenden.
Messen
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus.
So führen Sie eine Lighthouse-Prüfung auf dieser Website durch:
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem 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 im Bereich Audits die Häkchen aus allen anderen Kästchen.
- Klicken Sie auf Simulated Fast 3G, 4x CPU Slowdown.
- Klicken Sie das Kästchen Speicherinhalt löschen an. Wenn diese Option ausgewählt ist, lädt Lighthouse keine Ressourcen aus dem Cache. Dadurch wird simuliert, wie neue Besucher die Seite erleben würden.
- Klicken Sie auf Audits ausführen.
Wenn Sie eine Prüfung auf Ihrem Computer durchführen, können die genauen Ergebnisse variieren. In der Filmstreifenansicht werden Sie jedoch feststellen, dass der Bildschirm der App eine Weile leer ist, bevor der Inhalt schließlich gerendert wird. Aus diesem Grund ist First Contentful Paint (FCP) hoch und die Gesamtleistung nicht gut.
Lighthouse hilft Ihnen dabei, Leistungsprobleme zu beheben. Suchen Sie daher im Bereich Empfehlungen nach Lösungen. Das Entfernen von Ressourcen, die das Rendering blockieren, wurde als Empfehlung aufgeführt – und genau hier liegt der entscheidende Faktor vor.
Optimieren
- Klicke auf Zu bearbeitende Remixe, 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 „Kritisch“ 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 messen.
Kritisch konfigurieren
Die folgende Tabelle enthält einige nützliche Optionen für „Kritisch“. 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. Wenn CSS enthalten ist, handelt es sich bei der Ausgabedatei um HTML. Andernfalls wird eine CSS-Datei ausgegeben. |
width, height |
Zahlen | Die Breite und Höhe des Darstellungsbereichs in Pixeln. |
dimensions |
array | Enthält Objekte mit den Eigenschaften für Breite und Höhe. Diese Objekte stellen die Darstellungsbereiche dar, auf die Sie Ihre Anzeigen mit „above the fold“-CSS ausrichten möchten. Wenn Ihr CSS Medienabfragen enthält, können Sie wichtigen CSS-Code generieren, der mehrere Größen des Darstellungsbereichs abdeckt. |
inline |
boolean | Wenn die Richtlinie auf „true“ gesetzt ist, wird der generierte, wichtige CSS-Code in die HTML-Quelldatei eingefügt. |
minify |
boolean | Wenn „Kritisch“ auf „true“ gesetzt ist, wird der generierte kritische CSS-Code reduziert. Kann beim Extrahieren von wichtigem CSS-Code für mehrere Auflösungen weggelassen werden, da „Kritisch“ ihn automatisch reduziert, um doppelte Regeln zu vermeiden. |
Im Folgenden finden Sie ein Konfigurationsbeispiel zum Extrahieren von wichtigen CSS für mehrere Auflösungen. Füge ihn critical.js hinzu oder spiele ein bisschen herum und ändere die 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. „Kritisch“ liest zuerst die HTML-Quelldatei, extrahiert wichtige CSS und überschreibt index.html mit kritischem CSS-Code, der im <head> enthalten ist.
Im Array dimensions sind zwei Größen für den Darstellungsbereich angegeben: 300 × 500 für sehr kleine Bildschirme und 1280 × 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 den Skripts in package.json Kritisch hinzu:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
Führen Sie in der Console folgenden Befehl aus, um wichtigen CSS-Code zu generieren:
npm run critical
refresh
Im <head>-Tag von index.html wird der generierte kritische CSS-Code zwischen den <style>-Tags eingefügt, gefolgt von einem Skript, das den Rest des CSS-Codes asynchron lädt.
Noch einmal messen
Folgen Sie den Schritten vom Anfang des Codelab, um die Lighthouse-Leistungsprüfung noch einmal auszuführen. Die Ergebnisse sehen in etwa so aus:
