Kategorien
Tipps, Tricks & Tutorials WordPress

Site Performance: Was WordPress-Websites wirklich schnell macht

Hast du dir schon mal die Frage gestellt, warum es WordPress-Websites mit sehr vielen Bildern auf der Startseite gibt, die trotzdem deutlich unter einer Sekunde laden? Richtig gelesen. Deutlich unter einer Sekunde Ladezeit. Das ist durchaus möglich und machbar, allerdings erfordert es sehr viel Sachkenntnis und vor allem Arbeit.

Anzeige

Es kann zum Beispiel kein Theme genutzt werden, welches sich automatisch aktualisieren soll. Auch ein Child-Theme entfällt, weil an zu vielen Schrauben gedreht werden muss. Doch der ganze Aufwand lohnt sich, denn für Google ist eine solch schnelle Seite ein echter Grund, sie höher zu ranken.

  1. Websites rasend schnell machen
  2. WordPress Performance-Fresser abschalten
  3. CSS und JavaScript sind maßgeblich am Speed beteiligt
  4. Performance durch die richtige Permalinkstruktur

Websites rasend schnell machen

Normalerweise wird man für eine solche Serie, wie wir sie mit diesem Beitrag anfangen, immer eine Testseite einrichten. Doch eine Testseite ist schnell optimiert, denn es sind kaum Plugins installiert, es werden wenig CSS- und JavaScript-Dateien geladen und es sind sehr wenig Bilder auf der Startseite eingebunden. Wir wollen jedoch anhand einer echten Live-Website mit 28 zum Teil großformatigen Bildern aufzeigen, dass es absolut funktioniert, auch eine solche Website rasend schnell zu machen. Die Website, um die es sich handelt, ist meine Democratic Post. Übrigens ist die Endgeschwindigkeit einer Website oftmals Fleissarbeit, denn es greifen viele – auch manchmal sehr kleine – Optimierungen ineinander.

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 manche Regeln nicht nur fraglich, sondern verhindern sogar weiteres Geschwindigkeitspotenzial. Besonders das CSS, welches Google gerne als Inline-CSS (den Teil des CSS, der für die Darstellung des sichtbaren Bereichs verantwortlich ist) sehen möchte, verhindert schnellere Ladezeiten bei manchen Themes. Eine verlinkte CSS-Datei, die sich hervorragend cachen lässt, ist grundsätzlich schneller, wenn vielleicht auch nur beim Aufruf einer weiteren Seite. Zudem meckert Google noch gern an seinen eigenen Dateien herum, weil diese sich nur eine kurze Zeit cachen lassen. Daher legen wir unser Hauptaugenmerk auf reine Geschwindigkeit, auf messbare Performance.

Anzeige

High Speed Tipp #1 – Die Wahl des richtigen Hosters

Die Wahl des richtigen Webhosters mit einer passenden Lösung für das Hosting ist sehr wichtig. Denn die Geschwindigkeit beginnt bereits hier. WordPress läuft bereits auf günstigen Shared-Hosting-Paketen, doch das ist die falsche Wahl, wenn du Geschwindigkeit willst. Denn auf diesen günstigen Webhosting-Paketen teilen sich zum Teil weit über 100 Websites einen virtuellen Server. Haben andere Websites auf diesem Server viel Traffic, wirst du es zu spüren bekommen. Du brauchst also eine vernünftige Lösung, die jedoch tatsächlich nur einige Euro mehr kostet. Empfehlenswert sind hier zwei bezahlbare Lösungen, die ich beide kurz vorstelle.

Managed WordPress Hosting

Raidboxes - Premium WordPress Hosting aus Deutschland
Raidboxes bietet Premium WordPress-Hosting aus Deutschland. Das Hosting ist ein Managed WordPress-Hosting. Das bedeutet, dass du dich um nichts kümmern musst. Ab dem Paket “Starter” ist ein eigener virtueller Server inklusive, den du dir mit niemandem teilen musst. Wichtig bei der Auswahl des richtigen Hosters ist, ob dieser die Websites auf SSDs oder normalen HDDs speichert. Deine Wahl für mehr Geschwindigkeit muss zwingend immer SSD sein. Raidboxes bietet dir grundsätzlich nur SSDs an. Das “Starter Paket” kostet monatlich 17,85 Euro inklusive MwSt. Dafür bekommst du zusätzlich einen guten Support, der sogar deine Website für dich kostenlos umzieht. Du kannst das Managed WordPress Hosting bei Raidboxes 14 Tage kostenlos testen. Diese Art des Hosting ist richtig 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 deutschen Firma hostNET ist meine Wahl. Alles was die Sicherheit und grundsätzliche Konfiguration des Servers angeht, wird durch hostNET erledigt. Wenn jedoch zusätzliche Dinge installiert werden müssen, musst du das selbst erledigen. Der Root-Cloud Server stellt dir eine SSD zur Verfügung, die in einem RAID5 System mit Hot-Spare und zusätzlichem HA-Failover-Cluster abgebildet werden. Das schafft einen richtigen Performance-Schub. Zusätzlich – als kleinen Service – bekommst du noch eine eigene IP-Adresse dazu. Das wirklich Interessante an dieser Hosting-Möglichkeit ist jedoch, dass sie mit deiner Website und den Anforderungen mit wächst. Denn du kannst den Speicherplatz, die CPU-Anzahl und den Arbeitsspeicher jederzeit selbst erhöhen und auch wieder verringern, wenn es nötig wird. Abgerechnet wird sekundengenau. Der Root-Cloud Server kostet ab 14,88 Euro inklusive MwSt. im Monat. Sieben Tage lang kann der Server kostenfrei getestet werden.

https://vimeo.com/117588025

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 – wurde für moderne und komplexe Websites von heute entwickelt. Die Vorteile liegen darin, dass das neue Protokoll dem Browser ermöglicht, viele verschiedene Dateien gleichzeitig zu laden, und nicht mehr nacheinander, wie es bei HTTP 1.1 noch der Fall war. Denn HTTP 1.1 musste für jede Anfrage (Request) eine Verbindung öffnen, während der Browser mit HTTP 2.0 auf einer TCP-Verbindung mehrere Ressourcen gleichzeitig laden kann. Das verschafft einen großen Geschwindigkeitsvorteil. Während Raidboxes noch mit dem “Vorläufer” SPDY 3.1 arbeitet, setzt hostNET bereits HTTP/2 ein. Mit diesem Online-Tool kannst du selbst testen, auf welcher Website HTTP2 bereits eingesetzt wird.

Info: Die Vorteile von HTTP/2 können nur mit einem HTTPS-Zertifikat genutzt werden, weil die meisten Browser dies erfordern.

High Speed Tipp #3 – Die Plugins ausmisten

Plugin Performance Profiler Ergebnis
Die meisten Menschen haben viel zu viele Plugins aktiviert und im Einsatz. Jedes zusätzliche Plugin verlangsamt die Website ungemein. Deshalb miste die Plugins aus und lasse nur die absolut nötigen aktiviert und installiert. Auch Plugins, die du nur ab und an benötigst und die deaktiviert sind, können dein WordPress immer noch langsam machen, deshalb lösche sie. Mit dem Plugin P3 (Plugin Performance Profiler) kannst du sehr schnell feststellen, welche Plugins die Performance-Fresser sind. Die müssen dann unbedingt raus. Yoast SEO ist einer der Kandidaten, die eine Website langsam werden lassen. Das schnellste SEO-Plugin ist übrigens wpSEO, welches jedoch kostenpflichtig ist. Es kostet dich einmalig ab 23,79 Euro inklusive Steuer. Um Premium-Plugins wirst du indes nicht herumkommen, wenn dir die Geschwindigkeit deiner Website am Herzen liegt.

Den Quellcode deiner Website prüfen

Um wirklich kompetent entscheiden zu können, welche Plugins rausfliegen, schaue dir den HTML-Quellcode deiner Website genau an. So findest du heraus, welche Plugins wie viel zusätzliches CSS und JavaScript laden. Auch hier gilt wieder: weniger ist mehr. Wenn jedoch Plugins dabei sind, die du unbedingt behalten musst, dann schreibe sie dir auf. Später zeige ich dir, wie die Dateien nur dort geladen werden, wo es wirklich sein muss.

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

Je nachdem, welches Theme sich im Einsatz befindet, ist es entweder gut oder schlecht programmiert worden. Viele Themes schleppen einen Overhead an Quellcode mit sich rum, der sie langsam macht. An diesem Punkt ist Fleissarbeit angesagt, denn es geht darum, den unnötigen Quellcode zu entfernen und mal richtig auszumisten. Dazu kannst du alle Templates des Themes kontrollieren und schauen, was unnötig ist und gelöscht werden kann. Gerade die teuren Premium-Themes sind oftmals viel zu überladen, daher sollte man vielleicht auf ein wirklich gut entwickeltes, kostenloses Theme umsteigen. Eine hohe Code-Qualität und Ausnutzung bieten dir etwa Themes von Automattic und Anders Norén.

High Speed Tipp #5 – Den Header von WordPress ausmisten

Früher gab es mal einige wenige Links im WordPress-Header, heute sind eine ganze Palette davon zu finden, die je nach Seite angezeigt werden. Zudem kommt noch der Code für die Emojis dazu, eine Art Smileys. Seit WordPress 4.2 sind diese Emoji im Core verankert. Deren Scripte werden bei jedem Seitenaufruf sowohl im Backend wie im Frontend geliefert. Völlig egal, ob man diese Emoji irgendwo genutzt hat oder nicht. Also gehört auch dieser Code deaktiviert, denn er frisst nur Performance.

Ein Klick öffnet das Gist bei GitHub
Den Headerbereich von WordPress aufräumen

Fazit des ersten Teils

Wenn du jeden Bereich beachtet hast, besonders den Bereich mit dem Ausmisten der Plugins, dann sollte deine Website jetzt bereits merklich schneller sein als zuvor. Als ich von einem Shared-Hoster zu hostNET wechselte, war meine Website bereits ohne jede Optimierung so schnell wie zuvor mit Optimierungen. Vielleicht ist dir noch nicht klar, warum du auch auf so kleine Dinge, wie dem Ausmisten von HTML-Quellcode und dem Bereinigen des Headers Wert legen solltest. Doch ich versichere dir, dass sich die vielen kleinen Optimierungen summieren werden und einen guten Teil zur Ladegeschwindigkeit beitragen werden. Denn alle Arbeiten greifen letztendlich ineinander.

1 – Prefetch und Preconnect

Beide Techniken einzusetzen ist vorteilhaft, wenn viele externe Dateien und Scripte geladen werden sollen und müssen. Hierzu zählen zum Beispiel Google Adsense-Werbeblöcke genauso wie alle anderen Dateien, die von externen Servern geladen werden sollen. Der Einsatz ist sehr leicht zu bewerkstelligen und bringt messbare Vorteile. Es geht darum, dass die DNS-Auflösung und der sogenannte Handshake bereits beim anfänglichen Laden der Website durchgeführt wird, und nicht erst, wenn die Datei angefordert wird.

DNS – Prefetch

<link rel="dns-prefetch" href="//fonts.googleapis.com" />

Dieser Link mit der externen Ressource, die angefordert werden soll, kommt in den Header der Website. Diese Codezeile gibt dem Browser die Anweisung, die DNS-Auflösung bereits am Anfang des Ladens durchzuführen, so dass die Ressource im Anschluss schneller geladen werden kann. Das DNS (Domain Name System) übersetzt die IP-Adressen eines Servers in die allgemein verständlichen Domain-Namen. Man gibt die Domain in die Browserzeile ein und das DNS übersetzt dem Browser dann die Domain in die IP-Adresse des Servers. Im Schnitt dauert der Vorgang circa zwischen 20 und 250 Millisekunden. Mit dem Prefetch-Element kann diese Zeit abgekürzt werden.

Preconnect

<link rel="preconnect" href="//fonts.googleapis.com" />

Das Preconnect-Element unterscheidet sich nur in einem Punkt vom DNS-Prefetch. Hier wird noch ein Schritt weiter gegangen und ein TCP- und TLS-Handshake durchgeführt. Dies sind ebenfalls wichtige Vorgänge, die in der Regel einen Moment Zeit benötigen. Beide Elemente zu kombinieren ergibt durchaus Sinn, denn das Laden externer Ressourcen geht dann schneller bei Anforderung. Da sich bei einer professionellen Geschwindigkeitsoptimierung alle nicht für die Darstellung des sichtbaren Bereichs nötigen Dateien im Footer befinden, sorgt man so für ein schnelleres Laden der Dateien im Footer. Ich empfehle daher beide Elemente für alle externen Dateien in den Header einzufügen, allerdings nur dort laden zu lassen, wo es Sinn ergibt. Das wird für die meisten Dateien nur im Bereich der Artikel, jedoch nicht auf der Startseite der Fall sein.

Mein Header sieht daher so aus:
Prefetch und Preconnect
Mit <?php if( is_single() ) : ?> steuere ich, wo ich welche Eigenschaften brauche. Denn Prefetch und Preconnect ergeben nur dort Sinn, wo die entsprechenden externen Dateien auch geladen werden. Da die Startseite meiner Website nicht alle Scripte und Dateien lädt, lasse ich die DNS-Auflösung nur dort zu, wo die Dateien wirklich geladen werden.

2 – Die Bildoptimierung

In diesem Bereich müssen wir am tiefsten in die Trickkiste greifen. Das fängt bereits beim Speichern für das Web an. In Photoshop muss darauf geachtet werden, dass JPEGs progressiv gespeichert werden. Viele und zum Teil großformatige Bilder auf einer Website einzusetzen, ist der Tod einer jeden Performance. Was allerdings nicht heißt, dass es nicht funktionieren wird. Man muss nur etwas tricksen und leider: Geld ausgeben! Schauen wir uns die Startseite meiner Website Democratic Post an. 26 Bilder befinden sich auf der Startseite, eines davon im Format 1000 x 420 Pixel, fünf davon im Format 740 x 315 Pixel. Zudem habe ich noch das Jetpack-Toppost-Widget aktiviert. Das ist, gelinde gesagt, eine echte Herausforderung. Ich bin bei der Optimierung folgendermaßen vorgegangen:

WordPress-Plugin zur Bildoptimierung: Optimus HQ

Optimus ist das zurzeit beste Plugin zur Optimierung von Bildern. Glaube mir, es gibt kein besseres. Optimus ist nicht kostenfrei, denn es ist ein Premium-Plugin. Natürlich gibt es von Optimus auch eine kostenfreie Variante, doch die leistet nicht das, was wir benötigen. Ein Kauf bleibt dir also nicht erspart, wenn du wie ich viele Bilder auf der Startseite einsetzt. Optimus HQ wird zurzeit preisreduziert angeboten und kostet für ein Jahr Nutzung nur 19 Euro. Nicht unbedingt ein Betrag, der dich viel ärmer macht.

Die verlustfreie Bildkomprimierung von Optimus HQ ist hervorragend. Zudem bietet das Plugin einen Vorteil gegenüber allen anderen Bildoptimierungs-Plugins. Es kann WebP-Grafiken erzeugen. Genau dieses Dateiformat macht Websites mit vielen Bildern so schnell, wenn das Format vom Browser unterstützt wird. Allerdings sorgt es auch ohne den WebP-Support für beste Ergebnisse.

Die Optimus HQ Einstellungen
Optimus empfiehlt, das Cache Enabler Plugin zu nutzen, um den WebP-Support zu integrieren. Ich rate davon ab, denn Cachify ist immer noch das schnellste Caching-Plugin, wenn es auf die Erzeugung von statischen HTML-Seiten eingestellt ist, doch dazu später mehr. Nachdem Optimus HQ gekauft und installiert ist, sollte der Bulk-Optimizer genutzt werden, um alle bereits in der Mediathek gespeicherten Bilder zu optimieren.

WebP-Support mit der .htaccess sicherstellen

Die intelligenteste und schnellste Methode, die richtigen Bildformate an die unterschiedlichen Browser zu liefern, ist ein Eintrag in der .htaccess Datei. Die sorgt dann dafür, dass in den unterstützten Browsern das JPG-Bildformat blitzschnell in das WebP-Format umgeschrieben wird. Kopiere einfach den folgenden Code ganz oben in deine .htaccess Datei hinein:

Ein Klick öffnet das Gist bei GitHub
htaccess-fuer-webp
Wenn wir nun den HTML-Quelltext anschauen, stellen wir fest, das dort noch immer JPEG-Dateien referenziert sind.

HTML-Quelltext
Wenn wir allerdings etwas tiefer in die Entwicklertools von Google Chrome tauchen, sehen wir im Bereich “Netzwerk” sehr schnell, dass die Grafik vom Browser nicht als JPEG, sondern als WebP dargestellt wird.

Als WebP an den Browser ausgelieferte Grafik
Hier noch einmal deutlicher zu erkennen:

Die als WebP ausgelieferte JPEG-Datei

Einschränkungen: Die Generierung von WebP-Bildformaten funktioniert nur bei Vorschau-Bildformaten, die in WordPress korrekt registriert worden sind über die Post-Thumbnail-Funktion.

Das Ergebnis ist überzeugend

Der Unterschied in der Dateigröße zwischen dem JPEG- und dem WebP-Format ist eklatant. Das erste große Vorschaubild meiner Website in einer Auflösung von 1000 x 420 Pixeln hat im JPEG-Bildformat immerhin 168 KB Dateigröße, als WebP hingegen nur noch 98,7 KB. Der Browser hat in dem Fall 69,3 KB weniger zu laden. Wenn wir alle anderen Bildformate dazurechnen, ergibt das eine gewaltige Reduzierung in der Dateigröße der Website. Browser mit Unterstützung des WebP-Dateiformats können die Website somit sehr viel schneller darstellen und laden.

Browser-Support für WebP-Grafiken

WebP Browser-Support
Für Firefox existiert ein Patch, der den fehlenden WebP-Support hinzufügt.

3 – Google Adsense-Anzeigen

Kaum eine Website oder ein Blog kommen heute noch ohne die beliebten Google Adsense-Anzeigen aus. Das ist auch gut so, denn richtig platziert kann man mit ihnen eine angenehme Summe Geld verdienen. Doch wo sollten die Anzeigen platziert werden, damit sie erstens nicht die Ladegeschwindigkeit einer Website beeinträchtigen und zweitens auch richtig wirkungsvoll sind? Der richtige und intelligente Einsatz entscheidet über das damit zu erwirtschaftende Geld und über die Performance. Google selbst gibt hierfür eine Richtlinie aus, die jedoch nicht wirkungsvoll genug ist, und auch keine Rücksicht auf die Performance nimmt. Daher teile ich dir meine Erfahrung mit dem optimalen Einsatz mit:

a – Adsense-Anzeigen haben nichts auf der Startseite zu suchen!
Platziere sie dort auf keinen Fall. Sie verlangsamen den Seitenaufbau um ungefähr 800 Millisekunden. Das bedeutet fast eine ganze Sekunde Ladezeit für einen Anzeigenblock von 300 x 250 Pixeln Größe. Zudem bringen die Anzeigen dort platziert nur ein paar Cent pro Tag ein, auch bei größerem Traffic. Bedenke immer: Die Startseite ist für viele Besucher immer noch das Aushängeschild. Der Besucher erwartet eine rasant ladende Startseite von dir. Zudem hat die Ladezeit auch einen direkten Einfluss auf die Bouncerate, also auf die Anzahl der Seiten, die ein Besucher sich anschaut, bevor er deine Website wieder verlässt.

b – Google Adsense nur im Inhalt der Artikel einbinden
Eine einzige Anzeige, die direkt im Inhalt des Artikels eingebunden ist, kann richtig Geld verdienen. Viel mehr als bei anderer Platzierung. Meiner Erfahrung nach reicht diese eine Anzeige aus, um den erwünschten Umsatz zu generieren und die Ladezeit im Zaum zu halten. Hier bei Dr. Web ist die Anzeige oberhalb des ersten Absatzes eingebunden, ich habe sie unterhalb des ersten Absatzes integriert. Für mich funktioniert sie dort hervorragend.

c – WordPress Funktion zum automatischen Einbau der Anzeigen

WordPress kann die Adsense-Anzeigen automatisch nach dem ersten Absatz eines Artikels in den Inhalt einfügen. Den folgenden Code musst du mit deinem Google Adsense-Werbeblock ergänzen und ihn dann entweder in die functions.php deines Themes einfügen, oder in das seitenspezifische WordPress-Plugin.

Ein Klick öffnet das Gist bei GitHub
adsense-in-content


WordPress Performance-Fresser abschalten

Wenn du aus deinem WordPress viel Geschwindigkeit herausholen möchtest, dann solltest du einige Funktionen des Content Management Systems abschalten. Denn WordPress gehört nicht gerade zu den schnellen Vertretern seiner Zunft. Viele Dinge sind in den Core gewandert, obwohl sie keinesfalls durchdacht sind und das CMS langsamer machen, als es eigentlich nötig wäre. Das ist zwar schade, doch man muss es ja nicht hinnehmen.

1 – WordPress Heartbeat API

Die Heartbeat API steuert alle Ajax-Aufrufe innerhalb von WordPress. Zudem sorgt sie auch für das Zwischenspeichern beim Schreiben eines Artikels Im Backend. Allerdings tut sie das sehr regelmäßig, wie ein Herzschlag bei einem Menschen. Diese ständigen Anfragen an den Server gehen stark auf die CPU und fressen damit wichtige Performance. Gleichwohl hat die Heartbeat API natürlich Vorteile. Die Vorteile kann man allerdings nur ausschöpfen, wenn man keine statische Website hat, sondern einen Blog oder ein Magazin führt.

Daher liefere ich dir zwei Code-Snippets – mit dem einen kannst du die API komplett abschalten, mit dem anderen schaltest du sie nur außerhalb der Beiträge ab. Automatisches Zwischenspeichern funktioniert bei Nummer zwei noch. Zudem kann die admin-ajax.php weiterhin durch Plugins genutzt werden. Das Kommentar-Plugin de:comments benötigt die Datei, daher ist die Heartbeat API bei mir nur mit Snippet zwei abgeschaltet. Das Snippet gehört in die functions.php des Themes oder in ein eigenes Plugin.

Ein Klick öffnet das Gist bei Github
heartbeat-abschalten

2 – wp-cron.php abschalten

Eine der wirklich größten Performance-Bremsen innerhalb von WordPress ist die wp-cron.php, die für geplante Aufgaben innerhalb des CMS zuständig ist. Sie sorgt also dafür, dass vorher definierte Aufgaben zu einer bestimmten Zeit gestartet werden. Grundsätzlich wäre das kein Problem, wenn sie es nicht bei jedem (!) Seitenaufruf tun würde. Jeder einzelne Seitenaufruf innerhalb von Back- und Frontend erzeugt eine Anfrage. Klar, wenn noch nicht so viel Traffic auf dem Server ist, macht das vielleicht nicht so viel aus. Bei vielen Besuchern hingegen kann der Server deshalb in die Knie gehen.

Eine wesentlich bessere Lösung ist es daher, die Nutzung der wp-cron.php vollkommen abzuschalten und sie dann mit Hilfe eines echten Cronjobs zum Beispiel alle 15 Minuten aufzurufen. Deine geplanten Artikel erscheinen dann eventuell 15 Minuten später, doch was macht das schon aus. Den folgenden Code schreibst du in die wp-config.php hinein.

wp-cron-weg

Der Umgang mit Website-Logos

Logos sind wichtig. Ein cooles Logo gibt deiner Website den richtigen Kick und macht sie unverwechselbar. Wenn du Geschwindigkeit willst, dann gibt es zwei Möglichkeiten, mit dem Logo umzugehen. Entweder gestaltest du es absolut passgenau für den umgebenden Container und speicherst es mit Verlusten ab, was unschön aussehen wird. Oder aber du machst es wie ich und lieferst ein Retina-Logo aus, dass durch CSS verkleinert dargestellt wird und daher knackscharf ist. Allerdings sollte die Ausgangsdatei nicht zu groß sein (Dateigröße, nicht Abmessungen). Die Logo-Datei meiner Website hat die Abmessungen 1160 x 243 Pixel und ist als PNG 13 KB groß.

Meine Website liefert das Logo bereits per CSS an den Browser (Div mit Background-Image). Damit die Logodatei nicht erst vom CSS aus dem Ordner Images geladen werden muss, habe ich sie in Base64 kodiert und direkt in das CSS eingefügt. Das erhöht die Dateigröße meines Logos zwar minimal, doch es wird wesentlich schneller geladen. Zudem »springt« es nicht mehr beim Laden. Einen guten Konverter für diesen Job findest du hier. So sieht der Code für die Grafik nach dem Umwandeln aus:

Der base64 Code der Logo-Grafik

Die Optimierung eines Google-Webfonts

Google Fonts sind extrem beliebt, weil sie auch von Anfängern recht einfach im Theme genutzt werden können. Doch die tollen Fonts haben einen kräftigen Nachteil. Je nach gewähltem Font erhöht sich die Ladezeit der Website messbar. Dazu kommen noch eventuelle Performance-Probleme der Google-Server. Das kommt nicht oft vor, passiert aber hin und wieder. Alles hat seine Vor- und Nachteile. Komplett auf Google Fonts zu verzichten ist sicherlich die schnellste Methode, allerdings nicht wirklich schön. Ich würde nicht auf die ansehnlichen Schriftarten verzichten wollen, doch ich möchte ebenfalls nicht, dass so viele Dinge über fremde Server geladen werden. Daher zeige ich dir heute, wie ich mit Google Fonts umgehe. Ich habe sie lokal auf meinem Server liegen und rufe den Font innerhalb meines CSS auf. Das macht meine Website messbar schneller.

Google Font auf deinem Server bereithalten

Wenn du deinen Font herunterlädst und lokal auf deinem Server hast, wird er im Allgemeinen schneller laden. Daher zeige ich dir, wie man die Fonts auf dem eigenen Server einsetzt. Zuerst einmal musst du dir den Font aussuchen, den du gerne haben möchtest. Du bekommst dann ein Link-Element, welches du in deinen Header kopieren sollst. Doch genau das tust du nicht, sondern suchst dir aus dem Element nur den Link raus und gibst ihn in das URL-Fenster deines Browsers ein und rufst ihn auf. Aus dem angezeigten Code benötigst du als nächstes die Font-Datei (nur woff oder woff2 herunterladen).

google-font
Benenne die Datei um. Nutze einen kurzen Dateinamen. Im meinem Fall habe ich sie »varela-round.woff2« genannt. Befördere die Datei in den CSS-Ordner deines Themes. Nimm dir nun die CSS-Datei deines Themes vor, kopiere den kompletten @font-face Code hinein und ändere ihn wie folgt:

Ein Klick öffnet das Gist bei Github
varela-round-font-face
Wenn du das getan hast, dann wird der Font nun von deinem Server geladen und sollte super-schnell ohne Verzögerung angezeigt werden. Zudem wird er nur ein einziges Mal geladen, wenn das CSS ordentlich gecached wird.


CSS und JavaScript sind maßgeblich am Speed beteiligt

Neben den Bildern und Grafiken sind die CSS- und JavaScript-Dateien und ihre korrekte Auslieferung maßgeblich dafür verantwortlich, wie schnell eine Website werden kann. Dabei entscheidet auch die Anzahl der Dateien, die ausgeliefert werden müssen, über eine schnelle Ladezeit. Ich kann nur dazu raten, lediglich wirklich benötigte Plugins aktiviert zu lassen. Die meisten Plugins liefern ihre eigenen Dateien mit und irgendwann hat das Theme dann schnell 15 bis 25 CSS- und JavaScript-Dateien auszuliefern.

Besonders die »Multi-Purpose«-Themes leiden unter dieser Krankheit. Als Beispiel dafür darf gerne das sehr beliebte Premium-Theme Enfold von Kriesi herhalten, es benötigt allein 17 JavaScript-Dateien. Ein solches Theme kann auch relativ schnell werden, allerdings wird es nicht in den Millisekundenbereich der Ladezeit vordringen. Ein Theme mit wenig Dateien und nur den nötigsten Plugins ist daher die absolute Voraussetzung für wahre Schnelligkeit.

WordPress-Websites wirklich schnell: das ist die Idee hinter dem heutigen Artikel

Wir beschäftigen uns heute nur mit dem “richtigen” Ausliefern der statischen Dateien. JavaScript kann automatisiert behandelt werden, bei den CSS-Dateien ist Handarbeit angesagt. Wir werden alle CSS-Dateien vom automatischen Laden entfernen und sie händisch so laden lassen, wie es für die Geschwindigkeit wichtig ist. Die style.css Datei wird im Header geladen werden, nachdem sie von unnützen Müll befreit wurde. Alle anderen CSS-Dateien werden im Footer geladen.

Das sorgt für einen rasanten Aufbau der Website. Die Startseite wird bei dieser Art der Datei-Behandlung extrem schnell laden, die Unterseiten werden so schnell, wie es die eingebundenen Medien und Werbeblöcke zulassen. Allerdings wird sich der sichtbare Bereich der Unterseiten blitzartig aufbauen, der Besucher wird den Eindruck einer extrem schnellen Website haben, auch wenn die Unterseite – sprich der einzelne Artikel – vielleicht doch eineinhalb bis zwei Sekunden laden muss.

Wo werden welche Dateien geladen?

Ganz wichtig ist, das du herausfindest, wo welche CSS-Dateien benötigt werden. Standardmäßig wird alles CSS auf allen Seiten geladen. Da das ein völliger Unsinn ist, musst du, wenn du WordPress-Websites wirklich schnell machen willst, herausfinden, wo die Dateien tatsächlich benötigt werden. Zum Beispiel wird das CSS eines Kontaktformulars nur auf der Seite Kontakt benötigt. CSS, welches zur Darstellung von Bilder-Galerien benötigt wird, wird entweder nur auf einer speziellen Galerie-Seite benötigt, oder aber auf allen einzelnen Beiträgen.

Notiere Dir also genau, wo welche Dateien wirklich benötigt werden. Denn nur dort werden wir sie auch einbinden.

CSS-Datei versus CSS direkt in das HTML einfügen

Ich habe für meine Website Democratic Post festgestellt, dass das direkte Einfügen des CSS in den Quellcode meine Website langsamer macht, als wenn ich eine optimierte und korrekt versionierte Datei einbinde. Das jedoch kann bei deiner Website durchaus unterschiedlich sein, deshalb solltest du beide Varianten genau testen.

CSS und JavaScript – Teil 1: Query-Strings entfernen

WordPress bindet statische Ressourcen mit sogenannten Query-Strings am Ende der Datei (?ver=4.5) ein. Im Grunde ist das eine gute Idee, die dazu dienen soll, dass diese statischen Ressourcen wie CSS und JavaScript gecached werden können und nicht bei jedem Seitenaufruf erneut vom Browser geladen werden müssen.

http://server.example/wp-content/themes/hemingway/style.css?ver=4.1
Allerdings wird der Parameter bei Speed-Prüftools wie Pingdom immer wieder als Problem für effektives Caching bemängelt, weil die statischen Inhalte von URLs mit Parametern mitunter nicht im Cache gespeichert, sondern jedes Mal vom Server neu geholt werden. Dieses Problem werden wir etwas später mit einer richtigen Versionierung umgehen. Doch zuerst entfernen wir die Query-Strings von den Dateien. Gib folgenden Code in die functions.php deines Themes ein:

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

CSS und JavaScript – Teil 2: JavaScript gesichert in den Footer bringen

Nicht immer und bei jedem Cache-Plugin funktioniert es einwandfrei, dass JavaScript wirklich im Footer geladen wird. Das jedoch ist absolut notwendig, daher helfen wir mit einem kleinen Snippet nach. Auch dieser Code-Schnipsel kommt in die functions.php des Themes, oder in ein seitenspezifisches Plugin.

Ein Klick öffnet das Gist bei Github
print-scripts-in-footer

CSS und JavaScript – Teil 3: Alle CSS-Dateien dequeuen und entfernen

Da wir das CSS händisch an die richtigen Stellen bewegen möchten, damit die Ladezeit davon profitieren kann, müssen wir zunächst alle CSS-Dateien vom automatischen Laden durch WordPress befreien. Nachdem wir hiermit fertig sind, sollte dein Theme keine einzige CSS-Datei mehr laden. Dazu muss ein wenig getrickst werden, denn um ein Stylesheet zu entfernen, müssen wir die ID herausfinden. Unter Umständen musst du die IDs auch in den Plugin-Dateien suchen.

WordPress-Websites wirklich schnell
Im Anschluss benötigen wir einen Code-Schnipsel, der alle CSS-Dateien entfernen wird. Allerdings wirkt das erste Snippet nicht bei allen Dateien, daher habe ich Snippet-Version B hinzugefügt. Ein Schnipsel von beiden wird das CSS unter Garantie entfernen. Probiere zuerst Version A und danach, wenn es nicht funktioniert, Version B.

Auch diese Snippets kommen entweder in die functions.php des Themes oder in ein seitenspezifisches Plugin.

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

CSS und JavaScript – Teil 4: CSS-Dateien korrekt versionieren

Hierfür mag es verschiedene Lösungen geben, vielleicht sind einige auch komfortabler. Ich habe diese Lösung jedoch gewählt, weil ich durch das händische Einfügen der CSS-Dateien an die richtige Stelle genau bestimmen kann, wann die Dateien geladen werden.

Wofür man Dateiversionen benötigt
Eine korrekte Versionierung der statischen Dateien ist für ein optimales Caching der Ressourcen nötig. So können wir absolut sicherstellen, dass die Datei erstens nur beim ersten Seitenaufruf geladen wird und zweitens bei einer Änderung der Datei sofort die neue Version geladen wird, da diese dann ja einen neuen Dateinamen besitzt. Wenn wir fertig sind, werden die Dateien im HTML-Quellcode wie folgt aussehen:

/wp-content/themes/democraticpost-1.3.0/style.1457278063.css
Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Teil 1: Der Code für die functions.php

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

Teil 2: Der Code für die .htaccess Datei

Auch die .htaccess Datei, die sich im Root-Verzeichnis von WordPress befindet, muss angepasst werden. Vor der Anpassung bitte ein Backup der Datei erstellen! Danach wird der Bereich von WordPress gegen den folgenden ausgetauscht.

Ein Klick öffnet das Gist bei Github
WordPress-Websites wirklich schnell

Teil 3: Alle CSS-Dateien händisch komprimieren

Da diese Aufgabe nicht mehr durch ein Caching-Plugin erledigt werden kann, müssen wir es selbst tun. Von jeder Datei werden bitte zuvor Backups gemacht. Im Anschluss öffnet man die CSS-Dateien mit einem HTML-Editor, kopiert den kompletten Inhalt und fügt ihn in das vorgesehene Feld des CSS-Compressors ein. Die richtige Einstellung ist hierbei »Highest«. Nachdem das Tool den CSS-Code komprimiert hat, fügen wir ihn in die style.css Datei ein und speichern diese ab.

Damit die automatische Versionierung funktionieren kann, müssen wir das kleine Stück Code für die Ausgabe der CSS-Datei anpassen. Folgende Änderung muss in den Link-Bereich (href=””) hinein:

<link rel="stylesheet" href="<?=auto_version('/path/to/style.css')?>" />
Der richtige Pfad könnte zum Beispiel so aussehen:

/wp-content/themes/democraticpost-1.3.0/style.css

Teil 4: Das Einfügen der Dateien an die richtigen Stellen

Zuerst wird das Style.css in den Header eingefügt. Am einfachsten geht es, wenn du die Datei header.php deines Themes öffnest und den Link dann in den Head-Bereich einfügst. Bitte beachte jedoch die korrekte Schreibweise des Dateipfads. Stimmt dieser nicht zu 100 Prozent, wird die Datei vom Browser nicht gefunden und verursacht daher einen 404-Fehler.

Style.css
Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

Alle anderen CSS-Dateien
Alle anderen CSS-Dateien wandern vom Header in den Footer, damit sich der sichtbare Bereich der Website sofort aufbaut. Ebenso werden wir die Dateien nur noch dort laden, wo es absolut nötig ist. Die Dateien fügen wir oberhalb von <?php wp_footer();?> ein.

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell
Die Steuerung der Dateien, also wo genau was geladen wird, erfolgt über die Tags is_single und is_page. Unter Umständen kann man beide Tags auch kombinieren, wie bei mir im oberen Bereich erfolgt. Die oberen drei Dateien werden auf einzelnen Beiträgen und auf einer Seite geladen. Der grundsätzliche Aufbau sieht dabei so aus:

Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell
Der Screenshot zeigt deutlich, dass die betreffende CSS-Datei nur auf dem Beitrag mit der ID 4368 eingebunden wird, überall woanders wird die Datei nicht geladen.

WordPress Codex: Conditional Tags richtig verwenden

Die Behandlung von JavaScript

Dieses ist der leichtere Part. Wenn wir genau vorgehen wollen – wie beim CSS geschehen – die Dateien nur dort laden lassen wollen, wo es auch nötig ist, benötigen wir ein kleines Premium-Plugin. Es nennt sich Gonzales und kostet zurzeit nur 19 US-Dollar. Das Plugin setzt sich in die Werkzeugleiste fest, die du siehst, wenn du dich eingeloggt hast und deine Website aufrufst. Das Plugin ermöglicht dir jede einzelne Ressource entweder auf jeder Seite zu sperren, oder nur für bestimmte Seiten. Mit etwas Arbeit kannst Du genauestens festlegen, welche JavaScript-Datei wo genau geladen wird.

Ein Screenshot:
Ein Klick öffnet eine höhere Auflösung.
WordPress-Websites wirklich schnell

JavaScript bündeln und komprimieren mit Autoptimize

Nachdem dies erledigt ist, werden die JavaScript-Dateien zusammengefügt und komprimiert. Dafür eignet sich das kostenlose Plugin »Autoptimize« hervorragend. Die nötigen Einstellungen zeigt der Screenshot:

WordPress-Websites wirklich schnell


Performance durch die richtige Permalinkstruktur

Die Permalinks in WordPress lassen sich nach Belieben verändern. WordPress erlaubt uns jede nur erdenkliche Struktur. Die natürliche Struktur der Permalinks in WordPress nennt sich Messy-URLs, da keinerlei erkennbare Struktur ausgegeben wird. Ein Link direkt nach einer frischen Installation würde so aussehen:

https://www.drweb.de/?p=123
Diese Struktur ist für Mensch und Maschine nicht sehr gut lesbar, deshalb ging man dazu über, lesbare Permalinks mit Keywords zu verwenden.

https://www.drweb.de/beispiel-beitrag/
Solcherlei Links zu erstellen geht blitzschnell mit WordPress und zurzeit ist diese Struktur immer noch die beliebteste. Jedoch sind auch viele andere Strukturen denkbar, du kannst ein Datum, die Kategorie und auch Tags wählen. Doch geschickt ist das nicht, denn Permalinks können massiv an den Ressourcen deines Servers ziehen, man mag es kaum glauben. Pauschal lässt sich sagen, dass stark angepasste Permalinks schlecht für die Performance sind.

Natürlich macht das keine Sekunden auf die Ladezeit bezogen aus, doch im Paket mit anderen Performance-Fressern ist das durchaus deutlich messbar. Bei sehr vielen Beiträgen innerhalb eines Blogs und in Spitzenzeiten, wenn der Besuchersturm losbricht, sind Link-Adressen mit einfacher ID um einiges schneller.

Google legt kaum noch Wert auf die sprechenden URLs

Die Zeiten ändern sich und Google selbst scheint kaum noch einen Wert auf die sprechenden URLs zu legen. Ganz im Gegenteil, Google selbst geht dazu über, einfache IDs statt Keywords in seinen URLs zu nutzen. Beobachten kann man dieses zum Beispiel bei YouTube und Google+. Google verlegt sich immer mehr darauf, auf Benutzerfreundlichkeit, schnelle Ladezeiten und guten Inhalt Wert zu legen. Die alten Tricks mit der sprechenden Adresse,  mit Keywords optimiert, scheinen nicht mehr zu wirken. Es ergibt also durchaus Sinn, darüber nachzudenken, schnelle und kurze URLs zu verwenden und die Struktur auch bei bestehenden Projekten zu ändern.

Permalinks auf einfache IDs umstellen

Google scheint neuerdings auf kurze URLs wert zu legen und diese Stärker zu gewichten. Das ist meine ganz persönliche Beobachtung, seitdem ich bei meiner Democratic Post die Permalink-Struktur von sprechenden URLs auf einfache IDs umgestellt habe. Seitdem bekomme ich mehr Traffic über Google. Daher empfehle ich eine einfache Permalink-Struktur mit IDs zu nutzen. Eine Umstellung auch bei bestehenden Projekten ist kein Problem, WordPress selbst kümmert sich um die nötigen Weiterleitungen von der alten auf die neue URL. Ein Link mit ID sähe so aus:

http://andreas-hecht.com/466/
Der folgende Screenshot verdeutlicht die nötigen Einstellungen:

WordPress-Websites wirklich schnell

Videos Defer laden lassen

Videos zuletzt laden zu lassen macht die Website nun nicht wirklich schneller, was die reine Ladezeit angeht. Doch die Website baut sich bedeutend schneller auf. Zumindest wird der Besucher deiner Website den Eindruck gewinnen, dass dein Blog rasant und schnell lädt, weil sich der sichtbare Bereich der Website wesentlich schneller zeigt. Um das zu erreichen, wird das Laden der Videos einfach nur an das Ende verschoben. Wenn ein Video direkt im sichtbaren Bereich eingebunden sein sollte, erscheint für kurze Zeit ein weißer Bereich, der sich nach dem Laden des Videos mit dem Video füllen wird. Das Laden der Website wird also nicht mehr von den Videos unterbrochen. Der Code ist sehr minimalistisch gehalten und besteht aus zwei Teilen:

Die Code-Snippets für die functions.php eures Themes:

Teil 1: Die PHP-Funktion
Ein Klick öffnet das Gist bei GitHub
WordPress-Websites wirklich schnell - Defer Videos Teil 1

Teil 2: Der JavaScript-Code
Ein Klick öffnet das Gist bei GitHub
WordPress-Websites wirklich schnell - Defer Videos Teil 2
Der zweite Teil des Codes wird nur auf der Seite eines einzelnen Beitrags geladen. Wer Videos auch auf Seiten oder der Homepage verwendet, muss das Snippet noch auf die eigenen Bedürfnisse anpassen.

Caching: Blog auf statische HTML-Seiten umstellen

Schon ein normales Caching macht eine Website wesentlich schneller. Allerdings wird bei jedem Seitenaufruf immer noch der PHP-Interpreter aufgerufen, was deinen Blog langsamer macht, als er sein müsste. Willst du eine wirklich schnelle Website, musst du das Caching der Website auf die Erzeugung statischer Websites umstellen. Dann wird der PHP-Interpreter umgangen und die angeforderte Seite sofort aufgerufen. Das macht wirklich einiges aus, hat aber auch seine Nachteile.

Vorteil:
Die einzelnen Seiten werden wesentlich schneller geladen, die Website wird rasend schnell.

Nachteil:
Es sind keine geplanten Beiträge mehr möglich, da der PHP-Interpreter umgangen wird.

Lösung:

Eine brauchbare Alternative wäre der Aufruf der WordPress-Datei wp-cron.php (zu lokalisieren im Hauptverzeichnis der WordPress-Instanz) mithilfe eines Server-Cronjobs (Hoster fragen) oder eines Dienstleisters wie zum Beispiel cronjob.de. – Cachify Wiki

Statische HTML-Seiten mit dem Plugin Cachify erzeugen

Das kostenlose WordPress-Plugin Cachify ist richtig konfiguriert das zurzeit schnellste Caching-Plugin für WordPress-Websites. Zusammen mit einer .htaccess Erweiterung erzeugt es von jeder Seite eines Blogs eine GZIP-komprimierte HTML-Version.

Cachify Download von WordPress.org
Die .htaccess Datei ist im Hauptverzeichnis von WordPress zu finden. Die nötige Erweiterung für Cachify muss oberhalb der WordPress-Regeln einkopiert werden. Bitte fertige vor der Bearbeitung der Datei ein Backup an.

Ein Klick öffnet das Gist bei GitHub
WordPress-Websites wirklich schnell

Die nötigen Einstellungen des Cachify-Plugins
WordPress-Websites wirklich schnell

Die Schlankheitskur für Jetpack

Jetpack ist ein tolles Plugin, wenn man vorsichtig ist bei dem, was man aktiviert. Ich gehe sehr bewusst mit dem Plugin um und habe nur sehr wenige Module aktiviert. Aktiv sind die folgenden Module auf der Democratic Post:

  • Shortcode-Einbettungen – für Youtube, Flickr und andere Dienste
  • Website-Statistiken – für einen schnellen Überblick der meist-aufgerufenen Beiträge im Dashboard
  • Zusätzliche Seitenleisten-Widgets – für die Anzeige der beliebtesten Beiträge (Top-Post-Widget)
  • Daten Backup – für die VaultPress-Backups

Jetpacks schlechter Ruf als Performance-Fresser ist dadurch entstanden, dass das Plugin für alle ihm möglichen einzelnen Funktionen ein Stylesheet oder JavaScript lädt. Leider kann man nicht genau einstellen, welche Scripts und Styles geladen werden sollen, und welche nicht. Daher muss man selbst Hand anlegen und genau bestimmen, was wirklich benötigt wird. Ich lasse das Plugin genau noch eine JavaScript- und keine einzige CSS-Datei laden.

Das für das Top-Post-Widget nötige CSS habe ich aus der Jetpack CSS-Datei heraus kopiert und in mein Style.css eingefügt. Im Anschluss wurde das Jetpack-CSS dann am Laden gehindert.

Teil 1 der Jetpack-Optimierungen: Die Kontrolle über die Module

WordPress-Websites wirklich schnell
Die Jetpack-Module lassen sich mit dem Plugin hervorragend kontrollieren und auch an einer automatischen Aktivierung durch Jetpack hindern. Jedes Modul, welches deaktiviert wurde, lädt auch keine Scripte mehr. Ein Blick auf die Einstellungen:

WordPress-Websites wirklich schnell - Module Control
Download Module Control for Jetpack

Teil 2 der Jetpack-Optimierungen: CSS am Laden hindern, wenn nicht benötigt

Jetpack lädt eine Unmenge an CSS-Dateien, die nicht in allen Fällen auch benötigt werden. Meine Website benötigt kein einziges, deshalb habe ich alle deaktiviert. Der dazu nötige Code ist jedoch so verfasst, dass einzelne Elemente daraus gelöscht werden können, wenn man sie doch benötigt.

Ein Klick öffnet das Gist bei GitHub
WordPress-Websites wirklich schnell

Das Endergebnis: Eine wirklich schnelle Website

Der erste Durchgang mit den Pingdom Tools
WordPress-Websites wirklich schnell - Pingdom 1

Der zweite Durchgang mit den Pingdom Tools
WordPress-Websites wirklich schnell - Pingdom 2
Mit allen bisher getätigten Einstellungen wurde eine Website realisiert, die im Millisekundenbereich lädt. Trotzdem wäre an dieser Stelle noch nicht Schluss, es ginge durchaus noch mehr. Ich könnte auf das Top-Post-Widget verzichten oder auf die großformatigen Werbebilder für meine E-Books. Das de:comments Plugin für die Kommentare könnte deaktiviert werden und ich könnte die WordPress-Kommentare mit einem Caching für die Gravatare nutzen. Zudem könnten die Werbeblöcke von Google Adsense und Plista rausfliegen.

Möglich wäre also durchaus eine Ladezeit von 300 Millisekunden. Doch das ist nicht mehr praktikabel, meiner Meinung nach.

26 Kommentare zu “Site Performance: Was WordPress-Websites wirklich schnell macht”

Hallo,
gibt es eigenlich ein Tool, mit dem ich sehen kann, welchen Speicherbedarf ein Plugin hat oder eine andere Methode, die zu erfahren?
Schöner Artikel, freue mich auf die nächste Folge.

Also irgenwie paßt das nicht so recht. Ich habe, um es mal auszuprobieren, mir einen Account bei hostnet geholt und eine Site installiert. Vollkommen nackt, ohne Content und Plugins lag die Site bei72/100 und war damit schneller als 83 % aller getesteten Seiten. Dann habe ich mal das Theme gewechselt (DIVI – elegantThemes) und 80 Plugins eingespielt und aktiviert. Der Unterschied war nicht so bedeuten. Im schlechtesten Fall war die Site immer noch besser als 40 & der getesteten Seiten und kurz daruuf (ein/wei Klicks später, nichts an der Site geändert) besser als 73 und 75 % aller getesteten Seiten. Sicher, ein Unterschied. Aber gemessen an den aktivierten Plugins vertretbar, denke ich.
Das zeigt für mich auch: Was scheinbar wirklich stört, ist der Content. Läßt man ihn weg, performt die Seite auch richtig gut. (fotonews.tv)

Hier geht es nicht um die Optimierung nach Punkten. Die Punkte sind mir völlig egal, selbst wenn ich nur 2/100 hätte. Mir ging es ausschliesslich darum, mit meiner Startseite in den unteren Millisekundenbereich der Ladezeit zu kommen. Also unter 500 Millisekunden Ladezeit zu haben. Und dazu muss man an vielen Ecken abspecken.

Hallo Andreas,
danke für deine Artikelserie. Ich beziehe mich auf deinen Satz “Später zeige ich dir, wie die Dateien nur dort geladen werden, wo es wirklich sein muss.” Dazu habe ich weder hier noch im zweiten Teil etwas gefunden. In meinem Fall habe ich ein Kartenplugin und ein Kontakt-Form-Plugin installiert (wp-geo und contact form 7) und festgestellt, dass die scripte auch geladen werden, wenn sie nicht gebraucht werden (z.b. auf der Startseite gibt es weder ein Kontakt-formular noch eine Karte)
Kann ich da was machen? Könnte der Plugin-author dagegen etwas tun?
Gruß Konrad

Hi Konrad,
habe etwas Geduld, das kommt noch. Die Serie wird noch circa drei weitere Teile haben. Da zeige ich dann, wie ich mit solchen Dingen umgehe. Und liefere dann auch eine Lösung für Nicht-Profis mit.

Sorry, ich bin voelleicht ein bißchen blöd, aber ich verstehe es nicht. Ich habe hier einen ersten Test (Chrome) und einen zweiten, kurz danach (Firefox). Jetzt gehe ich mal dsvon aus, dass der Browser, in dem der Test gestartet wird, nixhts zu sagen har. Dann habe ich im ersten Test eine Ladezeit von 3,99 Sec. und bin damit schneller als 42% aller getesteten Website. 5 Minuten später hat die selbe Site 5,72 Sekunden Ladezeit und ist trotzdem besser als 72% aller Site. Irgendwie verstehe ich den Zusammenhang nicht: Wie kann eine Site, die eund 2 Sekunfden langsamer ist, besser ranken? Die gemessene Zeit ist verhältnismäßig willkürlich, denn bei einer Optimierung im zehntel-Sekunden-Bereich erschienen mir fast 2 Sekunden Differenz zu ein und derselben Site extrem viel. Weilche Zahl ist für dich die ausschlaggebende? Nur die GEschwindigkeit oder stellst du sie in Zusammenhang mit einer anderen?
Zum schluss noch eine andere Frage: Gibt es ein Tool, mit dem ich mehrere Seiten parallel testen kann. Also so 10, 20 oder mehr. Die Anzeige muß anschließend nicht so detailliert sein.

Hallo Achim,
hast Du bei den Pingdom Tools den Test über »Amsterdam, Netherlands« eingestellt? Dann sollte der zweite Test schneller sein, wenn Deine Website bereits ein Caching verwendet. Es kann jedoch durchaus auch vorkommen, dass der zweite Test langsamer ist als der erste. Das hängt dann von Dateien ab, die über andere Server ausgeliefert werden. Das Wichtige ist immer die Ladegeschwindigkeit für Google. Du hast auf jeden Fall recht viel Potenzial für eine Optimierung. Mir ist übrigens kein Tool bekannt, mit dem sich viele Websites im Bulk testen lassen.

Danke für die schnelle Antwort. Beide Tests gingen über Dallas USA, wobei der zweite langsamer als der erste war. Die Frage ist aj auch, was wird gezählt. Die Startseite oder Unterseiten. Gib mal diese URL ein. So ein Ergebnis habe ich noch nie gesehen: http://tools.pingdom.com/fpt/#!/bHcVNr/http://www.foto-gregor-gruppe.de/koeln/shop/specials.asp
Allerdings ist die Startseite diese: http://www.foto-gregor-gruppe.de/ Und die hat eine optimale Geschwindigkeit. Ist ja auch wenig drauf.
Wenn ich bei google die Suche “foto köln” eingebe erscheint Foto Gregor ganz oben. Allerding weiß ich nicht, ob die oben angezeigten Ergebniss organisch sind oder bezahlt.

Google zählt natürlich auch den Speed der Unterseiten, klar. Doch um korrekte Ergebnisse zu erzielen, sollte der Test immer über Amsterdam laufen. Die korrekte Ladezeit Deiner Unterseite sind demzufolge 5,61 Sekunden. Das liegt an den wesentlich zu großen Grafiken.

Hallo Andreas,
echte Performance-Fresser sind ja die von vielen eingesetzten Slider und Gallery-Plugins. Manche dieser Tools kommen gleich mit meheren .js- und .css-Dateien daher. Kannst du all denen unter uns, die hierauf nicht verzichten wollen, einen Tipp geben?
LG

Klar. Kaufe Dir das Gonzales-Plugin und sorge damit dafür, dass alle betreffenden Dateien nur noch auf den einzelnen Beiträgen oder der betreffenden Galerie-Seite eingebunden werden. Das macht dann zumindest Deine Startseite schneller.

Hallo Andreas, deine Antwort bezieht sich ja eher auf meinen Post weiter oben. Die meisten werden einen Slider ja auf der Startseite einsetzten und da hilft dann auch das besagte Tool nichts. Gibt es denn überhaupt einen “schlanken Slider”?

Mag sein. Danach müsste man im Plugin-Verzeichnis suchen. Allerdings kann man sich die Optimierung dann fast sparen. Spielkram kostet immer heftig Geschwindigkeit. Zudem nerven Slider die meisten Besucher ganz kräftig an, das gebe ich mal zu bedenken. Ich klicke solche Seiten immer gleich wieder weg.

Hallo Andreas,
macht Deiner Meinung nach ein SEO Tool überhaupt Sinn? Die sprechenden URL’s sind ja schon weggefallen. Und Geschwindigkeit kosten sie auch.
VG
Alfred

Ein SEO-Tool macht immer Sinn. Damit optimierst Du zum Beispiel ja auch Deine Texte und die Google-Vorschau. Zudem setzt es die richtigen Titel und sorgt dafür, dass keine Duplikate entstehen.

Guten Morgen!
Hast du eine aktuelle Empfehlung für ein schnelles und leicht zu bedienendes WordPress Theme? Ich möchte möglichst wenig Anpassungen vornehmen, daher wäre ein Theme was von Haus aus sehr flott ist genau das Richtige.
Schöne Grüße
Louis

das Divi-Theme gehört ja auch zu den beliebtesten Themes, insbesondere mit dem divi – Builder. Es soll ja auch SEO freundlich sein. Habt ihr damit Erfahrungen gesammelt? Sollte man es Deiner Meinung nach nicht für SEO-Projekte einsetzen

Schreibe einen Kommentar

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