Die Wahrheit über WordPress-Performance [#1/2]

Seitdem die Ladegeschwindigkeit einer Website Rankingfaktor bei Google ist, gehört die Optimierung der Performance zu den wichtigsten Dingen, mit denen Sie sich beschäftigen sollten. Doch nicht nur Google machen Sie mit einer schnellen WordPress-Website glücklich, sondern auch und sogar in erster Linie Ihre Leser. Und auf die kommt es letztendlich an. Denn bei einer Ladegeschwindigkeit von ca. 4 Sekunden verlassen bereits 25% der Besucher Ihre Webseite wieder, wie Untersuchungen ergeben haben. Doch es herrschen unterschiedliche Meinungen dazu, was eine Webseite nun schneller macht und was nicht. Daher beschäftigen wir uns heute mit der Wahrheit über WordPress-Performance.

Die Wahrheit über WordPress Performance

Ein Einstieg – was dieser Beitrag behandelt

Dieser Artikel wird sich mit der On-Page Optimierung beschäftigen, also alle Dinge ansprechen, die nicht den Webserver selbst betreffen. Wie man einen Webserver optimal aufsetzt, ist ein völlig anderes Thema und würde den Beitrag sprengen. Ich gehe von einer WordPress-Website auf einem normalen Webhosting-Paket aus, richtig konfiguriert liefert eine Webseite auch auf einem Hosting-Paket hervorragende Werte ab.

Hier im ersten Teil der zweiteiligen Serie stelle ich Ihnen die wichtigen Stellschrauben der Ladegeschwindigkeit vor und im nächsten Beitrag zum Thema werden wir zusammen umsetzen, was wir hier behandelt haben. Hierzu werde ich ein Theme wählen, dass etliche CSS- und JavaScript-Dateien referenziert. Wer ein solches Theme schnell zu machen vermag, kann das mit jedem anderen Theme auch.

Wichtig: Dieser Beitrag wird nur die Optimierung der Desktop-Version einer Website behandeln, da die Optimierung für eine mobile Darstellung ungleich schwieriger ist.

Infografik: Warum Ladezeit so extrem wichtig ist

Infografik: Warum Ladezeit so wichtig ist

Zwei Beispiele für hervorragend optimierte und schnelle Webseiten

1. Der Überflieger: Smashingmagazine.com

Das Smashing Magazine - 100 von 100 Page Speed Punkten

An der Performance des Smashing Magazines arbeitet ein ganzes Team und dieses Team hat wirklich an jeder Stellschraube gedreht, denn die Mobil- und die Desktop-Punkte liegen bei 100. 100 Punkte – die absolute Perfektion. Gratulation an Euch, da habt Ihr einen echt tollen Job gemacht. Der Quelltext der Webseite ist ein wunderbares Medium zum Lernen, wie man es richtig macht.

Link zur Webseite: SmashingMagazine.com

2. Eine „normale“ Webseite – TechNick

TechNick - hechtmediaarts.com

Meine Webseite TechNick ist bis jetzt nur auf die Desktop-Version optimiert. 93 von 100 möglichen Punkten sind jedoch ein absolut hervorragender Wert, obwohl ich mir sicher bin, dass da noch Luft nach oben ist. Die Mobil-Version müsste ich noch angehen, da ist der Punktewert momentan zu vernachlässigen.

Rasante Ladegeschwindigkeit – Optimierung für Google Page Speed

Google Page Speed ist das Maß aller Dinge und sämtliche empfohlenen Optimierungen meistens – jedoch nicht immer – verständlich. Daher arbeiten wir uns nun Punkt für Punkt durch und setzen diese Punkte in nächsten Beitrag dieser kleinen Serie zusammen um. Damit auch Ihre Webseite rasant lädt und Besucher wie auch Google ihre helle Freude daran haben.

Übrigens: Der Google Page Speed Score startet bei 1 (unterirdisch schlecht und langsam) bis hin zu 100 Punkten (der Jackpot).

1. Verringern oder verkürzen Sie HTTP-Requests

Jeder Aufruf einer im HTML-Dokument verlinkten Datei (CSS, Bilder und JavaScript) verursacht einen HTTP-Request, oder übersetzt: Je mehr CSS und JavaScript-Dateien in der einzelnen Seite einer Website verlinkt sind, umso langsamer wird die Webseite laden. Daher hat die Verringerung der zu ladenden Dateien oberste Priorität.

2. Nur eine JavaScript- und eine CSS-Datei verwenden

Es sollte nicht mehr als eine CSS- und eine JavaScript-Datei geladen werden müssen, da jede zusätzliche Datei einen weiteren HTTP-Request und damit eine längere Ladedauer bedeutet.

Wichtig: CSS gehört in den Kopfbereich und JavaScript in den Fußbereich (Header und Footer).

Aber: Inline-JavaScript, welches zum Beispiel oft für externe Spielereien wie einer Facebook-Like-Box oder aber Share-Buttons verwendet wird, sollte entweder in den Seitenfuss ausgelagert werden oder aber mit dem „Async“ Attribut eingebunden werden. Auf diese Weise blockiert es nicht die zügige Darstellung einer Webseite, sondern kann geladen werden, wenn es der Browser für angemessen hält.

Größere, externe und verlinkte JavaScript-Dateien können auch durchaus im Header verbleiben, wenn ihnen ein „Defer„-Attribut zugewiesen wird. Dann wird das JavaScript vom Browser erst geladen, wenn das Dokument fertig geladen ist. Das JavaScript wird praktisch an das hintere Ende der Warteschleife befördert und als letztes geladen.

3. Optimieren Sie Ihre Bilder und Grafiken

Wenn Ihr Theme für das Design viele Grafiken nutzt, sollten sie diese in CSS-Sprites zusammenfassen. Damit findet dann nur noch ein Aufruf für die Grafik-Datei statt. Bilder sollten immer für das Web optimiert sein, was heisst, dass sie auf die richtige Größe zugeschnitten und in der Dateigröße reduziert worden sind. Es gibt einige gute Plugins, die diesen Job für sie erledigen können. Ansonsten helfen Programme, wie zum Beispiel Photoshop oder Gimp weiter.

Optimal wäre nun noch, wenn die Bilder und alle anderen statischen Ressourcen von einem Content Delivery Network (CDN) ausgeliefert würden. Hier gäbe es einige gute Anbieter wie MAXCDN, welche sich aber erst ab einem gewissen Traffic auf der Seite lohnen. Kostenfrei kann das Jetpack-Plugin diesen Job übernehmen, der Punkt in den Einstellungen heisst dann „Proton„. Bei Aktivierung werden sämtliche Artikelbilder dann von den ziemlich schnellen WordPress-Servern ausgeliefert, was die Webseite auch bereits spürbar schneller werden lässt.

Doch auch im Umgang mit Bildern auf der Webseite heißt es, wie bei vielen anderen Dingen im Leben: weniger ist mehr. Weniger Bilder gleich schnellere Ladegeschwindigkeit.

4. .htaccess Einstellungen: Nutzen Sie Komprimierung (Gzip oder Deflate)

Komprimierung bedeutet, dass die Dateigröße Ihrer Seiten zum Teil extrem verringert wird. Oftmals können hier bis zu 70% an Dateigröße eingespart werden. Das macht sich deutlich in der Auslieferungsgeschwindigkeit Ihrer Webseite bemerkbar. Allerdings lohnt sich der Aufwand nur, wenn auf Ihrer Website ein gewisser Anteil an Inhalt vorhanden ist. Denn der Browser muss die komprimierte Webseite vor der Auslieferung ja erstmal dekomprimieren, was ebenfalls eine gewisse Zeit in Anspruch nimmt.

Bereits bei einem Blog oder einer Webseite mit mehr als einem Absatz an Inhalt wird sich die Komprimierung extrem bemerkbar machen.

5. .htaccess Einstellungen: Aktivieren Sie Browser-Caching

Browser-Caching zu aktivieren ist nicht nur wichtig, weil Google Page Speed Online sonst wieder mal rum meckert, sondern weil etliche Komponenten der Webseite dann nur einmal bei dem ersten Aufruf geladen werden – Bilder, CSS und JavaScript. Bei jedem weiteren Aufruf der betreffenden Webseite befinden sich diese Komponenten im Cache des Browsers und die Webseite kann wesentlich schneller geladen werden.

6. CSS Bereitstellung optimieren – „Above The Fold“

Die „above the fold“ (ohne Scrollen sichtbar) Nachricht wird ausgegeben, wenn Google Page Speed Online festgestellt hat, dass ein oder mehrere Dateien das Rendern Ihrer Website blockieren und damit die Darstellung von Inhalten auf dem Bildschirmen verzögern. Browser werden von externen CSS-Dateien blockiert, bevor Inhalte auf dem Bildschirm dargestellt werden.

Diese Nachricht erhalten Sie immer, wenn im Kopfbereich Ihres Themes CSS-Dateien verlinkt sind, da der Browser dann erst einmal die Darstellung der Webseite stoppen muss, um das Stylesheet zu laden.

7. Größe des ohne Scrollen sichtbaren Inhalts verringern – CSS Bereitstellung Teil 2

Hier geht es darum, den auf dem Bildschirm ohne Scrollen sichtbaren Bereich Ihrer Webseite zu optimieren. Das soll dadurch erreicht werden, dass das für die Darstellung des sichtbaren Bereichs nötige CSS inline eingefügt wird, anstatt es über eine externe, verlinkte Datei zu tun. Um noch präziser zu werden: der Teil Ihres CSS, der für die Darstellung des ohne Scrollen sichtbaren Bildschirms nötig ist, wird inline im Kopfbereich der Webseite eingefügt.

Die dann um diesen Teil verringerte CSS-Datei wird – statt wie normal im Kopfbereich – in den Seitenfuss ausgelagert.

Bedenken Sie jedoch eines: Es sollte nicht zuviel CSS inline in das HTML-Dokument gebracht werden, denn das könnte die Website auch wieder verlangsamen. Also bitte nur dasjenige CSS einbringen, welches existenziell für die Darstellung des Bildschirminhalts ohne Scrollen notwendig ist.

Prüfen Sie trotzdem im Anschluss mit beiden Varianten (CSS verlinkt und inline) die Ladegeschwindigkeit. Es bringt nichts, wenn Google Page Speed nicht mehr meckert, dafür die Webseite aber langsamer geworden ist.

8. Nutzen Sie ein Caching-Plugin

Ein gutes Caching-Plugin generiert aus den dynamischen (PHP) Seiten Ihrer Webseite statische HTML Seiten. Diese können dann wesentlich schneller geladen werden, weil nicht bei jedem Seitenaufruf der PHP-Interpreter die betreffende Seite generieren muss. Es gibt eine ganze Menge Plugins für diesen Job, wovon einige wenige gut, weitere sehr gut und mindestens eins hervorragend ist – mit einigen Tricks.

Zu empfehlende Caching-Plugins:

  • W3 Total Cache – sehr umfangreich, nichts für Anfänger
  • Wp Super Cache – auch für Anfänger geeignet
  • Cachify – Sehr geeignet für Anfänger und kleinere Projekte
  • Wp Rocket – nicht kostenfrei, aber das Beste, was ich je im Einsatz hatte

9. Keine 301 Weiterleitungen nutzen

301er Weiterleitungen bremsen den Browser aus, weil er dann auf eine neue URL zugreifen muss. Achten Sie daher darauf, solcherlei Weiterleitungen zu vermeiden.

10. Verwenden Sie einen guten Webhosting-Anbieter

Webhosting-Anbieter gibt es wie Sand am Meer, einige davon haben auch ihre Webhosting-Pakete so optimiert, dass eine blitzschnelle Auslieferung der Webseite garantiert ist. Wichtig zu wissen: Ein Webhosting-Paket ist ein sogenanntes Shared-Hosting, Ihre Webseite teilt sich also mit dutzenden – wenn nicht gar hunderten – anderen Webseiten ihren Platz auf dem Server.

Bei den meisten Webhosting-Paket Anbietern resultiert das in langsamere Ladegeschwindigkeiten. Ich persönlich setze auf den Hoster Alfahosting. Dessen Webhosting-Pakete sind auf Geschwindigkeit optimiert, bleiben dabei preisgünstig und bieten viele Einstellungsmöglichkeiten. Natürlich gibt es eine ganze Reihe weiterer empfehlenswerter Anbieter aus deutschen Landen.

Weitere Gründe für eine gute Webseiten-Geschwindigkeit

Die großen Webseiten wie zum Beispiel Google, Amazon und Yahoo haben den Einfluss der Ladegeschwindigkeit auf das Nutzerverhalten sehr genau getestet. Mit folgenden Resultaten:

Testergebnisse des Geschwindigkeits-Tests von Google, Amazon und Yahoo

Fazit

Für eine wirklich schnelle Webseite gilt es, eine ganze Reihe wichtiger Punkte abzuarbeiten. Jedoch lohnt es sich auf jeden Fall, mal einen Tag Arbeit in seine eigene Website zu investieren, um danach die Besucher der Webseite und nicht zuletzt auch Google ein wenig glücklicher zu machen. Sie erhalten als Lohn für Ihre Arbeit, wenn Sie sie richtig erledigt haben, mehr wiederkehrende Leser und ein besseres Ranking bei Google.

 Links zum Beitrag

(dpe)

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und schreibt seit 2012 für Dr. Web. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress. Auf seinem Blog TechBrain.de schreibt er über das Schreiben und Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
ati
Gast
ati
1 Jahr 7 Monate her

Bin ich hier bei Dr. WordPress, oder was? ;-) Die Überschrift wird dem Artikel nicht gerecht. Das Thema ist für ALLE Websites wichtig und natürlich komplex, aber Danke für die schöne Übersicht mit den interessanten Beispielen!

Mario
Gast
1 Jahr 7 Monate her

Dem kann ich nur zustimmen. Nachdem ich meine WordPress-Seiten (für Kunden und auch meine eigene) einem Performance-Check unterziehe und diese versuche auf mindesten 70% bis 80% zu steigern (100% sind wirklich nur sehr selten und mit viel Zeitaufwand machbar), fahren die Webseiten auch allesamt bessere Rankings ein. Hätte nicht gedacht, dass das so ein großer Ranking-Faktor ist, aber anscheinend legt Google sehr viel Wert auf eine angenehme Ladezeit.

Astrid
Gast
Astrid
1 Jahr 7 Monate her

Im Artikel wird auf Jetpack in verwiesen.Darf man jetpack in Deutschland verwenden?

Bernhard Babbe
Gast
1 Jahr 7 Monate her

Ein toller Artikel, der gefällt mir wirklich. Dann will ich mich mal mit dem Thema auseinandersetzen und bei meiner WordPress-Seite die Ladegeschwindigkeit optimieren.

Habe ich sowieso vor gehabt, deshalb passt diese Artikelserie grade richtig gut. Ich würde sagen perfektes Timing.

Max
Gast
Max
1 Jahr 7 Monate her

Alfahosting vs. All-Inkl.de

Gibt es dazu Erfahrungen? Bin derzeit bei All-Inkl und hab gerade gesehen, das bei Alfahosting wirklich weniger Kunden auf einem Server sind. Oder hat man da beim Rechnen getrickst?!

Gruß Max

Bernhard
Gast
1 Jahr 5 Monate her

Für Al-Inkl.com habe ich hier eine gute Lösung zusammen getragen. http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/

Klawischnigg
Gast
Klawischnigg
1 Jahr 6 Monate her

WordPress gar nicht verwenden erhöht die Performance von Webseiten immens…

Bernhard
Gast
1 Jahr 5 Monate her

Hallo Andreas,
gute Einführung und Zusammenfassung. Ich habe hier einen praxisorientierte Anleitung für das Thema unter WordPress verfasst. Ich freue mich, wenn Ihr ihn empfehlen könntet. http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/

Gruß

Bernhard

Frank Hübner
Gast
9 Monate 18 Tage her

Bindet man allerdings Google-Analytics in seine Website ein, so wird man bei PageSpeed feststellen, dass es ausgerechnet Google selbst ist das auf der Bremse steht. Das dazugehörige Script wird nämlich vom Google-Server gezogen.

„Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
http://www.google-analytics.com/analytics.js (2 Stunden)“

Mit Analytics ist also bei 99% Schluss.

Frank Hübner
(Senior Programmer)
http://www.binary-garden.com

trackback

[…] Die Wahrheit über WordPress-Performance […]

trackback

[…] Die Wahrheit über WordPress-Performance […]

trackback

[…] echter Grund, sie höher zu ranken. Deshalb beschäftigen wir uns in dieser kleinen Serie nicht mit den 100 von 100 Punkten bei Google Page Speed, sondern mit der Frage, wie man Websites so richtig schnell […]

Rafael
Gast
5 Monate 7 Tage her

Guter Artikel! Aus eigener Erfahrung kann ich sagen, dass der Webhosting Anbieter auch viele Punkte bei Google Page Score ausmachen kann. Bin mit einigen Seiten von one.com auf hosteurope gewechselt und habe einen deutlich höheren Score. Obwohl ich nur ein shared Server bei Host europe habe. Da muss one.com wirklich sehr langsam gewesen sein.
Beste Grüße

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen