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.

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.

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. Übrigens ist die Endgeschwindigkeit einer Website oftmals Fleissarbeit, denn es greifen viele -- auch manchmal sehr kleine -- Optimierungen ineinander.

Erster Test:

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

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

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.

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

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.

Auch hierfür gibt es ein Plugin namens Disable Emojis. Das schön daran: Emojis funktionieren auch weiterhin in modernen Browsern. Lediglich ältere Browser, die von Haus aus keine Emojis unterstützen, bekommen die Emojies dann nicht mehr zu sehen.

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:

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.

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:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Wenn wir nun den HTML-Quelltext anschauen, stellen wir fest, das dort noch immer JPEG-Dateien referenziert sind.

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.

Hier noch einmal deutlicher zu erkennen:

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

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.

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.

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.

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:

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

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:

@font-face {
   font-family: 'Varela Round';
   src: local('Varela Round'), url('css/varela-round.woff2') format('woff2'),
   font-weight: 400;
   font-style: normal;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

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:

<?php

function evolution_remove_wp_ver_css_js( $src ) {

    if ( strpos( $src, 'ver=' ) )

        $src = remove_query_arg( 'ver', $src );

    return $src;
}
add_filter( 'style_loader_src', 'evolution_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'evolution_remove_wp_ver_css_js', 9999 );

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

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.

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

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.

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

Ein Klick öffnet das Gist bei Github

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

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.

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.

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.

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.

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:

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:

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

Teil 2: Der JavaScript-Code
Ein Klick öffnet das Gist bei GitHub

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

Die nötigen Einstellungen des Cachify-Plugins

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

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:

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.

// First, make sure Jetpack doesn't concatenate all its CSS
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Then, remove each CSS file, one at a time
function jeherve_remove_all_jp_css() {
  wp_deregister_style( 'AtD_style' ); // After the Deadline
  wp_deregister_style( 'jetpack_likes' ); // Likes
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  wp_deregister_style( 'jetpack-carousel' ); // Carousel
  wp_deregister_style( 'grunion.css' ); // Grunion contact form
  wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll
  wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll - Twentyten Theme
  wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll - Twentyeleven Theme
  wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll - Twentytwelve Theme
  wp_deregister_style( 'noticons' ); // Notes
  wp_deregister_style( 'post-by-email' ); // Post by Email
  wp_deregister_style( 'publicize' ); // Publicize
  wp_deregister_style( 'sharedaddy' ); // Sharedaddy
  wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
  wp_deregister_style( 'stats_reports_css' ); // Stats
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
  wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
  wp_deregister_style( 'presentations' ); // Presentation shortcode
  wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
  wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
  wp_deregister_style( 'widget-conditions' ); // Widget Visibility
  wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
  wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
  wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Das Endergebnis: Eine wirklich schnelle Website

Der erste Durchgang mit den Pingdom Tools

Der zweite Durchgang mit den Pingdom Tools

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.

Wieso die Ladezeit so wichtig ist

Das Internet wächst in gigantischem Umfang und wird immer größer. Die Informationsüberflutung ist nicht zu stoppen und die Aufmerksamkeitsspanne und Zeit der Menschen wird immer geringer.

Aus diesem Grund ist die Zeit bis zum vollständigen Laden deiner Website extrem wichtig. Das redudiert die Absprungrate, erhöht die Bleiberate und verbessert deine Conversions und Interaktionen auf deiner Website.

Das hat auch Google erkannt. Seit längerem ist die Ladezeit ein Ranking-Kriterium für den Suchmaschinengiganten. Eine schnelle Website bekommt also Pluspunkte beim Ranking.

WordPress beschleunigen und Ladezeit optimieren

In diesem kurzen Video bekommst du einen Überblick der wichtigsten Faktoren, wie du deine WordPress Website schneller machen kannst.

#1: Hostinganbieter

Das beste Fahrwerk, die besten Reifen und der beste Pilot helfen bei einem Rennen nichts, wenn der Motor nur 55 PS hat.

Genau dasselbe gilt auch für deine Website. Der Motor deiner Website ist in diesem Beispiel dein Hostinganbieter.

Der Hostinganbieter ist also die Grundlage für eine schnelle Website. Diesbezüglich empfehle ich dir folgende Aspekte zu beachten:

• Wähle einen Hostinganbieter, der seine Server in dem Land betreibt, in dem du tätig bist. Damit sorgst du für kurze Wege. Angenommen der Webserver dieser Website würde in Amerika sein, ist der Weg nach Deutschland viel weiter als wenn der Server in Frankfurt ist.
• Spreche mit dem Support deines Hostinganbieters, welches Paket für dich und dein Vorhaben das richtige ist. Je nach Größe und Traffic deiner Website wird er dir ein passendes Paket empfehlen. Oftmals gibt es sogenannte Shared-Hosting-Pakete. Bei diesen teilst du dir einen Server mit anderen Kunden. Bei einem eigenen Server hingegen, kannst du auf die volle Leistung zurückgreifen.
• Thema HTTP/2: http/2 ist ein noch relativ neues Protokoll. Im Vergleich zum alten (http/1) überträgt das neue Protokoll alle Daten auf einmal und nicht der Reihe nach. Mehr musst du dazu eigentlich gar nicht wissen. Wichtig ist, dass dein Webserver http/2 unterstützt.
• OPCache: Das ist ein weiteres Feature, das dein Webserver können sollte. OPCache kennt viele Algorithmen auswendig. Das spart Zeit und bring weitere Power für deine Ladezeit.

Das war jetzt ein wenig technisch. Aber es reicht, wenn du die Begriffe kennst und diese Features von deinem Hostinganbieter unterstützt werden.

#2: Caching-Plugin

Der zweite wichtige Punkt ist das Thema Caching. Dazu gibt es viele WordPress-Plugins. Ich habe in der Vergangenheit viel ausprobiert und eines hat mit wirklich sehr begeistert.

Dabei handelt es sich um das Plugin WP-Rocket. Es ist ein Premium-Plugin und eine wirklich tolle Lösung.

Im Vergleich zu den kostenlosen Plugins ist WP-Rocket in 5 Minuten komplett konfiguriert, liefert TOP-Ergebnisse und macht keinerlei Probleme.

Damit kannst du also in nur 5 Minuten die wichtigsten Stellschrauben in WordPress konfigurieren und die Ladezeit schnell und effektiv verbessern.

Die wichtigsten Einstellungen sind folgende:

• Caching aktivieren
• HTML minifizieren
• Google-Schriftarten zusammenfassen
• Lazy Load aktivieren
• Ejoji deaktivieren
• WordPress Embeds deaktivieren
• CSS minifizieren
• CSS zusammenfassen
• JavaScript minifizieren
• JavaScript zusammenfassen

Wenn du diese Einstellungen gesetzt hast, wird deine Website sofort schneller sein. Wichtig ist, dass du nach der Aktivierung dieser Einstellungen prüfst, ob deine Website korrekt funktioniert.

#3: Bilder & Grafiken

Der 3. Aspekt sind Bilder & Grafiken. Damit kannst du wahnsinnig viel Dateigröße einsparen, was die Ladezeit deiner WordPress Website natürlich enorm reduziert.

Dabei solltest du in 2 Schritte vorgehen:

1. Verkleinere das Bild vor dem Upload in WordPress auf genau die Größe, in der du das Bild einfügen möchtest. Das spart bereits einiges an Dateigröße, was dir gerade mobile Nutzer danken werden. Viele Programme wie beispielsweise Adobe Photoshop ermöglichen es dir zudem, das Bild optimiert für das Web zu speichern.
2. Für WordPress gibt es 2 sehr geniale Plugins, mit denen hochgeladene Bilder nochmals um 5 -- 80 % verkleinert werden. Dabei kannst du entscheiden, ob die Qualität beibehalten oder ein klein wenig reduziert werden soll. Plugin Nr. 1 ist Imagify (gehört zu WP-Rocket). Die Alternative wäre das WordPress Plugin EWWW.

Beide gerade genannten Plugins bieten zusätzlich die Funktion, ein Bild in das neue Format WebP zu konvertieren. WebP ist ein sehr junges und noch unbekanntes Format, das die Dateigröße oftmals um die Hälfte reduziert.

Das Plugin macht das komplett im Hintergrund für dich. Außerdem prüft das Plugin, ob der Browser des Website-Besuchers WebP unterstützt. Je nachdem wird dann das Orginalbild oder das optimierte WebP Bild ausgeliefert.

Ladezeit messen und prüfen

Vor und nach jeder Optimierung solltest du die Ladezeit deiner Website natürlich prüfen. Nur so stellst du fest, wie viel die Optimierungen gebracht haben.

Dazu empfehle ich dir folgende beiden kostenlosen Online-Tools:

• Google Page Speed Tool
• GTMetrix

Mache die Tests am besten immer mehrmals und überprüfe sowohl die Startseite als auch eine Unterseite, damit du ein aussagekräftiges Ergebnis bekommst.

Weitere Tipps & Tricks

Wenn du diese 3 Ladezeit-Tipps in die Praxis-Umsetzt, wirst du deine Website garantiert schneller machen. Du profitierst von besseren Rankings und reduzierst deine Absprungrate.

• Nutze ein WordPress Favicon: Das Favicon sollte im Optimalfall dein Logo sein und für Widererkennungswert im Browser sorgen. Speziell dann, wenn Besucher deine Website in den Lesezeichen speichern.
• Verwende ein SSL-Zertifikat für deine Website: Deine Website sollte mit https und nicht mit http beginnen. Das sorgt für Vertrauen und ist auch für Google ein Rankingfaktor. Im Übrigen ist das https-Zertifikat etwas schneller und hilft dir also auch bei der Ladezeit.
• Bilder & Grafiken: Über dieses Thema haben wir bezüglich der Ladezeit ja schon gesprochen. Dazu jetzt noch ein weiterer Tipp. Benenne den Dateinamen deiner Bilder sinnvoll und nutze deine Keywords. Das ist für Google zudem eine Möglichkeit, dein Bild besser einordnen zu können.
• Plugin-Tipp: Viele WordPress Nutzer sind mit dem neuen Gutenberg-Editor nicht ganz so glücklich. Mit dem Plugin „Classic Editor“ kannst du den alten klassischen Editor wieder aktivieren.

So räumst du deine WordPress-Installation auf

Wir alle mögen eine aufgeräumte Umgebung zu Hause und bei der Arbeit. Unnötige Dinge werden aus Haus und Büro entfernt. Gleiches sollte für deine WordPress-Website gelten.

Denn in einer aufgeräumten Umgebung arbeitet es sich leichter und angenehmer. Das gilt auch für deine Website. Eine klar strukturierte Umgebung mit den wirklich nötigen Elementen lässt dich produktiver sein und auch kreativer.

Daher habe ich dir eine Liste zusammen gestellt, die dir beim Aufräumen helfen wird.

Es gibt einige Taktiken, wie du dein WordPress wirkungsvoll aufräumen kannst. Einige dieser Punkte befassen sich mit dem Adminbereich, andere hingegen mit dem Frontend -- dem für die User sichtbaren Bereich.

1 -- Lösche unnötige Plugins

In einer bereits seit einiger Zeit existierenden WordPress-Installation sammeln sich mit der Zeit etliche Plugins an. Nicht alle dieser Plugins werden auch aktiviert sein, andere hingegen sind für den Betrieb der Website nicht wirklich nötig.

Lösche die deaktivierten Plugins sofort, denn sie stellen ein Sicherheitsrisiko dar. Je mehr Plugins installiert sind, desto größer werden die potenziellen Sicherheitslücken. Hacker können durchaus auch die Lücken in deaktivierten Plugins ausnutzen.

Überprüfe im Anschluss, ob die aktivierten Plugins wirklich nötig sind. So manches Plugin sorgt eher dafür, Besucher zu verlieren, anstatt sie zu begeistern. In diese Kategorie fallen zum Beispiel Slider und ähnliches.

Am Schluss dieser Aktion sollten nur die wirklich nötigen Plugins übrig bleiben.

2 -- Räume dein Navigations-Menü auf

Die Navigation einer Website ist ein wichtiges Element für die Benutzerfreundlichkeit einer Website. Sie sollte klar, einfach strukturiert und nicht überfrachtet sein. Ein Hauptmenü mit vielen Unterpunkten und aufgehenden Listen ist nicht User-freundlich.

Mehr als fünf bis sechs Hauptelemente sollte die Navigation nicht umfassen. Je mehr Auswahl vorhanden ist, desto weniger wird das Menü genutzt werden. Solltest du unbedingt viele Unterpunkte darstellen wollen, nutze dafür besser ein Mega-Menü statt der normalen Dropdown-Listen.

Ein Beispiel eines Mega-Menüs:

Eine kostenlose Variante eines Mega-Menü Plugins wäre das »Max Mega Menu«.

[appbox wordpress megamenu]

3 -- Lösche ungenutzte Themes

Bei länger bestehenden WordPress-Installationen sammeln sich mit der Zeit auch einige ungenutzte Themes an. Man denke da zum Beispiel nur an die Themes, die mit jeder neuen Hauptversion von WordPress mitkommen.

Themes, die nicht in Verwendung sind, sollten gelöscht werden. Denn auch sie stellen ein Sicherheitsrisiko dar. Und warum solltest du Themes updaten, die du nicht benutzt?

4 -- Lösche regelmäßig Spam-Kommentare

Jeder Spam-Kommentar setzt sich in der Datenbank von WordPress fest und sorgt mit der Zeit für ein unnötiges Aufblähen der Datenbank. Das verschafft dir ein Performance-Problem, das nicht sein müsste.

5 -- Begrenze die Revisionen

Revisionen sind eine wunderbare Sache, denn damit kannst du auf ältere Versionen deines Artikels zurückgreifen. Zu viele Revisionen sorgen allerdings für eine aufgeblähte Datenbank und damit für schlechtere Performance. Daher solltest du die Revisionen begrenzen. Drei Revisionen eines Beitrags sollten grundsätzlich ausreichen.

Füge die folgende Konstante in die wp-config.php deines WordPress ein:

define( 'WP_POST_REVISIONS', 3 );

6 -- Säubere deine Datenbank

Die Datenbank ist der Motor hinter deinem WordPress. Alles wird darin gespeichert. Das beinhaltet nützliche Dinge, wie deine Beiträge und Seiten, zum anderen auch völlig unnötige Dinge wie zuviele Postrevisionen, Spamkommentare und Rückstände aus vorigen Plugin-Installationen.

Mit der Zeit sammeln sich dort viele Einträge an, die zum reibungs- und fehlerlosen Betrieb der Website nicht nötig sind. Das wiederum bedeutet Einbußen in der Performance. Eine Säuberung der Datenbank ist daher von Zeit zu Zeit unerlässlich für eine optimale Performance.

Empfehlenswerte Plugins für diesen Job sind »WP-Sweep« oder »WP-Optimize«.

[appbox wordpress wp-sweep]

[appbox wordpress wp-optimize]

7 -- Checke deine Website auf defekte Links

Links, die nicht mehr die gewünschten Informationen liefern, hinterlassen einen schlechten Eindruck bei deinen Besucher und bei Google. Die Wahrscheinlichkeit ist groß, dass Besucher, die über Google kommen, schnell wieder deine Seite verlassen, wenn sie nicht die gewünschten Informationen finden.

Lege dein Augenmerk auf Links, die funktionieren und wirklich relevante Informationen als Ergänzung zu deinen Beiträgen liefern. Mit dem Plugin »Broken Link Checker« kannst du automatisch nach Links ohne Funktion suchen lassen.

[appbox wordpress broken-link-checker]

Das Plugin solltest du nach der Nutzung direkt wieder deaktivieren, da es ansonsten durchaus im laufenden Betrieb Performance ziehen kann. Das wäre dann kontraproduktiv.

8 -- Entferne nicht genutzte Meta-Boxen aus dem Adminbereich

Mit der Zeit sammeln sich gerade auf der Oberfläche des »Beiträge erstellen« Fensters eine Menge Meta-Boxen an, von denen du längst nicht alle nutzen wirst. Da wären zum Beispiel Einstellungen für Sharing-Plugins, Postoptionen, Diskussionen, Beitragsformate und vieles mehr.

Alles, was du nicht für das Verfassen oder Vermarkten eines Artikel brauchst, kannst du getrost deaktivieren. In der rechten oberen Ecke findest du den Button »Ansicht anpassen«. Dort deaktivierst du die Häkchen für die Boxen, die du ausblenden möchtest.

Das Gleiche solltest du noch einmal für das Dashboard deines WordPress tun. Auf dieser Admin-Startseite sollten nur nützliche Informationen angezeigt werden. Vielleicht die Google-Analytics-Zahlen oder noch freizuschaltende Artikel deiner Autoren usw.

9 -- Weg mit ungenutzten Tags und Kategorien

Wenn deine Website unbenutzte Tags und Kategorien besitzt, lösche sie. Das kann wirklich viel Arbeit sein, weil je nach Theme und Plugin auch die Custom Post Types wie Portfolio, Rezepte, Testimonials und so weiter eigene Taxonomien besitzen können.

Diese müssen dann manuell aufgerufen und gelöscht werden. Mir ist kein Plugin bekannt, das diesen Job erledigen kann. Falls du eines kennst, schreibe es mir in die Kommentare.

Die Arbeit wird auf jeden Fall lohnenswert sein, denn die Übersichtlichkeit bei der Vergabe von Tags und Kategorien steigt enorm an. Du arbeitest so schneller und effizienter. Zudem erleichtert diese Aufgabe die Datenbank und sorgt damit für eine bessere Ladegeschwindigkeit der Website.

10 -- Lösche ungenutzte Medien-Dateien

Ungenutztes Bildmaterial sollte aus der Mediathek gelöscht werden. Alle Mediendateien werden in dem Ordner uploads auf dem Server gespeichert. Auf lange Sicht kann das zu einer wirklich massiven Anlagerung von Dateien führen, von denen der überwiegende Teil nicht in Benutzung ist.

Jedes Theme legt spezielle Bildformate an, die für andere Themes zumeist nicht brauchbar sind. Deshalb solltest du von Zeit zu Zeit diesen Ordner säubern. Das kannst du durch ein Plugin automatisch erledigen lassen.

»Force Regenerate Thumbnails« generiert die vom aktuellen Theme genutzten Bildformate und löscht gleichzeitig die nicht genutzten Formate. So kannst du sicher sein, stets nur die aktuellen und wichtigen Formate für dein Theme im uploads Ordner zu haben.

[appbox wordpress force-regenerate-thumbnails]

11 -- Entferne unnötige Widgets von Startseite und Sidebar

Die Sidebar und die Widget-Bereiche der Startseite einer WordPress-Website sind bei vielen Blogs einfach überladen. Vieles wird angeboten und nur wenige Dinge werden von den Besuchern wirklich genutzt.

Lasse nur das aktiv, was wirklich notwendig für die Funktion deiner Website ist. Gestalte eine klare und nur mit den wichtigsten Informationen versehene Startseite. Das sorgt für einen kräftigen Performance-Schub.

Nimm dir anschließend die Sidebar vor. Kaum ein Besucher schaut dort noch hin. Dünne die Informationen extrem aus, die du dort anbieten möchtest. Wenn du dir nicht sicher bist, was die wichtigen Punkte einer Website sind, dann lasse dir eine sogenannte Heat-Map deiner Seite erstellen.

Dort kannst du dann genau sehen, wo und an welchen Stellen die User verweilen, wo sie hinschauen und welche Bereiche sie nutzen. Ein sehr guter und überwiegend kostenfreier Dienst hierfür ist Hotjar.

Website besuchen

Fazit

Wenn du alle Tipps abgearbeitet hast, dann hast du deiner Website schon viel Gutes getan. Du solltest eine deutliche Verbesserung der Performance spüren -- allein schon durch das Deaktivieren von unnötigen Plugins. Keine Website muss alle möglichen Funktionen bieten. Weniger ist oftmals mehr.

So, jetzt wünsche ich dir viel Spaß beim Optimieren deiner Website um beim Verbessern der Ladezeit von WordPress. Viel Erfolg!

Bildquelle: Depositphotos