Für gute Core Web Vitals und schnel­le Lade­zei­ten: Mei­ne The­me- und Pluginempfehlungen

In den letz­ten Wochen habe ich auf mei­nem Blog wich­ti­ge Ände­run­gen durch­ge­führt, dabei wur­de das The­me aus­ge­tauscht, weil die Lade­zei­ten nicht über­zeu­gend waren.

Die ver­gan­ge­nen Jah­re habe ich für mei­nen Blog das bekann­te und belieb­te Pre­mi­um-The­me Ava­da ein­ge­setzt. Die Wahl habe ich vor allem wegen der vie­len Gestal­tungs­mög­lich­kei­ten getrof­fen, die der Page Buil­der von Ava­da den Usern bietet.

Doch wo Vor­tei­le sind, lau­ern gleich­zei­tig Nach­tei­le. Der auf­ge­bläh­te Code belas­te­te die Per­for­mance des The­mes, schnel­le Lade­zei­ten lie­ßen sich kaum umset­zen, was zahl­rei­che Ava­da-Nut­zer regel­mä­ßig bemängelten.

In der neu­en Ver­si­on hat sich das Ava­da-Team nun die­sem Pro­blem ange­nom­men, wahr­schein­lich auch des­halb, weil im Juni die Web Core Vitals von Goog­le ange­kün­digt wur­den und man wegen der schlech­ten Lade­zei­ten nicht unnö­tig Kun­den ver­lie­ren wollte.

Das Resul­tat ist der Per­for­mance Wizard von Ava­da, über den man unge­nutz­te Fea­tures, Icons, Schrift­ar­ten und Ele­men­te deak­ti­vie­ren sowie CSS‑, Java­Script- sowie Bil­der- und Video-Opti­mie­run­gen vor­neh­men kann. Dadurch wird die Web­site deut­lich performanter.

Den­noch sind wei­te­re Opti­mie­rungs­plug­ins in den meis­ten Fäl­len von­nö­ten, um die jewei­li­ge Inter­net­sei­te noch schnel­ler zu machen und um die Core Web Vitals als Ran­king Fak­tor zu erfüllen.

Umstieg vom Ava­da- auf das Generate-Press-Theme

Ich habe mich im April dazu ent­schlos­sen, das Ava­da-The­me gegen das schnel­le Gene­ra­te­Press-The­me aus­zu­tau­schen. Das The­me und sei­ne Funk­tio­nen habe ich in einem ver­gan­ge­nen Arti­kel näher vorgestellt.

Auf den Umstieg habe ich mich nicht son­der­lich gefreut, bedeu­te­te das Gan­ze doch eine Men­ge Arbeit. Die Sei­ten, die ich mit dem Ava­da-Page-Buil­der gestal­tet habe, muss­ten alle neu kon­zi­piert und vor allem der Ava­da-Short­code ent­fernt werden.

Des Wei­te­ren hat­te ich mir vor­ge­nom­men, kei­nen wei­te­ren Page-Buil­der wie z. B. Ele­men­tor und Bea­ver Buil­der ein­zu­set­zen, um die Web­site mög­lichst schlank zu halten.

Das hieß auch, mich mit dem Guten­berg-Edi­tor ver­traut zu machen, wor­auf ich über­haupt kei­ne Lust hat­te. Doch die unlieb­sa­me Beschäf­ti­gung damit hat sich gelohnt, mitt­ler­wei­le kom­me ich mit den Guten­berg-Funk­tio­nen sehr gut zurecht.

Zusam­men mit Gene­ra­te­Press ver­wen­de ich das kos­ten­lo­se Plug­in Gene­ra­te­Blocks, mit dem sich Con­tai­ner, Lay­outras­ter und anspre­chen­de Head­lines sowie But­tons erstel­len las­sen. Gene­ra­te­Blocks gibt es auch als kos­ten­pflich­ti­ges Pre­mi­um-Plug­in mit wei­te­ren Features.

Lay­out­ge­stal­tung im Blog

In den Blog­ar­ti­keln selbst ver­zich­te ich auf auf­wän­di­ge Lay­out­ge­stal­tung. Ab und zu hin­ter­le­ge ich einen Text­ab­schnitt mit hell­grau­er Far­be, um ihn optisch hervorzuheben.

Mehr­spal­ti­ge Text­ge­stal­tung habe ich bis­her ver­mie­den, was nicht hei­ßen soll, dass ich dies nie umset­zen wer­de. Bei umfang­rei­chen und zeit­lo­sen Säu­len­ar­ti­kel wer­de ich in Zukunft auch mehr Zeit in das Lay­out­kon­zept investieren.

Dafür habe ich auf den sta­ti­schen Sei­ten und natür­lich auf der Home­page ein moder­ne­res Lay­out umge­setzt. Die Tex­te sind zwei­spal­tig, wer­den von Bil­dern, die sich auch in Spal­ten befin­den, unter­bro­chen, sodass die User von Blei­wüs­ten ver­schont bleiben.

Die Start­sei­te habe ich mit Con­tai­nern von Gene­ra­te­Blocks erstellt, dar­in zwei- bzw. drei­spal­ti­gen Text ange­legt, die Spal­ten farb­lich abge­setzt und die Con­tai­ner mit Farb­ver­lauf oder Par­al­lax­bil­dern hinterlegt.

Zuerst dach­te ich, dass ich die Start­sei­te visu­ell nicht mehr so anspre­chend gestal­ten kann wie mit Ava­da. Doch ich habe mich glück­li­cher­wei­se geirrt. Es ist kaum ein Unter­schied zu dem vor­he­ri­gen Lay­out zu sehen.

Plug­ins

Um die Lade­zeit so gut wie mög­lich nied­rig zu hal­ten, habe ich fol­gen­de Plug­ins installiert:

WP Rocket (kos­ten­pflich­tig): Das bekann­te Caching-Plug­in lässt sich sehr schnell ein­rich­ten und bie­tet vie­le nütz­li­che Funk­tio­nen wie

• Caching-Grund­funk­tio­nen (Caching für mobi­le Gerä­te aktivieren)
• Datei-Opti­mie­rung wie CSS mini­mie­ren, zusam­men­fas­sen und unge­nutz­tes CSS ent­fer­nen, Java­Script mini­mie­ren, ver­zö­gert laden, Java­Script-Aus­füh­rung verzögern
• Lazy­Load, Bild­ab­mes­sun­gen hin­zu­fü­gen, WebP-Caching akti­vie­ren, Word­Press-Embeds deaktivieren
• Cache fül­len: Vor­la­den von Links akti­vie­ren, Vor­la­den akti­vie­ren, Fonts vorladen
• Erwei­ter­te Regeln: Nie cachen (von bestimm­ten Sei­ten wie Log­in-/Log­out-Sei­ten, Coo­kies, User Agents)
• Daten­bank berei­ni­gen: Revi­sio­nen löschen, Tran­si­ents berei­ni­gen etc.
• Inte­gra­ti­on eines CDN (nut­ze ich nicht)
• Heart­beat kontrollieren

Die wich­tigs­ten Fea­tures sind nach der Plug­in-Akti­vie­rung schon ein­ge­schal­tet. Ich bin bis­her mit die­sem Plug­in sehr zufrieden.

Wich­ti­ge Ein­stel­lun­gen (gesetz­tes Häkchen):

• Caching für mobi­le Gerä­te aktivieren
• CSS mini­fi­zie­ren, CSS zusam­men­fas­sen, CSS-Dar­stel­lung optimieren
• Java­Script mini­fi­zie­ren, Java­Script ver­zö­gert laden, Java­Script-Aus­füh­rung verzögern
• Lazy­load akti­vie­ren (für Bil­der, iFrames, Videos)
• Feh­len­de Bild­ab­mes­sun­gen hinzufügen
• Vor­la­den akti­vie­ren, Vor­la­den von Links aktivieren
• Daten­bank opti­mie­ren: Bit­te vor­her eine Siche­rung der Daten­bank anle­gen, ansons­ten kann da wirk­lich auch mal was schief­ge­hen. Es lohnt sich aller­dings, über­flüs­si­ge Revi­sio­nen, Tran­si­ents und Spam-Kom­men­ta­re löschen zu las­sen, genau­so wie die Opti­mie­rung von Tabellen.

Falls dein Lay­out nach den vor­ge­nom­me­nen CSS- und Java­Script-Ein­stel­lun­gen feh­ler­haft ist, soll­test du tes­ten, wel­che Ein­stel­lun­gen dein The­me ver­trägt und wel­che nicht. Gene­ra­te­Press zickt jeden­falls nicht rum.

Aut­op­ti­mi­ze (kos­ten­los): Das Opti­mie­rungs-Plug­in bie­tet zwar auch eini­ge Funk­tio­nen an, die sich mit dem Caching-Plug­in WP Rocket über­schnei­den, aber auch noch ande­re nützliche.

So habe ich unter Extras die Goog­le Fonts ent­fernt (ich ver­wen­de nur noch Web­fonts) und unter JS, CSS & HTML die Opti­on HTML-Code opti­mie­ren angehakt.

Auto­clear Aut­op­ti­mi­ze Cache (kos­ten­los): Das Ergän­zungs­plug­in zu Aut­op­ti­mi­ze leert den Cache, wenn er den von dir fest­ge­setz­ten Wert (z. B. 1 GB) über­schrei­tet. Denn Aut­op­ti­mi­ze erstellt gecach­te Ver­sio­nen von soge­nann­ten Asset Files, um die Lade­zeit zu redu­zie­ren, Doch irgend­wann wer­den die­se Datei­en zu groß und ver­brau­chen unnö­ti­gen Web­space. Des­halb soll­test du die­sen Cache regel­mä­ßig löschen.

Lazy­Loads for Comm­ents (kos­ten­los): Die­ses Plug­in lädt die Kom­men­ta­re nach, wenn der User ent­we­der auf den But­ton Load Comm­ents klickt oder wenn er wei­ter nach unten scrollt. Die gewünsch­te Opti­on On Scroll oder On Click fin­dest du unter Ein­stel­lun­gen -> Dis­kus­si­on. Auch dadurch wird Lade­zeit gespart.

Ima­gi­fy (kos­ten­los): Mit die­sem Bild­kom­pri­mie­rungs­plug­in las­sen sich hoch­ge­la­de­ne Fotos und Gra­fi­ken in ihrer Datei­grö­ße deut­lich ver­klei­nern. Es gibt drei ver­schie­de­ne Opti­mie­rungs­stu­fen: nor­mal, aggres­siv, ultra. Ich habe die zwei­te Stu­fe aus­ge­wählt (aggres­siv).

Außer­dem wan­delt Ima­gi­fy jpg- und png-Bil­der in das moder­ne WebP-For­mat um, was auch die Lade­zeit posi­tiv beein­flusst. In der kos­ten­lo­sen Ver­si­on kannst du wegen der monat­li­chen Daten­men­gen-Beschrän­kung nicht alle Bil­der auf ein­mal umwan­deln, dafür benö­tigst du einen kos­ten­pflich­ti­gen Tarif.

LuckyWP Table of Con­tents: Die­ses leicht­ge­wich­ti­ge Inhalts­ver­zeich­nis-Plug­in habe ich nun in Verwendung.

Außer­dem habe ich die Ava­tar-Anzei­ge in den Kom­men­ta­ren unter Ein­stel­lun­gen -> Dis­kus­si­on ausgeschaltet.

Test mit Goog­le Page Speed

Nach vie­len Tests und eini­gen Unver­ständ­lich­kei­ten hat mein Blog gute Wer­te bei den Core Web Vitals, sowohl in der mobi­len als auch in der Desktop-Version.

Anfangs stimm­ten nur die Wer­te in der mobi­len Ver­si­on, in der Desk­top-Ver­si­on war stän­dig der CLS, der Cumu­la­ti­ve Lay­out Shift etwas zu hoch. Ich dach­te zuerst, das wäre ein Lay­out­pro­blem, doch damit hat­te es nichts zu tun.

Meis­tens liegt das Pro­blem nicht an irgend­wel­chen Fein­ein­stel­lun­gen, son­dern dar­an, wel­che Plug­ins und wel­ches The­me du ver­wen­dest, und ob der Hos­ter auch eine gewis­se Per­for­mance bietet.

Die im Screen­shot (unten) gezeig­ten Wer­te sind nicht immer die glei­chen, manch­mal ist die Time to Inter­ac­ti­ve etwas zu hoch, doch die Lade­zeit und die Web Core Vitals lie­fern stän­dig gute Werte.

Um die Web­site-Per­for­mance zu opti­mie­ren, gibt es u. a. noch zwei wei­te­re erwäh­nens­wer­te Plugins:

Perf­mat­ters (kos­ten­pflich­tig): Damit las­sen sich z. B. Skrip­te auf Sei­ten- und Blog­post-Basis aus­schal­ten, so dass die­se nur noch auf not­wen­di­gen Sei­ten gela­den wer­den.

Bei­spiel: Das Kon­takt­form-Plug­in Cont­act-Form 7 wird stän­dig gela­den, auch wenn auf der jewei­li­gen Seite/​dem jewei­li­gen Blog­post gar kein Kon­takt­for­mu­lar ein­ge­bun­den ist. Das kos­tet Performance.

Mit dem Script-Mana­ger von perf­mat­ters las­sen sich sol­che Skrip­te ausschalten.

Wei­te­re Fea­tures von perfmatters:

• Lazy­Loa­ding
• Daten­bank­op­ti­mie­rung
• Java­Script ver­zö­gert laden
• Goog­le-Ana­ly­tics-Script lokal hosten
• Blogre­vi­sio­nen aus­schal­ten oder begrenzen
• Kom­men­ta­re und URLs deaktivieren
• Goog­le Maps deaktivieren
• Emo­jis, Embeds und Dashi­cons ausschalten
• Goog­le Fonts ausschalten
• Woo­Com­mer­ce Wid­gets ausschalten
• etc.

Man­che Funk­tio­nen lie­fert auch WP Rocket, man­che sind nur in Perf­mat­ters enthalten.

Asset Cle­a­nUP Pro (kos­ten­pflich­tig): Das Plug­in gibt es auch in einer kos­ten­lo­sen Aus­ga­be, die ver­fügt aller­dings über nicht so vie­le Features.

Mit Asset Cle­a­nUP las­sen sich noch ver­fei­ner­te Ein­stel­lun­gen vor­neh­men, was das kon­di­tio­na­le Laden von CSS- und Java­Script-Datei­en angeht. Perf­mat­ters ist sicher­lich ein­fa­cher zu bedie­nen, lie­fert auf der ande­ren Sei­te nicht sol­che Feineinstellungsmöglichkeiten.

Die wich­tigs­ten Features:

• Ver­schie­ben von Java­Script- und CSS-Datei­en vom <HEAD>- in den <BODY>-Bereich
• Ver­schie­ben von CSS, das im <BODY> gela­den wird, um Ren­de­ring-blo­ckie­ren­de Res­sour­cen zu reduzieren
• Ver­wal­ten von gela­de­nen CSS- und Java­Script-Datei­en auf Home­page, Bei­trä­gen, Sei­ten und benut­zer­de­fi­nier­ten Bei­trags­ty­pen (z. B. Woo­Com­mer­ce-Pro­dukt­sei­ten, etc.)
• Bulk-Unloads: Über­all (Site-weit), auf bestimm­ten Sei­ten und Bei­trags­ty­pen, Hin­zu­fü­gen von Load-Ausnahmen
• Ver­blei­ben­de gela­de­ne CSS- und Java­Script-Datei­en mini­mie­ren (mit der Opti­on, Aus­nah­men hinzuzufügen)
• Ent­fer­nen von nicht ver­wen­de­ten Ele­men­ten aus dem <HEAD>- und <BODY>-Bereich
• etc.

Mit den Funk­tio­nen von Asset Cle­a­nUP Pro muss man vor­sich­tig umge­hen. Die einen oder ande­re Ein­stel­lung kann sich nach­tei­lig auf das Lay­out und Web­site-Funk­tio­nen auswirken.

Fazit

Die The­me-Umstel­lung mei­nes Blogs auf Gene­ra­te­Press war schon sehr zeit­auf­wän­dig, hat sich aber gelohnt. Auch das Deak­ti­vie­ren von so man­chem Plug­in und der Umstieg auf ande­re haben die Per­for­mance eben­falls verbessert.

Was noch ver­bes­sert wer­den muss: Ich will auf ein bes­se­res Web­space-Paket beim Hos­ter umstei­gen, wahr­schein­lich noch ein paar Plug­ins aus­mis­ten und einen kos­ten­pflich­ti­gen Account bei Ima­gi­fy buchen, damit alle Bil­der zügig ins WebP-For­mat umge­wan­delt wer­den können.

(Bild­quel­le Arti­kel­an­fang: © qimo­no /Pixabay.com)