Vergleich des Critical Path CSS-Generators mit Penthouse und WP Rocket| Kritischer Pfad CSS-Generator | Penthouse | WP Rocket |
|---|
| Form und Verwendung: Dies ist ein Online-Generator von Core Web Vitals. Sie geben eine URL ein, legen die Bildschirmgrößen für Mobilgeräte und Desktop-Computer fest und erhalten anschließend wichtige CSS-Codes, die Sie in ein Style-Tag im Head-Bereich direkt unter dem Titel einfügen. Zusätzlich bietet der Generator drei Methoden, um die ursprünglichen Stylesheets zu überspringen. | Form und Verwendung: Penthouse ist eine Node-Bibliothek, die als erster Generator für kritischen CSS-Pfad gilt. Sie wird mit einer URL und einem CSS-String oder einer CSS-Datei aufgerufen und gibt das kritische CSS zurück. Zu den Optionen gehören die Breite und Höhe des Viewports (Standard: 1300 x 900 Pixel), das Erzwingen von Ein- und Ausschließen von CSS-Code sowie ein Timeout. | Form und Verwendung: Dies ist ein kostenpflichtiges WordPress-Caching-Plugin. Die Option „Unbenutztes CSS entfernen“ ist unter „Dateioptimierung“ > „CSS-Auslieferung optimieren“ aktiviert, und das Plugin fügt das generierte CSS selbst ein. |
| So wird das CSS erzeugt: Das Tool lädt die Seite in einem Chrome-basierten Browser auf einer benutzerdefinierten Node-Plattform, überprüft mehrere Viewports, findet die Stylesheet-Teile, die den sichtbaren Bereich rendern, und bereinigt und minimiert diese anschließend. | So wird das CSS erzeugt: Es steuert Headless Chromium über Puppeteer, und mehrere Jobs können sich eine Browserinstanz teilen. | So wird das CSS erzeugt: WP Rocket sendet die Seiten-URL an eine externe API, die die Seite aufruft und das benötigte CSS generiert. Das Ergebnis wird als Gzip-Datei gespeichert und nach dem Title-Tag in ein Style-Element mit der ID „wpr-usedcss“ eingefügt. Es wird alle 30 Tage neu generiert. |
| Automatisierung und Instandhaltung: Die Ausgabe wird manuell eingefügt. Das Tool befindet sich in der Beta-Phase, und die Seite empfiehlt, es nach 5 Minuten erneut zu versuchen, falls es fehlschlägt. | Automatisierung und Instandhaltung: Sie schreiben das Skript selbst, zum Beispiel in einem Build-Schritt, und schreiben das Ergebnis in eine Datei. | Automatisierung und Instandhaltung: Die Generierung beginnt, sobald eine nicht zwischengespeicherte Seite aufgerufen wird. Fehlgeschlagene Zugriffe werden bis zu 5 Mal mit zunehmenden Wartezeiten wiederholt. |
| Anforderungen: Node.js mit npm oder yarn und Headless Chrome über Puppeteer. Unter Linux müssen möglicherweise einige Systembibliotheken wie libnss3 installiert werden. | Anforderungen: Eine öffentlich zugängliche Website, ein funktionierender WP-Cron-Job und ein Server oder eine Firewall, die Bot-User-Agents des Plugins zulässt, sind erforderlich. Das Plugin funktioniert nicht hinter einer .htaccess-Authentifizierung, und der Cloudflare Bot Fight Mode muss deaktiviert sein. |
| Lizenz und Kosten: Auf der Seite wird es als kostenloses Online-Tool bezeichnet und es werden keine Nutzungsbeschränkungen angegeben. | Lizenz und Kosten: Der Code steht unter der MIT-Lizenz. | Lizenz und Kosten: Die kostenpflichtigen Abonnements gelten für ein Jahr und richten sich nach der Anzahl der Websites (1, 3 oder 50). Die 14-tägige Testphase wird nach deren Ablauf automatisch abgerechnet, sofern sie nicht gekündigt wird. |
