Checkliste für die WordPress-Optimierung

WordPress-Optimierung ist die Kunst, Ihre Website so schnell wie möglich laufen zu lassen, Ihre Benutzererfahrung zu verbessern, Serverkosten zu senken und SEO-Vorteile zu haben.

Viele Studien zeigen, dass Besucher nicht warten möchten, bis eine Website geladen ist, und dazu neigen, Ihre Website zu verlassen, wenn das Laden zu lange dauert.

Eine schnell ladende Website ist für Sie besonders wichtig, wenn Sie einen Webshop haben und Ihre Konversionsraten verbessern möchten.

Tests bei Amazon ergaben ähnliche Ergebnisse: Jede Verlängerung der Ladezeit von Amazon.com um 100 ms verringerte den Umsatz um 1 % (Kohavi und Longbotham 2007)

Quelle: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Die Ladegeschwindigkeit Ihrer Website ist auch für Ihr Ranking bei Google enorm wichtig, weshalb die Website-Optimierung ein Teil Ihrer SEO-Strategie ist.

Aber meine Website lädt wirklich schnell!

Sicher tut es das. Zumindest für dich. Aber haben Sie zum ersten Mal seit langem versucht, Ihre Website wieder zu besuchen?

Wenn Sie auf Ihrer Website navigieren, wird das meiste davon in Ihrem Browser zwischengespeichert. Wenn Sie die erste Erfahrung machen möchten, löschen Sie Ihren Cache oder verwenden Sie einen völlig anderen Browser.

Es gibt eine Menge Dinge zu tun, die die Geschwindigkeit Ihrer WordPress-Website verbessern können. Fangen wir an.

Minimierung von Skripten

WordPress-Websites sind eine Kombination aus HTML, CSS, JavaScript und Bildern. Der HTML-Code wird zuerst geladen und enthält dann Informationen zu anderen Dateien von CSS-Stylesheets, JavaScript-Dateien und den Bildern.

Jede Datei wird der Reihe nach geladen. Ein Browser hat normalerweise ein Limit von 2-4 „Pipes“, was bedeutet, dass der Browser nur bis zu 2-4 Dateien gleichzeitig von dem Server lädt, auf dem die Dateien gehostet werden.

Wenn Sie Ihren HTML-Code Ihrer WordPress-Website durchsehen, werden Sie viele verschiedene .css- und .js-Dateien bemerken. Jedes davon stammt normalerweise von verschiedenen Plugins, die dem Mix entweder .js- oder .css-Dateien hinzufügen.

In einigen Fällen fügt das Plugin sogar JavaScript- oder CSS-Stile direkt in den HTML-Code ein. Die meisten WordPress-Plugin-Entwickler oder Themenautoren sind schlau genug, dies nicht zu tun.

Dies ist nur ein Beispiel einer normalen WordPress-Website. Der HTML-Code enthält Links zu mehreren anderen Dateien. In diesem einfachen Beispiel werden nacheinander 4 JavaScript-Dateien geladen.

<script type="text/javascript" src="https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=“text/javascript“ src=“https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=“text/javascript“ src=“https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type="text/javascript" src="https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2"></script >

WordPress verfügt über interne Funktionen, die es Plugin- und Theme-Autoren ermöglichen, notwendige JavaScript- und CSS-Dateien einzubetten.

wp_enqueue_script() und wp_enqueue_style(). Die Namen der Funktionen geben einen soliden Hinweis darauf, was sie tun. Durch die Verwendung einer dieser Optionen zum Einbetten der erforderlichen Dateien stellen Plug-in- und Theme-Autoren ihre Dateien zusammen mit allen anderen Plug-ins und sogar WordPress selbst in die Warteschlange.

Es ist auch möglich, die Funktionen beliebiger Abhängigkeiten anderer Bibliotheken anzuweisen, normalerweise wird eine JavaScript-Include-Datei von jQuery abhängig, die zuerst geladen wird.

Normalerweise finde und installiere ich ein Minimierungs-Plugin, aktiviere es und schaue dann, ob auf der Website etwas kaputt geht. Von dort gehe ich, um festzustellen, was genau fehlschlägt und ob ich nur ein paar Einstellungen ändern muss, um es zu beheben.

Plugins zum Minimieren haben in der Regel Ausschlusseinstellungen für bestimmte Dateien, die beim Laden mit anderen nicht gut funktionieren, oder zum Ändern des Ladeorts von Dateien in der Kopf- oder Fußzeile des Dokuments.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Hinweis: Im Codebeispiel speichere ich die URL des Designs in einer Variablen und parse diese dann in die Funktion wp_enqueue_script. Dies reduziert die Anzahl der erforderlichen PHP- und/oder Datenbankaufrufe und erhöht die Geschwindigkeit.

Auf der Suche nach extremen Ladegeschwindigkeiten könnte ich den absoluten URL-Pfad hartcodieren, aber dies würde das Thema auf nur eine einzige Domain beschränken und es schwieriger machen, den Code auf einer anderen Website wiederzuverwenden.

Nach der Installation eines Minimierungs-Plugins werden nun JavaScript- und CSS-Stylesheets zu weniger HTTP-Aufrufen zusammengefügt.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Dies kombiniert die 4 Dateien zu einer einzigen „Datei“/Anfrage für Ihren Browser.

Ich bin auf WordPress-basierte Websites gestoßen, auf denen 22 .css-Dateien sowie 15 .js geladen waren. Alles auf der Titelseite. Die Geschwindigkeitsänderung kann erstaunlich sein, wenn Sie die Menge externer Dateien reduzieren können.

Obwohl das Minimieren von Skripten zu enormen Geschwindigkeitsverbesserungen führt, ist es auch eine der Techniken, die ich verwende, die dazu neigen, die meisten Probleme beim Einrichten zu verursachen.

Header.php optimieren

Die header.php in Ihrem Theme wird auf jeder einzelnen Seite Ihrer WordPress-Website aufgerufen. Diese Datei enthält normalerweise viele Elemente, die optimiert werden können.

Ein klassisches Beispiel ist die bloginfo('template_directory'), die meist mehrfach im Header aufgerufen wird, um die URL des Themes zum Einbinden externer Dateien zurückzugeben.

Eine effizientere Methode besteht darin, die URL einmal anzufordern und sie dann als Variable zu speichern.

$template_directory = get_bloginfo('template_directory'); 

Die URL des Theme-Verzeichnisses wird nun in der Variable $template_directory gespeichert.

Weitere Beispiele, wie man die Effizienz von header.php verbessern kann, können im Blogpost WordPress header.php Optimierungstipps nachgelesen werden

Reduzierung der Anzahl von Plugins

Ein weiterer wichtiger Bestandteil der WordPress-Optimierung ist es, die Anzahl der aktivierten Plugins so gering wie möglich zu halten. Für viele Benutzer ist es verlockend, verschiedene Plugins zu testen und damit zu experimentieren, was in der Tat einer der Vorteile von WordPress ist.

Wenn jedoch viele Plugins aktiv sind, kann dies die Geschwindigkeit Ihrer WordPress-Website verringern. Viele Plugins haben eine einzelne Funktion, die genauso einfach durch ein Stück Code gehandhabt werden könnte, das in Ihre functions.php eingefügt wird.

In vielen Fällen benötigen Sie möglicherweise nur eine einzige Funktion, aber das von Ihnen verwendete Plugin verfügt über mehrere andere Optionen, die Sie nie verwenden.

Analysieren Sie jedes Plugin auf Ihrer Website und stellen Sie sicher, dass Sie es benötigen. Wenn Sie sie nicht benötigen oder die Funktionalität durch functions.php-Code ersetzt werden kann, deaktivieren und löschen Sie die Plugins.

Verwenden Sie keine Bilder – verwenden Sie CSS3

Das Design von Websites verwendet Bilder, um die Benutzeroberfläche zu gestalten.

Nach der Einführung von CSS und insbesondere von CSS3 können viele Effekte, die für Weboberflächen verwendet werden, durch die Verwendung von CSS und HTML-Code nachgeahmt werden.

[box]Hinweis: Die meisten dieser Effekte sind nicht mit allen Browsern kompatibel, insbesondere mit dem älteren Internet Explorer (ja, immer das Sorgenkind für jeden Webentwickler). Wenn Sie die Geschwindigkeit Ihrer Website optimieren möchten, kann die Verwendung von CSS-Effekten eine schnelle und schnelle Lösung sein, aber keine gute Wahl, wenn das Hauptpublikum des Clients veraltete Browser verwendet.[/box]

Wenn Sie für einen Kunden arbeiten, der auf B2C (Business to Consumer) abzielt, sollten Sie dessen Google Analytics überprüfen oder ihn fragen, welche Art von Kunden er hat (oder ansprechen möchte). Dies kann Einfluss darauf haben, ob Sie CSS3-Effekte verwenden können, wenn die Kundenzielgruppe im Allgemeinen veraltete Browser verwendet.

Als Elegantthemes.com eine neue Version ihres Shortcode-Plugins veröffentlichte, hatte dies aufgrund der CSS3-Effekte und der Einfügung mehrerer Bilder in ein einziges Sprite einen enormen Einfluss auf die Ladezeit meiner Kunden.

Der Shortcodes/Bilder-Ordner, der früher 90 Bilder enthielt, hat jetzt ein einzelnes PNG-Sprite, wodurch die Gesamtgröße von 140 KB auf 15 KB reduziert wird!
(Das entspricht einer Größenreduzierung von etwa 90 %.)

Bilder zu Sprites

Die Sprite-Optimierung eines bestehenden Themes kann etwas zeitaufwändig sein, kann aber auch eine große Geschwindigkeitssteigerung für Ihre Website bringen.

Ein Sprite ist ein einzelnes Bild, normalerweise im .PNG-Format, das mehrere Elemente Ihres visuellen Designs/Layouts enthält. Anstatt jedes grafische Element einzeln zu laden, werden alle Bilder zu einem oder so wenigen Sprites wie möglich zusammengefügt.

Diese Technik sollte nur für die Bilder verwendet werden, die zum Layout des Designs verwendet werden, und nicht für einzelne Post-Featured-Bilder, Miniaturansichten usw. Die einzigen Bilder, die Sie in ein Sprite einfügen sollten, sind die Bilder, die auf jeder Seite Ihrer Website verwendet werden.

Anstatt jedes einzelne Bild zu laden (eine andere HTTP-Anforderung), werden alle Bilder in einer Datei gruppiert, und das CSS, das jedes Bild anzeigt, wird so modifiziert, dass der Hintergrund einfach an die Stelle im Sprite verschoben wird, an der sich der benötigte Teil befindet.

SpriteMe.org ist eine hervorragende Ressource zum Erstellen von Sprites. Die beste Methode ist, im Voraus zu planen und zuerst Ihre Sprites zu erstellen, aber wenn Sie eine bestehende Website reparieren müssen, verfügt die Website spriteme.org über ein Bookmarklet, das den Vorgang sehr einfach macht.

Beispiel für CSS-Stile in Kombination mit einem Sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Jeder CSS-Stil verweist auf dieselbe Datei, aber die Hintergrundposition ist unterschiedlich und zeigt die verschiedenen Teile des Bildes.

Verteilen – Verwenden Sie ein CDN

Es gibt zwei Hauptvorteile für die Verwendung eines CDN (Content Distribution Network) zum Hosten Ihrer Designdateien und Elemente von WordPress.

Ihre Dateien werden schneller geladen, da sie sich auf einer anderen Domain befinden. Das Browser-Limit von 2-4 gleichzeitigen Downloads von Dateien gilt für jede Domain .

Wenn Ihre Dateien also auf einer anderen Domain gehostet werden, lädt ein Browser diese Dateien von selbst, wodurch Ihre Website tatsächlich schneller geladen wird und die Belastung Ihrer Domain und Ihres Hosts verringert wird.

Ein weiterer Vorteil ist, wenn Sie ein großes CDN verwenden, dass Server auf der ganzen Welt verteilt sind, die dann erkennen, woher Ihr Besucher kommt, und ihm dann Ihre Dateien vom nächstgelegenen Server in seinem Netzwerk bereitstellen.

Der richtige Server für Ihre Website

Der Server, auf dem die Website gehostet wird, muss sich in der Nähe der Zielgruppe befinden. Wenn eine Website also auf den deutschen Markt ausgerichtet ist, ist es am besten, einen Server bei einem Hosting-Unternehmen in Deutschland oder zumindest in Mitteleuropa zu finden.

Dies hat große Auswirkungen auf Ihre Besucher, die von einem Server laden, der viel näher an ihrem Standort liegt, wodurch das Surfen auf Ihrer Website viel schneller wird.

Dies hat auch einen SEO-Einfluss, nicht nur, weil die Seite schneller geladen wird, sondern auch, weil es die Bedeutung der Website für das deutsche Publikum erhöht und daher auch ein höheres Ranking haben sollte.

Der tatsächliche Effekt in Bezug auf SEO ist umstritten, aber wenn Sie versuchen, die Leistung Ihrer Website zu verbessern, ist es eine Überlegung wert.

Dies ist für SEOs bekannt, aber sobald eine Website eingerichtet wurde, wird sie selten aus reinen SEO-Gründen auf einen anderen Server verschoben. Es lohnt sich jedoch, dies für Ihr nächstes Projekt im Auge zu behalten.

404-Fehler beheben

Sie sollten Ihre Website regelmäßig überprüfen, um sicherzustellen, dass Sie sowieso keine 404 – nicht gefundenen Seiten haben. Das Reduzieren schlechter Links auf Ihrer Website kann die Serverlast verringern und eine bessere Benutzererfahrung bieten. Links und Seiten können nicht nur verloren gehen, manchmal kann ein Tippfehler oder eine andere Art von Fehler dazu führen, dass Inhalte auf Ihrer Website nicht gefunden werden.

Tipp: Sehen Sie sich diesen Code an, um nicht gefundene Seiten automatisch per 301 weiterzuleiten.

[Kasten]
Diese Seite ist noch lange nicht fertig und deckt noch nicht alle Details der WordPress-Optimierung ab. Das Ziel ist es, eine Ressource mit Tipps und Tricks zu erstellen, um das Beste aus Ihrer WordPress-Site herauszuholen.

Einige oder die meisten der Tricks werden schwierig zu implementieren sein, wenn Sie kein Entwickler sind, aber jeder von ihnen wird Ihre WordPress-Site schneller laufen lassen.
[/Kasten]

Die Checkliste

Dies ist die Checkliste, bitte beachten Sie, dass jede Website und jedes Projekt anders ist. Nicht alle Schritte können auf allen Websites verwendet werden.