Effizientes CSS für WordPress Websites in 2021 – WordPress Optimierung Teil 2

Node² > Blog > WordPress > WordPress Optimierung > Effizientes CSS für WordPress Websites in 2021 – WordPress Optimierung Teil 2

Die Optimierung von CSS („Cascading Style Sheets“) ist ein relevanter Teil der Ladezeitoptimierung Ihrer Website, obwohl der Einfluss von CSS im Vergleich zu anderen Faktoren eher gering ist. Laut Google PageSpeed Insights sollte aber jeder einzelne Aspekt optimiert werden, um ein zufriedenstellendes Ergebnis zu erzielen. Wir haben daher die einzelnen Schritte aufgeführt, wie Sie CSS selbstständig auf Ihrer Website optimieren.

1. CSS-Selector Effizienz herausfinden

Generell gilt, das CSS für ein Maximum an Effizienz umzuschreiben ist reine Zeitverschwendung. Sie sind besser beraten, wenn Sie die Optimierung bei neu hinzugefügtem CSS beachten und das vorhandene nicht komplett neu ausrichten. Die Auswirkungen betreffen ohnehin eher die Performance im Web-Browser und UX („User Experience“) als die Ladezeiten.

1.1 Effizientes CSS schreiben

CSS wird vom Browser von rechts nach links entschlüsselt. Auf nicht notwendige Links oder Selektoren sollte daher verzichtet werden. Die Länge der Abfragen sollte bezüglich ihrer Elemente ebenso auf die Mindestlänge minimiert werden. Außerdem sollte die Abfrage so früh wie möglich qualifiziert werden, indem ein passender Key Selector eingefügt wird.


Dementsprechend ist

.btn{}
#btn{}
div #btn{}

effizienter als

a.btn{}
a#btn{}
#btn div

auch wenn ein zusätzlicher Anchor Tag hilfreich für das weitere Verständnis sein kann.

Die #btn Abfrage kann bei der Interpretation festlegen, dass es sich um eine ID handelt, wodurch der Stil sofort festgelegt werden kann.

In unserem Beispiel ist das #btn Element über div #btn{} ein key selector. Das ist der erste Teil der Abfrage, nach der gefragt wird und die anschließend „that is searched for and subsequently matched“.

Überlegen Sie sorgfältig, wie Sie CSS formulieren. Kann es cascadiert werden? Sollte es? Es sollte immer mit gängigen Komponenten generalisiert werden. So kann beispielsweise die Schriftgröße in der Navigation verankert werden.

Falsch

#nav li a{font-size:18px;}

Richtig

#nav{font-size:18px;}

2. CSS Optimierung durch Plugins

Genau wie im letzten Blogartikel über Bildoptimierung, setzen wir auf Autoptimize um die folgenden Schritte automatisch auszuführen.

2.1 CSS minimieren

Beim Minimieren entfernen wir alle nicht notwendigen Zeichen unseres CSS Codes. Dadurch wird eine niederige Dateilgröße erreicht, die der Browser schneller downloaden kann. Hier ein Beispiel vor und nach der Anwendung von CSS Minifier.

#mydiv {
 color: #FFFFFF;
 font-size: 18px;
 background-color: #000000;
}

Ursprünglich war das CSS 73 bytes groß

#mydiv{color:#fff;font-size:18px;background-color:#000}

Minimiert werden daraus 55 bytes

Auch wenn das zunächst ein geringer Unterschied ist – im Laufe einer ganzen CSS Datei kann daraus eine ganze Menge eingesparter KB werden.

Für eine bessere Performance lohnt es sich, das minimierte CSS auf der Live-Website zu veröffentlichen.

2.2 Critical CSS erzeugen

Wir können den Overhead unseres CSS reduzieren, indem wir sogenanntes Critical CSS schreiben. Dazu eignen sich vor allem die Elemente „Above the Fold“, deren CSS wir in HTML einbinden. Unser Non-Critical CSS wird anschließend in den Lazy Loading Modus versetzt, sodass es zu einem späteren Zeitpunkt geladen wird und der Browser den sichtbaren Teil der Website schneller laden kann.

Above the fold erklärung
Above the Fold („Über der Faltung“) ist der Bereich, der zu Beginn auf dem Bildschirm sichtbar ist. Alles außerhalb bezeichnet man als Below the Fold („Unterhalb der Faltung“)

Wir können einen Critical CSS Generator benutzen, put in our path and get back optimized CSS which can be then inserted into the HTML.

2.3 Critical CSS in WordPress einfügen

Nachdem wir unser Critial CSS generiert haben, fügen wir es über das Autoptimize Plugin auf unserer Website ein.

Critical CSS aus dem Generator kopieren
Critical CSS unter CSS-Optionen einfügen. Vergessen Sie nicht, das Kästchen auszuwählen

Wenn Sie Autoptimize nicht benutzen möchten, stellt der Generator Ihnen JavaScript zur Verfügung, das zwischen den <head> Tags eingefügt werden kann (Abweichungen je nach Theme möglich).

Unsere Node²-Website benutzt CriticalCSS in Verbindung mit dem Autoptimize Plugin Tab. Der ganze Prozess wird dabei automatisch ausgeführt und die monatlichen Kosten sind gering.

criticalcss und autoptimize
Autoptimize hat einen CriticalCSS Tab, der die Erzeugnung von Critical CSS optimiert

Der Test zeigt den beachtlichen Unterschied zwischen der Verwendung von Critical CSS und dem Verzicht darauf, mit Blick auf den Punkt „First Contentful Paint“. Die Zeit bis zum Laden des ersten Teils der Seite wird sichtbar verkürzt.

Critical CSS (erstes Beispiel) wirkt positiv auf die Ladezeiten und verhilft „First Contentful Paint“ in den grünen Bereich. Der einzige Nachteil ist ein wenig extra „Blocking Time“

2.4 Abschluss mit Autoptimize

Jetzt können wir die entsprechenden Optionen in Autoptimize auswählen. CSS Minimierung, Zusammenfügung verknüpft mit Critical CSS – unabhängig davon, ob Sie selbsterzeugtes Critical CSS oder den Autoptimize Critical CSS Tab verwenden.

Autoptimize konfigurieren

Wir aktivieren die Einstellungen, die für unsere Website sinnvoll sind. CSS Minimierung, CSS-Dateien zusammenfügen, um die Anzahl an Verbindungen zu reduzieren, den Critical CSS Service aktivieren und extra kleine Bilddateien ins Basis CSS einfügen.

Im nächsten Schritt werden wir den Footprint von JavaScript in WordPress reduzieren und einige beliebte Funktionen ausprobieren.

Schreibe einen Kommentar