penthouse
2.3.3
CSS-Generator für kritische Pfade
Penthouse ist der ursprüngliche CSS-Generator für kritische Pfade, der Ihnen hilft, das Rendern von Seiten für Ihre Websites zu beschleunigen. Geben Sie das vollständige CSS Ihrer Website und die Seite an, für die Sie das kritische CSS erstellen möchten, und Penthouse gibt das kritische CSS zurück, das für die perfekte Darstellung des „Above the Fold“-Inhalts der Seite erforderlich ist. Lesen Sie hier mehr über Critical Path CSS.
Der Prozess erfolgt automatisch und das generierte CSS ist unverändert produktionsbereit. Hinter den Kulissen nutzt Penthouse Puppeteer, um das kritische CSS über chromium:headless zu generieren.
(Wenn Sie keinen Code schreiben möchten, können Sie die online gehostete Version verwenden.)
yarn add --dev penthouse
(oder npm install , wenn kein Garn verwendet wird)
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse ist für die parallele Ausführung vieler Jobs optimiert. Eine gemeinsam genutzte Browser-Instanz wird wiederverwendet und jeder Job wird in einer eigenen Browser-Registerkarte ausgeführt. Es gibt nur eine begrenzte Anzahl von Jobs, die Sie parallel ausführen können, bevor Ihrem Computer die Ressourcen ausgehen. Um viele Jobs effektiv auszuführen, sehen Sie sich das Beispiel mit vielen URLs an.
Es sind nur url und cssString erforderlich – alle anderen Optionen sind optional. Beachten Sie, dass von der über die url gefundenen HTML-Datei ein Stil erwartet wird. penthouse fügt keine Stile ein, sondern verwendet lediglich cssString (oder css ), um in kritisches CSS zu schneiden.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| URL | string | Zugängliche URL. Verwenden Sie das Protokoll file:/// für lokale HTML-Dateien. | |
| cssString | string | Original-CSS zum Extrahieren kritischer CSS | |
| CSS | string | Pfad zur ursprünglichen CSS-Datei auf der Festplatte (bei Verwendung anstelle von cssString ) | |
| Breite | integer | 1300 | Breite für kritisches Ansichtsfenster |
| Höhe | integer | 900 | Höhe für kritisches Ansichtsfenster |
| Screenshots | object | Konfiguration für Screenshots (wird standardmäßig nicht verwendet). Siehe Screenshot-Beispiel | |
| keepLargerMediaQueries | boolean | false | Behalten Sie Medienabfragen auch für Breiten-/Höhenwerte bei, die größer als das kritische Ansichtsfenster sind. |
| forceInclude | array | [] | Array von CSS-Selektoren, die im kritischen CSS beibehalten werden sollen, auch wenn sie nicht im kritischen Ansichtsfenster angezeigt werden. Strings oder Regex (z. B. ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| forceExclude | array | [] | Array von CSS-Selektoren, die in kritischem CSS entfernt werden sollen, auch wenn sie im kritischen Ansichtsfenster angezeigt werden. Strings oder Regex (z. B. ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| PropertiesToRemove | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | CSS-Eigenschaften zum Herausfiltern aus kritischem CSS |
| Time-out | integer | 30000 | MS; Brechen Sie die kritische CSS-Generierung nach dieser Zeit ab |
| Puppenspieler | object | Einstellungen für Puppenspieler. Siehe Beispiel für einen benutzerdefinierten Puppenspieler-Browser | |
| pageLoadSkipTimeout | integer | 0 | MS; Hören Sie nach dieser Zeit auf, auf das Laden der Seite zu warten (für Websites, bei denen das Seitenladeereignis unzuverlässig ist). |
| renderWaitTime | integer | 100 | MS; Wartezeit nach dem Laden der Seite, bevor die kritische CSS-Extraktion beginnt (auch bevor ein „bevor“ Screenshot erstellt wird, falls verwendet) |
| blockJSRequests | boolean | true | auf „false“ setzen, um JS zu laden (nicht empfohlen) |
| maxEmbeddedBase64Length | integer | 1000 | Charaktere; Entfernen Sie Inline-Base64-codierte Ressourcen, die größer sind |
| maxElementsToCheckPerSelector | integer | undefined | Kann angegeben werden, um die Anzahl der zu prüfenden Elemente pro CSS-Selektor zu begrenzen und so die Ausführungszeit zu verkürzen. |
| userAgent | string | 'Penthouse Critical Path CSS Generator' | Geben Sie beim Laden der Seite an, welche Benutzeragentenzeichenfolge verwendet werden soll |
| benutzerdefiniertePageHeaders | object | Legen Sie zusätzliche HTTP-Header fest, die mit der URL-Anfrage gesendet werden sollen. | |
| Kekse | array | [] | Informationen zur Formatierung jedes Cookies finden Sie in der Puppeteer-SetCookie-Dokumentation |
| strikt | boolean | false | Lassen Sie Penthouse Fehler beim Parsen des ursprünglichen CSS auslösen. Legacy-Option, nicht empfohlen. |
| erlaubter Antwortcode | number|regex|function | Lassen Sie Penthouse stoppen, wenn der Server-Antwortcode nicht mit diesem Wert übereinstimmt. number und regex -Typen werden anhand von „response.status()“ getestet. Eine function ist ebenfalls zulässig und erhält Response als Argument. Die Funktion sollte einen boolean zurückgeben. |
Die Protokollierung erfolgt über das debug Modul unter dem penthouse -Namespace. Weitere Informationen zur Protokollierung finden Sie in der Dokumentation.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsInstallieren Sie fehlende Abhängigkeiten, um das kopflose Chrome zum Laufen zu bringen:
sudo apt-get install libnss3
Abhängig von Ihrem Dist benötigen Sie möglicherweise eine noch längere Liste von Deps, siehe diese Antwort
Ein guter erster Schritt kann darin bestehen, Ihre URL + CSS im gehosteten CSS-Generator für kritische Pfade zu testen, um festzustellen, ob das Problem an der von Ihnen übergebenen Eingabe (CSS + URL) oder an Ihrem lokalen Setup liegt: https://jonassebastianohlsson.com /criticalpathcssgenerator
Wenn nach der Anwendung Ihres kritischen CSS aufblitzende, nicht formatierte Inhalte angezeigt werden, stimmt etwas nicht. Nachfolgend sind die häufigsten Ursachen und einige allgemeine Ratschläge aufgeführt:
Im Allgemeinen müssen Sie sicherstellen, dass alle Elemente, die Sie im kritischen CSS formatieren möchten, im HTML Ihrer Seite (mit deaktiviertem Javascript) erscheinen (sichtbar). Das erste Rendern Ihrer Seite, das entscheidende CSS, das viel schneller macht, erfolgt vor dem Laden von JS, weshalb Penthouse mit deaktiviertem JavaScript ausgeführt wird. Wenn Ihr HTML-Code also im Wesentlichen leer ist oder Ihr tatsächlicher Inhalt vor einem Lade-Spinner oder Ähnlichem verborgen ist, müssen Sie dies beheben, bevor Sie die Leistungsvorteile der Verwendung von kritischem CSS nutzen können.
Wenn Ihr HTML in Ordnung ist, aber je nach angemeldetem Benutzer, Werbung von Drittanbietern usw. variiert, können Sie den Parameter forceInclude verwenden, um zu erzwingen, dass bestimmte zusätzliche Stile im kritischen CSS verbleiben, auch wenn Penthouse sie nicht sieht auf der Seite während der kritischen CSS-Generierung.
Dieses Problem kann auftreten, wenn ein Element früh im DOM angezeigt wird, aber Stile angewendet wurden, um sich außerhalb des kritischen Ansichtsfensters zu bewegen (mithilfe der absoluten Position oder Transformationen). Penthouse berücksichtigt nicht die absolute Position und die Transformationswerte und erkennt das Element lediglich als nicht Teil des kritischen Ansichtsfensters. Daher betrachtet Penthouse seine Stile nicht als kritisch (das nicht gestylte Element wird also angezeigt, wenn das kritische CSS verwendet wird). Lösung: Überlegen Sie, ob es wirklich so früh im DOM erscheinen soll, oder verwenden Sie die Eigenschaft forceInclude , um sicherzustellen, dass die Stile zum „Ausblenden“/Verschieben im kritischen CSS verbleiben.
Probleme mit Sonderzeichen wie → nach der Konvertierung? Stellen Sie sicher, dass Sie in Ihrem CSS das richtige Hexadezimalformat verwenden. Sie können dieses Format jederzeit über Ihre Browserkonsole abrufen, indem Sie „→“ .charCodeAt(0).toString(16) eingeben (die Antwort für dieses Pfeilsymbol lautet 2192 ). Wenn Sie das Hexadezimalformat in CSS verwenden, muss ihm ein Backslash vorangestellt werden, etwa so: 2192 (z. B. content: '2192'; )
