Extrahieren Sie kritische CSS-Code und fügen Sie sie inline ein.

Milica Mihajlija

Unabhängig davon, ob Sie eine UI-Bibliothek verwenden oder Ihre Stile manuell erstellen, verzögert das Senden einer großen Menge an CSS das Rendern, 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 Lasten von überladenem und unnötigem CSS, was die Ladezeiten verlängern kann. Bootstrap 4 hat eine Größe von 187 KB, während Semantic UI, eine weitere UI-Bibliothek, komprimiert 730 KB groß 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.

Critical ist ein Tool, mit dem ohne Scrollen sichtbare CSS-Dateien extrahiert, minimiert und inline eingefügt werden. So können Inhalte „above the fold“ (ohne Scrollen sichtbar) so schnell wie möglich gerendert werden, auch wenn das 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, drücken Sie App ansehen und dann Vollbild .

So führen Sie eine Lighthouse-Analyse für diese Website durch:

1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Lighthouse.
3. Klicken Sie auf Mobilgeräte.
4. Klicken Sie das Kästchen Leistung an.
5. Entfernen Sie die Häkchen aus den restlichen Kästchen im Bereich „Audits“.
6. Klicken Sie auf Simuliertes schnelles 3G, 4-fache CPU-Verlangsamung.
7. 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.
8. Klicken Sie auf Audits ausführen.

Wenn Sie eine Analyse auf Ihrem Computer ausführen, können die genauen Ergebnisse variieren. In der Filmstreifenansicht sehen Sie jedoch, dass in der App ziemlich lange ein leerer Bildschirm angezeigt wird, bevor die Inhalte endlich gerendert werden. Daher ist der Wert für „First Contentful Paint“ (FCP) hoch und die Gesamtleistung nicht sehr 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.

Zur Beschleunigung ist bereits Critical installiert und das Codelab mit einer leeren Konfigurationsdatei enthalten.

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 mit der Konfiguration.

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 der Operation 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.

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 kritisches CSS und überschreibt dann index.html mit kritischem CSS, das 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.

Kritisch ausführen

Fügen Sie Ihren Scripts in package.json den Parameter „kritisch“ hinzu:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}

1. 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 sehen dann in etwa so aus: