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

Was ist PageSpeed Optimierung?

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

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.

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:

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.

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

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:

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

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:

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.

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:

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.

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.

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.

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)

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

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:

<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>

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.

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.

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)

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.

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.

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.

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.

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.

 

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.

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

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

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.

Read More

Duplicate Content – so gehen Sie richtig mit doppelten Inhalten um

Was bedeutet Duplicate Content?

Duplicate Content (= doppelter Inhalt) ist ein Begriff, der hauptsächlich im Zusammenhang mit der Suchmaschinenoptimierung verwendet wird.

Von Duplicate Content spricht man, wenn identische oder sehr ähnliche Texte über mehrere URLs erreichbar sind.

Wenn Sie also diesen Blogartikel 1:1 kopieren und auf Ihrer eigenen Webseite wieder 1:1 veröffentlichen, wäre dies solch ein doppelter Inhalt (und darüber hinaus natürlich auch eine sehr dreiste Urheberrechtsverletzung 😉 ).

Wie entsteht Duplicate Content und wie kann ich ihn vermeiden?

Duplicate Content muss nicht zwangsläufig immer dadurch entstehen, dass ein anderer Ihren hart erarbeiteten Text stiehlt und sich mit Ihren Federn schmückt.

Meistens entsteht Duplicate Content eher unbeabsichtigt, sodass Seitenbetreiber ihn oftmals lange Zeit gar nicht bemerken. Die Ursachen hierfür sind vielfältig und eher technischer Natur:

Ursache: www vs. non-www

Sobald Ihre Webseite sowohl unter www.ihrewebseite.de, als auch unter ihrewebseite.de zu erreichen ist und dort die gleichen Inhalte ausgeliefert werden, produzieren Sie doppelte Inhalte.

Tipp Icon

Lösung:

Mit einer kleinen Anpassung der .htaccess können Sie dieses Problem beheben.

Die .htaccess finden Sie über ein FTP-Programm wie Filezilla im Root-Verzeichnis Ihres Webservers. Dort können Sie beispielsweise mit folgendem Code eine non-www Domain auf eine www Domain umleiten:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^ihrewebseite.de
RewriteRule ^(.*)$ https://ihrewebseite.de$1 [R=301,L]

Das Ganze funktioniert natürlich auch anders herum:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.ihrewebseite.de
RewriteRule ^(.*) http://ihrewebseite.de$1 [R=301,L]

Ursache: HTTP vs HTTPS

Sobald Ihre Webseite im Zuge der Einbindung eines SSL Zertifikats sowohl in der HTTP-Version, als auch in der HTTPS-Version aufrufbar ist, erzeugen Sie ebenfalls Duplicate Content.

Tipp Icon

Lösung:

Tragen Sie dafür Sorge, dass Ihre Webseite nur noch unter der HTTPS-Version zu erreichen ist. Alle HTTP-Anfragen müssen mittels 301-Redirect auf die HTTPS-Version umgeleitet werden.

Nachfolgend haben wir für Sie bereits den kompletten Code für Ihre .htaccess-Datei bereit gestellt. Bitte fügen Sie diesen wie nachstehend ein.

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Ursache: URL einmal groß- und einmal kleingeschrieben

Google unterscheidet zwischen Groß- und Kleinschreibung,

Tipp Icon

Lösung:

Verwenden Sie bei Ihren URLs ausschließlich die Kleinschreibung, um Duplicate Content von vornherein zu vermeiden.

Ursache: Paginierung

Paginationsseiten werden häufig in Onlineshops eingesetzt, um lange Produktseiten zu kürzen:

Tipp Icon

Lösung:

Um den Zusammenhang zwischen einer Hauptkategorieseite und den Paginationsseiten ersichtlich zu machen, sollte man die neuen Elemente rel=“next“ und rel=“prev“ verwenden. Mit Hilfe dieser Elemente kann man leicht die Hauptkategorieseite und die Paginationsseiten definieren und sicherstellen, dass der Fokus für Google auf der Hauptkategorieseite liegt. Folgendes Beispiel mit drei Seiten macht die Verwendung deutlich:

HTML

Auf der ersten Seite wird im Header folgendes implementiert:

<link rel=”next” href=”http://www.example.com/article?story=abc&page=2″ />

Auf der zweiten Seite erscheint:

<link rel=”prev” href=”http://www.example.com/article?story=abc&page=1″ />
<link rel=”next” href=”http://www.example.com/article?story=abc&page=3″ />

Und auf der dritten Seite:

<link rel=”prev” href=”http://www.example.com/article?story=abc&page=2″ />

Das Beispiel macht deutlich, welche Regeln man beachten muss. Die erste Seite darf nur das Element rel=“next“ beinhalten, die zweite Seite (also alle Seiten, die zwischen der ersten und der letzten Seite liegen) beide Elemente rel=“next“ und rel=“prev“ und die dritte Seite nur das Element rel=“prev“. So erkennt Google eine klare Strukturierung. Eine Verwendung von Canonical-Tags und den Elementen rel=“next“ und rel=“prev“ in Kombination ist ebenfalls möglich. Dies macht Sinn, wenn eine Paginationsseite zusätzlich über eine URL mit einer Session-ID erreichbar ist, zum Beispiel http://www.example.com/article?story=abc&page=2&sessionid=123. Um die Canonical-URL anzeigen zu können, müsste diese Paginationsseite im Header folgende Informationen beinhalten:

HTML

<link rel=”canonical” href=”http://www.example.com/article?story=abc&page=2”/><link rel=”prev” href=”http://www.example.com/article?story=abc&page=1&sessionid=123″ /><link rel=”next” href=”http://www.example.com/article?story=abc&page=3&sessionid=123″ />

Ursache: Identische oder sehr ähnliche Produktbeschreibungen

Tipp Icon

Lösung:

Tja – ran an den Stift. Denn hier hilft nur die Erstellung eigener, einzigartiger Produkttexte.

Ursache: URL Parameter und Session-IDs

Vor allem in Onlineshops sind Session-IDs eine praktische Sache. Legt ein Nutzer Produkte in den Warenkorb und verlässt die Seite vorerst wieder ohne etwas zu kaufen, kann es ärgerlich sein, wenn beim erneuten Aufruf der Seite der Warenkorb plötzlich leer ist. Mithilfe von Session-IDs bleiben die Produkte auch bei seiner Rückkehr noch im Warenkorb.

Das Problem: Für jeden Nutzer wird über dieselbe URL eine neue Session-ID generiert, was letztendlich zu doppeltem Inhalt führt.

Auch Trackingtools verwenden Session-IDs, um das Nutzerverhalten zu analysieren. Hier wird ebenfalls für jeden Nutzer eine neue ID und damit Duplicate Content erzeugt.

Tipp Icon

Lösung:

Ursache: Mobile Version einer Webseite

Die mobile Version einer Webseite ist nicht zu verwechseln mit dem responsive Webdesign einer Seite. Bei einem responsive Design wird nur ein Webseiten Layout erstellt, welches sich flexibel an die verwendete Bildschirmgröße anpasst.

Es gibt jedoch auch die Möglichkeit, ein komplett eigenständiges Layout für die mobile Version einer Webseite zu erstellen, welche dann beispielsweise über eine Subdomain aufrufbar ist.

Da die mobile Version in der Regel dieselben Inhalte aufweist, wie die Desktop-Version, sich aber durch die Subdomain auf einer anderen URL befindet, führt dies zu Duplicate Content.

Tipp Icon

Lösung:

Falls Sie eine oder mehrere Seiten mit sehr ähnlichen oder identischen Inhalten haben, dann können Sie mithilfe des Canonical Tags Google mitteilen, welche URL er bevorzugt behandeln soll.

Platzieren Sie den Canonical Tag auf der bevorzugten Version im <head> Bereich der entsprechenden Seite wie folgt:

<head>
<link rel=“canonical“ href=”https://ihredomain.de/beispiel-seite/“ />
</head>

Ursache: PDF- und Print-Version einer Webseite

Tipp Icon

Lösung:

Auch hier bietet sich die Platzierung des Canonical-Tags im Head-Bereich der Hauptseite an:

<head>
<link rel=“canonical“ href=”https://ihredomain.de/hauptseite/“ />
</head>

Ursache: Domainumzug

Tipp Icon

Lösung:

Mithilfe der dauerhaften Weiterleitung mit 301 Redirect können Sie alte (nicht mehr existierende) Dateien bzw. Seiten auf eine neue umleiten bzw. auch gleich eine ganze Domain. Der Vorteil bei einem 301 Redirect liegt darin, dass der bisherige PageRank der alten Seite mit auf das neue Ziel übertragen wird! Wenn Sie nach dieser Methode vorgehen müssen Sie also bei einem Domainumzug bzw. einem Website-Relaunch nicht befürchten, Ihren alten PageRank (bzw. Ihre alte Google-Platzierung) zu verlieren.

Hierfür müssen Sie ebenfalls die .htaccess im Root-Verzeichnis Ihrer ALTEN Domain um folgende Zeile ergänzen:

Wenn Sie eine einzelne Datei bzw. Seite bzw. Unterseite umleiten möchten:

RedirectPermanent /seite-alt.html https://ihredomain.de/seite-neu.html

Oder wenn Sie eine ganze Domain umleiten möchten:

RedirectPermanent / https://domain-neu.de

Ursache: Unterschiedliche Sprachversionen einer Webseite

Grundsätzlich werden Übersetzungen einer Seite von Google natürlich nicht als Duplikate gewertet.

Nehmen wir jedoch an, Sie bieten Ihre Webseite in mehreren Ländern mit derselben Sprache an, zum Beispiel für die D-A-CH Region. Für jedes der drei Länder haben Sie nun ein eigenes Verzeichnis angelegt:

www.ihredomain.de/de/ für die deutschen Besucher

www.ihredomain.de/at/ für Nutzer aus Österreich und

www.ihredomain.de/ch/ für Besucher aus der Schweiz

Da sich nun in allen drei Verzeichnissen identischer Text in derselben Sprache befindet, wird dies als Duplicate Content gewertet.

Tipp Icon

Lösung:

Mit dem hreflang-Tag können Webseiten-Inhalte einer bestimmten Sprache bzw. Region zugeordnet werden. Der hreflang-Tag wird dafür im Kopfbereich (head) der jeweiligen Version hinzugefügt.

<link rel=“alternate” hreflang=“de-DE” href=“https://www.beispiel.com/de/”/>
<link rel=“alternate” hreflang=“de-AT” href=“https://www.beispiel.com/at/”/>
<link rel=“alternate” hreflang=“de-CH” href=“https://www.beispiel.com/ch/”/>

Ursache: Duplicate Content durch das Erstellen einer Entwicklungsumgebung

Größere oder kritische Änderungen an einer Webseite führen die meisten Entwickler ungern direkt an der Live-Version der Seite durch. Stattdessen wird eine Kopie der Seite auf einem anderen Server hochgeladen, damit, falls etwas schief läuft, die Live Seite keinen Schaden nimmt. Bei einer unsauberen Handhabung kann es schnell passieren, dass die Testseite in den Google Index rutscht und so dem Ranking der eigentlichen Seite schadet.

Tipp Icon

Lösung:

Damit es bei Einsatz einer Entwicklungsumgebung nicht zu Duplicate Content kommt, sollten Sie die Testseite zunächst mit einem Passwortschutz versehen. Außerdem sollten Sie die Testseite von Anfang an vollständig auf „noindex“ stellen und Suchmaschinencrawlern so die Indexierung der Seite untersagen. Alternativ können Sie auch eine Robots Datei nutzen, um Suchmaschinen das Betreten Ihrer Seite zu verweigern.

Vergessen Sie nicht, Suchmaschinen den Zugriff und die Indexierung bei Live-Schaltung der Seite wieder zu erlauben!  

Ursache: Content Diebstahl

Klaut ein anderer Seitenbetreiber Ihre Inhalte, kann das Ranking Ihrer Webseite durch den dadurch entstehenden Duplicate Content Schaden nehmen.

Tipp Icon

Lösung:

Zunächst sollten Sie Kontakt zum Betreiber der Seite aufnehmen und ihn um die vollständige Löschung des kopierten Inhalts bitten. Die Kontaktdaten lassen sich normalerweise im Impressum der Seite finden. Alternativ kann über Denic oder Whois der Inhaber der Domain ermittelt werden.

Da das Kopieren von Inhalten einen Urheberrechtsverstoß darstellt, reicht eine Kontaktaufnahme in der Regel schon aus, damit der Betreiber der Bitte um Entfernung nachkommt. Sollte jedoch niemand auf Ihre Kontaktaufnahme reagieren, können Sie über Whois ermitteln, über wen die Seite gehostet wird. Die meisten Hoster bieten auf ihrer Webseite bereits ein sogenanntes DMCA Formular (DMCA = Digital Millenium Copyright Act) an, über welches Urheberrechtsverstöße auf den von ihnen gehosteten Seiten übermittelt werden können. Liegt tatsächlich eine Urheberrechtsverletzung vor, wird sich der Hoster um die Löschung der kopierten Inhalte kümmern. Sollte auch das nicht zum Erfolg führen, können Sie sich aber auch direkt an Google wenden und um die De-Indexierung des kopierten Inhalts bitten. Auch hier stellt Google ein entsprechendes DMCA Formular zur Verfügung.

Ob Sie zudem rechtlich gegen den Content-Dieb vorgehen möchten, bleibt Ihnen selbst überlassen. Ist der kopierte Text grundsätzlich schutzfähig, können Sie den Content-Dieb auf Urheberrechtsverletzung verklagen. Handelt es sich um einen direkten Mitbewerber, können Sie auch vom UWG (Gesetzt gegen unlauteren Wettbewerb) Gebrauch machen.

SEO: Wie geht Google mit Duplicate Content um?

Eines ist klar: Google bevorzugt hochwertigen und vor allem einzigartigen Content (= Unique Content).

Landet der Google Bot auf einer Webseite, welche sich noch nicht im Suchmaschinenindex befindet, vergleicht er deren Inhalte zunächst mit allen Inhalten bereits indexierter Webseiten. So versucht der Suchmaschinenriese die Relevanz der Webseite für gewisse Themen im Vergleich zu anderen einzuschätzen. Entsprechend der Relevanz wird die Seite dann in die Reihenfolge – dem Google Ranking – gebracht.

 

 

Stößt der Google Bot dabei auf zwei Webseiten mit identischen Texten, steht er vor einem Problem. Er kann nicht beide Seiten in den Google Index aufnehmen, weil es für den Nutzer keinen Mehrwert hätte, wenn er bei seiner Suche lauter identische Seiten als Ergebnis bekommt. Immerhin setzt der Suchmaschinenriese alles daran, Nutzern das beste Suchergebnis zu liefern.

Somit muss Google nun entscheiden, welche der beiden Seiten relevanter für das Suchergebnis ist. Also versucht er mittels verschiedener Kriterien zu ermitteln, welche der beiden Seiten die Originalversion darstellt. Mögliche Kriterien hierfür können sein:

 

  • Das Erstelldatum der Originalversion im Vergleich zur Kopie
  • Die Anzahl an Backlinks der Originalseite verglichen mit denen der Kopie
  • Die Anzahl der Social Signals der Originalversion gegenüber der Kopie

 

Natürlich führt dieses Ratespiel häufig dazu, dass aus Sicht des Publishers genau die falsche Seite im Index landet, während die Seite, welche eigentlich ranken sollte, im Google Nirwana verschwindet.

Kann Google sich nicht für eine Originalversion entscheiden, wird die Relevanz auf beide Seiten aufgeteilt und somit wertvolles Rankingpotenzial verschwendet. Außerdem kann es passieren, dass beide URLs bei Google nun abwechselnd auftauchen. Das angestrebte beständige Ranking ist dadurch nicht möglich.

Tipp Icon

Sonderbehandlung von Zitaten

Zitate oder zitierte Textpassagen werden nicht als Duplicate Content gewertet. Bei der Zitierung von Inhalten sollte jedoch auf die korrekte Auszeichnung im Quelltext geachtet werden:

<blockquote>Hier steht der zitierte Text – <cite>Hier steht der Name des zitierten Autors oder der Quelle</cite></blockquote>

Arten von Duplicate Content

Man unterscheidet grundsätzlich zwei verschiedene Arten von Duplicate Content:

Interner Duplicate Content

Von internem Duplicate Content spricht man, wenn sich identische Inhalte innerhalb Ihrer eigenen Domain befinden. Wenn ein und derselbe Text also zum Beispiel sowohl über www.ihredomain.de/text_1 , als auch über www.ihredomain.de/text_2 aufrufbar ist.

Interner Duplicate Content hat meistens technische Ursachen.

Externer Duplicate Content

Von externen Kopien spricht man, wenn sich dieselben oder nahezu deckungsgleiche Inhalte auf zwei oder mehr unterschiedlichen Webseiten bzw. Domains befinden.

Ein klassisches Beispiel von externem Duplicate Content sind Onlineshops, die Produkttexte des Herstellers 1:1 kopieren und in ihrem Shop wiederverwenden. Doch auch durch die Verbreitung von identischen Pressemitteilungen oder Content Diebstahl entstehen externe Duplikate.

Near Duplicate Content

 

Wie kann ich überprüfen, ob meine Webseite von Duplicate Content betroffen ist?

Um Ihre Webseite auf internen Duplicate Content zu überprüfen, empfehlen wir das kostenlose Online-Tool Siteliner. Tragen Sie einfach Ihre Domain in das dafür vorgesehene Feld ein und klicken Sie anschließend auf “Go”:

 

 

Je nach Umfang der Seite kann es nun einige Minuten dauern, bis der Scan beendet ist. Anschließend erhalten Sie die Auswertung zum prozentualen Anteil des Duplicate Contents auf Ihrer Webseite für jede einzelne Unterseite. Identische Inhalte werden vom Tool rot markiert, sodass Sie direkt sehen können, wo auf Ihrer Webseite sich Duplicate Content befindet. Wobei bei einer niedrigen Prozentzahl noch nicht unbedingt ein Duplicate Content Problem vorliegen muss. Manche Inhalte wiederholen sich nun einmal auf einer Webseite, wie beispielsweise die Hauptnavigation, wichtige Boilerplates oder Angaben im Footer. Handeln sollten Sie aber bei Seiten, die 30% oder mehr doppelte Inhalte aufweisen.

Um Ihre Webseite auf externen Duplicate Content zu überprüfen, empfehlen wir das ebenfalls kostenlose Online Tool Copyscape. Auch hier tragen Sie zunächst Ihre URL in das Feld ein:

 

 

Das Tool ermittelt nun, ob Inhalte Ihrer Webseite auf anderen externen URLs zu finden sind. Copyscape eignet sich daher beispielsweise sehr gut, um Content Diebstahl zu überprüfen.

Read More
Show Buttons
Hide Buttons