WordPress richtig optimieren

Zuletzt aktualisiert am 27. September 2019 von Claus Nehring

Einleitung

Eine Website sollte schnell laden. Und das ist aus zwei Gründen sehr wichtig.

Zum einen hassen Benutzer langsame Websites. Bei Ladezeiten von mehr als drei Sekunden riskieren Sie, dass Ihre Website-Besucher künftig Ihre Seite meiden und stattdessen lieber bei der Konkurrenz surfen. Und das möchten Sie vermutlich eher nicht.

Und zum zweiten hasst Google langsame Websites. Und zwar deswegen, weil Google seinen Benutzern nur hochwertige Websites empfehlen möchte. Und die Geschwindigkeit ist neben einem individuellen und hochwertigen Inhalt eines der Hauptkriterien für eine hochwertige Website.

Deswegen hilft Ihnen eine schnelle Website gleich auf zwei Arten. Zum einen macht sie Ihre Besucher glücklich. Und zum zweiten bekommen Sie mehr Besucher, weil Ihre Website auf Google höher bewertet wird.

Und genau deswegen macht es auch Sinn, den Aufwand nicht zu scheuen und sich mit dem Thema Optimierung umfassend zu beschäftigen.

In diesem Artikel erkläre ich Ihnen, worauf Sie dabei achten müssen und welche Tools und Plug-Ins Ihnen bei der Aufgabe am besten helfen können.

Optimierungsmöglichkeiten außerhalb von WordPress

Sie haben bereits außerhalb von WordPress einige Möglichkeiten zur Optimierung Ihrer Website. Auf diese Möglichkeiten gehe ich in den nächsten Abschnitten kurz ein.

Der Hosting-Provider

Ein Hosting-Provider ist ein Unternehmen, das seinen Kunden Platz auf einem Server zur Verfügung stellt. Auf diesem Server werden alle Daten einer Website gespeichert und im Internet verfügbar gemacht. Soweit eigentlich recht einfach, oder?

Die Geschwindigkeit einer Website hängt zunächst einmal von der Geschwindigkeit des Servers ab, auf dem sie installiert ist. Und dann von der Anzahl der auf diesem Server gleichzeitig gehosteten Websites.

Das Shared-Hosting

Fast alle Websites beginnen mit einer Variante, die sich „Shared Hosting“ nennt. Bei dieser Variante des Hostings werden viele verschiedene Websites auf einem Server gehostet. Wie viele andere Websites sich noch auf dem Server befinden, auf dem auch Ihre Website liegt, ist in der Hauptsache vom gewählten Hosting-Paket (und damit vom Preis) abhängig. Und manche Anbieter versuchen natürlich so viele Anwender wie irgend möglich auf einen Server zu legen, um die Einnahmen zu maximieren. Irgendwann ist der Server dann hoffnungslos überlastet und die Geschwindigkeit geht in den Keller. Deswegen ist die Wahl des richtigen Hosting-Providers nicht ganz unwichtig.

Aber das „Shared Hosting“ ist trotzdem für viele Websites die geeignete Lösung, weil es Ihnen einen kostengünstigen Zugang zu Ihrer eigenen Website eröffnet. Und weil es für viele kleinere Websites eine völlig ausreichende Lösung ist. Ein Wechsel in eine höhere (und teurere) Kategorie ist meist problemlos möglich, damit kann die Leistung Ihrer Website mit neuen Anforderungen mitwachsen.

Günstige Webhosting-Pakete beginnen mit knapp über einem Euro pro Monat, ab einer Investition von knapp 10 Euro im Monat sollten Sie bereits ein Paket mit einer völlig ausreichenden Leistung für die meisten Websites bekommen.

Das Managed-Hosting

Falls Ihnen ein Shared-Hosting irgendwann einmal nicht mehr ausreichen sollte, können Sie auf einen Umstieg auf ein Managed-Hosting nachdenken. Das System ist grundsätzlich das gleiche, nur ist Ihre Website hier die einzige, die sich auf dem Server befindet. Sie haben also im Prinzip Ihren eigenen Webserver, müssen sich aber nicht um die Wartung kümmern.

Logischerweise sind Websites, die alleine auf einem eigenen Server liegen, um einiges schneller. Allerdings sind die Kosten auch deutlich höher, vernünftige Angebote beginnen bei ungefähr 100 Euro im Monat, und das lässt sich leicht vervielfachen.

Die Investition in ein solches Managed-Hosting lohnt sich eigentlich nur dann, wenn Sie eine sehr komplexe Website mit tausenden von Besuchern am Tag haben.

Anforderungen an das Hosting

Ich möchte Sie an dieser Stelle nicht mit langen Absätzen über das Für und Wider einzelner Funktionalitäten langweilen. Stattdessen finden Sie hier eine Liste mit ein paar Features, die in jedem tauglichen Hosting-Paket ohne Aufpreis enthalten sein sollten.

• Eine Traffic-Flatrate
• Eine frei wählbare PHP-Version
• MySQL-Datenbanken
• Zugriff auf PHMyAdmin
• Anlegbare auf Cron-Jobs
• Mindestens ein FTP-Account
• Ein Online-Dateimanager
• Eine ausreichend hohe Anzahl von E-Mail-Konten
• Unterstützung von POP3 / IMAP / SMTP
• SSL-Zertifikate möglich

Wenn dann noch ein LiteSpeed Webserver inegriert ist, haben Sie bereits ein ziemlich gutes Paket gefunden.

Die PHP Version

WordPress und alle Themes und Plug-Ins sind in einer Programmiersprache namens PHP geschrieben. Und PHP wird ständig aktualisiert und verbessert, die aktuelle Version ist 7.3 (Stand Juni 2019).

Da bisher jede neue PHP-Version auch immer die Geschwindigkeit erhöht und die Sicherheit verbessert hat, ist es wichtig, die jeweils aktuelle PHP-Version zu nutzen. PHP in der aktuellen Version 7.3 kann beispielsweise mehr als dreimal so viele Anfragen pro Sekunde verarbeiten als das 2017 noch aktuelle PHP 5.6.

Ihr Hosting-Provider nimmt diese Umstellung nicht für Sie vor, da die Änderung der PHP-Version eventuell nicht mit allen auf einer bestimmten Website installierten Programm kompatibel ist. Sie müssen sich also selbst um diese Aktualisierung kümmern.

Die Umstellung der PHP-Version ist bei den meisten Providern mit einigen wenigen Mausklicks zu erledigen. Auch wenn eine solche Umstellung auf den meisten Installationen nicht zu Problemen führen sollte, sollten Sie nach der Umstellung trotzdem die Funktionsfähigkeit Ihrer Website überprüfen.

Die Nutzung von HTTP/2

HTTP/2 wurde entwickelt, um die Bereitstellung von Webseiten zu beschleunigen. Es wurde im Jahr 2015 veröffentlicht und setzt zwingend die SSL-Verschlüsselung (HTTPS) voraus.

Die Nutzung der Möglichkeiten von HTTP/2 sollte zum Standard gehören und von Ihrem Hosting-Provider unterstützt werden. Ob eine Website HTTP/2 unterstützt, können Sie bequem online mit dem „HTTP/2 Checker“ feststellen.

Die InnoDB Storage Engine verwenden

Unter MySQL (das ist der Datenbankserver, unter dem nahezu alle WordPress-Webseiten laufen) gibt es verschiedene sogenannte „Storage Engines“. Eine „Storage-Engine“ ist die Softwarekomponente, mit deren Hilfe ein Datenbank-System die Daten in einer Datenbank erstellt, liest, aktualisiert und löscht.

Und die von Ihrem MySQL-Server standardmäßig verwendete „Storage Engine“ ist höchstwahrscheinlich „MyISAM“. Und das ist nicht so gut, weil das ebenso wahrscheinlich auf alle Ihre WordPress-Tabellen zutrifft.

Es gibt nämlich eine andere, neuere „Storage Engine“ namens „InnoDB“, die sich in den letzten Jahren zu einer sehr leistungsfähigen und zuverlässigen Alternative entwickelt hat. Grundsätzlich sollten Sie für Ihre WordPress-Tabellen also eher „InnoDB“ als „MyISAM“ verwenden.

Es gibt ein Plug-In namens „Vevida Optimizer“, das laut Beschreibung diese Umstellung ausführen kann. Ich habe das Plug-In nicht getestet und kann deswegen die Leistung nicht beurteilen. Ich würde allerdings auch nicht unbedingt ein Plug-In für diesen Zweck installieren, sondern die Änderung direkt über die Verwaltung-Seite des MySQL-Servers („PHPMyAdmin“) erledigen.

Eine einfache Anleitung, in der die Umstellung Schritt für Schritt erklärt wird, finden Sie in meinem Artikel „Von MyISAM auf InnoDB in ein paar einfachen Schritten“.

Optimierungsmöglichkeiten innerhalb von WordPress

Die Wahl des richtigen Themes

Ein Theme (besonders ein schlecht programmiertes) kann einen erheblichen Einfluss auf die Ladezeit einer Website haben. Es muss zwar nicht immer der Fall sein, aber meistens funktionieren kostenpflichtige Premium-Themes besser als kostenlose (hauptsächlich vermutlich, weil sich negative Kommentare auf die Verkaufszahlen auswirken).

Deswegen sollten Sie bei der Auswahl eines Themes immer auch die Ladezeiten Ihrer Website im Auge behalten.

Einige Anhaltspunkte finden Sie in meinem Artikel „Die Auswahl des richtigen WordPress-Themes“, ich berate Sie bei Bedarf aber auch gerne individuell.

Vorsicht bei der Auswahl von Plug-Ins

Auch manche Plug-Ins verschlechtern die Performance einer Website enorm. Auch hier sollten Sie nach jeder Installation aufs neue die Performance überprüfen, um keine unliebsamen Überraschungen zu erleben.

Achten Sie dabei neben der gesamten Performance vor allem auch auf die Anzahl der Requests (die Zahl „25“ unten rechts im Screenshot). Steigt dieser Wert nach der Installation eines Plug-Ins stark an, sollten Sie das Plug-In eingehend überprüfen.

Mehr Informationen zu der Leistungsmessung einer Website erfahren Sie bei Interesse übrigens in meinem Artikel „Leistung messen und Optimierungspotenziale finden“.

Lassen Sie Zähler möglichst weg

Zähler mögen ja ganz nett anzusehen sein. Und die Zahlen mögen auch durchaus stolz machen. Sicherlich ist es schön, wenn ein Kommentator bereits 958 Beiträge verfasst hat, wenn ein Artikel bereits 159 Mal gelesen wurde oder Ihre Facebook-Seite 7890 Follower hat.

Aber es könnte durchaus sein, dass solche Zähler Ihre Website erheblich verlangsamen. Es ist schon schlimm, wenn ein bestimmtes Plug-In bei jedem Aufbau einer Seite den Server abfragen und die Anzahl der Zugriffe zählen muss (weil man das auch ganz einfach mit einem Zählerwert machen könnte, den man bei jedem Zugriff um eins erhöht). Aber noch schlimmer wird es dann, wenn diese Zahlen jedes Mal von einem externen Server abgefragt werden müssen (weil diese Server teilweise sehr schleppend antworten und sich Ihre Seite dadurch verlangsamt). Gerade API-Zugriffe auf soziale Netzwerke können sich schnell als Bremse herausstellen.

Lassen Sie es also besser bleiben und verzichten Sie auf solche Dinge, wenn’s nicht unbedingt sein muss. Es bringt Ihren Besuchern keinen wirklichen Mehrwert und es kann Ihre Website deutlich verlangsamen.

Die richtigen WordPress-Einstellungen

Einige Dinge können Sie direkt in WordPress ändern und damit die Performance Ihrer Website bereits etwas erhöhen. Viele der hier vorgestellten Maßnahmen lassen sich manuell erledigen, bei anderen lässt sich das auch viel komfortabler mit Plug-Ins machen.

Die Bereinigung der WordPress-Datenbank

Jedes Plug-In und jedes Theme speichert seine Einstellungen in der WordPress-Datenbank. Dummerweise werden diese Daten bei der De-Installation der meisten Plug-Ins nicht automatisch auch wieder gelöscht. Das mag Sinn machen, wenn ein Plug-In irgendwann erneut installiert wird und die Einstellungen dann och vorhanden sind. Aber in den meisten Fällen verursacht es einfach nur unnützen Ballast, der irgendwann die Performance beeinträchtigt.

Aber das muss nicht sein. Die kompletten Optimierungs-Pakete für WordPress enthalten fast alle Funktionen, die Sie zur Bereinigung der Datenbanken benötigen.

Falls eine Funktion einmal nicht enthalten sein sollte, kann eventuell das Plug-In „Advanced Database Cleaner“ weiterhelfen, dessen kostenlose Version bereits viele notwendige Funktionen bereitstellt.

Die Standard-Anmeldeseite ändern

Die Standard-Anmeldeseite einer jeden Wordpress-Installation lautet „www.ihredomain.de/wp-admin“. Dummerweise weiß das aber auch jeder Bot und jeder Hacker in den Weiten des Internets. Und deswegen ist diese Seite ein potentielles Angriffsziel (und kann auch ein Grund für Fehler wie „429 Too Many Requests“ sein).

Diese Funktion ist in den großen Optimierungs-Paketen meistens nicht enthalten. Glücklicherweise gibt es aber das kostenlose Plug-In „WPS Hide Login“, dass diese Änderung sehr einfach für Sie vornehmen kann.

Diese Änderung kann in manchen Fällen zu Inkompatibilitäten mit Themes oder Plug-Ins führen. Deswegen würde ich sie nur dann durchführen, wenn auf der Website ein Problem besteht, dass anders nicht lösbar ist.

Plugin- und Theme Updates deaktivieren oder optimieren

Manchmal schafft auch das Update-System von Wordpress Probleme. Die Abfragen des Update-Checker von WordPress für Plug-Ins von Drittanbietern kann nämlich in manchen Fällen (gerne bei schlecht programmierten Plug-Ins) sehr häufige Updateanfragen senden, die dann in der Summe einen Einfluss auf die Geschwindigkeit des Gesamt-Systems haben können. Hauptsächlich ist das beim Laden des Verwaltungsbereiches zu bemerken.

Wenn also der Verwaltungsbereich Ihrer Website nur sehr langsam lädt, dann könnte das Deaktivieren der automatischen Updates eine Lösung darstellen. Dafür gibt es beispielsweise das Plug-In „Disable All WordPress Updates“, dass genau das tut.

Aber Vorsicht. Sie müssen nach der Installation unbedingt daran denken, dass Plug-In in regelmäßigen Abständen zu deaktivieren, damit Sie keine Updates verpassen. Denn ansonsten werden die fehlenden Updates irgendwann die Sicherheit und die Leistung Ihrer Website stark beeinträchtigen. Und deswegen ist das hier eigentlich auch keine Lösung, sondern eher ein Workaround.

Pingbacks deaktivieren

Ein „Pingback“ ist ein automatischer Kommentar, der dann versendet wird, wenn auf andere Inhalte (auf Ihrer eigenen der auf anderen Websites) verlinkt wird. Pingbacks sind im Prinzip recht wertlos, sie erzeugen nur zusätzliche Abfragen. Und deswegen sollten Sie sie einfach deaktivieren.

Normale Pingbacks können Sie sehr einfach vermeiden. Gehen Sie einfach im Verwaltungsmenü von WordPress auf „Einstellungen -> Diskussionen“ und setzen Sie ein Häkchen vor die Einstellung „Link-Benachrichtigungen von anderen Blogs (Pingbacks und Trackbacks) zu neuen Beiträgen erlauben“ und entfernen Sie das Häkchen bei „Versuchen, jedes in Beiträgen verlinkte Weblog zu benachrichtigen (verlangsamt das Veröffentlichen)“. Speichern Sie diese Einstellung, und Sie sind die Pingbacks los.

Um jetzt auch noch die letzten Self-Pingbacks (Benachrichtigungen an Ihre eigene Website) loszuwerden, könnten Sie noch das Plug-In „No Self Pings“ installieren, dass diesen Job für Sie erledigt. Das Plug-In benötigt keine weiteren Einstellungen, ein einfaches Aktivieren reicht.

Die richtigen Plug-Ins

Es gibt einige Plug-Ins für einzelne Optimierungsmaßnahmen und es gibt die großen Komplett-Pakete, die alle Funktionen unter einer Oberfläche vereinigen. Wenn Sie gesteigerten Wert auf die allerletzten Millisekunden legen und sich richtig reinarbeiten möchten, dann sind Sie möglicherweise mit einer Zusammenstellung einzelner Plug-Ins besser bedient. Aber viel komfortabler und einfacher geht’s mit einem der großen Pakete, die alle Funktionen unter einer Benutzeroberfläche anbieten.

Und weil das auch meine Empfehlung ist, bezieht sich dieser Artikel in der Hauptsache auf diese großen Pakete, die einzelnen Plug-Ins werden nur am Rande erwähnt.

In den folgenden Absätzen werden Sie einige Plug-Ins kennenlernen, die Ihnen bei der Optimierung Ihrer Website helfen können. Aber vor allem werden Sie lernen, welche Punkte überhaupt für die Optimierung wichtig sind und wie Sie diese Optimierungen einfach durchführen können.

Ein Plug-In für alles ?

Es gibt einige große Pakete, die so ziemlich alles enthalten, was man zur Optimierung einer Website so braucht. Wenn Sie sich das Leben ein wenig erleichtern möchten, sollten Sie sich eventuell für eines dieser großen Pakete entscheiden.

Ich selbst arbeite mit zweien dieser Pakete. Für Websites, die auf meinem Webserver gehostet werden und die ich selbst verwalte, benutze ich gerne das Plug-In „LiteSpeed“. Das liegt in der Hauptsache daran, dass es kostenlos und leicht zu bedienen ist. Außerdem nutze ich für manche Websites auch „WP Rocket“, das ebenfalls über sehr viele Funktionen verfügt und manchmal besser geeignet ist.

LiteSpeed setzt übrigens einen eigenen Server voraus, der auf dem Webserver installiert sein muss. Durch diese Trennung in ein Server-Modul und ein Plug-In ist es in den meisten Konfigurationen schneller als WP Rocket. Daher ist es bei manchen Hosting-Providern nicht einsetzbar.

Daneben gibt es noch viele andere Optimierungs-Plug-Ins auf dem Markt, die ich allerdings weniger gut kenne und deswegen hier nicht besonders erwähnen möchte. Das heißt nicht, dass sie schlechter als die hier genannten Plug-Ins sein müssen (vielleicht sind sie sogar besser), es heißt nur, dass ich sie eben nicht benutze. Eine Google-Suche sollte aber genügend Alternativen und Testberichte aufzeigen.

Und natürlich lässt sich auch mit einer Sammlung einzelner Plug-Ins ein gutes (vielleicht sogar besseres) Ergebnis erzielen. Einige dieser Plug-Ins werden in den folgenden Absätzen erwähnt, ich würde aber aus Gründen der Bedienbarkeit und der Kompatibilität eher auf eines der großen Komplett-Pakete zurückgreifen.

Kommen wir nun aber zu den verschiedenen Punkten, die optimiert werden sollten.

Das Caching einer Website

Das Caching ist eigentlich ein recht simpler Mechanismus. Normalerweise baut WordPress jede Webseite (per PHP) einzeln auf, bevor sie an den anfordernden Webbrowser geschickt wird. Und natürlich bedeutet das einen gewissen Rechenaufwand. Dieser Aufwand wäre in vielen Fällen eigentlich unnötig, weil sich die Information auf der Webseite gar nicht geändert hat.

Und genau hier setzt das Caching an. Bevor die Webseite an den anfordernden Webbrowser gesendet wird, speichert der Cache-Mechanismus eine Kopie dieser Seite. Wird dieselbe Seite nun ein weiteres Mal angefragt, kann diese Anfrage jetzt direkt aus dem Cache-Speicher heraus beantwortet werden. Und das geht natürlich erheblich schneller, als wenn die Seite jedes Mal neu aufgebaut werden müsste.

Bei jeder Änderung an der Webseite wird die im Cache befindliche Version aktualisiert und steht so im Prinzip jederzeit direkt aus dem Cache-Speicher heraus blitzschnell zur Verfügung.

Gerade bei komplexeren Webseiten kann das Caching die Performance einer Webseite um bis zu 90 % verbessern. Es lohnt also durchaus den Aufwand.

Grundsätzlich kann ein Caching entweder auf der Ebene des Webservers oder auf der Ebene eines Plug-Ins stattfinden. Ein Caching auf Serverebene benötigt ein auf dem Webserver installiertes Caching-Programm, das durch ein WordPress-Plug-In die benötigten Informationen zur Verarbeitung erhält. WordPress wird hier also von der Verwaltung des Cache befreit, die eigentliche Ausführung erfolgt direkt auf dem Server.

Ein Caching auf der Ebene eines Plug-Ins greift erheblich tiefer in das eigentliche WordPress-System ein, weil hier die zur Verwaltung des Cache notwendigen Abläufe direkt in das WordPress-System integriert werden müssen. Andererseits ist ein solches System aber auch nicht von einer übergeordneten Instanz abhängig und erlaubt daher eine genauere Kontrolle des Prozesses.

Daher ist ein Caching auf Serverebene (ein Beispiel hierfür ist das oben erwähnte „LiteSpeed“) mit erheblich weniger Eingriffen in die WordPress-Installation zu realisieren und in vielen Fällen effizienter. Ein Caching auf der Ebene eines Plug-Ins (wie bei „WP Rocket“) lässt sich hingegen besser an eine bestimmte Website anpassen und bringt bei guter Konfiguration eine ebenso gute oder sogar bessere Leistung.

Bilder optimieren

Ein Caching-Mechanismus ist gut und schön, aber auch aus dem Cache muss die Webseite über das Internet zum Empfänger transportiert werden. Und dabei machen Bilddateien eine große Menge des Datenvolumens aus.

Und deswegen sollten Sie Bilder immer optimieren. Es macht keinen großen Sinn, ein Bild in sehr hoher Auflösung zum Empfänger zu übertragen, wenn dieses Bild sowieso nur in einer sehr viel geringeren Auflösung angezeigt wird. Und da eine gute Bildoptimierung bis zu 90 % an Datenvolumen einsparen kann, lohnt sich die Optimierung von Bildern eigentlich immer.

Das können Sie entweder direkt bei sich erledigen, bevor Sie die Bilder hochladen. Es gibt aber auch einige Plug-Ins, die Sie bei dieser Aufgabe unterstützen. In den meisten der großen Optimierungs-Pakete sind bereits viele Funktionen zur Bildoptimierung enthalten.

Eine genauere Übersicht, in der ich auch auf einige Plug-Ins zur Bildoptimierung genauer eingehe, finden Sie bei Interesse übrigens in meinem Artikel „Bilder richtig optimieren“. Und weil die Bildoptimierung für Ihre Website ein absolutes Muss ist, sollten Sie sich mit dem Thema durchaus etwas eingehender beschäftigen.

Asynchrones Laden von Ressourcen

Das asynchrone Laden von Ressourcen beschleunigt eigentlich nicht das Laden einer Webseite, grundsätzlich werden exakt die gleichen Ressourcen geladen. Aber das asynchrone Laden verbessert die für den Benutzer sichtbare Ladezeit durch eine Änderung der Reihenfolge beim Laden der Ressourcen.

Die Idee dahinter ist recht simpel. Die meisten Webseiten enthalten mehr Informationen, als nach dem Laden auf dem Bildschirm sichtbar sind. Manche Teile der Webseite sind nicht sichtbar, weil man erstmal nach unten scrollen müsste, andere tauchen erst nach einer Aktion des Benutzers auf (beispielsweise Pop-Up-Fenster).

Aber ein Webbrowser lädt normalerweise gleich zu Beginn alle Ressourcen und beginnt erst danach mit der Anzeige der Seite. Beim asynchronen Laden werden idealerweise nur die Ressourcen geladen, die zur Anzeige des gerade sichtbaren Teils der Webseite benötigt werden. Alle anderen Ressourcen werden erst dann dynamisch nachgeladen, wenn Sie ins Sichtfeld des Benutzers geraten.

Asynchrones Laden wird über JavaScript realisiert, das Konzept nennt sich AJAX („Asynchronous JavaScript and XML“). Das heißt natürlich auch, dass JavaScript auf dem Webbrowser des Benutzers zur Verfügung stehen muss, damit asynchrones Laden überhaupt funktionieren kann.

Grundsätzlich lässt sich so ziemlich jede Ressource (seien es nun Formatanweisungen, Textinhalte, Bilder oder Scripts) asynchron laden. Allerdings hält sich die Verbesserung bei bereits minimiertem CSS und JavaScript (weiter unten lernen Sie mehr über die Minimierung) in Grenzen.

Deshalb hat das asynchrone Laden seine größten Vorteile bei Bildern und wird auch in der Hauptsache dort genutzt. Das Stichwort hierzu heißt „Lazy Loading“, und davon ist im nächsten Kapitel die Rede.

Das „Lazy Loading“

Selbst optimierte Bilder sind, verglichen mit Text, immer noch ziemlich groß. Und bevor sie in Ihrem Webbrowser angezeigt werden können, müssen sie zunächst einmal über’s Internet übertragen werden. Standardmäßig lädt ein Webbrowser vor der Anzeige zunächst einmal alle Ressourcen einer Webseite, also auch alle Bilder. Und zwar ungeachtet dessen, ob Sie auf dem gerade angezeigten Teil der Webseite (dem sogenannten „Viewport“) zu sehen sind oder nicht.

Und hier kommt jetzt das sogenannte „Lazy Loading“ ins Spiel. Die Methode sorgt einfach nur dafür, dass der Webbrowser nur die gerade angezeigten Bilder lädt. Dadurch steht der sichtbare Inhalt schneller zur Verfügung, weitere Bilder werden erst dann dynamisch nachgeladen, wenn der Benutzer auf der Webseite weiter nach unten scrollt.

Die Funktion „Lazy Loading“ ist in den meisten großen Optimierungs-Paketen (so auch in „LiteSpeed“ und „WP Rocket“) von Haus aus enthalten. Sie können die Funktion alternativ aber auch durch ein eigenes Plug-In in Ihre Website integrieren, das Modul aus „WP Rocket“ steht unter dem Namen „Lazy Load by WP Rocket“ kostenlos zur Verfügung.

Eine recht detaillierte technische Beschreibung können Sie übrigens hier im Google Entwicklerportal finden.

Ein kleiner Tipp am Rande: In Google Chrome gibt es in der aktuellen Version (77.0.3865.90, 22. September 2019) eine Funktion, die das „Lazy Load“ von Frames und Bildern direkt aus dem Webbrowser heraus erlaubt, selbst wenn die angezeigte Webseite diese Funktionalität gar nicht bietet. An diese Einstellung kommen Sie in Chrome durch Aufruf der Seite „chrome://flags/#enable-lazy-image-loading“ (für Bilder) und „chrome://flags/#enable-lazy-frame-loading“ (für Frames). Versuchen Sie’s doch einfach mal.

CSS und JavaScript minimieren und zusammenfassen

Selbst auf kleinen Websites werden Sie schnell einmal auf rund 30 Plug-Ins kommen, auf die Sie nicht verzichten wollen oder können. Die Anzahl der Plug-Ins als solches ist auch kein Problem für die Geschwindigkeit einer Website (sofern diese Plug-Ins anständig programmiert sind).

Allerdings laden fast alle dieser Plug-Ins eigene JavaScript und CSS-Dateien. Und das wiederum stellt durchaus ein Problem dar.

Wenn ein Webbrowser eine Webseite lädt, lädt er zunächst einmal die HTML-Datei dieser Webseite. Und danach jede innerhalb dieser Datei durch die Funktion „<link …..> zugeordnete Datei. Für jede dieser Dateien richtet der Browser eine Anfrage an den Webserver, woraufhin dieser die gewünschte Datei liefert. Und mit jeder dieser Anfragen steigt sowohl die Datenmenge als auch der Verwaltungsaufwand im Browser selbst, im Internet und beim Webserver.

Und genau an diesem Punkt setzt die Minimierung und Zusammenführung von CSS und JavaScript an. CSS-Dateien enthalten Formatierungsangaben (beispielsweise Schriftstile und -größen), JavaScript-Dateien enthalten kleine Programme, die auf dem Webbrowser ausgeführt werden (beispielsweise den Code für das Öffnen eines Pop-Up-Fensters). Auf beide Dateitypen lassen sich die gleichen Verfahren anwenden, daher verzichte ich im Weiteren auf die Unterscheidung.

Die Minimierung setzt auf das Konzept, dass Datei einerseits unwichtigen Code enthält (beispielsweise Kommentar-Zeilen) und andererseits kaum jemals der gesamte Inhalt für eine Webseite benötigt wird. Zum Beispiel wird die Formatierung für einen Infoblock nicht benötigt, wenn sich auf der angeforderten Seite kein Infoblock befindet. Durch die Minimierung werden solche unnötigen Inhalte der Dateien entfernt und die Dateigröße nimmt dementsprechend ab.

Die Zusammenführung hingegen reduziert den Verwaltungsaufwand für Webbrowser und Server schlicht dadurch, dass die normalerweise angeforderten vielen kleinen Dateien durch eine größere ersetzt wird, in den alle notwendigen Informationen enthalten sind. Dadurch sinkt zwar nicht die Größe der zu übertragenden Daten, aber es muss nur noch eine Anforderung anstelle von vielen gesendet werden. Das verbessert die Geschwindigkeit noch einmal.

Funktionen zum Minimieren und Zusammenführen dieser Dateien sind in allen großen Optimierungs-Paketen (so auch in „LiteSpeed“ und „WP Rocket“) von Haus aus enthalten. Ein eigenes Plug-In ist daher nicht notwendig.

Revisionen vernünftig verwalten

Jedes Mal, wenn Sie einen Beitrag oder eine Seite in WordPress speichern, erstellt WordPress eine sogenannte Revision. Das ist eigentlich recht nützlich, weil Sie auf diese Art und Weise eine Änderung wieder rückgängig machen können.

Leider limitiert WordPress die Anzahl dieser Revisionen in der Standard-Einstellung nicht. Und das hat zur Folge, dass Ihre Datenbank sich im Laufe der Zeit immer weiter aufbläht.

Zur Lösung dieses Problems gibt es verschiedene Möglichkeiten. Die wohl einfachste besteht in der Begrenzung der zu speichernden Versionen. Diese Einstellung können Sie in der Datei „wp-config.php“ erledigen. Fügen Sie mit dem Editor Ihrer Wahl hinter der Zeile „define( ‚WP_DEBUG‘, false );“ einfach eine weitere Zeile mit dem Inhalt „define( ‚WP_POST_REVISIONS‘, 5);“ hinzu. Die Zahl (5 in diesem Beispiel) legt die Anzahl der zu speichernden Versionen fest.

In den meisten großen Optimierungs-Paketen (so auch in „LiteSpeed“ und „WP Rocket“) können Sie die im System gespeicherten Revisionen löschen (Sie sollten allerdings vor dem Ausführen dieser Aktion sicherstellen, dass Sie tatsächlich nicht mehr auf frühere Versionen zurückgreifen müssen, denn die Löschung lässt sich nicht rückgängig machen).

Grundsätzlich sieht die WordPress-API eine Möglichkeit vor, um gespeicherte Revisionen einzeln zu löschen. Allerdings sieht die Verwaltungs-Oberfläche von WordPress keinen Zugriff auf diese Funktion vor (zumindest noch nicht). Und aktuell ist mir auch kein Plug-In bekannt, dass den Zugriff auf diese Funktion in komfortabler Form erlauben würde.

Verzichten Sie auf die Nutzung von Google ReCaptcha

Googe’s ReCaptcha ist eine erstklassige Möglichkeit, um Spam auf Ihrer Website zu verhindern. Aber es kann Ihre Website auch ganz erheblich verlangsamen und es frisst Ressourcen.

In meinen Tests hat es die Ladezeit einer Standard-Website um durchschnittlich 350 Millisekunden verlangsamt (in der Spitze um bis zu 30 Sekunden!) und zwischen 11 und 20 HTTP Requests zusätzlich ausgelöst. Auf dieser (optimierten) Seite würde das die Ladezeit um 50 % erhöhen und die Anzahl der Requests nahezu verdoppeln.

In meinem Artikel „Der Sinn und Unsinn von Google ReCaptcha“ finden Sie eine detaillierte Beschreibung der Probleme, ein paar mögliche Alternativen zum Einsatz von ReCaptcha und Informationen über mögliche Problem mit ReCaptcha bezüglch der Datenschutz-Grundverordnung.

Hosten Sie Google Fonts lokal

Viele Website-Betreiber (ich beispielsweise) nutzen auf Ihren Websites die wirklich tollen Fonts von Google. Aber Sie können durch die notwendigen externen Requests auch Leistung kosten und Sie sind (auch wenn die Datenübertragung an Google anonymisiert erfolgt) aus meiner Sicht datenschutzrechtlich nicht ganz unproblematisch.

Sie können die meisten dieser Problem ganz einfach dadurch lösen, dass Sie die von Ihnen verwendeten Fonts lokal auf Ihrem Server speichern. Wie Sie das machen können, welche Implikationen sich daraus ergeben und ob das überhaupt erlaubt ist, können Sie in meinem Artikel „Wie (und warum) hoste ich Google Fonts lokal?“ lesen.

Was bringt eine komplette Optimerung ?

Was eine Optimierung tatsächlich bei Ihrer Website bringen wird, lässt sich nur sehr schwer sagen. Ganz einfach deswegen, weil es zu sehr davon abhängt, was für Plug-Ins Sie benutzen und welche Art von Inhalten Ihre Website hat.

Wichtig sind die vorher aufgezählten Optimierungsmöglichkeiten alle, jede von ihnen sollte Ihnen etwas mehr Geschwindigkeit bringen. Aber wieviel jede einzelne Methode tatsächlich bringt, hängt sehr mit der Konfiguration Ihrer speziellen Website zusammen. Insgesamt sollten alle Optimierungsmaßnahmen zusammen Ihre Website um 25 % bis 50 % beschleunigen, bei schlecht gepflegten Websites habe ich auch schon Steigerungen um mehr als 90 % erlebt.

Um zu erkennen, welche Maßnahme jetzt eigentlich welche Steigerung gebracht hat, sollten Sie vor und nach jedem einzelnen Schritt die Leistung Ihrer Website messen. Das können Sie mit vielen Online-Tools recht bequem erledigen, zu nennen wären hier beispielsweise Werkzeuge wie die „Pingdom Tools“, „GTmetrix“ oder „Google PageSpeed Insights“.

Mit diesen Tools können Sie viele Optimierungspotenziale ausfindig machen und die Erfolge Ihrer Maßnahmen messen. Zum besseren Verständnis finden Sie in meinem Artikel „Leistung messen und Optimierungspotenziale finden“ einige Tipps und Tricks zur idealen Nutzung dieser Werkzeuge.