ladezeit optimierung

Die Theorie hinter der Ladezeit Optimierung in WordPress

Von Dominik Liss am 9. Dezember 2019

Wenn du diese Fragen beatnworten kannst, dann kannst du auch mit der Ldaezeit Optimierung in WordPress anfangen.

weiterlesen

Die Theorie hinter der Ladezeit Optimierung in WordPress

Du willst die Ladezeit deiner WordPress Seite verbessern? Dir fehlt aber das grundlegende Wissen dafür? Dann bist du hier genau richtig. Hier erklär ich dir die Basics, die du für eine Ladezeit Optimierung wissen solltest!

Wir werden folgende Themen durchgehen:

  • Was ist eine Ladezeit Optimierung?
  • Technische Begriffe, die du kennen solltest
  • Was passiert bei einem Seitenaufruf?
  • Wieso ist das für die Ladezeit Optimierung wichtig?
  • Was passiert auf deinem Server?
  • Was passiert in deinem Browser?

Falls du diese Fragen schon beantworten kannst, dann kannst du mit ruhigem Gewissen mit dem praktischen Teil der Ladezeit Optimierung weitermachen:

WordPress Ladezeit Optimierung – Wie kannst du das selbst machen?

Was ist eine Ladezeit Optimierung?

Eine Ladezeit Optimierung ist eigentlich sehr leicht zu verstehen. Die Umsetzung ist eine andere Geschichte … aber dazu kommen wir noch.

Bei jedem Seitenaufruf baut WordPress aus vielen Bausteinen deine Webseite zusammen. Je nachdem wie komplex deine WordPress Seite ist, dauert dieser Prozess bei manchen kurzer und bei manchen länger.

Um die Ladezeit deiner Webseite besser zu verstehen, musst aber auch weitere Faktoren bedenken (z.B. die Qualität deines Hostings, was passiert in deinem Browser, nachdem WordPress eine Seite zusammengebaut hat und welche Dateien werden dann noch im Browser geladen?). Alle diese Faktoren sind extrem wichtig um die Ladezeit deiner WordPress Seite zu entschlüsseln.

Bei der Ladezeit Optimierung verbessern wir die einzelnen Teile, aus welchen sich die Ladezeit zusammensetzt. Als erstes solltest du ein sogenanntes „Bottleneck“ finden. Das ist dieser Abschnitt im Ladeprozess deiner WordPress Seite, welcher die Ladezeit am meisten runterzieht.

Technische Begriffe die du kennen solltest

Client
In unserem Fall ist der Client dein Internetbrowser (z.B. Google Chrome, Firefox, Safari usw.)

Server
Auf einem Server befindet sich deine WordPress Seite. In deinem Fall wirst du wahrscheinlich einen Webspace haben. Vom Prinzip her ist ein Server und ein Webspace genau das gleiche. Ein Webspace ist nur ein Teil eines größere Servers. Deswegen sind Webspaces günstiger als ein Server.

Request
Ein Request wird von deinem Browser initiiert, indem du in deinem Browser z.B. www.dominikliss.com eingibst. So startest du einen Request. Dieser Request wird an den entsprechenden Server weitergeleitet und der Server antwortet mit einer Response.

Response
Nachdem der Request von deinem Server verarbeitet wurde, bekommst du eine Antwort (die Response). Das ist in dem Fall die fertig zusammengebaute Seite, die du dann in deinem Browserfenster siehst.

Was passiert bei einem Seitenaufruf?

So schaut dann der komplette Prozess aus:

Du initiierst einen Request in deinem Browser. Dieser Request wird an deinen Server weitergeleitet. Dort wird der Request von WordPress verarbeitet und der Server schickt im Anschluss das Ergebnis in Form einer Response an den Browser zurück. Der Browser stellt dann die Response dar.

Wieso ist das für die Ladezeit Optimierung wichtig?

Dieser Prozess ist extrem wichtig, um die oben genannten Bottlenecks zu finden und um die Optimierungsmethoden zu verstehen. Es gibt z.B. Serverseitige als auch Clientseitige Optimierungen. Das wird dann eine größere Rolle beim Caching spielen. Dazu kommen wir aber noch.

Du willst dein WordPress Problem lösen?

> Die erste Beratung ist kostenlos.

Heute kontaktieren!

Was passiert auf deinem Server?

Nachdem ein Request beim Server eingetroffen ist, wird dieser in unserem Fall an WordPress weitergeleitet. WordPress baut anhand dieses Requests die gewünschte Seite zusammen und erzeugt eine Response, die der Server zurück an den Client schickt.

In dem Fall können wir zwei Sachen optimieren. Einerseits die Einstellungen deines Server (bzw. Webspaces) und andererseits können wir den Prozess optimieren, wie WordPress die gewünschte Seite zusammenbaut. Wie und was du da alles machen kannst, das werden wir uns genauer in weiteren Artikeln anschauen.

Was passiert in deinem Browser?

Das ist vielleicht sogar die interessantere Frage … weil nachdem du eine Response vom Server bekommen hast, wird die Seite im Browser dargestellt. Diesen Prozess nennt man „Rendering“. Dabei wird der Quellcode aus der Response in eine visuelle Darstellung umgewandelt und in deinem Browserfenster angezeigt.

Was nacheinander passiert kann man sehr gut in einem Wasserfall Diagramm abbilden:

Das ist jetzt nur ein kleiner Ausschnitt … aber da kannst du zwei Sachen sehr gut erkennen:

  • Wie lange WordPress braucht um deine WordPress Seite zusammenzubauen (das ist der erste Eintrag im Diagramm)
  • und welche Dateien wie lange geladen werden

So kannst du sehr gut Bottlenecks finden! Wenn eine Datei (z.B. Bilddatei) verdächtig lang geladen wird, dann hast du schon einen Punkt, den du dir genauer anschauen kannst. Das gleiche gilt auch für WordPress: wenn WordPress lange braucht um eine Response zu liefern, dann weißt du, dass dort Optimierungsbedarf besteht.

Falls du das Wasserfall Diagramm bei deiner WordPress Seite genauer anschauen magst, dann kannst du das in den Dev Tools von Google Chrome machen. Du kannst einfach mit der rechten Maustaste auf ein Element auf deiner Website klicken und „Untersuchen“ anklicken. Dann öffnet sich ein Fenster und unter dem Reiter Netzwerk, siehst du den gesamten Verlauf (nachdem du die Seite neu geladen hast).

Tipp: Mach das lieber im Inkognito Modus oder in einem Browser, wo du nicht im Backend eingeloggt bist. Sonst wirst du auch den Ladeprozess vom Backend sehen, was ein bisschen verwirrend sein kann …

Fazit

Jetzt bist du bereit für den praktischen Teil der Ladezeit Optimierung! Hier kannst du damit anfangen:

WordPress Ladezeit Optimierung – Wie kannst du das selbst machen?