PageSpeed Optimierung – WordPress – XXL Guide für bessere Ladezeiten

PageSpeed Optimierung Header
[wgl_spacing spacer_size=“30px“]

Was ist PageSpeed Optimierung?

Kurz und knapp: Bei der PageSpeed Optimierung geht es darum, die Ladezeit einer Webseite zu verbessern.

[wgl_spacing spacer_size=“30px“]

Warum die PageSpeed Optimierung so wichtig ist

1. Bessere User Experience

Eine schnelle Seitenladezeit sorgt für eine bessere Nutzererfahrung (User Experience) von Besuchern mit Ihrer Webseite. Das reduziert die Absprungrate und vermeidet damit natürlich auch Umsatzeinbußen.

Tatsächlich verlieren Sie mehr als die Hälfte des Umsatzpotentials, wenn Ihre Webseite oder Ihr Onlineshop länger als drei Sekunden zum Laden benötigt. Denn laut einer Studie von KISSmetrics verlassen 40% der Besucher eine Webseite, wenn sie länger als drei Sekunden warten müssen. Die Zahl der Seitenabbrüche steigt dabei exponentiell zur Ladezeit an.

Auf mobilen Endgeräten sind Nutzer zwar insgesamt etwas geduldiger, doch auch hier geben die meisten an, eine Webseite nach etwa 6-10 Sekunden Wartezeit vorzeitig wieder zu verlassen.

[wgl_spacing spacer_size=“30px“]

2. Vorfahrt bei Google

Auch für Google ist der PageSpeed ein wichtiges Qualitätskriterium einer Webseite. Denn wenn viele Nutzer nach dem Klick auf ein Suchergebnis schon nach wenigen Sekunden wieder zur Suche zurückkehren, folgert Google daraus, dass die entsprechende Seite das Bedürfnis des Nutzers nicht erfüllen konnte. Kommt dies häufiger vor, sinkt die Relevanz der Webseite, was letztendlich zu einem Rankingverlust führt.

So erklärte der Suchmaschinenriese die Ladezeit einer Webseite bereits im April 2010 offiziell als Rankingfaktor:

[wgl_spacing spacer_size=“30px“]

[wgl_spacing spacer_size=“30px“]

Dies betraf hauptsächlich die Ladezeit einer Webseite auf Desktop PCs.

Durch die vermehrte mobile Internetnutzung, weitete Google im Juli 2018 schlussendlich den PageSpeed als Rankingfaktor offiziell auch auf die mobile Suche aus.

[wgl_spacing spacer_size=“30px“]
Tipp Icon

Vorteile der PageSpeed Optimierung im Überblick

  • Geringere Absprungrate
  • Zufriedenere Besucher
  • Mehr einzelne Seitenaufrufe pro Besucher
  • Mehr wiederkehrende Kunden und Stammleser
  • Verbesserte Conversion Rate und dadurch höhere Umsätze
  • Besseres Ranking bei Google
[wgl_spacing spacer_size=“30px“]

Wie kann ich die Ladezeit meiner Webseite messen?

Google selbst bietet Nutzern mit Google PageSpeed Insights ein kostenloses Tool, mit welchem sie die Ladezeit ihrer Webseite sowohl auf mobilen Geräten, als auch auf Desktop Anwendungen messen können.

Neben der Auswertung der Performance mit 100 als maximaler Punktzahl, listet Google hier zudem Maßnahmen auf, welche zur Verbesserung des PageSpeeds umgesetzt werden sollten.

Um Ihre Punktzahl zu ermitteln, tragen Sie einfach Ihre URL in das dafür vorgegebene Feld des Tools ein und klicken Sie anschließend auf „Analysieren„:

 

 

 

Nach wenigen Sekunden erhalten Sie Ihr Ergebnis:

 

 

Oben links können Sie dabei zwischen den beiden Reitern „Mobil“ und „Desktop“ wählen. Die Punktzahl und die Maßnahmen werden für beide Darstellungen individuell berechnet und ausgegeben. Bei der PageSpeed Optimierung sollten daher stets beide Ausrichtungen berücksichtigt werden. Die PageSpeed Optimierung für mobile Endgeräte kann andere Maßnahmen erfordern, als die Optimierung für Desktop PCs.

Um zu den Empfehlungen zu gelangen, scrollen Sie weiter nach unten:

 

Es macht nichts, wenn die Empfehlungen für Sie zunächst böhmische Dörfer sind. Selbst langjährig erfahrene Webentwickler und SEO Gurus stoßen bei dieser Aufschlüsselung oftmals an ihre Grenzen.

Deswegen möchten wir Sie in diesem Artikel Schritt für Schritt durch einzelne Optimierungsmaßnahmen führen und Ihnen deren Bedeutung näher bringen.

Wer gut englisch kann, kann sich natürlich auch gerne Google’s Vortrag zur Verwendung des PageSpeed Tools bei YouTube ansehen:

[wgl_spacing spacer_size=“30px“]

[wgl_spacing spacer_size=“30px“]

100 / 100 – ist die volle Punktzahl überhaupt erstrebenswert?

[wgl_spacing spacer_size=“30px“]

Das Google PageSpeed Insights Tool bringt Webseitenbetreiber ziemlich oft an den Rand der Verzweiflung. Denn die volle Punktzahl von 100 zu erreichen scheint oftmals schier unmöglich. Auch wenn man sich gefühlt Arme und Beine ausreißt, die Messwerte wollen einfach nicht in die Nähe der 100 klettern.

Dabei ist es tatsächlich unerheblich, ob eine Webseite nun 85 oder 100 Punkte erreicht. Zumindest in Bezug auf den mobilen PageSpeed ist laut Google Mitarbeiter Gary Illyes eine Punktzahl von 85 vollkommen ausreichend, wie er in folgendem Video bemerkt:

[wgl_spacing spacer_size=“30px“]

[wgl_spacing spacer_size=“30px“]

Natürlich sind die von PageSpeed Insights vorgeschlagenen Maßnahmen eine tolle Hilfestellung, um das Beste aus der Ladezeit herauszuholen. Es ist durchaus sinnvoll, diesen nachzugehen.

Letztendlich kommt es aber nicht darauf an, ob Sie bei PageSpeed Insights nun die volle Punktzahl erreichen, sondern ob Besucher die Webseite als schnell empfinden.

[wgl_spacing spacer_size=“30px“]

Doch was bedeutet „schnell“ überhaupt aus Sicht des Nutzers?

In Wahrheit ist „schnell“ ein ziemlich relativer Ausdruck, der von verschiedenen Faktoren wie dem Endgerät oder der Internetverbindung abhängt.

Im offiziellen Google Guide spricht Mitarbeiter Philip Walton darüber, welche Metriken für Nutzer bei der subjektiven Beurteilung der Ladezeit eine Rolle spielen.

Die Performance einer Webseite wird meistens daran gemessen, wie lange diese benötigt, bis die Inhalte vollständig geladen sind.

Idealerweise sind die wesentlichen Elemente einer Webseite für den Besucher aber bereits sichtbar, während die restlichen, nicht sichtbaren, Inhalte noch im Hintergrund laden. So kann er mit der Webseite bereits interagieren, auch wenn diese in Wahrheit noch gar nicht vollständig aufgebaut ist. Der Besucher nimmt die Seite so dennoch als schnell wahr.

Laut Philip Walton beurteilen User die Ladezeit einer Webseite unbewusst nach folgenden Kriterien:

[wgl_spacing spacer_size=“30px“]

Sobald Besucher eine Webseite betreten, erwarten sie zunächst, dass sich überhaupt etwas tut. Dass zum Beispiel die Navigation erscheint oder Farben, Texte oder Bilder angezeigt werden.

Auf der nächsten Stufe erwarten Nutzer, dass sie bereits brauchbare Inhalte zu sehen bekommen. Daher sollten wichtige Elemente einer Webseite „Above the fold“ – also im sichtbaren Bereich des Nutzers – stets zuerst geladen werden. So kann er sich bereits in diesem Bereich nützliche Informationen beschaffen und bekommt gar nicht mit, dass eher unwichtige Inhalte sich im Hintergrund noch nach und nach aufbauen.

Auf der Stufe „Time to Interactive“ erwarten User nun, dass die Seite nicht nur visuell sichtbar ist, sondern dass sie auch bereit für Nutzerinteraktionen ist, wie zum Beispiel dem Klick auf einen Button.

[wgl_spacing spacer_size=“30px“]

Bei der PageSpeed Optimierung sollten Sie also nicht zu sehr der vollen Punktzahl hinterherjagen. Viel ausschlaggebender ist es, dass Ihre Webseite von Ihren Besuchern als schnell wahrgenommen wird, und nicht von irgendwelchen Tools.

[wgl_spacing spacer_size=“30px“]

1. Antwortzeit des Servers reduzieren

Ruft ein Nutzer Ihre Webseite auf, muss der Server, auf welchem Ihre Webseite sozusagen gespeichert ist, die angeforderten Daten als Antwort zurückgeben. Laut Google sollte die Antwortzeit hierbei unter 200ms liegen.

Wenn Sie Ihre Webseite über einen externen Anbieter wie Strato, 1&1 oder All Inkl hosten, haben Sie hierauf leider keinen direkten Einfluss.

Ist die Antwortzeit deutlich höher als die empfohlenen 200ms, bleibt Ihnen nur die Möglichkeit, einen höheren Tarif mit einer schnelleren Antwortzeit zu buchen. Alternativ kann es auch Sinn machen, direkt zu einem High Performance Hoster wie rackSPEED zu wechseln.

[wgl_spacing spacer_size=“30px“]

2. PageSpeed Optimierung mithilfe der Reduzierung von HTTP Requests

Das Grundgerüst einer Webseite besteht standardmäßig aus einer HTML Datei. Da Webseiten aber mit Farben, Slidern, Bildergalerien und coolen Animationen einfach ansprechender wirken, wird beim Aufruf einer Webseite nicht nur die HTML Datei geladen, sondern auch die mit ihr verknüpften Daten, die sich um die visuelle Gestaltung (CSS) und die Animationen (JavaScript) kümmern. Auch Bilder, die angezeigt werden sollen, werden über das HTML Dokument verlinkt und beim Seitenaufruf geladen.

All diese Dateien werden dabei über das Hypertext Transfer Protocol (HTTP) aufgerufen. Und je mehr coole Effekte eine Webseite enthält, desto mehr solcher Dateien müssen natürlich auch geladen werden.

Das Problem: Ein Browser kann nur 2 bis 8 solcher Requests gleichzeitig ausführen. Überschreitet die Anzahl der benötigten Dateien diese Obergrenze, kommen die restlichen Dateien in eine Warteschleife. Und eine Warteschleife sorgt natürlich auch für eine längere Ladezeit.

Anstatt also für jeden Effekt eine einzelne Datei mit dem HTML Dokument zu verknüpfen, sollten alle JavaScript Dateien in einer einzigen Datei zusammengefasst werden. Dasselbe gilt auch für die visuelle Gestaltung der Webseite mittels CSS.

Zum Glück gibt es für WordPress Nutzer hier Plugins, die diese Aufgabe automatisch übernehmen. Wir empfehlen:

WP Rocket (kostenpflichtig)

[wgl_spacing spacer_size=“30px“]

3. CSS, HTML und JavaScript Dateien reduzieren

Im vorherigen Punkt ging es darum, CSS und JavaScript Dateien jeweils in einer einzigen Datei zusammen zu fassen.

JavaScript und CSS Dateien bieten aber noch weiteres Optimierungspotenzial.

Jede dieser Dateien besteht oftmals aus tausenden Zeilen Code. Sehen wir uns dazu einmal den Ausschnitt aus einer JavaScript Datei an:

Alle Zeilen, die mit „//“ beginnen, sind Kommentare. Diese Kommentare sind nicht etwa an die Maschine gerichtet, die den Code letztendlich auslesen soll. Sie dienen dem Menschen, damit er den Code hinterher besser nachvollziehen kann. Die Maschine ignoriert diese Zeilen einfach.

Genauso verhält es sich mit Leerzeichen oder Umbrüchen. Sie dienen allein der besseren Lesbarkeit des Codes für den Menschen.

Jede Zeile Code benötigt allerdings Speicher. Bei wenigen Zeilen mag das nicht ausschlaggebend sein. Doch wie gesagt, bestehen die meisten Dateien aus tausenden Zeilen Code. Hier unnötige Kommentare und Leerzeichen zu entfernen, kann die Gesamtgröße des Dokumentes um mehrere KB verringern.

Zum Glück gibt es auch hier bei WordPress kostenlose Plugins, die diese Arbeit automatisch für Sie übernehmen. Wir empfehlen:

Autoptimize

[wgl_spacing spacer_size=“30px“]

4. PageSpeed Optimierung mithilfe der GZIP Komprimierung

Nachdem CSS, HTML und JavaScript Dateien im letzten Punkt von menschen- in maschinenlesbaren Code konvertiert wurden, hilft die GZIP Komprimierung dabei, die Datenpakete zu komprimieren, die vom Webserver an den Browser gesendet werden.

Hierfür werden die Datenpakete komprimiert versendet und vom Browser wieder entpackt.

Die GZIP Komprimierung ist bei modernen Hostinganbietern in der Regel bereits aktiviert.

Sollte dies bei Ihnen nicht standardmäßig der Fall sein, können Sie die GZIP Komprimierung aber auch manuell über die .htaccess Datei aktivieren. Ergänzen Sie die Datei dabei einfach um folgenden Code:

[wgl_spacing spacer_size=“30px“]

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
[wgl_spacing spacer_size=“30px“]

5. Sichtbare Inhalte priorisieren / Blockiertes Rendering

Im ersten Teil dieses Guides sprachen wir bereits darüber, dass die gefühlte Ladezeit für den Besucher ausschlaggebender sein kann, als die tatsächliche Ladezeit.

Deswegen sollten die wichtigsten Inhalte „above the fold“ – also im sichtbaren Bereich der Webseite – zuerst geladen werden. So entsteht für den Nutzer der Eindruck, die Seite sei schon vollständig geladen, obwohl im Hintergrund unwichtigere Elemente noch nach und nach aufgebaut werden.

Bei der Ladereihenfolge sollten also diejenigen Inhalte und Funktionen priorisiert werden, die der User auf Ihrer Webseite zuerst zu sehen bekommt. Ist dies nicht der Fall, bemängelt Google PageSpeed Insights, dass gewisse JavaScript und CSS Dateien das Rendering blockieren.

Was bedeutet das nun konkret?

Nun, das Aussehen Ihrer Webseite wird durch diverse Angaben in der Stylesheet (CSS) Datei definiert. Wenn sich diese Datei nun in der Ladereihenfolge an letzter Position befindet, fällt der erste Eindruck Ihrer Webseite auf den Besucher nicht gerade schön aus. Damit er also von Anfang an z.B. die richtige Hintergrundfarbe zu sehen bekommt, sollten CSS Dateien stets priorisiert geladen werden. Um das zu erreichen, werden CSS Dateien üblicherweise direkt im Kopfbereich (head) der Webseite eingebunden.

Die Funktionalitäten und Animationen einer Webseite werden hingegen erst später vom Nutzer erwartet, sodass diese erst gegen Ende geladen werden sollten. Deswegen wird oftmals empfohlen, JavaScript Dateien in den Fußbereich (footer) – also am Ende einer Webseite – einzubinden.

WordPress Plugins wie das bereits vorgestellte „Autoptimize“ oder „WP Rocket“ regeln diesen Punkt automatisch bzw. bieten in den Einstellungen die entsprechenden Optionen an.

[wgl_spacing spacer_size=“30px“]
Tipp Icon

Alternative: Asynchrones Laden von JavaScript

Problematisch kann die Verlegung des JavaScript Codes in den Footer werden, wenn Sie zum Beispiel ganz oben auf Ihrer Seite eine animierte Slideshow eingebunden haben. Denn diese benötigt den Code direkt zu Beginn, um von Anfang an die Funktionalität zu gewährleisten.

Eine bessere Alternative stellt hier also das asynchrone Laden von JavaScript dar.

Beim asynchronen Laden wird der gesamte Code der Webseite von oben nach unten durchgegangen und die Bestandteile werden dann geladen, sobald sie in der HTML Datei benötigt werden. Im Gegensatz zum synchronen Laden wird aber nicht gewartet, bis eine Datei fertig geladen ist. Stattdessen werden die folgenden Zeilen weiter abgearbeitet, während die Datei im Hintergrund weiter lädt. Durch das asynchrone Laden wird somit verhindert, dass das Rendering wichtiger Elemente „above the fold“ durch JavaScript Dateien blockiert wird.

[wgl_spacing spacer_size=“30px“]

6. PageSpeed Optimierung durch Browser Caching

Beim Browser Caching profitieren vor allem wiederkehrende Besucher von einer schnelleren Ladezeit.

Beim ersten Besuch Ihrer Webseite wird ein Abbild von Elementen wie Bildern, JavaScript und CSS Dateien im Browser auf dem Gerät des Nutzers zwischengespeichert. Ruft er Ihre Webseite nun erneut auf, müssen die Inhalte nicht wieder geladen werden, sondern werden fertig gerendert direkt aus dem Speicher geholt.

Dadurch, dass die Webseite nicht bei jedem Seitenaufruf neu berechnet werden muss, kann die Ladezeit enorm verkürzt werden.

Der Einsatz von Browser Caching führt zu einer deutlichen Verbesserung der Punktzahl in PageSpeed Insights.

Für WordPress empfehlen wir die Installation eines der folgenden Plugins:

WP Rocket (kostenpflichtig)

WP Fastest Cache (kostenlos)

W3 Total Cache (kostenlos)

[wgl_spacing spacer_size=“30px“]
Tipp Icon

Alternative: Server Caching

Beim Server Cache werden die Daten nicht auf dem Gerät des Nutzers abgespeichert, sondern auf dem Server Ihrer Webseite. Hosten Sie Ihre Webseite über externe Anbieter wie Strato, 1&1 oder All Inkl, können Sie nachfragen, ob diese die Konfiguration eines Zwischenspeichers für Sie übernehmen. In diesem Fall können Sie vollständig auf die Installation von zusätzlichen Caching Plugins verzichten.

[wgl_spacing spacer_size=“30px“]

7. Unnötige Weiterleitungen vermeiden

301 Weiterleitungen erfolgen meist im Zuge eines Website Relaunches oder um Duplicate Content zu eliminieren.

Jede Weiterleitung verzögert jedoch die Ladezeit – wenn auch nur gering. Denn trifft ein Browser auf eine Weiterleitung, muss er zunächst die neue URL aufrufen, die das Ziel der Weiterleitung ist. Und bei jedem neuen Aufruf muss er entsprechend den HTTP Request abwarten.

Mit jeder zusätzlichen Weiterleitung kann die gesamte Ladezeit durchaus unnötig erhöht werden. Zudem folgt der Google Bot nur maximal drei Weiterleitungen. Eine hohe Anzahl an Redirects kann sich also auch negativ auf Ihr Google Ranking auswirken.

Haben Sie vor Kurzem also einen Relaunch durchgeführt, sollten Sie Ihre Webseite im Zweifel auf zu viele unnötige Redirects überprüfen.

[wgl_spacing spacer_size=“30px“]

8. Bad Requests vermeiden

Jede Verlinkung innerhalb eines HTML Dokuments löst einen Request seitens des Browsers aus. Haben Sie zu viele ungültige Verlinkungen auf Ihrer Webseite, werden Ressourcen und damit Ladezeit unnötig verschwendet. Trifft ein Browser auf eine Verlinkung, die kein gültiges Ziel aufweist, spricht man von einem Bad Request.

Bei einer kleinen Anzahl von Broken Links ist die Beeinträchtigung des PageSpeeds nur minimal. Dennoch sollten Sie mit kostenlosen Tools wie Brokenlinkcheck regelmäßig die Verlinkungen auf Ihrer Webseite überprüfen und ggf. korrigieren. Das hat nicht nur positive Effekte für die PageSpeed Optimierung, sondern vor allem auch für die User Experience Ihrer Website-Besucher.

[wgl_spacing spacer_size=“30px“]

9. Page Speed Optimierung durch regelmäßiges Aufräumen der Datenbank

Mit der Zeit füllt sich die Datenbank Ihrer Webseite mit unnötigen Einträgen. Beispielsweise können gelöschte Inhalte wie Bilder, Beiträge oder Kommentare den Umfang Ihrer Datenbank unnötig erhöhen.

Daher sollten Sie Ihre Datenbank regelmäßig bereinigen.

Für WordPress Nutzer bietet WP Rocket hier in den Optionen die entsprechende Möglichkeit. Klicken Sie im Menü des Plugins einfach auf „Datenbank“ und setzen Sie überall ein Häkchen.

 

 

Als kostenlose Alternative erfüllt WP Optimize denselben Zweck.

[wgl_spacing spacer_size=“30px“]

10. PageSpeed Optimierung durch Verkleinerung von Bilddateien

Bilder machen eine Webseite attraktiv und können sie visuell aufwerten. Doch gleichzeitig machen Bilder meistens auch den größten Teil der gesamten Datenmenge einer Webseite aus.

Eine der effektivsten Maßnahmen bei der PageSpeed Optimierung ist daher die Verkleinerung der Bilder auf Ihrer Webseite.

Idealerweise sollten Bilddateien bereits beim Hochladen in der richtigen Größe und im richtigen Format vorliegen. Denn durch eine nachträgliche Komprimierung – zum Beispiel mithilfe von Plugins – erreichen Sie nur selten dieselbe Einsparung.

Wenn ein Bild auf Ihrer Webseite also nur in der Größe 1000 Pixel dargestellt wird, sollten Sie das Bild schon vor dem Upload auf diese Größe zurechtschneiden. Am effektivsten funktioniert dies mit Programmen wie Photoshop.

Bildoptimierung mit Photoshop

In folgendem Beispiel haben wir ein Bild aus der Stockagentur Depositphotos heruntergeladen. Fahren wir mit der Maus über das Bild, sehen wir die Abmessungen (2000 x 1333) und die Größe (2,19 MB). Würden wir das Bild nun unbearbeitet auf die Webseite hochladen, würden wir die Ladezeit durch die extrem hohe Dateigröße unnötig in die Höhe treiben.

 

Stattdessen öffnen wir das Bild in Photoshop und schneiden es zunächst auf die tatsächlich benötigte Größe zurecht.

Hierzu klicken wir in Photoshop auf „Bild“ -> „Bildgröße“. Im sich öffnenden Fenster können wir nun die gewünschten neuen Abmessungen eintragen. Mit einem Klick auf „OK“ übernehmen wir die Änderungen.

 

 

Würden wir das Bild nun einfach so abspeichern, hätte es immer noch eine Größe von 480KB. Dies ist zwar wesentlich weniger, als vorher, aber für eine Webseite immer noch viel zu viel.

 

 

Um noch mehr einzusparen, sollten Sie das Bild für das Web optimiert abspeichern. Photoshop bietet hier unter „Datei“ -> „Für Web speichern“ genau diese Option.

Im sich öffnenden Fenster können Sie nun die Qualität und das Format des Bildes bestimmen. Links in der Vorschau sehen Sie direkt die Auswirkungen. Hier sieht man auch schon sehr gut, dass das Bild mithilfe dieser Option nur noch 97,15 KB groß ist – und das ganz ohne Qualitätsverlust:

 

 

Wenn wir auch mit einer mittleren Bildqualität leben können, können wir die Größe des Bildes sogar noch einmal um knapp die Hälfte auf 46,12 KB reduzieren:

 

 

Bildoptimierung in WordPress mithilfe von Plugins

Für WordPress Nutzer gibt es zahlreiche Plugins, die die automatische Bildkomprimierung übernehmen. Unsere Empfehlungen sind WP Smush It und Robin Image Optimizer.

Bei beiden Plugins können Sie in den jeweiligen Einstellungen automatisch alle vorhandenen Bilder gleichzeitig komprimieren lassen. Die Einsparung ist dabei oftmals enorm:

 

 

Außerdem sehen Sie in der Mediathek nun bei jedem einzelnen Bild einen Button mit der Aufschrift „Optimize„. Wenn Sie darauf klicken, wird das Bild komprimiert und Sie sehen die dadurch erreichte Einsparung. Sollten Sie mit der Komprimierung nicht zufrieden sein, zum Beispiel aufgrund eines zu starken Qualitätsverlustes, können Sie jederzeit durch einen Klick auf „Restore original“ die Originaldatei wiederherstellen.

 

[wgl_spacing spacer_size=“30px“]
Tipp Icon

Das richtige Dateiformat für die PageSpeed Optimierung

Als Dateiformat für hochwertige Fotos sollten Sie stets JPEG wählen.

Nur, wenn Ihr Bild Transparenz enthält (z.B. bei einem Logo), empfiehlt sich die Auswahl des PNG 24 Formates, da JPEG keine Transparenz darstellen kann.

PNG 24 Dateien sind oft jedoch erheblich größer als JPEG Dateien desselben Bildes.

Für Grafiken ist darüber hinaus die Verwendung des Vektorformats SVG empfehlenswert. Dateien im SVG Format sind sehr klein, jedoch unendlich skalierbar. So können sie auch auf Retina Displays ohne Qualitätsverlust optimal dargestellt werden.

[wgl_spacing spacer_size=“30px“]

11. PageSpeed Optimierung durch Lazy Load

Vor allem bei bildlastigen Webseiten kann die Verwendung von Lazy Load erheblich die Ladezeit verbessern.

Ruft ein Nutzer eine Webseite auf, werden normalerweise alle Inhalte direkt geladen. Also auch Bilder im unteren Teil der Webseite, die er beim Einstieg noch gar nicht sieht. Insbesondere bei einer großen Anzahl von Bildern kann das zu langen Ladezeiten führen.

Mit der Verwendung eines Lazy Load Scripts werden Bilder erst dann geladen, wenn sie im Viewport des Besuchers auftauchen. Wenn der Nutzer also durch Scrollen oder die Vergrößerung des Bildschirms den entsprechenden Bereich erreicht. Scrollt er also gar nicht bis ganz nach unten, wird dementsprechend auch das Laden überflüssiger Bilder vermieden, die er sowieso nicht zu Gesicht bekommen würde.

Für die PageSpeed Optimierung für WordPress empfehlen wir hierfür folgendes kostenloses Plugin:

Crazy Lazy

[wgl_spacing spacer_size=“30px“]

12. PageSpeed Optimierung mithilfe der Nutzung eines Content Delivery Networks (CDN)

Ein Content Delivery Network ist ein Netz von Servern in verschiedenen Rechenzentren auf der ganzen Welt.

Bei der Nutzung eines CDN werden Ihre statischen Inhalte (z.B. JavaScript- und CSS Dateien, Bilder etc.) mithilfe eines Verteilungssystems von Ihrem Ausgangsserver auf diese sogenannten Replica Server übertragen. Ruft ein Nutzer nun Ihre Webseite auf, ermittelt ein Request Routing System, welcher der verfügbaren Replica Server sich am besten für die Beantwortung des Requests eignet. In der Regel erfolgt die Auslieferung der Daten von einem Replica Server, der geographisch in der Nähe des Nutzers liegt und über die geringste Auslastung verfügt. Dank der weltweit verstreuten Server profitieren Ihre Kunden so von schnelleren Ladezeiten und einer geringeren Bandbreitenauslastung. Durch die Weiterleitung der Requests an Replica Server wird zudem die Auslastung Ihres Ursprungsservers minimiert.

Die Verwendung eines CDN macht bei der PageSpeed Optimierung allerdings nur Sinn, wenn Ihre Webseite international ausgerichtet ist. Befindet sich Ihr Ursprungsserver in Deutschland und stammen auch die meisten Ihrer Webseiten-Besucher aus Deutschland, dann hat ein CDN kaum spürbare Auswirkungen auf die Ladezeit.

Liegt Ihr Ausgangsserver aber in Deutschland und versucht ein Nutzer zum Beispiel von Australien aus auf Ihre Webseite zuzugreifen, muss die Anfrage den ganzen Weg von Australien nach Deutschland und wieder zurück zurücklegen. Ohne ein CDN könnte dieser Aufruf durchaus über 10 Sekunden dauern. Bei der Verwendung eines CDN hingegen, würde der australische Besucher die Inhalte Ihrer Webseite bereits nach 1-2 Sekunden zu sehen bekommen, da die Daten von einem nahegelegenen Replica Server übermittelt werden würden.

Empfehlenswerte Anbieter für ein Content Delivery Network sind:

Amazon CloudFront

Google Cloud CDN

Akamai

[wgl_spacing spacer_size=“30px“]

13. PageSpeed Optimierung für WordPress – Unnötige Plugins deinstallieren

Die große Anzahl an kostenlosen Plugins für WordPress verleitet viele Seitenbetreiber dazu, ihre Webseite mit massenweise Plugins auszustatten. Doch jedes Plugin muss über das HTML Dokument verlinkt werden, was für einen zusätzlichen Request sorgt. Vor allem bei komplexen Plugins werden zudem oft haufenweise unnötige Extra-Funktionen geladen, die im Endeffekt gar nicht benötigt werden.

Im Zuge der PageSpeed Optimierung für Ihre WordPress Webseite sollten Sie sich also aller überflüssigen Plugins entledigen. Nur wirklich dringend benötigte Plugins können Sie beibehalten. Als grobe Zahl sollten normale Firmenpräsentationen maximal 10 Plugins installiert haben, bei Onlineshops können es bis zu 20 sein. Dies hängt allerdings von den jeweiligen Ansprüchen der Webseite und der Komplexität der verwendeten Plugins ab.

[wgl_spacing spacer_size=“30px“]
[wgl_spacing spacer_size=“30px“]