Critical CSS ist eines dieser Dinge, die ich in meinen Performance-Berichten sehe, aber immer zu ignorieren scheine. Ich weiß, was es bedeutet. Es bedeutet, nur das CSS, das zum Rendern der sofort sichtbaren Elemente benötigt wird, in einem <style>-Tag im <head> zu platzieren, damit es bei der ersten Netzwerkanfrage geladen wird, und dann den Rest asynchron zu laden, was die Ladezeit der Seite beschleunigt.
Sie haben wahrscheinlich auch die Mahnung in den Lighthouse-Performance-Berichten gesehen.
Ich bin kein Typ für große, komplexe Build-Prozesse, und leider beinhaltet viel Tooling für Critical CSS die Einbindung in einen bestehenden Build-Prozess.
Ich habe von Jetpack Boost erfahren, und es ist dazu gedacht, (neben anderen Performance-optimierenden Dingen) Critical CSS für WordPress-Websites einfach zu machen. Ein (kostenloses!) Plugin zu haben, das sich darum kümmert, spricht mich wirklich an.
Jetpack Boost ist im WordPress Plugin Directory kostenlos verfügbar, so dass es wie jedes andere Plugin installiert wird.
Durch die Aktivierung des Plugins wird ein Punkt "Jetpack Boost" zum WordPress-Admin-Menü hinzugefügt, und das führt zu einem praktischen Bildschirm, der ähnlich wie Lighthouse funktioniert, aber in WordPress. Und wie Sie sehen können, gibt es dort eine Option, Critical CSS zu generieren. Alles, was ich tun musste, war, die Funktion zu aktivieren, und Jetpack Boost begann zu arbeiten.
Der Prozess dauert nicht lange. Ich wechselte zu meinem E-Mail-Programm für eine Minute, und als ich zurückkam, war er bereits abgeschlossen. Und, hey, schauen Sie mal, was es für mich getan hat, während ich gefaulenzt habe.
Nicht schlecht für das Klicken auf eine Schaltfläche! Aber wir müssen Äpfel mit Äpfeln vergleichen, oder? Gehen wir zurück zu Lighthouse, um zu sehen, was es sagt.
Wir können sogar den Quellcode einsehen, um zu sehen, dass der Beweis tatsächlich im Pudding liegt.
Es ist wirklich cool zu sehen, wie sich das Jetpack-Team so auf Performance konzentriert, und zwar so sehr, dass sie ein ganzes Plugin dafür entwickelt haben. Performance war schon immer Teil der Jetpack-Einstellungen. Aber indem sie sie hier in den Vordergrund stellen, kann Jetpack mehr interessante Dinge mit Performance machen, wie z. B. Benotung und Critical CSS, auf eine Weise, die über grundlegende Einstellungen hinausgeht. Ich stelle mir vor, dass wir irgendwann mehr von Jetpacks Performance-Einstellungen in das neue Plugin verschieben werden.
Ein großes Lob an das Jetpack-Team! Das ist eine wirklich schöne Verbesserung und sicherlich zeitgemäß, angesichts von Googles jüngstem Vorstoß bei den Core Web Vitals und wie sie sich auf SEO auswirken werden.