7 Tipps um die Ladezeiten deiner WordPress Seite zu verbessern

Mit die­sen 7 Tipps kannst du dei­ne Web­sei­te opti­mie­ren, um bes­se­re Wer­te für die Goog­le Core Web Vitals zu erhal­ten. Die Core Web Vitals wur­den im Juni 2021 ein­ge­führt und sind nun eben­falls ein wei­te­rer Ran­king­fak­tor. Auch wenn die­ser sich aktu­ell nicht so stark aus­wirkt wie zunächst von vie­len SEO Pro­fis erwar­tet, soll­test du die Lade­zei­ten dei­ner Word­Press Web­sei­te immer auf dem Schirm haben.

Wie kann ich die Ladezeiten meiner WordPress Webseite messen? #

Gute Fra­ge, dafür gibt es mitt­ler­wei­le vie­le kos­ten­lo­se Tools im Inter­net. Eta­bliert haben sich vor allem GTMe­trix und Goog­le Page­Speed Insights.

Bevor du nun also anfängst, dei­ne Web­sei­te zu opti­mie­ren, soll­test du eines der Tools bemü­hen dir hilf­rei­che Tipps zu geben. Hier mal ein Aus­zug von unse­rer Sei­te.

Du soll­test den Test regel­mä­ßig durch­füh­ren, also am bes­ten immer dann, wenn du grö­ße­re Ände­run­gen vor­ge­nom­men hast.

Schritt 1: Server Antwortzeiten prüfen #

Als Ers­tes soll­test du prü­fen, ob dein Ser­ver über­haupt für dei­ne Web­sei­te geeig­net ist. Heut­zu­ta­ge gibt es so vie­le Hos­­ting-Anbie­­ter wie Sand am Meer. Dar­über hin­aus unter­bie­ten sich alle regel­mä­ßig im Preis — dabei lei­det dadurch natür­lich auch die Leis­tung.

Hier kannst du dei­nen TTFB tes­ten.

Bei einem Hos­ting ver­hält es sich so, der Anbie­ter stellt einen Ser­ver zur Ver­fü­gung. Aber auf die­sem wer­den dann 10–30 Web­sei­ten unter­ge­bracht. Das bedeu­tet, die­se Web­sei­ten tei­len sich dann die ver­füg­ba­re Leis­tung.

Du siehst, dir steht also nur ein Bruch­teil aller Res­sour­cen zur Ver­fü­gung. Nun ist es so, das vie­le Hos­ter natür­lich den maxi­ma­len Pro­fit erzie­len möch­ten. Daher ist die Hard­ware natür­lich auch nicht die neus­te und auch nicht die schnells­te. Dazu kommt dann, das die Ser­ver auch nicht für Word­Press opti­miert wur­den.

Also was tun? Wel­cher ist nun der rich­ti­ge Anbie­ter? Am bes­ten suchst du dir einen Anbie­ter, der sich auf Word­Press spe­zia­li­siert hat. Hier fällt mir direkt RAIDBOXES ein.

Alter­na­tiv haben auch Alfah­os­ting und All-inkl gute Bewer­tun­gen erhal­ten.

Schritt 2: WordPress Cache System einrichten #

Falls du noch kein Cache Sys­tem ver­wen­dest, soll­test du unbe­dingt ein Instal­lie­ren. Auch hier­für gibt es unzäh­li­ge Plug­ins die du ver­wen­den kannst.

Wir ver­wen­den meis­tens WP Rocket. Dabei han­delt es sich um ein Pre­mi­um Plug­in, das dir vie­le Funk­tio­nen zum Opti­mie­ren dei­ner Sei­te bie­tet.

Falls du lie­ber kein Geld aus­ge­ben möch­test, kannst du auf WP Fas­test Cache oder auf W3 Total Cache zurück­grei­fen. Bei­de Plug­ins bie­ten eine abge­speck­te kos­ten­lo­se Ver­si­on an.

Falls du dich jetzt fragst, was die­se Plug­ins dir brin­gen, das ist ganz ein­fach: Sie opti­mie­ren dei­ne Sei­te damit die­se schnel­ler lädt.

So las­sen sich zum Bei­spiel über das Plug­in die Caching-Rich­t­­li­­ni­en für dei­ne Datei­en und Bil­der opti­mie­ren. Datei­en müs­sen dann nicht immer wie­der her­un­ter­ge­la­den wer­den, son­dern nur noch dann, wenn Sie sich ver­än­dert haben.

Dar­über hin­aus bie­ten die gän­gi­gen Cache-Plu­g­ins die Mög­lich­keit an, CSS und Java­Script Datei­en zu kom­pri­mie­ren und zusam­men­zu­fü­gen (falls kein HTTP2 akti­viert ist).

Natür­lich gibt es noch weit mehr Optio­nen — abhän­gig vom Plug­in. Das wür­de aber nun den Bei­trag spren­gen. Daher soll­test du dir alle ein­mal anschau­en und anschlie­ßend eine Anlei­tung für das gewähl­te Plug­in suchen.

Schritt 3: Überflüssige Plugins deaktivieren #

Plug­ins sind ein Grund war­um dei­ne Sei­te lan­ge lädt und schlech­te Wer­te bei dem Core Web Vitals erreicht. Ich weiß, es gibt vie­le Plug­ins die dei­ne Web­sei­te um schö­ne neue Designs, Popups, But­tons etc. erwei­tern, aber das geht meis­tens zu las­ten der Lade­zei­ten.

Das Pro­blem ist ganz ein­fach, das die CSS und Java­Script Datei­en auf allen Sei­ten gela­den wer­den. Auch, wenn du das Plug­in auf der Sei­te erst gar nicht ver­wen­dest. Gera­de Samm­lun­gen von Snip­pets sind hier­bei ein rie­si­ger Res­sour­cen­fres­ser.

Du soll­test jetzt ein­mal dei­ne Plug­ins durch­ge­hen und die­se in 3 Grup­pen auf­tei­len.

1. Essen­zi­el­le Plug­ins, die für die Funk­ti­on dei­ner Web­sei­te benö­tigt wer­den.
2. Optio­na­le Plug­ins, die du nur ver­wen­dest, um dei­ne Web­sei­te auf­zu­hüb­schen.
3. Backend Plug­ins, die nur für die Ver­wal­tung dei­ner Web­sei­te ver­wen­det, wer­den aber im Front­end kei­ne Aus­wir­kung haben.

Falls auf dei­ner Web­sei­te bereits Besu­cher sind, soll­test du über­le­gen zunächst ein Sta­­ging-Sys­­tem ein­zu­rich­ten. Ansons­ten kann es vor­kom­men, das Besu­cher dei­ner Web­sei­te Feh­ler­mel­dun­gen ange­zeigt bekom­men und das will ja kei­ner.

Sobald du dei­ne Auf­tei­lung abge­schlos­sen hast, soll­test du alle Plug­ins die in Grup­pe 2 sind, deak­ti­vie­ren.

Prü­fe anschlie­ßend die Lade­zei­ten dei­ner Web­sei­te erneut. So fin­dest du her­aus, wel­che Plug­ins dir den meis­ten Leis­tungs­schub brin­gen.

Wir zum Bei­spiel ver­wen­den nur eine hand­voll Plug­ins für eine Word­Press Web­sei­te:

• WP Rocket für den Cache
• Borlabs Coo­kie für die DSGVO
• AIOSEO für die Such­ma­schi­nen­op­ti­mie­rung
• Redi­rec­tion für Wei­ter­lei­tun­gen
• WebP Express für die neu­en Bild­for­ma­te
• Ein Page­Buil­der für die Inhalts­er­stel­lung

Damit kann man bereits eine klas­se Web­sei­te bau­en die top Aus­sieht und schnell lädt.

Schritt 4: Entferne nicht verwendetes CSS und JavaScript #

Jetzt wird es etwas tech­nisch, aber es lohnt sich. Plug­ins laden, wie bereits erwähnt, Skrip­te und Style­sheets auf allen Sei­ten. Auch dann, wenn Sie eigent­lich nicht gebraucht wer­den.

Du kannst aber natür­lich selbst fest­le­gen, wel­che Datei­en auf wel­cher Sei­te gela­den wer­den. Für Pro­gram­mie­rer hält Word­Press die Mög­lich­keit bereit, Skrip­te ein­fach wie­der vor dem Ren­dern her­aus­zu­schmei­ßen.

function wp_dequeue_my_script() {
     if(is_page(2)){
          // JavaScript
          wp_dequeue_script( 'jquery-ui-core' );
          // Stylesheet
          wp_dequeue_style('style-handle');
     }
}
add_action( 'wp_print_scripts', 'wp_dequeue_my_script', 100 );

Den Code musst du dann in dei­ner functions.php plat­zie­ren und schon wird auf der Sei­te mit der ID 2 das ‘jquery-ui-core’ skript ent­la­den.

Das lässt sich jetzt natür­lich für alle mög­li­chen Skrip­te und Styl­es wie­der­ho­len. Das Gan­ze kann natür­lich ganz schön auf­wen­dig wer­den, gera­de wenn man vie­le Unter­sei­ten benutzt.

Hier­für gibt es aber auch wie­der zwei Plug­ins die Abhil­fe schaf­fen, den Word­Press Asset Mana­ger und Asset Cle­a­nUp. Bei­de Plug­ins bie­ten auch in der kos­ten­lo­sen Ver­si­on an Skrip­te und Style­sheet von Sei­ten, Bei­trä­gen oder Cus­tom Post Types zu ent­fer­nen.

Schritt 5: Bilder optimieren #

Bil­der spie­len eine gro­ße Rol­le bei den Lade­zei­ten. Nicht sel­ten sehen wir Web­sei­ten, die Bil­der in 4K Auf­lö­sun­gen hoch­la­den und sich dann wun­dern, das die Sei­te lang­sam lädt.

Vor dem Hochladen optimieren

Bereits vor dem Hoch­la­den soll­test du dei­ne Bil­der mit Pho­to­shop, Gimp oder einem ande­ren Bild­be­ar­bei­tungs­pro­gramm auf die rich­ti­gen Maße zuschnei­den.

Gera­de wenn du Stock­pho­tos von Foto­lia, Pix­a­bay oder Uns­plash ver­wen­dest, wirst du nach dem Her­un­ter­la­den die­ser Bil­der sehr gro­ße Datei­en erhal­ten. Redu­zie­re daher die Bil­der auf die Pixel­grö­ße die du in dei­nem Blog oder dei­ner Web­sei­te ver­wen­dest.

Die meis­ten Bild­be­ar­bei­tungs­pro­gram­me bie­ten dir auch an, dei­ne Bil­der vor dem Spei­chern zu kom­pri­mie­ren. Dabei soll­test du eine Qua­li­tät von 60 bis 80 % ein­stel­len. Dadurch bleibt das Bild scharf aber wird den­noch etwas klei­ner. Alter­na­tiv kannst du zum Bei­spiel COMPRESS JPEG ver­wen­den, um dein Bild online zu kom­pri­mie­ren.

Verkleinerung beim Hochladen

Bei Word­Press kannst du auf Plug­ins zurück­grei­fen, die dei­ne Bil­der bereits beim Hoch­la­den kom­pri­mie­ren. Dafür musst du nicht wei­ter machen, als das Plug­in zu instal­lie­ren.

Ver­wen­den kannst du zum Bei­spiel WP Smush.it oder Res­mush.it. Bei­de Plug­ins wer­den regel­mä­ßig aktua­li­siert und bie­ten dir die Mög­lich­keit, bereits hoch­ge­la­de­ne Bil­der nach­träg­lich zu ver­klei­nern.

Kei­ne Angst, die Qua­li­tät bleibt dabei erhal­ten.

Schritt 6: Nachladen der Bilder aktivieren (LazyLoad) #

Das Nach­la­den von Bil­dern wird auch Lazy­Load genannt. Heut­zu­ta­ge fin­det man kaum eine Web­sei­te, die das Ver­fah­ren nicht ver­wen­det. Ver­ständ­lich, so lässt sich damit die Lade­zeit gera­de bei grö­ße­ren Sei­ten erheb­lich redu­zie­ren.

Wie funktioniert das LazyLoad Verfahren?

Das ist eigent­lich ganz ein­fach. Im Grun­de wer­den dabei Bil­der erst dann gela­den, wenn Sie im sicht­ba­ren Bereich dei­nes Brow­sers sind (view­port). Die Bil­der wer­den also erst dann gela­den, wenn du anfängst nach unten zu scrol­len.

Klas­se Idee, oder? Des­we­gen soll­test auch du die­ses Ver­fah­ren ver­wen­den.

Wie kann ich LazyLoad aktivieren?

Das hängt vom The­me bzw. von den gewünsch­ten Plug­ins ab. Du soll­test aber dar­auf ach­ten, nur ein Lazy­Load Sys­tem zu akti­vie­ren. Zum Bei­spiel ver­fügt das Word­­Press-The­­me Ava­da über ein inte­grier­tes Lazy­Load Ver­fah­ren. Das deak­ti­vie­ren wir aber in der Regel und grei­fen statt­des­sen auf die Funk­ti­on von WP Rocket zurück, da wir sowie­so immer ein Caching Plug­in ver­wen­den.

Wir haben ein­fach gemerkt, das WP Rocket bes­se­re Core Web Vitals Wer­te erzielt als Ava­da. Das liegt ver­mut­lich auch dar­an, das WP Rocket spe­zi­ell dafür pro­gram­miert wur­de.

Falls du weder WP Rocket noch Ava­da ver­wen­dest, kannst du auch auf Cra­zy Lazy zurück­grei­fen.

Schritt 7: HTTP/2 aktivieren #

HTTP/2 ist die ver­bes­ser­te Ver­si­on des HTTP/1.1 Pro­to­kolls. Es basiert auf dem von Goog­le ent­wi­ckel­ten SPDY-Pro­­to­­koll.

Mit HTTP/2 ist es mög­lich, meh­re­re Ele­men­te einer Web­sei­te (Bil­der, Style­sheets, Java­Scrip­te…) über eine ein­zi­ge Ver­bin­dung zu über­tra­gen (Mul­ti­plex). Das war zu HTTP/1.1 noch nicht mög­lich. Dort konn­te immer nur ein Ele­ment über eine Ver­bin­dung über­tra­gen wer­den.

Das Pro­blem war dabei, das nur zwi­schen 2 und 13 Ver­bin­dun­gen gleich­zei­tig zu einem Ser­ver geöff­net wer­den konn­ten (abhän­gig vom Brow­ser). Daher hat man damals ver­sucht, Skrip­te auto­ma­tisch zusam­men­zu­fas­sen und eine rie­si­ge Datei zu über­tra­gen anstatt vie­ler klei­ner.

Vie­le Caching-Plu­g­ins von Word­Press bie­ten das immer noch an. Das soll­test du aber deak­ti­vie­ren, falls dein Ser­ver bereits HTTP/2 ver­wen­det.

Ob dei­ne Web­sei­te HTTP/2 unter­stützt kannst du mit Geek­fla­re her­aus­fin­den.

Falls es noch nicht akti­viert ist, soll­test du bei dei­nem Hos­ting Anbie­ter anfra­gen oder über einen Wech­sel zu einem ande­ren Hos­ter nach­den­ken.

Fazit #

Ich hof­fe dir haben unse­re 7 Tipps, um die Lade­zei­ten dei­ner Word­Press Sei­te zu ver­bes­sern, gehol­fen. Hast du selbst noch Tipps oder Fra­gen rund um die Lade­zei­ten dei­ne Word­Press Sei­te? Dann hin­ter­las­se uns ger­ne einen Kom­men­tar.