PageSpeed verbessern – durch diese 20 Maßnahmen optimierst du die Ladezeit!

Wie schnell deine Webseiten laden, ist ein immens wichtiger Faktor für die User Experience und das Ranking deiner Website.

Denn die Ladezeit, auch Pagespeed genannt, ist ein direkter und gewichtiger Rankingfaktor.

Das Gute vorweg: Den PageSpeed verbessern kann jeder! Auch Anfänger!

Was du wissen und tun musst, um die Ladezeit deiner Website drastisch zu verringern, das erfährst du hier!

Warum die Ladezeit optimieren?

Man kann sich natürlich in Zeiten von immer schneller werdenden Datenverbindungen fragen, warum man den Pagespeed / die Ladezeit einer Website überhaupt noch optimieren sollte?

Dies hat mehrere Gründe, die sowohl für dich als Seitenbetreiber als auch für deine Seitenbesucher von Vorteil sind.

1. Die Ladezeit ist eine Rankingfaktor
   Die größte Auswirkung ist, dass durch eine schnellere Ladezeit deiner Webseite das Ranking unmittelbar positiv beeinflusst wird, da die Ladezeit ein direkter Rankingfaktor ist. Insbesondere wenn Webseiten einen vergleichbaren Inhalt und auch sonst alle Faktoren gleich stark sind, dann erhält die Webseite den besseren Rang, die schneller geladen werden kann.
2. User Experience verbessern
   Ein weiterer wichtiger Grund ist die User Experience, die durch die schnellere Ladezeit nochmals verbessert wird. Wenn ein Seitenbesucher länger als 3 Sekunden auf das Laden einer Webseite warten muss, dann springen sehr viele der Seitenbesucher wieder ab. Das erhöht die Absprungrate (Bounce Rate). Wenn aber der Seitenbesucher schnell deine Webseiten aufrufen kann auch schnell innerhalb deiner Webseiten wechseln kann, dann erfreut ihn dies und das wiederum steigert regelmäßig auch die Anzahl der aufgerufenen Webseiten und damit auch die Verweildauer auf deiner Website. Beides sind Signale die Google wahrnehmen wird und die sich ebenfalls in einem verbesserten Ranking widerspiegeln werden.
3. Steigerung der Conversion Rate
   Dauert das Laden einer Webseite zu lange, springen die Seitenbesucher wieder ab. Springt der Seitenbesucher während des Kaufvorgangs aufgrund zu langer Ladezeit der einzelnen Webseiten ab, bedeuten dies eine geringere Conversion Rate für den Seitenbetreiber.
4. Begrenztes Datenvolumen für mobile Internetnutzer schonen
   Ein weiterer Grund liegt in der steigenden Zahl von mobilen Internetnutzern, insbesondere diejenigen, die per Smartphone ins Internet gehen. Denn die Datentarife der Mobilgeräte sind meist auf ein monatliches Datenvolumen begrenzt. Und wenn du für eine schnellere Ladezeit deiner Website sorgst, geht dies immer mit einer Reduzierung der Dateigröße deiner einzelnen Webseiten einher. Eine kleine Datei wird eben schneller geladen als eine große Datei. Für den Seitenbesucher hat dies den Vorteil, dass er für das Laden deiner Webseite weniger Daten benötigt und das wiederum schont sein Datenvolumen.
5. Längere Akkulaufzeit bei Mobilgeräten ermöglichen
   Das Laden und Verarbeiten kleinerer Datenpakete belastet die Performance des Mobilgerätes weniger und damit wird auch weniger Akku des Smartphones verbraucht, was wiederum zu einer längeren Akku-Laufzeit führt.

Das Verringern der Ladezeit hat damit Vorteile für den Seitenbesucher, da seine User Experience gesteigert, sein Datenvolumen und Akku geschont wird und für den Seitenbetreiber liegt der Vorteil in einem besseren Ranking und einer höheren Conversion Rate. Somit haben wir eine richtige Win-Win-Situation.

Durch Optimierungen der Ladezeit kann man Ladezeitreduktionen von ein paar Sekunden erreichen. Es lohnt sich also auch hierauf einen genauen Blick zu werfen.

Tools zur Messung der Ladezeit / Pagespeed

Damit du weißt, wie überhaupt die aktuelle Ladezeit deiner Website ist oder wie sie sich nach deinen Optimierungsmaßnahmen verändert hat, musst du überhaupt erst einmal wissen, wie du die Ladezeit deiner Webseite messen kannst.

Natürlich kannst du auch auf diesem Wege die Ladezeiten deiner Konkurrenz messen, um zu sehen, welche Werte du übertrumpfen solltest.

Um die Ladezeit deiner Website zu messen, kannst du sowohl deinen Webbrowser nutzen als auch auf viele Tools im Internet zurückgreifen. Ich möchte dir hier 3 Methoden vorstellen, die richtig gut sind:

• Webbrowser (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.)
• Google PageSpeed Insights
• GTmetrix

Webbrowser

Die einfachste Methode die Ladezeit deiner Webseiten zu messen ist, deinen Webbrowser zu nutzen. Dies funktioniert mit allen gängigen Webbrowsern, z.B. Google Chrome, Mozilla Firefox, Microsoft Edge.

Dazu öffnest du zuerst die zu messende Webseite in deinem Browser. Anschließend klickst du mit einem Rechtsklick auf die geöffnete Webseite. Dann öffnet sich ein kleines Menüfenster, in dem du den Menüpunkt “Untersuchen” anklickst. Anschließend öffnet sich ein neues Fenster mit den Entwickler Tools (DevTools). Dort wählst du, je nach Browser, den Punkt “Netzwerk” oder “Netzwerkanalyse”. Nun lädst du nur noch die Webseite neu.

In der Auswertung findest du die Ladezeit in einer der unteren Zeilen unter dem Begriff “Beendet” oder “Fertigstellen” (im unten stehenden Bild rot markiert).

Google PageSpeed Insights

Die Google PageSpeed Insights sind ein Online-Tool von Google, mit denen du ohne vorherige Anmeldung und kostenlos den Pagespeed messen kannst. Du musst lediglich die URL der zu messenden Webseite eingeben.

Da das Tool direkt von Google ist und Google die wichtigste Suchmaschine für deine SEO-Maßnahmen ist, ist es auch nicht schlecht zu wissen, wie Google deinen PageSpeed einordnet.

Du erhältst eine Aufstellung der verschiedenen Ladezeiten-Zwischenzeiten in Zeiteinheiten (Sekunden und Millisekunden) jeweils für Desktop und mobile Geräte.
Der Pagespeed wird hier zudem mit einer Gesamt-Punktzahl dargestellt. Zu erzielen sind maximal 100 Punkte.
Daneben wird dir noch eine Liste mit Vorschlägen zur Optimierung der Ladezeit angeboten.

Ein tolles, unkompliziertes und aufschlussreiches Tool!

GTmetrix

GTmetrix ist ein weiteres gutes Tool, um die Performance einzelner Webseiten zu prüfen.

Bei diesem Tool musst du allerdings bedenken, dass die Ladezeit von einem Test-Server in Canada gemessen wird. Somit wird die gemessene Ladezeit immer etwas länger sein als bei einem Aufruf aus Deutschland. Die Messung der Ladezeit von Test-Server aus Deutschland ist nur in den kostenpflichtigen Versionen möglich.

Beachte:
GTmetrix verwendet gegenüber den Google Speed Insights deutlich “strengere” Messwertbereiche. Das bedeutet, dass die für deine Webseite gemessenen Werte deutlich kleiner sein müssen, um noch ein “Gut” zu erhalten. Daher wird die Performance deiner Webseite hier immer etwas schlechter ausfallen als bei den Google Speed Insights.

Ladezeit, Zwischenzeiten & weitere Metriken

Unter Ladezeit (auch Übertragungszeit, Ladegeschwindigkeit) versteht man die Zeit vom Aufruf einer Webseite bis zur komplett gerenderten Darstellung der Webseite. Etabliert hat sich auch der von Google genutzte Begriff “PageSpeed”.

Um die Ladezeit detaillierter untersuchen zu können, hat Google verschiedene Zwischenzeiten innerhalb der Ladezeit eingeführt.

Bei der Bewertung der Ladezeit einer Webseite kann man daher zwischen 4 Zwischenzeiten unterscheiden:

1. Time To First Byte (TTFB)
2. First Contentful Paint (FCP)
3. First Meaningful Paint (FMP)
4. Time To Interactive (TTI)

Der zeitliche Verlauf dieser Ladezeit-Messwerte möchte ich Dir in dem nachfolgenden Bild darstellen.

Daneben gibt es noch weitere Metriken, um die Lade-Performance deiner Website zu messen:

• Total Blocking Time (TBT)
• Speed Index (SI)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)

Nachfolgend möchte ich dir kurz die 4 Zwischenzeiten der Ladezeit und die weiteren Metriken erklären, da du diese auch teilweise in den Speedtest-Tools wiederfinden wirst.

Time To First Byte (TTFB)

Die Time To First Byte (TTFB) kann man auch als Antwortgeschwindigkeit des Servers bezeichnen. Es gibt somit die Latenz (Verzögerung) der Antwort des Webservers wieder.

Dies ist die Zeitdauer, die benötigt wird vom Aufruf der Webseite bis zur ersten Antwort des Webservers, sozusagen, bis das erste Byte übertragen wird.

Hierbei gibt es keine allgemeingültige Messwertbereiche wie bei den anderen Messwerten. Jedoch kann man eine Serverantwortzeit > 600 ms als schlecht einordnen.

Bei höheren Zeitwerten sollte man nach der Ursache suchen und prüfen, ob dies nur ein temporärer Vorfall war oder ob ein dauerhaftes Problem vorliegt. Die Ursache des Problems kannst du nur mit deinem Hosting-Anbieter prüfen.

First Contentful Paint (FCP)

Unter dem First Contentful Paint (FCP) versteht man den Zeitraum bis das erste (primäre) Element einer Webseite geladen und gerendert ist.

Unter dem “Contentful Paint” versteht man entweder reinen Text, ein Bild (inklusive Hintergrundbilder), eine Vektorgrafik oder ein nicht-weißes Canvas-Element. Das Element muss dabei ohne zu Scrollen sichtbar sein. Unerheblich ist dabei, ob der Seitenbesucher dieses Element wahrnimmt oder nicht.

First Meaningful Paint (FMP)

Der First Meaningful Paint (FMP) beschreibt den Zeitpunkt, bei dem der Seitenbesucher den Eindruck hat, dass die aufgerufene Webseite vollständig geladen wurde.

Dazu muss der meiste Inhalt der Webseite für den Seitenbesucher sichtbar sein und keine Layoutverschiebungen dürfen mehr stattfinden. Zudem müssen die genutzten Schriftarten geladen sein.

Time To Interactive (TTI)

Die Time to Interactive (TTI) ist der Zeitpunkt, an dem die Webseite vollständig geladen und gerendert und für eine Eingabe durch den Seitenaufrufer bereit ist.

Diese Metrik wurde eingeführt, da einige Webseiten so optimiert wurden, dass sie sich schnell aufgebaut haben, aber erst sehr verzögert eine Interaktion zugelassen haben. Eine verzögerte Eingabemöglichkeit ist aber kein Zeichen einer guten User Experience.

Weitere Metriken zur Bewertung der Ladezeit-Performance sind:

Total Blocking Time (TBT)

Die Total Blocking Time (TBT) ist die Summe aller Zeiten im Zeitraum zwischen First Contentful Paint (FCP) und Time to Interactive (TTI), in der die Benutzereingabe auf einer Webseite verhindert wird.

Dabei werden nur Blockierungen über 50 ms als Blockierung gezählt. In die TBT werden allerdings nur die Zeiten über den 50 ms als Blockierungszeit gezählt. Dementsprechend werden bei einer Blockierung von 80 ms nur die 30 ms, die über die Mindest-Blockierungszeit von 50 ms hinausgehen, zur TBT hinzugezählt.

Speed Index (SI)

Der Speed Index (SI) (zu Deutsch: Geschwindigkeitsindex) gibt an, wie schnell die kompletten Inhalte einer ladenden Webseite für den Seitenbesucher sichtbar angezeigt werden.

Largest Contentful Paint (LCP)

Der Largest Contentful Paint (LCP) (zu Deutsch in etwa: “Größter inhaltlicher Anstrich”) misst, wie lange es dauert, bis das größte Element (Text oder Bild) der zu ladenden Webseite im Darstellungsbereich vollständig gerendert wurde.

Cumulative Layout Shift (CLS)

Der Cumulative Layout Shift (CLS), zu Deutsch “Kumulative Layoutverschiebung”, ist ein Messwert, der die visuelle Stabilität einer Webseite beschreibt.

Eine Layoutverschiebung ist eine unerwartete Änderung der Position eines Textes, Bildes oder eines anderen Elementes während des Aufbaus einer Webseite. Diese Layoutverschiebungen treten insbesondere beim asynchronen Laden von Seitenelementen. z.B. Bilder, auf.

Diese trüben die Nutzererfahrung und können sogar ungewollte Aktionen auslösen. Layoutverschiebungen sind daher unbedingt zu vermeiden.

Der CLS misst die relative Anzahl und Stärke dieser Layoutverschiebungen.

20 Maßnahmen, um die Ladezeit deiner Website zu reduzieren

Um die Ladezeit einer Website zu reduzieren, kann man verschiedene Maßnahmen durchführen:

1. Schnelles Webhosting nutzen
2. HTTP/2 nutzen
3. Schlankes und schnelles WordPress Theme nutzen
4. Anzahl der Plugins auf das Minimum reduzieren
5. WordPress, Theme und alle Plugins auf dem neuesten Stand halten
6. Websichere Schriftart nutzen oder Webfonts lokal einbinden
7. Bildgrößen anpassen
8. Bild-Dateiformat WebP nutzen
9. Bilder komprimieren
10. Lazy Loading nutzen
11. HTML-, CSS- und JavaScript-Minimierung
12. Kritischen Rendering-Pfad optimieren
13. Externe Skripte reduzieren und optimieren
14. CSS- und JavaScript-Dateien auslagern und optimieren
15. Anzahl der HTTP-Requests reduzieren – Bündelung von Dateien
16. Serverseitiges Page Caching nutzen
17. OPcache nutzen
18. Komprimierung von Dateien
19. Browser Caching nutzen
20. Content Delivery Network nutzen

Alle Methoden sind voneinander unabhängig, können aber nebeneinander angewendet werden. Zudem muss nicht jede Maßnahme auf jede Ressource angewendet werden, sondern kann selektiv genutzt werden. Das bedeutet, man kann auch nur einzelne, z.B. besonders große Dateien optimieren und die anderen so lassen wie sie sind.

Alle diese Optimierungsmaßnahmen lassen die Ladezeit deiner Website schrumpfen und sollten daher genutzt werden.

Jedoch ist dieser Vorteil, wie so häufig, auch nur mit einem Nachteil zu bekommen. So ist es z.B. unheimlich schwierig, in einem reduzierten und gebündelten Code einen Fehler zu suchen. Du solltest daher am besten vor der Optimierung eine Kopie der ursprünglichen Datei abspeichern, damit es später noch möglich ist einen Fehler zu finden und auszumerzen.

1. Maßnahme: Schnelles Webhosting nutzen

Die erste grundlegende Maßnahme, um eine schnelle Ladezeit sicherzustellen ist, ein schnelles Webhosting zu nutzen.

Daher solltest du auf die sehr günstigen Angebote der großen Anbieter verzichten (diese werben meist in Funk & Fernsehen mit den günstigsten Preisen). Diese Server sind meist nicht sehr performant und zudem teilen sich zu viele Webseiten einen einzelnen Server und verhindern so eine gute Leistung abzuliefern.

Du musst aber auch nicht immer den aktuell schnellsten Webhoster nehmen. Auch die Tests der renommierten Zeitschriften küren jedes Jahr einen neuen Spitzenreiter. Und jedes Jahr zu dem aktuell schnellsten Webhoster zu wechseln, macht auch keinen Sinn.

Es genügt normalerweise ein “Shared Server”-Webhosting der renommierten guten und schnellen deutschen Webhoster zu nehmen. Mit den Paketen von All-Inkl* und Webgo* hast du einen sehr performanten Webhoster ausgewählt, den du so schnell nicht an seine Leistungsgrenzen bringst.

Gegenüber dem “Standard”-Webhosting, das Festplatten (HDD=Hard Disk Drive) nutzt, ist ein Webhosting, das SSD (Solid State Drive) nutzt, technologisch gesehen das schnellere Webhosting.

Wenn du die ultimative Performance benötigst oder dir einfach einen zusätzlichen Boost gönnen möchtest, dann kannst du zu einem “Dedicated Server”-Webhosting greifen. Achte dort aber immer auf ein Angebot für einen “Managed Server”, da du ansonsten die Webserver selbst konfigurieren und warten musst.

Ein solches “Managed Dedicated Server”-Paket ist allerdings deutlich teurer und solltest du nur nutzen, wenn du alle anderen Ladezeiten-Optimierungen ausgereizt hast und nicht auf die gewünschten Ladezeiten kommst. Beide zuvor genannten Anbieter bieten dir hierzu auch sehr performante Pakete an.

Beachte am besten die Punkte meiner Checkliste, für einen guten und performanten Webhoster um den für dich in der Gesamtbetrachtung richtigen Anbieter auszuwählen.

Tipp:
Achte immer darauf, dass du einen Anbieter mit Server-Standorten in der EU / EWR nutzt, da du dir ansonsten Probleme mit der Einhaltung der DSGVO einhandeln wirst.

2. Maßnahme: HTTP/2 nutzen

HTTP steht kurz für “Hypertext Transfer Protocol”. Dieses ist das grundlegende Protokoll der sog. Anwendungsschicht für die Datenübertragung im Internet. HTTP ermöglicht somit erst die Kommunikation und Datenübertragung zwischen dem Webserver und dem Webbrowser.

Bei den alten Versionen von HTTP/1 muss für das Herunterladen jeder Datei (Bild-, CSS- oder JavaScript-Datei) immer eine neue TCP/IP Verbindung aufgebaut und wieder geschlossen werden. Dies ist zeitaufwändig und sorgt so natürlich nicht für die besten Ladezeiten.

Mit HTTP/2 hatte diese Praxis ein Ende, denn mit HTTP/2 werden alle Dateien über einen einzigen TCP/IP Verbindungsaufbau übertragen. Zudem wird mit HTTP/2 der Header noch deutlich stärker komprimiert und es lassen sich sie Elemente der Webseite priorisieren, damit wichtige Elemente zuerst übertragen werden können.

Die Nutzung von HTTP/2 setzt allerdings einen kompatiblen Webserver und die Nutzung von SSL voraus. Heutzutage sollte aber keine Webseite mehr ohne SSL-Verbindung betrieben werden und auch ein moderner Anbieter von Webhosting sollte über kompatible Webserver verfügen.

Prüfe sicherheitshalber, ob deine Webserver bereits mit HTTP/2 oder noch mit einer Version von HTTP/1 arbeitet. Dies kannst du mit einem kostenlosen Online-Tool testen, z.B. diesem hier. Bei All-Inkl wird HTTP/2 z.B. ab Apache 2.4 unterstützt. Wenn du noch ein altes Webhosting-Paket nutzen solltest, überprüfst du am besten kurz, ob HTTP/2 aktiviert ist.

Ist dies nicht der Fall musst du aktiv dafür sorgen, dass dein Webhosting auf das neue Protokoll HTTP/2 umgeschaltet wird. Je nach Anbieter kannst du dies auch im technischen Administrationsbereich deines Webhosting-Pakets selbst aktivieren. Geht dies nicht, kontaktierst du am besten deinen Webhoster und lässt die Aktivierung von ihm durchführen.

3. Maßnahme: Schlankes und schnelles WordPress Theme nutzen

Eine weitere grundlegende Basis für eine schnelle Ladezeit deiner Website ist, ein schnelles WordPress Theme zu nutzen.

Ein schnelles Theme hat den Code so optimiert, dass trotz eines teilweise großen Funktionsumfangs noch eine schnelle Ladezeit möglich ist.

Ein sehr schnelles Mehrzweck- / Multipurpose-Theme ist Astra*. Mit der Pro-Version von Astra kannst du zudem auch ohne Pagebuilder enorm viele Design-Ideen umsetzen. Auf diese Weise ersparst du dir die Nutzung eines Ladezeit-raubenden Pagebuilders.

Zudem ist dieses Theme für seinen Funktionsumfang auch sehr leichtgewichtig (> 50 kB Seitengröße). Astra bietet dir daher den besten Mix aus Funktionsumfang und Geschwindigkeit.

Und falls du das Webseiten-Design nicht selbst erstellen möchtest, kannst du auf mehr als 180 Templates zurückgreifen.

Astra ist daher zu Recht das meistgenutzte WordPress-Theme im WordPress-Repository. Mit diesem Theme kannst du definitiv nichts falsch machen.

Willst du eine schnelle Website haben, solltest du möglichst auf einen Pagebuilder verzichten. Selbst der meistgenutzte Pagebuilder Elementor* ist zwar über die Jahre immer schneller geworden, trotzdem wirst du keine 100 Leistungspunkte im Pagespeed erzielen, wenn du ihn nutzt.

Kannst du dein Webdesign nicht ohne Pagebuilder umsetzen, musst du dies berücksichtigen und schauen, dass du alle anderen Punkt zur Ladezeit-Optimierung nutzt, um die bestmögliche Ladezeit herauszuholen.

4. Maßnahme: Anzahl der Plugins auf das Minimum reduzieren

Auch die Anzahl der aktiv genutzten WordPress Plugins hat einen Einfluss auf die Ladezeit. Insbesondere wenn umfangreiche Skripte geladen werden müssen, verlangsamt dies die Ladezeit deiner Website teilweise stark.

Versuche daher so wenig Plugins wie möglich zu nutzen. Oft kann man mehrere Funktionen mit einem einzigen Plugin umsetzen, statt für jede einzelne Funktion ein eigenes Plugin zu nehmen. So ist z.B. in dem Plugin RankMath bereits die Funktion “Redirection” enthalten und du benötigst daher kein eigenes Plugin mehr dafür.

Dieser Ansatz hat zudem den Vorteil, dass du weniger Einfallstore für potenzielle Angriffe “zur Verfügung” stellst. Denn jedes Plugin stellt auch eine potenzielle Sicherheitslücke dar. Daher auch der Rat, jedes nicht genutzte Plugin zu deinstallieren.

5. Maßnahme: WordPress, Theme und alle Plugins auf dem neuesten Stand halten

Jedes Programm (WordPress, Themes und Plugins) schließt mit einem Update nicht nur Sicherheitslücken, sondern setzt auch weitere Optimierungen um. Wenn nicht gleichzeitig der Funktionsumfang erweitert wird, sollten die Optimierungen auch zu einem reibungsfreien Funktionieren des Programms und damit zu einem schnelleren Laden deiner Website verhelfen.

Das regelmäßige Updaten verhilft daher im Allgemeinen dem optimierten Zusammenspiel aller Programme und lässt deine Website damit auch schneller laden. Und auch wenn ein Update mal keine Performance-Verbesserungen zur Folge hat, so werden zumindest Sicherheitslücken geschlossen, daher lohnt sich ein Update dennoch.

6. Maßnahme: Websichere Schriftart nutzen oder Webfonts lokal einbinden

Auf jedem Endgerät (Computer, Tablet, Smartphone, etc.) sind bereits Schriftarten vorinstalliert. Wenn eine Webseite durch den auf diesem Gerät installierten Webbrowser aufgerufen wird, wird die Schriftart vom Webbrowser aus dem eigenen Endgerät genommen, um die Webseite auch in der vordefinierten Schriftart darstellen zu können.

Diese auf allen Endgeräten vorinstallierten Standard-Schriftarten nennt man auch “websichere Schriftarten“, da diese Schriftarten keine Probleme auf Webseiten erzeugen.

Gefallen dir diese Standard-Schriftarten aber nicht und du möchtest eine ganz besondere Schriftart nutzen, dann kannst du auch eine sog. Webfonts-Schrift nutzen.

Webfonts sind Schriftarten, die nicht lokal auf den Endgeräten sind, sondern die online von einem externen Webserver bezogen werden. Der Webbrowser fordert dann diese Schrift, wenn er sie nicht auf dem lokalen Rechner findet, von einem Webserver an, damit die Webseite auch in der vom Webdesigner gewünschten Schriftart dargestellt werden kann.

Die bekanntesten Webfonts sind die Google Fonts. In dieser Schriftarten-Bibliothek findest du über 1400 Schriftarten.

Die Nutzung dieser Schriftarten erfolgt über ein paar Zeilen Code, der in den <head> der HTML-Datei eingesetzt wird. Diese zusätzlichen Zeilen HTML-Code die du einfügen musst, findest du auch direkt in Google Fonts, wenn du die jeweilige Schriftart anklickst. In dem folgenden Screenshot siehst du wie solch ein Code beispielsweise aussieht.

Der Nachteil solcher Webfonts ist aber, dass diese bei jedem Seitenaufruf von einem externen Webserver geladen werden müssen. Dies erfordert einen zusätzlichen DNS-Request und einen TCP/IP-Verbindungsaufbau. Das alles kostet zusätzliche Zeit, die die Ladezeit deiner Webseite belastet.

Um die Ladezeit zu optimieren, solltest du daher diese von dir gewählte Schriftart auf deinen Webserver laden und diese dem aufrufenden Browser direkt mitgeben, damit dieser die Schriftart nicht noch zusätzlich laden muss.

Bei Google Fonts lädst du dazu die Schriftart per Klick auf “Download family” als zip-Datei herunter und bindest diese dann auf deinen Webserver ein. Dazu musst du die CSS-Datei um diese Schriftart erweitern und die entpackte zip-Datei per FTP-Verbindung in einen neuen Ordner für diese Schriftart kopieren. Dabei empfiehlt sich auch die Verwendung eines Child-Themes.

Ich empfehle dir, wenn du unbedingt eine Webfont-Schriftart benutzen möchtest, diese auf jeden Fall lokal auf deinen Webserver einzubinden. Der Grund liegt neben der Ladezeit-Optimierung auch darin, dass bei jedem Abruf der Schriftart von dem Google-Server auch die IP-Adresse deines Seitenbesuchers übermittelt wird und dies sehr problematisch mit der DSGVO ist.

Willst du all diese Probleme umgehen und auch die schnellstmögliche Ladezeit produzieren, dann empfehle ich dir nur die websicheren Standard-Schriftarten zu nutzen. Auf diese Weise hältst du den Code klein und es müssen auch keine weiteren Datenpakete von externen Servern geladen werden.

7. Maßnahme: Bildgrößen anpassen

Die Bilder, die du auf deiner Webseite nutzt, müssen bei jedem Seitenaufruf vom Browser des Seitenbesuchers geladen werden. Und dazu gibt es eine einfache Formel: Je größer die Bild-Datei, desto länger die Ladezeit.

Um die Dateigröße eines Bildes zu reduzieren, passt du die Bilder am besten auf die passende Größe an, in der sie eingesetzt werden sollen. Dazu reduzierst du die Pixelzahl in Höhe und Breite des Bildes. Dies machst du bevor du sie in WordPress hochlädst. Bilder in voller Größe hochzuladen, um sie dann mit den WordPress eigenen Tools in der Größe zu reduzieren, bringt nicht den gewünschten Effekt; denn sie werden trotzdem in voller Dateigröße geladen und dann nur runter-skaliert.

Bilder die über die gesamte Breite (full width) der Webseite genutzt werden sollen, sollten auch nur diese Breite haben. Orientiere dich dabei an der Auflösung eines durchschnittlichen Full-HD-Computer-Monitors mit einer Auflösung von 1920 x 1080 Pixeln. Auf diesem sollte das Bild in der Webseite noch scharf sein, mehr muss nicht sein. Daher brauchen auch seitenfüllende Bilder nicht breiter als 1920 Pixel sein.

Die Bilder, die du im Body (Textinhalt) nutzt, solltest du auch nur in der Größe des jeweiligen zu verwendeten Containers hochladen. Ist der Container, in den das Bild eingesetzt werden soll, z.B. 400 Pixel breit, dann sollte auch das Bild nur eine Breite von 400 Pixel haben.

Die Änderung der Größe von Bildern kannst du z.B. ganz einfach mit dem kostenlosen Fotobearbeitungsprogramm GIMP durchführen.

Weitere Infos findest du in meinem Artikel zu optimalen Bildgrößen.

Die Reduktion der Bildgröße (in Pixel) kann dir enorme Einsparungen für die Gesamtgröße der Webseite bescheren. Insbesondere wenn du viele Bilder auf deiner Webseite nutzt, ist der Unterschied deutlich spürbar. Denn eine Webseite mit kleiner Dateigröße kann auch schneller geladen werden als eine mit großer Dateigröße.

8. Maßnahme: Bild-Dateiformat WebP nutzen

Auch das genutzte Dateiformat der Bilder ist relevant für die Ladezeit.

Benutze NIEMALS die Bilder-Rohformate (z.B. RAW) von Digitalkameras. Diese stehen insbesondere in digitalen Spiegelreflexkameras zur Verfügung. Diese Formate speichern Bilder in unkomprimierten Vollbild-Formaten. Diese sind von der Auflösung und Dateigröße viel zu groß für die Verwendung in einer Webseite.

Nutze daher gängige Formate die Bilder auch komprimiert speichern können, so wie “jpg” und “png“. “gif”-Formate solltest du aber nicht mehr für Bilder nutzen, höchstens für Animationen, da jpg und png keine Animationen darstellen können.

Noch besser ist es gleich das neue Format “WebP” zu nutzen. Dieses erreicht nochmals bis zu 40 % kleinere Dateigrößen gegenüber jpg. Es gibt daneben zwar noch weitere neue Dateiformate, aber WebP ist das Format, dass mittlerweile von den meisten Browsern dargestellt werden kann. Zur Not, um ganz sicher zu gehen, kannst du auch noch eine Fallback-Option auf das jpg-Bild implementieren, damit auch Browser die kein WebP darstellen können (insb. ältere Versionen von Safari), die Webseite vollständig darstellen können.

Dazu speicherst du ganz einfach die vorliegenden jpeg- oder png-Bilder in dem neuen Format WebP ab. Dies kannst du z.B. mit dem kostenlosen Fotobearbeitungsprogramm GIMP. Dieses Programm kann Bilder im WebP-Format speichern und auch öffnen.

Beachte:
Nicht jedes Programm kann das WebP-Format darstellen, insbesondere Nicht-Foto-Programme wie Textverarbeitungsprogramme. Wenn du z.B. ein WebP-Bild in einem Textverarbeitungsprogramm wie Word einbetten möchtest, wirst du feststellen, dass dieses nicht sichtbar dargestellt wird. Diese Programme können das Format (noch) nicht darstellen.

Alles über die verschiedenen Dateiformate für Rastergrafiken und auch Vektorgrafiken findest du in meinen Artikeln zu den optimalen Bildformaten.

9. Maßnahme: Bilder komprimieren

Die Bilder, die du in deiner Webseite nutzen möchtest, solltest du, nachdem du sie zugeschnitten und im WebP-Format gespeichert hast, auch noch komprimieren. Das Komprimieren ändert nicht mehr die Auflösung oder Bildgröße, sondern nur die Dateigröße, die für das Speichern des Bildes benötigt wird. Eine zu starke Komprimierung kann das Foto aber unscharf werden lassen, daher darf man es mit der Komprimierung auch nicht übertreiben.

Alle deine Bilder kannst du relativ einfach mit dem kostenlosen Programm GIMP skalieren, zuschneiden, in das passende Dateiformat exportieren und komprimieren. Damit hast du gleich eine All-in-One-Lösung für die Optimierung deiner Bilder. Alternativ kannst du natürlich auch eines der zahlreichen Online-Tools nutzen, um deine Bilder zu komprimieren.

Die Komprimierung erfolgt bei GIMP während des Speichervorgangs des Bildes. Während des Speichervorgangs hast du auch die Möglichkeit die “Stärke” der Komprimierung zu bestimmen, meist zwischen 10 und 100. Bei GIMP sieht dies dann folgendermaßen aus:

Wie stark ein Bild komprimiert werden kann, ohne das es deutlich sichtbare Verluste gibt, musst du ein wenig durch ausprobieren herausfinden. Auch die Farbgebung und der Kontrast spielen eine Rolle. So kann es z.B. Verwischungen bei schwarzer Schrift auf rotem Hintergrund geben, wenn du ein solches Bild komprimierst (aus diesem Grund verwende ich in meinen obigen Tabellen auch ausnahmsweise das png-Formt und nicht WebP).

Am besten entfernst du auch zugleich noch die Meta-Daten (Exif- und XMP-Daten) indem du die entsprechenden Häkchen entfernst. So wird die Datei noch kleiner.

Und für das nachträgliche Optimieren deiner bereits auf der Website genutzten Bilder kannst du das multifunktionale WordPress-Plugin “EWWW Image Optimizer” nutzen. So brauchst du nicht nachträglich alle Bilder nochmal einzeln modifizieren.

10. Maßnahme: Lazy Loading nutzen

Wenn eine Webseite geladen wird, dann werden auch direkt alle Bilder der gesamten Webseite mit geladen.

Ist die Webseite sehr lang, werden somit auch die Bilder geladen, die der Seitenbesucher in seinem Browser-Fenster noch gar nicht zu sehen bekommt. Erst wenn er herunter scrollt, kommen die Bilder nacheinander in den Sichtbereich.

Alles das was im Sichtbereich einer Webseite ist, nennt man “above the fold”. Alles darunter, dass man erst durch herunter scrollen zu sehen bekommt, nennt man “below the fold”.

Für das initiale Laden einer Webseite ist es somit nicht erforderlich, dass direkt alle Bilder “below the fold” mit geladen werden.

Um dies zu vermeiden, und somit Ladezeit einzusparen, solltest du ein nachträgliches Laden der Bilder “below the fold” nutzen. Dieses nachträgliche Laden der Bilder nennt man “Lazy Loading“.

Beim Lazy Loading wird dem Browser vorab von jedem Bild die Werte „Width“ (Breite) und „Heigth“ (Höhe) mitgeben, damit der Browser diesen Platz beim Laden der Seite bereits durch einen Platzhalter frei hält. Das hat den Vorteil, dass das Layout deiner Webseite dann keine Layout-Verschiebungen mehr erfährt, wenn die Bilder nachträglich geladen und in die Webseite eingefügt werden. Denn Layout-Verschiebungen werden von Google gemessen und beeinflussen dein Ranking auf negative Weise.

Lazy Loading kannst du quasi “per Knopfdruck” mit einem reinen LazyLoad-Plugin, mit dem multifunktionalen WordPress-Plugin “EWWW Image Optimizer” oder einem Ladezeiten-Optimierungs-Plugin umsetzen.

Auch ein Seitenbesucher empfindet eine Webseite mit Lazy Loading subjektiv als schneller, da beim normalen Laden nicht unbedingt die Bilder “above the fold” als erstes geladen werden, so wie dies beim Lazy Loading der Fall ist. Und dies empfindet er sogar, wenn es gar keine spürbare Zeiteinsparung gibt.

Somit hast du einen doppelten Effekt, eine schnellere technische Ladezeit und eine schnellere wahrgenommene Ladezeit des Users. Auch nur kleine Verbesserungen der technischen Ladezeit wirken beim User trotzdem wie eine deutliche Verkürzung der Ladezeit. Dies steigert das Nutzererlebnis und damit auch das Ranking.

Ob Lazy Loading aktiviert ist und auch funktioniert, kannst du mit den Google PageSpeed Insights überprüfen. Wenn es aktiviert ist, dann steht das folgende Fenster unter dem Punkt “Bestandene Prüfungen”.

Funktioniert es nicht richtig, dann findest du diesen Punkt unter den “Empfehlungen”.

In den Ergebnis-Listen der Google PageSpeed Insights findest du auch noch weitere Prüfungen zum Lazy Loading, z.B. auch, ob die Bilder dem Browser die Bild-Abmessungen vorab übermitteln.

11. Maßnahme: HTML-, CSS- und JavaScript-Minimierung

Ein Programm wird optimalerweise so geschrieben, dass der Code übersichtlich und verständlich ist. Dazu werden in den Code Zeilenumbrüche eingefügt, die verschiedenen funktionalen Ebenen visuell eingerückt (Zeilenvorschub) und auch möglichst viel kommentiert. Das hat den Vorteil, dass jeder Programmierer den Code leichter verstehen, diesen an den richtigen Stellen modifizieren und auch leichter Fehler suchen kann.

Für die Übertragung des Codes an den Webbrowser bedeuten diese zusätzlichen Zeichen aber gleichzeitig mehr Daten die zu übertragen sind und damit mehr Traffic. Und dies schlägt sich natürlich auch auf die Ladezeit einer Webseite nieder.

Als Code-Minimierung (auch Minification, Minify, Minifizierung genannt) bezeichnet man die Verkleinerung des zugrundeliegenden Codes einer einzelnen Ressource. Dies sorgt für eine Reduktion der Dateigröße. Dabei werden aber nur Dinge entfernt, die nicht elementar wichtig für die Funktion des Codes sind, sondern nur der besseren Lesbarkeit des Codes dienen. Diese Maßnahme lässt sich bei jeder textbasierten Ressource durchführen.

Grundsätzlich kannst du somit den HTML-, CSS- und JavaScript-Code minimieren. Den größten Effekt hat aber die Minimierung des CSS- und JavaScript-Code.

Die Code-Minimierung erreicht man grundsätzlich durch folgende Modifikationen innerhalb des Codes:

• Keine CSS-Styles im HTML-Dokument nutzen (außer Critical CSS)
• Kürzen von Bezeichnern (Identifier) möglichst auf ein Zeichen
• Verwenden von Aliassen für Funktionen
• alle Zeilenumbrüche entfernen
• alle Leerzeichen, Leerzeilen, Tabulatoren entfernen
• alle Kommentierungen des Codes entfernen

Zusätzlich kannst du das CSS noch durch folgende zusätzliche Methoden minimieren:

• die Kurzschreibweise des CSS nutzen
• nicht genutzte und doppelte Klassen entfernen
• CSS Image Sprites nutzen

Daneben sollten wichtige Inhalte und Platzreservierungen für die Bilder ganz oben im Code platziert werden. So werden sie zuerst geladen und damit ein besseres Nutzererlebnis erzeugt, da gefühlt die Seite schneller aufgebaut wird.

Man könnte jetzt natürlich theoretisch all diese Dinge manuell im Code umsetzen. Dies ist aber extrem zeitaufwändig und zudem auch fehleranfällig.

Daher sollte man diese Modifikationen am besten von einem Tool automatisiert durchführen lassen. Dies kann z.B. das kostenlose WordPress-Plugin “Autoptimize”.

Dieses Tool findest du übrigens auch in meinem Beitrag zu den >must have< WordPress-Plugins.

Autoptimize ist ein sehr beliebtes Tool, da es einen sehr guten Job macht, einfach zu bedienen ist und zudem komplett kostenlos ist. Es ist meiner Meinung nach das beste kostenlose Optimierungstool und daher ein “must have”.

12. Maßnahme: Kritischen Rendering-Pfad optimieren

Der kritische Rendering-Pfad (Critical Rendering Path) ist die Reihenfolge der Aktionen (HTML, CSS, JavaScript) die der Browser ausführen muss, um die Webseite darstellen zu können.

Diesen Rendering-Pfad kann man so optimieren, dass er das Ladeverhalten verbessert. Dazu muss man wissen, dass der Webbrowser das Rendern der Webseite so lange nicht beginnt, wie noch Elemente aus dem <head>-Bereich der HTML-Datei geladen werden müssen. Dieses Verhalten wird daher auch “Render-Blocking” genannt.

Um den Head-Bereich der Datei möglichst schnell abzuarbeiten und das Rendering möglichst schnell zu starten, müssen dementsprechend die auszuführenden Elemente im <head> klein gehalten werden.

Das bedeutet, dass man die ressourcenintensiven JavaScript-Dateien ans Ende der HTML-Datei platzieren sollte. Auf diese Weise stellt man sicher, dass der Browser früher mit dem Rendern beginnen kann.

Und für das CSS gilt, dass man nur die unbedingt notwendigen CSS-Dateien, das sog. Critical CSS, in den Head-Bereich platziert, damit die Webseite auch schon frühzeitig dargestellt werden kann. Wenn das CSS in den Head-Bereich integriert wird, spricht man auch von Inline CSS.

Das “Critical CSS” umfasst die Dateien, die für die Darstellung der Webseite “above the fold” notwendig sind. Above the fold ist alles das, was zu sehen ist, ohne dass der Seitenbesucher scrollen muss. Alles was “Below the fold” dargestellt wird kann erst nachträglich geladen werden. So kann die Ladezeit nochmals etwas optimiert werden.

13. Maßnahme: Externe Skripte reduzieren und optimieren

Hast du externe Skripte (Third Party Scripts) wie Share-Buttons, Tracking-Codes von Google Analytics, Google Adsense oder Maps in deine Webseite eingebunden, dann hängt die Ladezeit deiner Webseite davon ab, wie schnell diese Skripte von dem Webserver des Anbieters abgerufen werden können. Ist dieser Webserver langsam, dann wird das Laden deiner Webseite auch verzögert.

Versuche daher alle externen Skripte, die nicht unbedingt notwendig sind, zu entfernen.

Und die externen Skripte, die unbedingt benötigt werden, solltest du dann aber zumindest asynchron laden. Durch das asynchrone Laden dieser Skripte werden diese erst geladen, wenn die Seite schon gerendert wurde.

Externe Skripte müssen zudem unbedingt alle über eine sichere https-Verbindung geladen werden. Wird deine Webseite über eine sichere https-Verbindung geladen und die externen Skripte über eine unsichere http-Verbindung, dann wird deine Webseite mit einem “mixed content” (Gemischter Inhalt) getagt. Ist dies der Fall, bekommt der Seitenbesucher von seinem Browser eine Warnmeldung und rät von dem Besuch deiner “unsicheren” Webseite ab.

Alternativ, wenn dies möglich ist, kannst du diese Skripte auch auf deinem Webserver hinterlegen, damit sie gar nicht erst von extern geladen werden müssen.

14. Maßnahme: CSS- und JavaScript-Dateien auslagern und optimieren

In dem Head der HTML-Datei sollte man nur das Critical CSS und JavaScript einbringen. Alle anderen CSS- und JavaScript-Dateien sollten ausgelagert werden, da die Style-Befehle und Skripte viel Ladezeit benötigen. Die ausgelagerten Dateien können dann vom Browser heruntergeladen und für alle weiteren Webseiten genutzt werden. Dies macht den eigentlichen Quellcode schlanker und erleichtert zudem auch die Pflege der einzelnen Dateien (HTML und CSS).

Zusätzliche Zeitersparnis erzielt man dann noch durch das Komprimieren der ausgelagerten Dateien. Zudem sollte das ausgelagerte CSS und JavaScript asynchron geladen werden.

Sowohl CSS als auch JavaScript lassen sich sehr einfach und wirksam mit dem kostenlosen WordPress-Plugin “Autoptimize” optimieren. Im folgenden Screenshot siehst du einen Teil der Einstellungen von “Autoptimize”.

Nachfolgend noch einige Tipps, wie du die CSS-Datei weiter optimieren kannst:

Nutze CSS-Image-Sprites, wenn du viele kleinere Bilder und Symbole verwendest. Dies sind Grafikdateien, die mehrere Bilder, Symbole und/oder Icons zusammenfassen. Die einzelnen Elemente des CSS-Sprites kann man mithilfe von CSS-Befehlen selektiv ein- und ausblenden. Dies hat zur Folge, dass Bilder, die in Image-Sprites zusammengefasst werden, nur als eine Datei geladen werden müssen und nicht als viele einzelne Dateien, für die jeweils eine eigene Serveranfrage getätigt werden muss.

Durch die Verwendung von IDs, die den Bereich der HTML-Datei kennzeichnen auf den zugegriffen werden soll, kann man die Dateien verringern. Innerhalb der IDs kann zudem mit Tags gearbeitet werden. Für wiederkehrende CSS-Anwendungen können zudem Klassen statt IDs vergeben werden.

Auf die Einbettung von Flash-Inhalten solltest du ganz verzichten. Flash-Elemente benötigen eine lange Ladezeit. Zudem wird Flash von vielen Browsern nicht mehr unterstützt oder sogar geblockt.

15. Maßnahme: Anzahl der HTTP-Requests reduzieren – Bündelung von Dateien

Per HTTP-Request werden die Daten einer Webseite vom Client (Browser) beim Webserver angefordert.

Die Anzahl der HTTP-Requests für das Laden deiner Webseite kannst du mit den gängigen Webbrowsern folgendermaßen einsehen:

• Rechtsklick auf die geöffnete Webseite
• Im sich öffnenden Fenster je nach Browser auf „Untersuchen“ oder „Element untersuchen“ klicken
• Dann öffnet sich ein Fenster am unteren Rand des Browserfensters. Dort klickst du auf „Netzwerkanalyse“
• Nun nochmal die „Aktuelle Seite neu laden“, durch Klick des Buttons in der Browsersteuerung oder des Buttons in der Netzwerkanalyse
• Ganz unten in der Zeile siehst du nun die Gesamt-Anzahl der Anfragen, die für das Laden der Webseite durch den Browser getätigt werden müssen

In der Netzwerkanalyse kannst du nun durch einen Klick auf den entsprechenden Request ein neues Fenster öffnen, mit Infos zu jedem einzelnen HTTP-Request. Du findest dort viele detaillierte Infos, z.B. Infos zum Status-Code, der Ladezeit, der Dateigröße und ganz viele weitere Infos.

Müssen viele Daten übertragen werden, z.B. CSS-Styles, Scripts oder Bilder, werden ebenfalls viele HTTP-Requests benötigt, denn jede Datei muss mit einem Request angefragt und übertragen werden. Dies sorgt dann für eine lange Ladezeit der betreffenden Webseite.

Das hat den einfachen Grund darin, dass die meisten Webbrowser nur 6 gleichzeitige Verbindungen pro Hostname zulassen. Das wiederum hat zur Folge, dass, wenn es mehr als 6 Anforderungen gibt, die darüber hinausgehenden Anforderungen erst in eine Warteschlange geschickt werden. Und dies verzögert dann das Laden deiner Website.

Um die Ladezeit zu reduzieren, sollte daher die Anzahl der HTTP-Requests für das vollständige Laden der Webseite auf ein Minimum reduziert werden. Und die Reduzierung der HTTP-Requests kannst du durch die Bündelung der entsprechenden Dateien erreichen.

Bei der Bündelung fasst man mehrere Dateien in eine einzige Datei zusammen, die dann nur einmal per HTTP-Request vom Browser aufgerufen werden muss. Die Bündelung ist besonders effektiv, wenn mehrere CSS- oder JavaScript-Dateien angefordert werden müssen, um die Webseite darstellen zu können.

Die Bündelung hat somit den Vorteil, dass der Browser, statt vieler einzelner Dateien, nur eine Datei per HTTP-Anforderung anfordern muss und der Server auch nur eine Datei übertragen muss. Dies reduziert die Ladezeit deiner Webseite.

Die Bündelung solcher Dateien kann ebenso durch das WordPress-Plugin “Autoptimize” durchgeführt werden.

16. Maßnahme: Serverseitiges Page Caching nutzen

Wenn eine deiner Webseiten durch einen Browser aufgerufen wird, so muss diese Webseite erst “zusammengebaut” werden, insbesondere die Inhalte aus der Datenbank “zusammengesammelt” werden. Dies benötigt Zeit, was wiederum die Ladezeit deiner Webseite verlängert.

Um dies zu vermeiden, kann man die Webseiten vor dem Aufruf “cachen”. Durch das Cachen werden die Webseiten erstellt und als statische HTML-Webseite abgespeichert.

Erfolgt nun ein Aufruf der Webseite, so muss nur noch die statische HTML-Datei versendet werden. Dies spart enorm viel Zeit und reduziert die Ladezeit nochmal deutlich.

Damit deine Webseiten gecacht werden, musst du einen entsprechenden Passus in die .htaccess-Datei einfügen. Einfacher ist es stattdessen ein WordPress-Plugin zu nutzen, dass die htaccess sozusagen per Knopfdruck anpasst. Gut geeignet dafür ist z.B. “WP Fastest Cache”.

Mit diesem Plugin kannst du auch nach einer Änderung eines Beitrags den Cache manuell oder automatisiert löschen, damit immer die aktuellste Version des Beitrags an den Webbrowser ausgeliefert wird.

17. Maßnahme: OPcache nutzen

OPcache ist ein Cache-System für PHP-Code. Es ist Bestandteil des PHP Cores ab Version 5.5.0.

PHP-Code wird normalerweise erst kompiliert (grob gesagt, für den Computer ausführbar gemacht) wenn eine Webseite aufgerufen wird. Dies erfolgt bei jedem Aufruf einer Webseite erneut und kostet so Ladezeit.

Durch OPcache wird der PHP-Code bereits vorkompiliert, so dass er direkt ausgeführt werden kann und nicht erst kompiliert werden muss. Dieser vorkompilierte Code wird dann im Arbeitsspeicher oder auf der Festplatte/SSD des Webservers gespeichert. Auch dies sorgt für eine schnellere Ladezeit.

Bei All-Inkl* ist OPcache nur für die Tarife “Premium” und “Business” erhältlich, die auch beide auf SSD-Servern basieren. Laut Aussage (Stand Juni 2022) von All-Inkl ist in diesen beiden Tarifen OPcache standardmäßig aktiviert. Es muss somit in diesen Tarifen nichts weiter unternommen werden, um OPcache nutzen zu können.

Bei Webgo* ist es standardmäßig nicht aktiviert, man kann aber selbst durch eine Änderung an der Datei PHP.in umsetzen. Wie dies geht, findest du hier.

Ist in deinem Tarif kein OPcache enthalten, dann musst du den Hosting-Tarif wechseln, wenn du diese Technologie unbedingt nutzen möchtest. Ein Wechsel lohnt sich aber nur für richtig große Websites, da dann erst der eine spürbare Verbesserung eintritt.

18. Maßnahme: Komprimierung von Dateien

Neben der Minimierung des Codes und der Bündelung der Dateien kann man auch noch den Code komprimieren, bevor er zum Webbrowser übertragen wird. Die Übertragung der kleineren Datenpakete reduziert ebenfalls die Ladezeit.

Diese Komprimierung erfolgt auf deinem Webserver und die Dekomprimierung auf dem Endgerät, auf dem der Webbrowser läuft. Auch wenn die Komprimierung und anschließende Dekomprimierung sowohl auf deinem Webserver als auch auf dem Endgerät des Seitenbesuchers Ressourcen und Zeit benötigt, so ist der Vorteil der schnelleren Datenübertragung fast immer gegeben. Dies gilt insbesondere für Mobilgeräte, da die Bandbreite der Mobilfunkverbindung meist geringer ist.

Das meistgenutzte Komprimierungsverfahren ist das ZIP-Verfahren. Bei Webseiten wird GZip (GNU Zip) genutzt.

Bei der Komprimierung von Dateien werden sich wiederholende (redundante) Zeichen entfernt und durch eine Kodierung ersetzt, um die Dateigröße auf ein Minimum zu reduzieren. Der Webbrowser kann diese Kodierung wieder dekodieren und den Code so wieder auf den vollständigen Ursprungscode umwandeln.

Die größte Komprimierung kann bei textbasierten Ressourcen erzielt werden. Bei rein textbasierten Dateien sind Komprimierungsraten bis zu 90 % möglich. Somit wäre dann die Datei auf 10 % ihrer ursprünglichen Größe geschrumpft. Im Durchschnitt sind aber Verkleinerungen um die 75 % die Regel.

Die Anforderung der komprimierten Webseite muss allerdings durch den Browser erfolgen. Heutzutage machen aber fast alle Browser dies standardmäßig. Die Komprimierung der Daten findet daher heutzutage bei fast allen Datenübertragungen statt. Dadurch wird die Bandbreite der Datenübertragung geschont und die Ladezeit der Webseite verringert.

Allerdings muss der Webserver auch diese Anforderung beantworten können. Prüfe daher, ob dein Webhosting-Paket das Komprimierungsverfahren auf deinem Webserver nutzt. Ist dies nicht standardmäßig aktiviert, musst du es aktiv schalten (lassen).

Um es dann für deine Website zu nutzen kannst du entweder manuell die .htaccess-Datei anpassen oder es deutlich einfacher per Plugin, z.B. per Plugin “WP Fastest Cache” aktivieren. Dort unter “Einstellungen” findest du es unter dem Punkt “Gzip”. Im folgenden Screenshot siehst du, wo du in den Einstellungen des Plugins die GZip-Komprimierung aktivieren kannst (rot umrandet).

19. Maßnahme: Browser Caching nutzen

Neben dem serverseitigen Caching solltest du auch das browserseitige Caching nutzen.

Beim Browser Caching werden die Elemente der Webseite nicht auf deinem Webserver, sondern beim Seitenbesucher in dessen Webbrowser (Client) abgespeichert. Diese Elemente werden in einer Datei des Webbrowsers gespeichert, die somit physikalisch auf der Festplatte des Computers deines Seitenbesuchers liegt.

Wird eine Internetseite vom Seitenbesucher erstmals abgerufen, werden Bilder und andere Dateien im Cache des Browsers (Clients) zwischengespeichert. Wird dann die Webseite vom gleichen Seitenbesucher nochmal aufgerufen, werden diese Dateien aus dem Browser-Cache geladen statt erneut vom Webserver.

Browser Caching spielt seine Vorteile allerdings nur aus, wenn ein Seitenbesucher mehrere deiner Webseiten aufruft oder wiederkehrt. Denn es werden grundsätzlich nur statische Elemente im Browser-Cache gespeichert, die auf mehreren deiner Webseiten genutzt werden. Dabei handelt es sich um die statischen Elemente wie Layouts (CSS), Bilder, Login-Name, PDF-Formulare, Cookies, etc. Diese Elemente müssen dann nicht erneut geladen werden, was zu einer kürzeren Ladezeit bei den nachfolgenden Webseiten führt.

Der Browser prüft dann bei jeder Anfrage nur kurz, ob sich die Dateien der Webseite seit dem letzten Aufruf geändert haben. Ist dies nicht der Fall (HTML-Code 304) nimmt er die Dateien aus dem Browser-Cache. Haben sie sich geändert (HTML-Code 200), lädt er die entsprechende Datei neu.

Keine Vorteile gibt es, wenn der Seitenbesucher oder der Browser den Cache (automatisiert) löscht, dann muss der Inhalt auch wieder erneut geladen werden. In diesem Fall wird die Ladezeit dann nicht verkürzt.

Browser Caching muss entweder manuell per Eintrag in der .htaccess-Datei oder per WordPress-Plugin aktiviert werden. Als Plugin kannst du auch das bereits empfohlene multifunktionale Plugin “WP Fastest Cache” dazu nutzen.

Ob dein Browser Caching auch funktioniert, kannst du ganz einfach mit den Google PageSpeed Insights prüfen. Ist es aktiviert, siehst du unter “Bestandene Prüfungen” folgenden Punkt grün markiert, so wie in dem folgenden Screenshot.

20. Maßnahme: Content Delivery Network nutzen

Hat deine Website viele große Bilder und Videos, die du auch per Optimierung und Komprimierung nicht richtig klein bekommst, dann hilft dir ein Content Delivery Network, kurz CDN. Auch wenn deine Website weltweit aufgerufen werden soll, dann kann dir ein CDN Ladezeit-Vorteile bringen.

Bei einem CDN werden viele Teile deiner Website auf mehrere externe Server geladen. Ruft ein Seitenbesucher eine deiner Webseiten auf, dann werden diese Elemente auch von einem der externen Server abgerufen, der sich in der Nähe des Standorts des Seitenbesuchers befindet.

So belastest du deine eigene Server-Performance weniger und stellst über das CDN auch die “schweren” Dateien schneller zu. Auch Lastspitzen deines eigenen Webservers kannst du damit abfedern.

Möchtest du ein CDN für Seitenbesucher innerhalb der EU nutzen, solltest du sicherstellen, dass alle CDN-Server sich auch nur in der EU / EWR befinden, da du ansonsten gegen die DSGVO verstoßen würdest.

Hinweis zur Werbung: 
Links die mit einem * gekennzeichnet sind, sind Partnerprogramm/Affiliate-Links. Kaufst du über diesen Link ein, erhalte ich eine kleine Provision. Der Preis für dich ändert sich nicht! Wenn dir mein Beitrag gefallen und hoffentlich sogar geholfen hat, würde ich mich freuen, wenn du mich auf diesem Wege unterstützt. Vielen Dank!

FAQ – Häufig gestellte Fragen & Antworten