Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 8. März 2016

High Speed: Was WordPress-Websites wirklich schnell macht – [#1]

High Speed: Was WordPress-Websites wirklich schnell macht - [#1]

Hast du dir schon mal die Frage gestellt, war­um es WordPress-Websites mit sehr vie­len Bildern auf der Startseite gibt, die trotz­dem deut­lich unter einer Sekunde laden? Richtig gele­sen. Deutlich unter einer Sekunde Ladezeit. Das ist durch­aus mög­lich und mach­bar, aller­dings erfor­dert es sehr viel Sachkenntnis und vor allem Arbeit. Es kann zum Beispiel kein Theme genutzt wer­den, wel­ches sich auto­ma­tisch aktua­li­sie­ren soll. Auch ein Child-Theme ent­fällt, weil an zu vie­len Schrauben gedreht wer­den muss. Doch der gan­ze Aufwand lohnt sich, denn für Google ist eine solch schnel­le Seite ein ech­ter Grund, sie höher zu ran­ken. Deshalb beschäf­ti­gen wir uns in die­ser klei­nen Serie nicht mit den 100 von 100 Punkten bei Google Page Speed, son­dern mit der Frage, wie man Websites so rich­tig schnell macht.

High Speed: Was WordPress-Websites wirklich schnell macht - [#1]

Websites rasend schnell machen

Normalerweise wird man für eine sol­che Serie, wie wir sie mit die­sem Beitrag anfan­gen, immer eine Testseite ein­rich­ten. Doch eine Testseite ist schnell opti­miert, denn es sind kaum Plugins instal­liert, es wer­den wenig CSS- und JavaScript-Dateien gela­den und es sind sehr wenig Bilder auf der Startseite ein­ge­bun­den. Wir wol­len jedoch anhand einer ech­ten Live-Website mit 28 zum Teil groß­for­ma­ti­gen Bildern auf­zei­gen, dass es abso­lut funk­tio­niert, auch eine sol­che Website rasend schnell zu machen. Die Website, um die es sich han­delt, ist mei­ne Democratic Post. Übrigens ist die Endgeschwindigkeit einer Website oft­mals Fleissarbeit, denn es grei­fen vie­le – auch manch­mal sehr klei­ne – Optimierungen inein­an­der.

Erster Test:

Der erste Test

Zweiter Test:

Der zweite Test

Warum wir Google Page Speed nicht beachten

Google Page Speed Insights ist ohne Frage ein sehr gutes Werkzeug für die Geschwindigkeitsoptimierung von Websites. Allerdings sind man­che Regeln nicht nur frag­lich, son­dern ver­hin­dern sogar wei­te­res Geschwindigkeitspotenzial. Besonders das CSS, wel­ches Google ger­ne als Inline-CSS (den Teil des CSS, der für die Darstellung des sicht­ba­ren Bereichs ver­ant­wort­lich ist) sehen möch­te, ver­hin­dert schnel­le­re Ladezeiten bei man­chen Themes. Eine ver­link­te CSS-Datei, die sich her­vor­ra­gend cachen lässt, ist grund­sätz­lich schnel­ler, wenn viel­leicht auch nur beim Aufruf einer wei­te­ren Seite. Zudem meckert Google noch gern an sei­nen eige­nen Dateien her­um, weil die­se sich nur eine kur­ze Zeit cachen las­sen. Daher legen wir unser Hauptaugenmerk auf rei­ne Geschwindigkeit, auf mess­ba­re Performance.

High Speed Tipp #1 – Die Wahl des richtigen Hosters

Die Wahl des rich­ti­gen Webhosters mit einer pas­sen­den Lösung für das Hosting ist sehr wich­tig. Denn die Geschwindigkeit beginnt bereits hier. WordPress läuft bereits auf güns­ti­gen Shared-Hosting-Paketen, doch das ist die fal­sche Wahl, wenn du Geschwindigkeit willst. Denn auf die­sen güns­ti­gen Webhosting-Paketen tei­len sich zum Teil weit über 100 Websites einen vir­tu­el­len Server. Haben ande­re Websites auf die­sem Server viel Traffic, wirst du es zu spü­ren bekom­men. Du brauchst also eine ver­nünf­ti­ge Lösung, die jedoch tat­säch­lich nur eini­ge Euro mehr kos­tet. Empfehlenswert sind hier zwei bezahl­ba­re Lösungen, die ich bei­de kurz vor­stel­le.

Managed WordPress Hosting

Raidboxes - Premium WordPress Hosting aus Deutschland

Raidboxes bie­tet Premium WordPress-Hosting aus Deutschland. Das Hosting ist ein Managed WordPress-Hosting. Das bedeu­tet, dass du dich um nichts küm­mern musst. Ab dem Paket “Starter” ist ein eige­ner vir­tu­el­ler Server inklu­si­ve, den du dir mit nie­man­dem tei­len musst. Wichtig bei der Auswahl des rich­ti­gen Hosters ist, ob die­ser die Websites auf SSDs oder nor­ma­len HDDs spei­chert. Deine Wahl für mehr Geschwindigkeit muss zwin­gend immer SSD sein. Raidboxes bie­tet dir grund­sätz­lich nur SSDs an. Das “Starter Paket” kos­tet monat­lich 17,85 Euro inklu­si­ve MwSt. Dafür bekommst du zusätz­lich einen guten Support, der sogar dei­ne Website für dich kos­ten­los umzieht. Du kannst das Managed WordPress Hosting bei Raidboxes 14 Tage kos­ten­los tes­ten. Diese Art des Hosting ist rich­tig für dich, wenn du wenig Ahnung von Server-Konfiguration hast.

Managed-Root Cloud Server von hostNET

Managed-Root-Cloud Server von hostNET

Der Managed-Root Cloud Server der deut­schen Firma hostNET ist mei­ne Wahl. Alles was die Sicherheit und grund­sätz­li­che Konfiguration des Servers angeht, wird durch hostNET erle­digt. Wenn jedoch zusätz­li­che Dinge instal­liert wer­den müs­sen, musst du das selbst erle­di­gen. Der Root-Cloud Server stellt dir eine SSD zur Verfügung, die in einem RAID5 System mit Hot-Spare und zusätz­li­chem HA-Failover-Cluster abge­bil­det wer­den. Das schafft einen rich­ti­gen Performance-Schub. Zusätzlich – als klei­nen Service – bekommst du noch eine eige­ne IP-Adresse dazu. Das wirk­lich Interessante an die­ser Hosting-Möglichkeit ist jedoch, dass sie mit dei­ner Website und den Anforderungen mit wächst. Denn du kannst den Speicherplatz, die CPU-Anzahl und den Arbeitsspeicher jeder­zeit selbst erhö­hen und auch wie­der ver­rin­gern, wenn es nötig wird. Abgerechnet wird sekun­den­ge­nau. Der Root-Cloud Server kos­tet ab 14,88 Euro inklu­si­ve MwSt. im Monat. Sieben Tage lang kann der Server kos­ten­frei getes­tet wer­den. Wir haben den Service bei Dr. Web schon aus­führ­li­cher vor­ge­stellt.

High Speed Tipp #2 – Auf HTTP/2 bei der Hosterwahl achten

HTTP/2 ist die Zukunft des Internets. Dieses Protokoll – der Nachfolger von HTTP 1.1 – wur­de für moder­ne und kom­ple­xe Websites von heu­te ent­wi­ckelt. Die Vorteile lie­gen dar­in, dass das neue Protokoll dem Browser ermög­licht, vie­le ver­schie­de­ne Dateien gleich­zei­tig zu laden, und nicht mehr nach­ein­an­der, wie es bei HTTP 1.1 noch der Fall war. Denn HTTP 1.1 muss­te für jede Anfrage (Request) eine Verbindung öff­nen, wäh­rend der Browser mit HTTP 2.0 auf einer TCP-Verbindung meh­re­re Ressourcen gleich­zei­tig laden kann. Das ver­schafft einen gro­ßen Geschwindigkeitsvorteil. Während Raidboxes noch mit dem “Vorläufer” SPDY 3.1 arbei­tet, setzt hostNET bereits HTTP/2 ein. Mit die­sem Online-Tool kannst du selbst tes­ten, auf wel­cher Website HTTP2 bereits ein­ge­setzt wird.

Info: Die Vorteile von HTTP/2 kön­nen nur mit einem HTTPS-Zertifikat genutzt wer­den, weil die meis­ten Browser dies erfor­dern.

High Speed Tipp #3 – Die Plugins ausmisten

Plugin Performance Profiler Ergebnis

Die meis­ten Menschen haben viel zu vie­le Plugins akti­viert und im Einsatz. Jedes zusätz­li­che Plugin ver­lang­samt die Website unge­mein. Deshalb mis­te die Plugins aus und las­se nur die abso­lut nöti­gen akti­viert und instal­liert. Auch Plugins, die du nur ab und an benö­tigst und die deak­ti­viert sind, kön­nen dein WordPress immer noch lang­sam machen, des­halb lösche sie. Mit dem Plugin P3 (Plugin Performance Profiler) kannst du sehr schnell fest­stel­len, wel­che Plugins die Performance-Fresser sind. Die müs­sen dann unbe­dingt raus. Yoast SEO ist einer der Kandidaten, die eine Website lang­sam wer­den las­sen. Das schnells­te SEO-Plugin ist übri­gens wpSEO, wel­ches jedoch kos­ten­pflich­tig ist. Es kos­tet dich ein­ma­lig ab 23,79 Euro inklu­si­ve Steuer. Um Premium-Plugins wirst du indes nicht her­um­kom­men, wenn dir die Geschwindigkeit dei­ner Website am Herzen liegt.

Den Quellcode deiner Website prüfen

Um wirk­lich kom­pe­tent ent­schei­den zu kön­nen, wel­che Plugins raus­flie­gen, schaue dir den HTML-Quellcode dei­ner Website genau an. So fin­dest du her­aus, wel­che Plugins wie viel zusätz­li­ches CSS und JavaScript laden. Auch hier gilt wie­der: weni­ger ist mehr. Wenn jedoch Plugins dabei sind, die du unbe­dingt behal­ten musst, dann schrei­be sie dir auf. Später zei­ge ich dir, wie die Dateien nur dort gela­den wer­den, wo es wirk­lich sein muss.

High Speed Tipp #4 – Code ausmisten im WordPress-Theme

Je nach­dem, wel­ches Theme sich im Einsatz befin­det, ist es ent­we­der gut oder schlecht pro­gram­miert wor­den. Viele Themes schlep­pen einen Overhead an Quellcode mit sich rum, der sie lang­sam macht. An die­sem Punkt ist Fleissarbeit ange­sagt, denn es geht dar­um, den unnö­ti­gen Quellcode zu ent­fer­nen und mal rich­tig aus­zu­mis­ten. Dazu kannst du alle Templates des Themes kon­trol­lie­ren und schau­en, was unnö­tig ist und gelöscht wer­den kann. Gerade die teu­ren Premium-Themes sind oft­mals viel zu über­la­den, daher soll­te man viel­leicht auf ein wirk­lich gut ent­wi­ckel­tes, kos­ten­lo­ses Theme umstei­gen. Eine hohe Code-Qualität und Ausnutzung bie­ten dir etwa Themes von Automattic und Anders Norén.

High Speed Tipp #5 – Den Header von WordPress ausmisten

Früher gab es mal eini­ge weni­ge Links im WordPress-Header, heu­te sind eine gan­ze Palette davon zu fin­den, die je nach Seite ange­zeigt wer­den. Zudem kommt noch der Code für die Emojis dazu, eine Art Smileys. Seit WordPress 4.2 sind die­se Emoji im Core ver­an­kert. Deren Scripte wer­den bei jedem Seitenaufruf sowohl im Backend wie im Frontend gelie­fert. Völlig egal, ob man die­se Emoji irgend­wo genutzt hat oder nicht. Also gehört auch die­ser Code deak­ti­viert, denn er frisst nur Performance.

Ein Klick öff­net das Gist bei GitHub
Den Headerbereich von WordPress aufräumen

Fazit des ersten Teils

Wenn du jeden Bereich beach­tet hast, beson­ders den Bereich mit dem Ausmisten der Plugins, dann soll­te dei­ne Website jetzt bereits merk­lich schnel­ler sein als zuvor. Als ich von einem Shared-Hoster zu hostNET wech­sel­te, war mei­ne Website bereits ohne jede Optimierung so schnell wie zuvor mit Optimierungen. Vielleicht ist dir noch nicht klar, war­um du auch auf so klei­ne Dinge, wie dem Ausmisten von HTML-Quellcode und dem Bereinigen des Headers Wert legen soll­test. Doch ich ver­si­che­re dir, dass sich die vie­len klei­nen Optimierungen sum­mie­ren wer­den und einen guten Teil zur Ladegeschwindigkeit bei­tra­gen wer­den. Denn alle Arbeiten grei­fen letzt­end­lich inein­an­der.

WordPress-Websites wirklich schnell: die Serie

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.

28 Kommentare

  1. das Divi-Theme gehört ja auch zu den belieb­tes­ten Themes, ins­be­son­de­re mit dem divi – Builder. Es soll ja auch SEO freund­lich sein. Habt ihr damit Erfahrungen gesam­melt? Sollte man es Deiner Meinung nach nicht für SEO-Projekte ein­set­zen

  2. Guten Morgen!

    Hast du eine aktu­el­le Empfehlung für ein schnel­les und leicht zu bedie­nen­des WordPress Theme? Ich möch­te mög­lichst wenig Anpassungen vor­neh­men, daher wäre ein Theme was von Haus aus sehr flott ist genau das Richtige.

    Schöne Grüße

    Louis

  3. Hallo Andreas,
    macht Deiner Meinung nach ein SEO Tool über­haupt Sinn? Die spre­chen­den URL’s sind ja schon weg­ge­fal­len. Und Geschwindigkeit kos­ten sie auch.
    VG
    Alfred

    • Ein SEO-Tool macht immer Sinn. Damit opti­mierst Du zum Beispiel ja auch Deine Texte und die Google-Vorschau. Zudem setzt es die rich­ti­gen Titel und sorgt dafür, dass kei­ne Duplikate ent­ste­hen.

  4. Auf alle Fälle ein sehr inter­es­san­ter Artikel. Genau dar­an muss ich arbei­ten…

  5. Hallo Andreas,
    ech­te Performance-Fresser sind ja die von vie­len ein­ge­setz­ten Slider und Gallery-Plugins. Manche die­ser Tools kom­men gleich mit mehe­ren .js- und .css-Dateien daher. Kannst du all denen unter uns, die hier­auf nicht ver­zich­ten wol­len, einen Tipp geben?
    LG

    • Klar. Kaufe Dir das Gonzales-Plugin und sor­ge damit dafür, dass alle betref­fen­den Dateien nur noch auf den ein­zel­nen Beiträgen oder der betref­fen­den Galerie-Seite ein­ge­bun­den wer­den. Das macht dann zumin­dest Deine Startseite schnel­ler.

      • Hallo Andreas, dei­ne Antwort bezieht sich ja eher auf mei­nen Post wei­ter oben. Die meis­ten wer­den einen Slider ja auf der Startseite ein­setz­ten und da hilft dann auch das besag­te Tool nichts. Gibt es denn über­haupt einen “schlan­ken Slider”?

      • Mag sein. Danach müss­te man im Plugin-Verzeichnis suchen. Allerdings kann man sich die Optimierung dann fast spa­ren. Spielkram kos­tet immer hef­tig Geschwindigkeit. Zudem ner­ven Slider die meis­ten Besucher ganz kräf­tig an, das gebe ich mal zu beden­ken. Ich kli­cke sol­che Seiten immer gleich wie­der weg.

  6. Bei wel­chem Hoster befin­det sich eigent­lich demo­cra­tic­post? Hostnet?

  7. Sorry, ich bin voel­leicht ein biß­chen blöd, aber ich ver­ste­he es nicht. Ich habe hier einen ers­ten Test (Chrome) und einen zwei­ten, kurz danach (Firefox). Jetzt gehe ich mal dsvon aus, dass der Browser, in dem der Test gestar­tet wird, nixhts zu sagen har. Dann habe ich im ers­ten Test eine Ladezeit von 3,99 Sec. und bin damit schnel­ler als 42% aller getes­te­ten Website. 5 Minuten spä­ter hat die sel­be Site 5,72 Sekunden Ladezeit und ist trotz­dem bes­ser als 72% aller Site. Irgendwie ver­ste­he ich den Zusammenhang nicht: Wie kann eine Site, die eund 2 Sekunfden lang­sa­mer ist, bes­ser ran­ken? Die gemes­se­ne Zeit ist ver­hält­nis­mä­ßig will­kür­lich, denn bei einer Optimierung im zehn­tel-Sekunden-Bereich erschie­nen mir fast 2 Sekunden Differenz zu ein und der­sel­ben Site extrem viel. Weilche Zahl ist für dich die aus­schlag­ge­ben­de? Nur die GEschwindigkeit oder stellst du sie in Zusammenhang mit einer ande­ren?

    Zum schluss noch eine ande­re Frage: Gibt es ein Tool, mit dem ich meh­re­re Seiten par­al­lel tes­ten kann. Also so 10, 20 oder mehr. Die Anzeige muß anschlie­ßend nicht so detail­liert sein.

    • Hallo Achim,

      hast Du bei den Pingdom Tools den Test über »Amsterdam, Netherlands« ein­ge­stellt? Dann soll­te der zwei­te Test schnel­ler sein, wenn Deine Website bereits ein Caching ver­wen­det. Es kann jedoch durch­aus auch vor­kom­men, dass der zwei­te Test lang­sa­mer ist als der ers­te. Das hängt dann von Dateien ab, die über ande­re Server aus­ge­lie­fert wer­den. Das Wichtige ist immer die Ladegeschwindigkeit für Google. Du hast auf jeden Fall recht viel Potenzial für eine Optimierung. Mir ist übri­gens kein Tool bekannt, mit dem sich vie­le Websites im Bulk tes­ten las­sen.

      • Danke für die schnel­le Antwort. Beide Tests gin­gen über Dallas USA, wobei der zwei­te lang­sa­mer als der ers­te war. Die Frage ist aj auch, was wird gezählt. Die Startseite oder Unterseiten. Gib mal die­se URL ein. So ein Ergebnis habe ich noch nie gese­hen: http://tools.pingdom.com/fpt/#!/bHcVNr/http://www.foto-gregor-gruppe.de/koeln/shop/specials.asp

        Allerdings ist die Startseite die­se: http://www.foto-gregor-gruppe.de/ Und die hat eine opti­ma­le Geschwindigkeit. Ist ja auch wenig drauf.

        Wenn ich bei goog­le die Suche “foto köln” ein­ge­be erscheint Foto Gregor ganz oben. Allerding weiß ich nicht, ob die oben ange­zeig­ten Ergebniss orga­nisch sind oder bezahlt.

      • Google zählt natür­lich auch den Speed der Unterseiten, klar. Doch um kor­rek­te Ergebnisse zu erzie­len, soll­te der Test immer über Amsterdam lau­fen. Die kor­rek­te Ladezeit Deiner Unterseite sind dem­zu­fol­ge 5,61 Sekunden. Das liegt an den wesent­lich zu gro­ßen Grafiken.

  8. Hallo Andreas,
    dan­ke für dei­ne Artikelserie. Ich bezie­he mich auf dei­nen Satz “Später zei­ge ich dir, wie die Dateien nur dort gela­den wer­den, wo es wirk­lich sein muss.” Dazu habe ich weder hier noch im zwei­ten Teil etwas gefun­den. In mei­nem Fall habe ich ein Kartenplugin und ein Kontakt-Form-Plugin instal­liert (wp-geo und con­tact form 7) und fest­ge­stellt, dass die scrip­te auch gela­den wer­den, wenn sie nicht gebraucht wer­den (z.b. auf der Startseite gibt es weder ein Kontakt-for­mu­lar noch eine Karte)

    Kann ich da was machen? Könnte der Plugin-aut­hor dage­gen etwas tun?
    Gruß Konrad

  9. Also irgen­wie paßt das nicht so recht. Ich habe, um es mal aus­zu­pro­bie­ren, mir einen Account bei host­net geholt und eine Site instal­liert. Vollkommen nackt, ohne Content und Plugins lag die Site bei72/100 und war damit schnel­ler als 83 % aller getes­te­ten Seiten. Dann habe ich mal das Theme gewech­selt (DIVI – elegantThemes) und 80 Plugins ein­ge­spielt und akti­viert. Der Unterschied war nicht so bedeu­ten. Im schlech­tes­ten Fall war die Site immer noch bes­ser als 40 & der getes­te­ten Seiten und kurz daru­uf (ein/wei Klicks spä­ter, nichts an der Site geän­dert) bes­ser als 73 und 75 % aller getes­te­ten Seiten. Sicher, ein Unterschied. Aber gemes­sen an den akti­vier­ten Plugins ver­tret­bar, den­ke ich.

    Das zeigt für mich auch: Was schein­bar wirk­lich stört, ist der Content. Läßt man ihn weg, per­formt die Seite auch rich­tig gut. (fotonews.tv)

    • Hier geht es nicht um die Optimierung nach Punkten. Die Punkte sind mir völ­lig egal, selbst wenn ich nur 2/100 hät­te. Mir ging es aus­schliess­lich dar­um, mit mei­ner Startseite in den unte­ren Millisekundenbereich der Ladezeit zu kom­men. Also unter 500 Millisekunden Ladezeit zu haben. Und dazu muss man an vie­len Ecken abspe­cken.

  10. Hallo Achim,

    ver­su­che mal das »P3 (Plugin Performance Profiler)« Plugin (https://de.wordpress.org/plugins/p3-profiler/).

  11. Hallo,
    gibt es eigen­lich ein Tool, mit dem ich sehen kann, wel­chen Speicherbedarf ein Plugin hat oder eine ande­re Methode, die zu erfah­ren?

    Schöner Artikel, freue mich auf die nächs­te Folge.

Schreibe einen Kommentar zu Andreas Hecht Antworten abbrechen

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