Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 6. Januar 2015

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

Die Wahrheit über WordPress Performance

Seitdem die Ladegeschwindigkeit einer Website Rankingfaktor bei Google ist, gehört die Optimierung der Performance zu den wich­tigs­ten Dingen, mit denen Sie sich beschäf­ti­gen soll­ten. Doch nicht nur Google machen Sie mit einer schnel­len WordPress-Website glück­lich, son­dern auch und sogar in ers­ter Linie Ihre Leser. Und auf die kommt es letzt­end­lich an. Denn bei einer Ladegeschwindigkeit von ca. 4 Sekunden ver­las­sen bereits 25% der Besucher Ihre Webseite wie­der, wie Untersuchungen erge­ben haben. Doch es herr­schen unter­schied­li­che Meinungen dazu, was eine Webseite nun schnel­ler macht und was nicht. Daher beschäf­ti­gen wir uns heu­te 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äf­ti­gen, also alle Dinge anspre­chen, die nicht den Webserver selbst betref­fen. Wie man einen Webserver opti­mal auf­setzt, ist ein völ­lig ande­res Thema und wür­de den Beitrag spren­gen. Ich gehe von einer WordPress-Website auf einem nor­ma­len Webhosting-Paket aus, rich­tig kon­fi­gu­riert lie­fert eine Webseite auch auf einem Hosting-Paket her­vor­ra­gen­de Werte ab.

Hier im ers­ten Teil der zwei­tei­li­gen Serie stel­le ich Ihnen die wich­ti­gen Stellschrauben der Ladegeschwindigkeit vor und im nächs­ten Beitrag zum Thema wer­den wir zusam­men umset­zen, was wir hier behan­delt haben. Hierzu wer­de ich ein Theme wäh­len, dass etli­che CSS- und JavaScript-Dateien refe­ren­ziert. Wer ein sol­ches Theme schnell zu machen ver­mag, kann das mit jedem ande­ren Theme auch.

Wichtig: Dieser Beitrag wird nur die Optimierung der Desktop-Version einer Website behan­deln, da die Optimierung für eine mobi­le Darstellung ungleich schwie­ri­ger 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 arbei­tet ein gan­zes Team und die­ses Team hat wirk­lich an jeder Stellschraube gedreht, denn die Mobil- und die Desktop-Punkte lie­gen bei 100. 100 Punkte – die abso­lu­te Perfektion. Gratulation an Euch, da habt Ihr einen echt tol­len Job gemacht. Der Quelltext der Webseite ist ein wun­der­ba­res Medium zum Lernen, wie man es rich­tig 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 opti­miert. 93 von 100 mög­li­chen Punkten sind jedoch ein abso­lut her­vor­ra­gen­der Wert, obwohl ich mir sicher bin, dass da noch Luft nach oben ist. Die Mobil-Version müss­te ich noch ange­hen, da ist der Punktewert momen­tan zu ver­nach­läs­si­gen.

Rasante Ladegeschwindigkeit – Optimierung für Google Page Speed

Google Page Speed ist das Maß aller Dinge und sämt­li­che emp­foh­le­nen Optimierungen meis­tens – jedoch nicht immer – ver­ständ­lich. Daher arbei­ten wir uns nun Punkt für Punkt durch und set­zen die­se Punkte in nächs­ten Beitrag die­ser klei­nen Serie zusam­men um. Damit auch Ihre Webseite rasant lädt und Besucher wie auch Google ihre hel­le Freude dar­an haben.

Übrigens: Der Google Page Speed Score star­tet bei 1 (unter­ir­disch schlecht und lang­sam) bis hin zu 100 Punkten (der Jackpot).

1. Verringern oder verkürzen Sie HTTP-Requests

Jeder Aufruf einer im HTML-Dokument ver­link­ten Datei (CSS, Bilder und JavaScript) ver­ur­sacht einen HTTP-Request, oder über­setzt: Je mehr CSS und JavaScript-Dateien in der ein­zel­nen Seite einer Website ver­linkt sind, umso lang­sa­mer wird die Webseite laden. Daher hat die Verringerung der zu laden­den Dateien obers­te Priorität.

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

Es soll­te nicht mehr als eine CSS- und eine JavaScript-Datei gela­den wer­den müs­sen, da jede zusätz­li­che Datei einen wei­te­ren HTTP-Request und damit eine län­ge­re Ladedauer bedeu­tet.

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

Aber: Inline-JavaScript, wel­ches zum Beispiel oft für exter­ne Spielereien wie einer Facebook-Like-Box oder aber Share-Buttons ver­wen­det wird, soll­te ent­we­der in den Seitenfuss aus­ge­la­gert wer­den oder aber mit dem “Async” Attribut ein­ge­bun­den wer­den. Auf die­se Weise blo­ckiert es nicht die zügi­ge Darstellung einer Webseite, son­dern kann gela­den wer­den, wenn es der Browser für ange­mes­sen hält.

Größere, exter­ne und ver­link­te JavaScript-Dateien kön­nen auch durch­aus im Header ver­blei­ben, wenn ihnen ein “Defer”-Attribut zuge­wie­sen wird. Dann wird das JavaScript vom Browser erst gela­den, wenn das Dokument fer­tig gela­den ist. Das JavaScript wird prak­tisch an das hin­te­re Ende der Warteschleife beför­dert und als letz­tes gela­den.

3. Optimieren Sie Ihre Bilder und Grafiken

Wenn Ihr Theme für das Design vie­le Grafiken nutzt, soll­ten sie die­se in CSS-Sprites zusam­men­fas­sen. Damit fin­det dann nur noch ein Aufruf für die Grafik-Datei statt. Bilder soll­ten immer für das Web opti­miert sein, was heisst, dass sie auf die rich­ti­ge Größe zuge­schnit­ten und in der Dateigröße redu­ziert wor­den sind. Es gibt eini­ge gute Plugins, die die­sen Job für sie erle­di­gen kön­nen. Ansonsten hel­fen Programme, wie zum Beispiel Photoshop oder Gimp wei­ter.

Optimal wäre nun noch, wenn die Bilder und alle ande­ren sta­ti­schen Ressourcen von einem Content Delivery Network (CDN) aus­ge­lie­fert wür­den. Hier gäbe es eini­ge gute Anbieter wie MAXCDN, wel­che sich aber erst ab einem gewis­sen Traffic auf der Seite loh­nen. Kostenfrei kann das Jetpack-Plugin die­sen Job über­neh­men, der Punkt in den Einstellungen heisst dann “Proton”. Bei Aktivierung wer­den sämt­li­che Artikelbilder dann von den ziem­lich schnel­len WordPress-Servern aus­ge­lie­fert, was die Webseite auch bereits spür­bar schnel­ler wer­den lässt.

Doch auch im Umgang mit Bildern auf der Webseite heißt es, wie bei vie­len ande­ren Dingen im Leben: weni­ger ist mehr. Weniger Bilder gleich schnel­le­re Ladegeschwindigkeit.

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

Komprimierung bedeu­tet, dass die Dateigröße Ihrer Seiten zum Teil extrem ver­rin­gert wird. Oftmals kön­nen hier bis zu 70% an Dateigröße ein­ge­spart wer­den. Das macht sich deut­lich in der Auslieferungsgeschwindigkeit Ihrer Webseite bemerk­bar. Allerdings lohnt sich der Aufwand nur, wenn auf Ihrer Website ein gewis­ser Anteil an Inhalt vor­han­den ist. Denn der Browser muss die kom­pri­mier­te Webseite vor der Auslieferung ja erst­mal dekom­pri­mie­ren, was eben­falls eine gewis­se Zeit in Anspruch nimmt.

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

5. .htaccess Einstellungen: Aktivieren Sie Browser-Caching

Browser-Caching zu akti­vie­ren ist nicht nur wich­tig, weil Google Page Speed Online sonst wie­der mal rum meckert, son­dern weil etli­che Komponenten der Webseite dann nur ein­mal bei dem ers­ten Aufruf gela­den wer­den – Bilder, CSS und JavaScript. Bei jedem wei­te­ren Aufruf der betref­fen­den Webseite befin­den sich die­se Komponenten im Cache des Browsers und die Webseite kann wesent­lich schnel­ler gela­den wer­den.

6. CSS Bereitstellung optimieren – “Above The Fold”

Die “above the fold” (ohne Scrollen sicht­bar) Nachricht wird aus­ge­ge­ben, wenn Google Page Speed Online fest­ge­stellt hat, dass ein oder meh­re­re Dateien das Rendern Ihrer Website blo­ckie­ren und damit die Darstellung von Inhalten auf dem Bildschirmen ver­zö­gern. Browser wer­den von exter­nen CSS-Dateien blo­ckiert, bevor Inhalte auf dem Bildschirm dar­ge­stellt wer­den.

Diese Nachricht erhal­ten Sie immer, wenn im Kopfbereich Ihres Themes CSS-Dateien ver­linkt sind, da der Browser dann erst ein­mal die Darstellung der Webseite stop­pen muss, um das Stylesheet zu laden.

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

Hier geht es dar­um, den auf dem Bildschirm ohne Scrollen sicht­ba­ren Bereich Ihrer Webseite zu opti­mie­ren. Das soll dadurch erreicht wer­den, dass das für die Darstellung des sicht­ba­ren Bereichs nöti­ge CSS inli­ne ein­ge­fügt wird, anstatt es über eine exter­ne, ver­link­te Datei zu tun. Um noch prä­zi­ser zu wer­den: der Teil Ihres CSS, der für die Darstellung des ohne Scrollen sicht­ba­ren Bildschirms nötig ist, wird inli­ne im Kopfbereich der Webseite ein­ge­fügt.

Die dann um die­sen Teil ver­rin­ger­te CSS-Datei wird – statt wie nor­mal im Kopfbereich – in den Seitenfuss aus­ge­la­gert.

Bedenken Sie jedoch eines: Es soll­te nicht zuviel CSS inli­ne in das HTML-Dokument gebracht wer­den, denn das könn­te die Website auch wie­der ver­lang­sa­men. Also bit­te nur das­je­ni­ge CSS ein­brin­gen, wel­ches exis­ten­zi­ell für die Darstellung des Bildschirminhalts ohne Scrollen not­wen­dig ist.

Prüfen Sie trotz­dem im Anschluss mit bei­den Varianten (CSS ver­linkt und inli­ne) die Ladegeschwindigkeit. Es bringt nichts, wenn Google Page Speed nicht mehr meckert, dafür die Webseite aber lang­sa­mer gewor­den ist.

8. Nutzen Sie ein Caching-Plugin

Ein gutes Caching-Plugin gene­riert aus den dyna­mi­schen (PHP) Seiten Ihrer Webseite sta­ti­sche HTML Seiten. Diese kön­nen dann wesent­lich schnel­ler gela­den wer­den, weil nicht bei jedem Seitenaufruf der PHP-Interpreter die betref­fen­de Seite gene­rie­ren muss. Es gibt eine gan­ze Menge Plugins für die­sen Job, wovon eini­ge weni­ge gut, wei­te­re sehr gut und min­des­tens eins her­vor­ra­gend ist – mit eini­gen Tricks.

Zu emp­feh­len­de Caching-Plugins:

  • W3 Total Cache – sehr umfang­reich, nichts für Anfänger
  • Wp Super Cache – auch für Anfänger geeig­net
  • Cachify – Sehr geeig­net für Anfänger und klei­ne­re Projekte
  • Wp Rocket – nicht kos­ten­frei, aber das Beste, was ich je im Einsatz hat­te

9. Keine 301 Weiterleitungen nutzen

301er Weiterleitungen brem­sen den Browser aus, weil er dann auf eine neue URL zugrei­fen muss. Achten Sie daher dar­auf, sol­cher­lei Weiterleitungen zu ver­mei­den.

10. Verwenden Sie einen guten Webhosting-Anbieter

Webhosting-Anbieter gibt es wie Sand am Meer, eini­ge davon haben auch ihre Webhosting-Pakete so opti­miert, dass eine blitz­schnel­le Auslieferung der Webseite garan­tiert ist. Wichtig zu wis­sen: Ein Webhosting-Paket ist ein soge­nann­tes Shared-Hosting, Ihre Webseite teilt sich also mit dut­zen­den – wenn nicht gar hun­der­ten – ande­ren Webseiten ihren Platz auf dem Server.

Bei den meis­ten Webhosting-Paket Anbietern resul­tiert das in lang­sa­me­re Ladegeschwindigkeiten. Ich per­sön­lich set­ze auf den Hoster Alfahosting. Dessen Webhosting-Pakete sind auf Geschwindigkeit opti­miert, blei­ben dabei preis­güns­tig und bie­ten vie­le Einstellungsmöglichkeiten. Natürlich gibt es eine gan­ze Reihe wei­te­rer emp­feh­lens­wer­ter Anbieter aus deut­schen 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 getes­tet. Mit fol­gen­den Resultaten:

Testergebnisse des Geschwindigkeits-Tests von Google, Amazon und Yahoo

Fazit

Für eine wirk­lich schnel­le Webseite gilt es, eine gan­ze Reihe wich­ti­ger Punkte abzu­ar­bei­ten. Jedoch lohnt es sich auf jeden Fall, mal einen Tag Arbeit in sei­ne eige­ne Website zu inves­tie­ren, um danach die Besucher der Webseite und nicht zuletzt auch Google ein wenig glück­li­cher zu machen. Sie erhal­ten als Lohn für Ihre Arbeit, wenn Sie sie rich­tig erle­digt haben, mehr wie­der­keh­ren­de Leser und ein bes­se­res Ranking bei Google.

 Links zum Beitrag

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

14 Kommentare

  1. Seite auf SSL-Verschlüsselung und auf HTTP/2 mit ALPN umstel­len, dann wird die Ladezeit viel effi­zi­en­ter und bei Google Suchergebnisse wird man dadurch auch bevor­zugt.

    ♥ Einen schö­nen 1. Advent. ♥

  2. Guter Artikel! Aus eige­ner Erfahrung kann ich sagen, dass der Webhosting Anbieter auch vie­le Punkte bei Google Page Score aus­ma­chen kann. Bin mit eini­gen Seiten von one.com auf host­eur­o­pe gewech­selt und habe einen deut­lich höhe­ren Score. Obwohl ich nur ein sha­red Server bei Host euro­pe habe. Da muss one.com wirk­lich sehr lang­sam gewe­sen sein.
    Beste Grüße

  3. Bindet man aller­dings Google-Analytics in sei­ne Website ein, so wird man bei PageSpeed fest­stel­len, dass es aus­ge­rech­net Google selbst ist das auf der Bremse steht. Das dazu­ge­hö­ri­ge Script wird näm­lich vom Google-Server gezo­gen.

    “Nutzen Sie Browser-Caching für die fol­gen­den cache­fä­hi­gen 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

  4. Hallo Andreas,
    gute Einführung und Zusammenfassung. Ich habe hier einen pra­xis­ori­en­tier­te Anleitung für das Thema unter WordPress ver­fasst. Ich freue mich, wenn Ihr ihn emp­feh­len könn­tet. http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/

    Gruß

    Bernhard

  5. WordPress gar nicht ver­wen­den erhöht die Performance von Webseiten immens…

  6. Alfahosting vs. All-Inkl.de

    Gibt es dazu Erfahrungen? Bin der­zeit bei All-Inkl und hab gera­de gese­hen, das bei Alfahosting wirk­lich weni­ger Kunden auf einem Server sind. Oder hat man da beim Rechnen getrickst?!

    Gruß Max

  7. Ein tol­ler Artikel, der gefällt mir wirk­lich. Dann will ich mich mal mit dem Thema aus­ein­an­der­set­zen und bei mei­ner WordPress-Seite die Ladegeschwindigkeit opti­mie­ren.

    Habe ich sowie­so vor gehabt, des­halb passt die­se Artikelserie gra­de rich­tig gut. Ich wür­de sagen per­fek­tes Timing.

  8. Im Artikel wird auf Jetpack in verwiesen.Darf man jet­pack in Deutschland ver­wen­den?

    • Hallo,

      selbst­ver­ständ­lich darfst Du Jetpack in D. ein­set­zen. Das Plugin warnt Dich sogar bei allen Datenschutz rele­van­ten Bereichen vor, wenn sie nicht mit dem deut­schen Recht ver­ein­bar sind. Diese Funktionen musst Du ja nicht nut­zen.

  9. Dem kann ich nur zustim­men. Nachdem ich mei­ne WordPress-Seiten (für Kunden und auch mei­ne eige­ne) einem Performance-Check unter­zie­he und die­se ver­su­che auf min­des­ten 70% bis 80% zu stei­gern (100% sind wirk­lich nur sehr sel­ten und mit viel Zeitaufwand mach­bar), fah­ren die Webseiten auch alle­samt bes­se­re Rankings ein. Hätte nicht gedacht, dass das so ein gro­ßer Ranking-Faktor ist, aber anschei­nend legt Google sehr viel Wert auf eine ange­neh­me Ladezeit.

  10. Bin ich hier bei Dr. WordPress, oder was? ;-) Die Überschrift wird dem Artikel nicht gerecht. Das Thema ist für ALLE Websites wich­tig und natür­lich kom­plex, aber Danke für die schö­ne Übersicht mit den inter­es­san­ten Beispielen!

    • Ich muss­te bei der Lektüre Deines Kommentars erst­mal herz­haft lachen :-) DrWordPress :-)

      Klar stimmt das abso­lut, das Thema ist für jede Webseite extrem wich­tig. Da aber die nächs­ten Tage der zwei­te Artikel aus der Minireihe erscheint, wird dann auch der Titel etwas kon­kre­ter. Denn Anhand einer WordPress-Installation set­ze ich bei­spiel­haft alle oben genann­ten Punkte um, damit es auch deut­lich wird, wie genau man die vor­ge­stell­ten Punkte abar­bei­tet. Denn ein­fach nur drü­ber schrei­ben könn­te ja jeder…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.