WordPress Plugins gibt es wie Sand am Meer. Oder, wie wir in der Steiermark sagen, “zum Saufuatan”. Die Versuchung ist groß und die Auswahl ist teils überwältigend, egal welche Funktionalität man auf der eigenen WordPress-Website einbauen möchte. Daher ist die Frage berechtigt:

Welche WordPress-Plugins braucht man?

Die Bereiche, die man hier abdecken muss, sind Sicherheit, Optimierung und fehlende Funktionalität. Wordfence ist ein Muss in Punkto Sicherheit, zur Optimierung tragen Autoptimize und Imagify bei. Die benötigte Funktionalität hängt vom Ziel der Website ab.

Hier erfahren Sie mehr zu folgenden Themen:

Zusammenfassung: Sinn und Zweck von WordPress-Plugins

WordPress-Plugins erweitern die Funktionalität des sogenannten WordPress-Cores. Plugins können zwar auch Aussehen und Gestaltungselemente einer WordPress-Website verändern, dafür sollte man allerdings besser ein geeignetes WordPress-Theme wählen.

Welche WordPress-Plugins braucht man?

WordPress-Plugins sind insgesamt ein sehr komplexes Thema. Daher lohnt sich natürlich auch die detaillierte Auseinandersetzung mit der Funktionsweise und Handhabung einerseits und einer konkreten Liste von Beispielen andererseits.

Im vorangegangenen elften Teil dieser Beitragsreihe habe ich Ihnen daher gezeigt, wie WordPress-Plugins funktionieren, was sie leisten und wie sie zu handhaben sind. Wenn Sie das Gefühl haben, Sie würden diese Themen lieber besser verstehen, bevor wir hier konkrete Beispiele diskutieren, dann nehmen Sie sich bitte die Zeit und lesen Sie meinen Übersichts-Artikel zuerst. Wenn Sie danach hierher zurückkehren, werden Sie bereits die praktischen Schritte im Umgang mit WordPress-Plugins kennen.

Willkommen also zum zwölften Teil meiner Beitrags-Reihe, in der ich eine komplette Website-Erstellung von Anfang bis Ende beschreibe. Hier geht es um einige wichtige Beispiele von WordPress-Plugins, die ich selbst auf fast allen meinen Websites und auch für Websites meiner Kunden nutze, so auch hier auf WebsiteBerater.com.

Meine Empfehlungen für WordPress-Plugins

Meine Empfehlungen für WordPress-Plugins in diesem Artikel sind ein erster Schritt zu einer vernünftigen Plugin-Ausstattung, der mir für jeglichen Typ von Website am geeignetsten erscheint. Zunächst gehe ich auf einige Sicherheitsaspekte ein, die absolut wichtig sind.

Danach kommen zwei Beispiele für Optimierung, die mit Bezug auf Suchmaschinenoptimierung (SEO) jedenfalls von Bedeutung sind. Wem aber egal ist, wo die eigene Website in Google-Rankings auftaucht oder ob die Website schnell genug geladen wird (sodass mögliche Besucher nicht gleich wieder kehrt machen), der kann den Optimierungsteil getrost überspringen.

Wordpress Plugins: Empfehlungen und Übersicht

Plugins, die die Funktionalität der eigenen Website erweitern, sind ein eigenes Kapitel. Letzten Endes handelt es sich dabei um ein Fass ohne Boden und man kann über die besten/nötigsten/sonstwasten WordPress-Plugins nahezu endlos diskutieren oder gar streiten.

Klarerweise hat jede Website ihre eigenen Bedürfnisse. Ich berate meine KundInnen und InteressentInnen zunächst auch immer zum tatsächlichen Bedarf an Funktionalität bei einem geplanten Website-Projekt. Wenn Sie mehr über mich und solche Beratungsmöglichkeiten wissen möchten, lesen Sie bitte einfach meine Informationen zum Thema Webdesign-Angebote.

Aber genug davon und zurück zu WordPress-Plugins. Was ich sagen wollte ist, dass ich in diesem Artikel keine Plugin-Empfehlung für jegliche denkbare Funktionalität unterbringen kann. Das muss also – je nach Anwendung – an anderer Stelle erfolgen. Hier erwähne ich eben nur ein paar konkrete und wichtige Plugins, auf die eine moderne Website eigentlich nicht verzichten sollte.

Die drei WordPress-Plugin-Bereiche: Sicherheit, Optimierung, Funktionalität

Sicherheit

Wie schon an anderer Stelle erwähnt, ist WordPress grundsätzlich sehr sicher. Das hält aber z.B. niemanden davon ab, zu versuchen, sich durch Erraten von Benutzernamen und Passwörtern unerlaubten Zugang zu meiner WordPress-Website zu verschaffen.

Wenn man ein paar Grundregeln befolgt (z.B. starkes Passwort, individueller und nicht-offensichtlicher Benutzername für den WordPress-Administrator-Account), ist solch ein Einbruch bereits recht unwahrscheinlich. Aber warum nur sicher sein, wenn man auch recht einfach sehr sicher sein kann? Daher hier ein paar Hinweise zum Thema Sicherheits-Plugins.

Optimierung

Moment, ist WordPress denn nicht von vornherein optimiert? Wozu braucht man dann noch Plugins, die das machen?

Doch, WordPress ist auch bis zu einem gewissen Grad optimiert. Durch den modularen Aufbau mit Plugins und die Möglichkeit, z.B. verschiedene Themes zu benutzen, ist jedoch eine Optimierung bis ins letzte Detail von vornherein unmöglich.

Da sich außerdem die Verhältnisse und Gegebenheiten im WWW über die Jahre ändern und manche Aspekte der Optimierung erst mit der Zeit auftreten oder wieder verschwinden, ist es einfacher, solche Aspekte per Plugin zu erledigen. Plugins sind hier auf jeden Fall flexibler und individuell gestaltbarer als der WordPress-Core.

Funktionalität

Über den grundsätzlichen Sinn des Konzepts, zusätzliche Funktionen über Plugins einzubinden, wird, so denke ich, niemand ernsthaft streiten wollen. Eine Software-Plattform für Websites, die von vornherein alles kann und tut, ist ein verrücktes Konzept (ganz einfach weil unsere technologischen Ressourcen begrenzt sind).

Daher ist es vernünftig, Funktionen modular zur Verfügung zu stellen. Das heißt, zusätzlich zum WordPress-Core, der die grundlegende Funktionalität der Website liefert, können zusätzliche Funktionen eben per Plugin zugeschaltet werden.

Jetzt werden Sie fragen: Aber warum muss man denn z.B. die Dinge, die ich hier beschreibe, erst extra per Plugin zuschalten, wenn sie doch so wichtig sind, und jede WordPress-Website sie haben sollte? Diese Frage ist absolut berechtigt, und Sie können versuchen, sich Ihre eigene Meinung im Laufe der Zeit durch den Umgang mit WordPress zu bilden.

Hier von mir ein paar Gedanken dazu:

  • WordPress ist kostenlose, frei verfügbare Software und wird im Wesentlichen von einer Community von freiwilligen Entwicklern instand gehalten. Dadurch müssen auch hier die verfügbaren Ressourcen klug eingesetzt werden.
  • Nicht jeder hat die gleichen Ansichten, was nötige Funktionen oder verfügbare Gestaltungselemente im WordPress-Core betrifft.
  • Wenn die Leistung und Schnelligkeit der Website gefragt ist, ist weniger eben oft mehr.
  • Ein Ökosystem von unabhängigen Entwicklern, die zusätzliche Funktionalität in Konkurrenz zueinander erzeugen können, ist für den Benutzer der Software eine gute Sache, weil dadurch die Qualität und Auswahl der Plugins erhöht wird.

Fazit

So, jetzt aber genug gequatscht.

WordPress-Sicherheit: Das Wordfence Plugin: Installation und wichtigste Einstellungen

Was leistet das Wordfence-Plugin?

Das Wordfence Plugin für WordPress

Das erste Plugin auf meiner Liste ist Wordfence. Dieses Plugin ist aus meiner Sicht Pflicht für jeden Betreiber einer WordPress-Website, der zumindest einen groben Überblick über den Sicherheitsstatus der eigenen Website haben möchte.

Die Gründe dafür sind hauptsächlich dreierlei:

  • Zunächst bietet dieses Plugin einen konfigurierbaren Schutz vor sogenannten brute-force-attacks, d.h. den Versuchen, Benutzername und Passwort durch viele, viele, zufällige Anmelde-Versuche zu erraten.
  • Weiters erkennt das Plugin bei seinen Routinescans des WordPress-Dateisystems auf dem Webserver verdächtige Veränderungen oder Dateien, die dort, wo sie sind, eigentlich nicht hingehören.
  • Zuletzt hält das Plugin den Website-Betreiber über verfügbare Updates auf dem Laufenden, die es für Plugins, Themes oder den WordPress-Core gibt.

Die Basis-Version des Wordfence-Plugins ist kostenlos. Weitere Funktionen stehen zwar über Wordfence Premium zur Verfügung, für die Durchschnitts-Website ist die kostenlose Variante des Plugins aber absolut ausreichend.

Installation von Wordfence

Wordfence kann man einfach wie im vorigen Teil dieser Beitragsreihe über die Handhabung von WordPress-Plugins beschrieben, aus dem WordPress-Plugin-Repository installieren. Hier ist der Link zur Plugin-Informationsseite von Wordfence. Nach der Installation

Das WordPress-Plugin Wordfence wird installiert

kann man Wordfence gleich aktivieren. Direkt bei der Aktivierung startet die Grundkonfiguration. Zunächst muss man eine Email-Adresse eintragen, die für die Benachrichtigungen zum Sicherheitsstatus und andere relevante Meldungen verwendet wird, sowie die AGB akzeptieren:

Bei der Aktivierung des Wordfence Plugins muss eine Email-Adresse für Benachrichtigungen angegeben werden.

Danach kann man auf die Premium-Variante upgraden, was aber nicht nötig ist, also hier einfach auf no thanks klicken. Wer allerdings eine Lizenz besitzt, kann den Schlüssel hier eingeben und auf install klicken.

Die Möglichkeit, das Wordfence Plugin auf dessen Premium-Variante upzugraden

Dann landet man im Dashboard von Wordfence, das man auch in Zukunft jederzeit über das Seitenmenü im WordPress-Dashboard erreichen kann. Dort werden einige wichtige Menüpunkte von Wordfence eingegliedert:

Die Wordfence-Menüpunkte im Seitenmenü des WordPress-Dasbhoard

Im Wordfence-Dashboard wird zunächst eine Art Tutorial mit Infoblasen gestartet, die auch zwischendurch wieder auftaucht, wenn man sich im Wordfence-Dasbhoard zwischen verschiedenen Bereichen bewegt. Am besten liest man sich die Informationen in Ruhe durch und folgt den Anweisungen, um z.B. die Firewall zu optimieren. Hier kann man einfach die empfohlenen Einstellungen, die der automatische Test herausgefunden hat, übernehmen.

Die wichtigsten Einstellungen für Wordfence

Wordfence ist eigentlich bereits recht gut vorkonfiguriert. Zwei Einstellungen halte ich allerdings für wichtig: Zunächst sollte man das Wordfence-Autoupdate aktivieren, sobald es einem angeboten wird. Dazu klickt man einfach auf den Link Yes, enable auto-update, der im eingeblendeten Insert angezeigt wird:

Das Autoupdate des Wordfence Plugins in WordPress aktivieren

Sollte man diese Möglichkeit beim ersten Mal verpasst haben, findet sich das Autoupdate über einen Klick auf All Options, siehe auch den obigen Screenshot des Wordfence Menüteils. Dann geht man unter Global Wordfence Options zu General Wordfence Options. Dort ist es die erste Einstellung.

Die zweite Einstellung, bzw. ist es eine Gruppe von Einstellungen, betrifft das Sperren von IP-Adressen, von denen aus brute-force-attacks versucht worden sind, oder genauer gesagt: von denen aus ein ungültiger Anmeldeversuch unternommen wurde. Diese findet man wieder über All Options, diesmal aber unter Firewall Options und dort bei Brute Force Protection.

Hier stelle ich persönlich folgende extremen Werte ein (die voreingestellten Werte sind etwas gemäßigter, aber ich denke mir, wenn, dann gleich richtig streng, schließlich werden durch eine Sperre weitere Attacken von der gesperrten IP-Adresse gleich unterbunden):

  • Enable brute-force protection: On
  • Lock out after how many login failures: 2
    (Der Hintergrund dabei ist, dass einem schon einmal ein Fehler beim Login passieren kann, aber zwei nicht passieren sollten)
  • Lock out after how many forgot password attempts: 1
    (Der Hintergrund dabei ist, dass man als WordPress-Administrator diese Funktion gar nie benutzen sollte)
  • Count failures over what time period: 1 day
    (das ist die längstmögliche Zeitspanne)
  • Amount of time a user is locked out: 2 months
    (auch das ist die längstmögliche Zeitspanne. Erst für automatisch bereits erfolgte Sperrungen von IP-Adressen lassen sich in einem zweiten Schritt auch permanente Sperren verhängen. Dazu geht man zu Firewall -> Blocking, markiert die gewünschten IP-Adressen in der Liste und klickt auf make permanent, siehe auch den Screenshot weiter unten)
  • Immediately lock out invalid usernames: On

Den Rest der Einstellungen in dieser Sektion kann man unverändert lassen.

Meine eigene IP-Adresse wurde von Wordfence gesperrt, was kann ich tun?

Ja, das kann natürlich passieren. In so einem Fall ist es wichtig, sich daran zu erinnern und sich bewusst zu machen, dass Wordfence Sperren anhand der verwendeten IP-Adresse verhängt. Das bedeutet, man muss sich zunächst mit einer anderen IP-Adresse bei der eigenen WordPress-Website anmelden und dann die Sperre aufheben.

Die Anmeldung mit anderer IP-Adresse kann z.B. in einem Cafe mit gratis-WLAN gemacht werden, beim Nachbarn oder gar über einen Hotspot des eigenen Smartphones. Schlimmstenfalls versucht man es direkt vom eigenen Smartphone aus (aber nicht über das eigene WLAN, dessen IP-Adresse gerade gesperrt worden ist, sondern über das Mobilfunk-Daten-Netz). Wichtig ist, dass bei diesem Login-Versuch dann möglichst nichts schiefgeht (bei meiner Konfiguration höchstens einmal vertippen!).

Sobald man angemeldet ist, navigiert man im WordPress-Dashboard zu Wordfence -> Firewall -> Blocking und scrollt in der Liste der gesperrten IP-Adresse zur eigenen IP. Welche das ist, erkennt man meistens recht gut am Zeitpunkt der Sperre, der ebenfalls in der Liste notiert ist. Hier ist ein Beispiel:

Die Liste der gesperrten IP-Adressen im WordPress-Plugin Wordfence

Dann muss man noch das Häkchen ganz links setzen und über der Liste auf unblock klicken und – Yippie! –  die eigene IP-Adresse ist wieder erlaubt.

Das sind die wichtigsten Schritte bei der Konfiguration von Wordfence. Wer Zeit und Lust hat, sollte sich auf jeden Fall einmal durch alle möglichen Einstellungen klicken. Dabei bekommt man zumindest ein Gefühl dafür, woran hier in Punkto Sicherheit gedacht wurde und welche Möglichkeiten und Einstellungen es noch gibt.

WordPress-Sicherheit: Das Plugin Disable Rest-API

Dieses Plugin schließt eine mögliche Sicherheitslücke durch Verhindern von unangemeldeten Zugriffen auf die Rest-API. Es muss einfach nur installiert und aktiviert werden, eine zusätzliche Konfiguration ist nicht notwendig. Man findet das Plugin im WordPress-Plugin Repository:

Das WordPress-Plugin Disable REST API

Dann sucht man folgende Informationsbox in der Liste der Resultate:

Die Informationsbox zum WordPress Plugin Disable REST API

Einfach installieren, aktivieren, fertig.

WordPress-Sicherheit: Das Plugin Google Captcha (reCAPTCHA)

Eine praktische Möglichkeit, die Sicherheit von WordPress-Formularen zu erhöhen, aber auch für eine Schicht Spam-Schutz zu sorgen, ist ein Captcha. Wir kennen alle noch die nervigen “tippe diesen Text ab”-Aufgaben aus der Anfangszeit dieser Technologie vor einigen Jahren.

Google reCaptcha

Inzwischen gibt es Captchas in verschiedenen Varianten und auf verschiedenen Cleverness-Ebenen. Google hat diese Technologie unter anderen vorangetrieben und stellt einen Captcha-Dienst zur Verfügung, den man ganz bequem per Plugin auch für Anmelde- und sonstige Formulare auf WordPress-Websites einsetzen kann.

Dafür braucht man zunächst Zugang zum reCaptcha-Dienst von Google. Über diesen Link gelangt man zu den Informationen zu diesem Dienst. Um mit dem Dienst zu arbeiten klickt man weiter zur Admin-Console von Google reCaptcha.

Dort muss man zunächst eine Site anlegen, deren Domain(s) eintragen, sowie ein paar Daten zur Website angeben.

Eine neue Website bei Google reCaptcha registrieren

Nach der Auswahl des reCaptcha-Typs (der aktuell neueste ist v3) bekommt man dann Zugang zu den reCaptcha keys. Diese keys braucht man bei der Einrichtung des Plugins.

Die Key-Einstellungen bei Google reCaptcha

Durch öffnen des Pfeils bei reCaptcha Keys werden der site key und der secret key angezeigt.

Das Plugin Google Captcha reCaptcha einrichten

Das Plugin findet man wieder im WordPress-Plugin Repostiory, am besten durch eine Suche nach dem exakten Namen. Aus den Suchresultaten wählt man folgendes Plugin:

Das WordPress-Plugin Google Captcha (reCaptcha)

Nach der Installation und Aktivierung muss man die reCaptcha keys in den Plugin-Einstellungen eintragen und danach das reCaptcha testen. Das Plugin hilft dabei über folgende Meldung mit entsprechenden Links, die nach der Aktivierung angezeigt wird:

Erste Schritte bei der Einrichtung des WordPress-Plugins Google Captcha (recaptcha)

Bei den Einstellungen des Plugins gibt man zunächst die keys in den entsprechenden Feldern ein:

Die Einstellungen des WordPress-Plugins Google Captcha (reCaptcha): Die Keys

Danach einmal diese Taste betätigen und die Änderungen speichern (die Taste befindet sich in einer Box in der rechten Spalte):

Wordpress Plugins: Änderungen speichern

Und dann testet man das reCaptcha mit einem Klick auf den Button Test reCAPTCHA. Ein paar wenige Einstellungen fehlen nun noch. Und zwar sollte man das reCaptcha bei allen AnmeldeFormularen einsetzen. Dazu setzt man unter den key-Einstellungen noch die folgenden Häkchen:

Die Formular-Einstellungen für das WordPress-Plugin Google Captcha (reCaptcha)

Damit ist die Einrichtung des Plugins beendet und ab diesem Zeitpunkt werden allen Benutzern bei der Benutzung der entsprechenden Formulare reCaptchas angezeigt.

Nach dieser Gruppe von WordPress-Plugins, bei denen es um das Thema Sicherheit geht, kommen wir jetzt zur Optimierung.

WordPress-Optimierung: Das Plugin Autoptimize

Das Optimierungs-Problem einer WordPress-Website auf dem Webserver, einfach erklärt

Die Grundidee bei Optimierungs-Plugins für WordPress ist, die Struktur der Website und ihrer Seiten und damit letztlich die Ladegeschwindigkeit und andere Aspekte der Benutzerfreundlichkeit zu verbessern. Der Grund dafür, dass das überhaupt möglich ist, liegt in der Art und Weise, wie ein Besucher einer Website diese zu sehen bekommt.

Hosting

Zunächst fordert der Benutzer eine bestimmte Seite der Website an, indem er irgendwo auf einen Link klickt oder die Adresse der Website als URL in seinem Browser eintippt. Diese Anforderung muss zum Webserver durchgestellt werden, wie ein Telefonanruf. Sobald die Anfrage für die Seite beim Server angekommen ist, beginnt dieser, zu arbeiten.

Dabei hat der Server die folgenden wesentlichen Punkte abzuarbeiten:

  • Feststellen, wo die angeforderte Seite im Dateisystem auf dem Server zu finden ist
  • Die Seite aufrufen und in eine Form bringen, die an den Besucher verschickt werden kann (HTML, CSS, JavaScript)
  • Wenn die Seite noch nicht in dieser Form vorliegt (für WordPress ist das als PHP-Skript), die HTML-etc.-Version der Seite erzeugen
  • Bei der Erzeugung der Seite feststellen, welche Inhalte dynamisch eingebunden werden müssen und wie
  • Die dynamisch einzubindenden Inhalte aus anderen Skripten, Dateien und einer im Hintergrund laufenden MySQL-Datenbank zusammensuchen und korrekt organisieren
  • Nach Erzeugung der Seite diese an den Besucher abschicken

Diese Prozesse können recht aufwändig sein, je nachdem, wieviele Informationen der Server zusammensuchen muss. Eine Optimierung der Seitenerzeugung ist daher ein wichtiger Teil des Gesamt-Optimierungs-Konzepts für eine Website.

Das Optimierungs-Problem einer WordPress-Website im Browser des Besuchers, einfach erklärt

Was der Server zu tun hat, ist aber nicht nur darauf beschränkt, die vom Besucher angeforderte Seite möglichst effizient zusammenzusetzen und zu verschicken. Zusätzlich kommt es auch darauf an, dem Besucher diese Seite möglichst so zu schicken, dass er jene Inhalte zuerst bekommt, die er zuerst braucht, d.h. zu sehen bekommt.

Inhalte einer Website "above the fold"

Sie können sich also z.B. in diesem Bild vorstellen, dass die geladene Seite noch mehr Informationen bereithält, wenn der Besucher anfängt, zu scrollen. Da man das alles aber am Anfang nicht sehen kann, sollte alles, was zu Anfang sichtbar sein wird (der Fachausdruck dafür heißt above the fold), zuerst geladen werden.

Was hier noch auffällt, ist, dass sich dieser Bereich auf verschiedenen Bildschirmen und Geräten unterscheidet. Das ändert aber nichts am Prinzip: Zuerst das Sichtbare laden, dann erst den Rest. Das geht so weit, dass z.B. manche Websites so eingestellt sind, dass Bilder, die weiter unten auf der Seite vorkommen, überhaupt erst geladen werden, wenn der Besucher zu scrollen beginnt, oder in die unmittelbare Nähe des Bildes scrollt.

Noch etwas: Natürlich soll auf dem Bildschirm des Besucher-PCs oder Besucher-Smartphones möglichst bald etwas zu sehen sein, damit der Besucher möglichst bald das Gefühl einer erhaltenen Antwort bekommt. Noch dazu soll möglichst bald eine Interaktion mit der geladenen Seite möglich sein.

Das klingt jetzt bereits hinreichend kompliziert, und das ist es auch. Deshalb ist auch bereits intuitiv klar, dass man so eine Optimierung nicht unbedingt per Hand wird machen wollen. Daher gibt es WordPress-Plugins, die solche Seiten-Optimierungen insgesamt oder zumindest teilweise automatisch erledigen.

Das Grundkonzept hinter WordPress-Optimierungs-Plugins

Das Plugin Autoptimize und dessen Kollegen aus der Optimierungs-Ecke nehmen sich meist einen guten Teil der nötigen Optimierungen vor. Je nach Plugin ist das mehr oder weniger, bei Autoptimize hat man recht viel auf einmal erledigt. Ein Teil, der beim Laden einer Seite Zeit kostet, ist das wiederholte nachfragen, um weitere Dateien vom Webserver zu laden, die zusätzlich zur HTML-Hauptdatei noch benötigt werden.

Einiges davon sind CSS-Dateien. In diesen Dateien werden die Style-Befehle gesammelt, die dem Browser sagen, wie die HTML-Datei dargestellt werden soll. Meist gibt es auf einer Website mehrere CSS-Dateien, z.B. eine für jedes Plugin mit Darstellungs-Aspekt, eins für das Theme, etc. Jedesmal, wenn so eine CSS-Datei extra angefragt wird, kostet das (Lade-)Zeit. Daher kombiniert Autoptimize alle CSS-Dateien in eine.

Das gleiche Prinzip gilt für Funktionalität, die als JavaScript mitgeliefert wird, um dann im Browser zu laufen. Auch hier gibt es von einigen Plugins solche Dateien, vom Theme und sonstigen Funktionen, die man bereitstellen möchte. Und auch hier kann Autoptimize alle JS-Dateien in nur eine kombinieren. Somit werden einige sogenannte Requests vermieden, und die angeforderte Seite kann schneller geladen werden.

Auch bei HTML selbst (z.B. Kommentare entfernen) und Bildern (wie schon erwähnt, zunächst nur die wichtigen laden) kann man hier bereits Einstellungen setzen (Bilder-lazy-load gibt es in Autoptimize ab Version 2.5).

Installation des WordPress-Plugins Autoptimize

Autoptimize ist kostenlos und lässt sich durch einfache Suche nach dem Namen des Plugins im WordPress-Repository finden.

Das WordPress-Optimierungs-Plugin Autoptimize

Nach den beiden Schritten Installation und Aktivierung muss man noch in den Einstellungen die gewünschten Häkchen setzen.

Einstellungen des WordPress-Plugins Autoptimize

Die vier wesentlichen Punkte bei den Autoptimize-Einstellungen betreffen JavaScript (JS)-, CSS- und HTML-Optimierung, sowie das “lazy-loading” der Bilder. Die ersten Drei befinden sich gleich auf der ersten Registerkarte, die man per Klick auf den Link Einstellungen beim Eintrag von Autoptimize in der Liste aller installierten WordPress-Plugins finden kann.

Alternativ kann man auch über das Seitenmenü des WordPress-Dashboards zu den Einstellungen gelangen, indem man den Unterpunkt Autoptimize im Menüpunkt Einstellungen sucht und darauf klickt:

Der Unterpunkt Autoptimize des Menüpunkts Einstellungen im Seitenmenü des WordPress-Dashboards

Danach kommt man wie gesagt zu folgender Ansicht:

Die Grundeinstellungen zu HTML, CSS und JavaScript im WordPress-Plugin Autoptimize

Hier kann man getrost einfach alle drei Häkchen setzen und den darauf noch folgenden Punkt CDN (Content-Delivery Network) ignorieren.

In der zweiten Registerkarte findet man die Einstellungen für das “faule” Laden der Bilder und setzt dort ebenfalls ein Häkchen.

Die Einstellung "lazy-load images" des WordPress-Optimierungs-Plugins Autoptimize

Danach jeweils bitte nicht vergessen, die Änderungen über den genau so benannten Button zu speichern!

Es sei hier auch gesagt, dass man auf der ersten Registerkarte mit dem Button Erweiterte Einstellungen einblenden die Optimierung von JS, CSS und HTML noch verfeinern und im Detail anpassen kann. Für den Anfang reicht es aber aus, sich hier nicht umzusehen und alles so zu belassen, wie es ist. Diese Art von Optimierung ist je nach Seiten-Setup recht kompliziert und verdient an anderer Stelle noch mehr Aufmerksamkeit.

WordPress-Optimierung: Das Plugin Imagify

Verringern der Dateigröße als Teil der WordPress-Optimierung

Ein weiterer Punkt in der Optimierung von WordPress-Websites betrifft vor allem die auf der Website angezeigten Bilder. Jetzt werden Sie sagen: Moment, um die Bilder haben wir uns doch gerade gekümmert, oder? Ja, um die Lade-Reihenfolge und den Zeitpunkt des Abrufs der Bild-Dateien schon, aber noch nicht um deren Dateigröße.

Das Problem der Dateigröße betrifft aber nicht nur Bild-Dateien. Generell gilt, ganz grob gesagt: Wenn man nur die Hälfte Laden muss, geht das auch doppelt so schnell. Die Zeitersparnis betrifft hier zwar unmittelbar nur die Übertragungsdauer der Daten, aber in einem langsamen mobilen Datennetz zum Beispiel kann das einen enormen Unterschied ausmachen.

Dass hier Bilder an erster Stelle stehen, hat damit zu tun, dass

  • Videos nur im absoluten Ausnahmefall auf dem eigenen Webserver gehostet werden sollten (das sind derzeit wohl die größten Standard-Datenmengen), und
  • Text-Dateien  im Vergleich zu Bildern wesentlich kleiner sind und daher auch die Optimierungseffekte an Text gegenüber denen an Bildern zunächst eine untergeordnete Rolle spielen.

Sie wissen vielleicht, dass Bilder, wie sie z.B. von heutigen Standard-Smartphone-Kameras aufgenommen werden, unter Umständen mehrere MegaByte groß sein können. Die Größe einer Bilddatei liegt einerseits an der Auflösung, die das Bild in Bildpunkten (Pixeln) hat, z.B. 1024×768. Zum anderen liegt es an der in der Kamera voreingestellten Bild-Qualität bzw. Bild-Optimierung (ja, auch die Kamera optimiert die Bilddatei bereits) im jeweiligen Bildformat.

Die Details sollen uns hier gar nicht so interessieren, aber beide hier genannten Faktoren, die Auflösung und die Qualität, sollte man für die Nutzung auf der eigenen Website herunterschrauben. Wieder werden Sie einwenden: Moment, dann sieht das Bild aber nicht mehr so gut aus, oder? Ja, absolut gesehen verliert es an Auflösung und Bildqualität. Der Besucher der Website merkt davon aber auf seinem Gerät nichts.

Die Bildauflösung als Optimierungs-Möglichkeit für Websites

Welche WordPress-Plugins braucht man?

Nehmen wir als Beispiel ein Smartphone-Display. Wenn dieses Display in der Breite nur eine Auflösung von 360 Pixel hat, dann nützt es gar nichts, wenn ein angezeigtes Bild in einer Breite von 720 Pixel vorliegt – es wird nicht besser aussehen. Um die Dateigröße eines Bildes zu verringern, kann man es also getrost verkleinern – je nach Einsatzgebiet.

Lassen Sie mich Ihnen noch ein konkretes Beispiel hier direkt von WebsiteBerater.com geben. Alle Bilder, die Sie hier in Artikeln eingebunden sehen, haben eine Breite von 800 Pixel (wenn das Original breiter war) oder kleiner (wenn das Original kleiner war/ist).

Die Vorschaubilder skaliere ich standardmäßig auf eine Breite von 300 Pixel. Sehen Sie sich z.B. das Titelbild dieses Beitrags an, das ich hier gerade nochmal eingebaut habe. Sieht trotzdem ansehnlich aus, oder?

Die Bildqualität als Optimierungs-Möglichkeit für Websites

Die Auflösung ist aber noch nicht alles. Das Bild, das Sie hier gerade nochmal gesehen haben, ist auch bezüglich der Qualität optimiert. Das bedeutet, es wurde zusätzlich komprimiert, sodass es möglichst klein wird, dabei aber noch möglichst gut aussieht. So, darüber, wie weit man es mit dieser zusätzlichen Optimierung treiben soll, kann man sicher streiten, doch schnell ist es dadurch auf jeden Fall.

Genau diese Art von Optimierung besorgt das hier vorgestellte WordPress-Plugin Imagify, und zwar voll-automatisch. Man lädt das Originalbild einfach in die WordPress-Medien-Bibliothek hoch (ich skaliere es vorher bereits auf eine Größe herunter, die ich gut und passend finde, den Grund dafür erzähle ich Ihnen gleich noch). Das Plugin optimiert, ersetzt und backupt das hochgeladene Bild automatisch.

Nehmen wir als konkretes Beispiel wieder das Titelbild dieses Beitrags. Im Original mit einer Auflösung von 1920×1280 Pixel hatte es eine Dateigröße von 1.1 MB (im Format jpg). Der Ausschnitt, den Sie hier sehen, hat, skaliert auf 300×219 Pixel, noch eine Dateigröße von 55 kB (das sind 0.055 MB).

Das so hochgeladene Bild hat Imagify bei gleicher Auflösung noch weiter optimiert. Das Resultat (das sie hier sehen), hat nur noch 27 kB, ist also um mehr als einen Faktor 40 kleiner als die Ausgangsdatei. Wer also einfach Bilder ohne Skalierung und Optimierung auf seine Website stellt, riskiert vergleichsweise gewaltige Download-Größen.

Ausnahmen für die Bild-Optimierung auf Websites

Wie immer gibt es auch hier Ausnahmen. Nämlich dann, wenn es darauf ankommt, dass ein Bild (oder mehrere) auch auf einem super-riesen-Bildschirm mit extrem hoher Auflösung noch spitze und gestochen scharf aussieht. Dann muss man eben die hohe Auflösung in Kauf nehmen, sollte aber trotzdem mit der Qualitätsoptimierung Experimente machen.

Autoptimize kann auch hier helfen und optimiert je nach Wunsch mehr oder weniger aggressiv an der Bildqualität, aber dazu kommen wir gleich noch.

Beispiele für Situationen, in denen man super-geniale Bilder sehen will, fallen uns sicher allen ein. Von einem Ferienhotel zum Beispiel. Oder auf der Website eines Profifotografen. Oder eines Designers. Oder … you get the picture.

Installation des WordPress-Plugins Imagify

Das WordPress-Plugin Imagify ist kostenlos und setzt nur eine gratis-Registrierung mit einer gültigen Email-Adresse voraus, dazu gleich noch mehr. Das Plugin installiert man wie gewohnt über das WordPress-Plugin-Repository:

Das WordPress-Bild-Optimierungs-Plugin Imagify

Nach erfolgreicher Installation und Aktivierung geht es direkt mit der Einrichtung weiter.

Einrichtung des WordPress-Plugins Imagify

Direkt nach der Aktivierung bekommt man folgende Auswahl zu sehen:

Einrichtung des WordPress-Optimierungs-Plugins Imagify: Legen Sie einen Account an oder geben Sie Ihren API-Schlüssel ein

Falls man noch keinen gratis-Account hat, richtet man ihn durch einen Klick auf Sign up ein. Danach öffnet sich folgender Dialog, über den man einen Account einrichten und einen API-key zugeschickt bekommen kann:

Die Eingabe der Email-Adresse zum Anlegen eines kostenlosen Accounts für das WordPress-Bilder-Optimierungs-Plugin Imagify

Sobald das erledigt ist und man den key hat, geht es weiter zum nächsten Schritt. Das gilt auch für den Fall, dass man bereits einen API-key hat. Man kann nämlich so einen key problemlos auf mehreren Websites verwenden und muss nicht jedesmal neu registrieren.

Ein solches gratis-Konto ermöglicht das kostenlose Optimieren einer bestimmten Anzahl von Bildern, wobei als Grenze die Dateigröße der Bilder relevant ist. Daher ist es auch vernünftig, die Bilder vor dem Upload in die WordPress-Medien-Bibliothek bereits herunter zu skalieren, weil man dadurch Optimierungs-Menge einsparen kann.

Der API-key kann also durch einen Klick auf den Button I have my API-key eingegeben werden, das sieht so aus:

Die Eingabe des API-keys für das WordPress-Bilder-Optimierungs-Plugin Imagify

Nach der korrekten Eingabe des API-keys erhält man die Erfolgsmeldung

Der eingegebene API-key für das WordPress-Plugin Imagify ist gültig

Danach wird man nicht automatisch weiter geleitet, sondern muss noch auf den dritten Punkt im obigen Screenshot klicken, nämlich go to settings.

Einstellungen des WordPress-Plugins Imagify

Bei den Einstellungen für das Plugin gibt es zwei wesentliche Punkte. Zum einen sollte man im Hinterkopf behalten, dass es ein monatliches Limit für die Menge an optimierten MB an Bilddateien gibt. Das war für mich noch nie ein Problem, obwohl ich mit meinem gratis-Account auf mehreren Websites Bilder optimiere. Allerdings stelle ich jedesmal sicher, dass das Bild bereits vorher die geeignete Größe in Pixel hat.

Zum Vermeiden unnötiger Bild-Optimierungen gehört auch noch, dass man in den Einstellungen dafür sorgt, dass zwar aggressiv optimiert wird (das ist die mittlere der drei Einstellungen), dass man aber nur die Originalgröße der Bilder bearbeiten lässt. Aber jetzt im Detail:

Die wichtigsten Einstellungen betreffen den Optimierungsgrad und die automatische Optimierung neu hochgeladener Bilder:

Die Optimierungs-Einstellungen des WordPress-Bilder-Optimierungs-Plugins Imagify

Ich stelle den Optimierungsgrad auf aggressiv und lasse automatisch hochgeladene Bilder automatisch optimieren. Außerdem lasse ich ein Backup der Originale anlegen und verzichte auf EXIF-Daten.

Dabei stelle ich allerdings sicher, dass die von WordPress automatisch angelegten zusätzlichen Größen für alle Bilder nicht mit-optimiert werden. Das liegt hauptsächlich daran, dass ich immer versuche, das Bild in der Originalgröße direkt geeignet einzubauen. Für die paar Fälle, wo WordPress dann doch auf die anderen automatisch generierten Größen zurückgreift, ist die Optimierung nicht wesentlich.

Diese Einstellung findet sich etwas weiter unten (einfach durch Scrollen) und sieht so aus:

Die automatische mit-Optimierung von automatisch durch WordPress generierten Bildgrößen sollte in Imagify zunächst deaktiviert werden.

Die automatische mit-Optimierung von automatisch durch WordPress generierten Bildgrößen sollte in Imagify zunächst deaktiviert werden.

Hier habe ich alles abgewählt, was von WordPress automatisch erzeugt wird. Bei mir kommt noch dazu, dass auch das Divi-Theme möglicherweise zusätzliche Größen verwendet. Sollte so etwas bei dem von Ihnen gewählten Theme der Fall sein, sehen Sie vermutlich entsprechende Punkte, die ich als ersten Schritt alle deaktivieren würde. Bitte beachten Sie, dass diese Liste scrollable ist, d.h. unter den hier sichtbaren Typen gibt es noch mehr!

Im laufenden Betrieb merkt man dann schnell, ob irgendwo Bilder auftauchen, die zu groß und verschwommen aussehen. In so einem Fall kann man dann an diese Stelle zurückkehren und die entsprechende CSS-Klasse oder Bild-Art wieder für die automatische mit-Optimierung aktivieren.

Übersicht über den Kontostand bei Imagify

Eine Anmerkung ist noch wichtig: Imagify installiert standardmäßig einen Menüpunkt in das obere Menü des WordPress-Dashboards. Dort kann man jederzeit durch darüberhalten des Mauszeigers den aktuellen “Kontostand” checken und sehen, wieviel des monatlichen (gratis-)Gutabens noch da ist. Bei mir sieht das derzeit so aus:

Der Kontostand für das kostenlose WordPress-Bild-Optimierungs-Plugin Imagify

Generell ist Imagify gut dokumentiert und offene Fragen zu einzelnen Punkten sind gleich vor Ort erklärt oder finden sich in der ausführlichen Dokumentation wieder.

Fazit zu Sicherheits- und Optimierungs-Plugins in WordPress

Soviel zu den Themen Sicherheit und Optimierung durch kostenlose WordPress Plugins. Ich denke, dass man mit den wenigen Plugins, die ich hier beschrieben habe, bereits recht schnell und einfach den Löwenanteil des üblichen Sicherheits- und Optimierungs-Bedarfs einer WordPress-Website abdecken kann.

Natürlich gibt es weitere Möglichkeiten für den Plugin-Einsatz auch in diesen beiden Bereichen, doch Raum und Zeit sind begrenzt – vielleicht ein andermal mehr.

Eine kurze Liste von Beispielen für zusätzliche Funktionalität durch WordPress Plugins

Für den Moment möchte ich hier noch ein paar typische Anwendungen und Funktionen auflisten, für die man WordPress-Plugins normalerweise einsetzt. Und wie gesagt, vielleicht kann ich ja an anderer Stelle noch mehr zum einen oder anderen Punkt schreiben. Wenn Sie ein konkretes Problem lösen wollen und dabei meine Hilfe in Anspruch nehmen wollen, kontaktieren Sie mich einfach.

Und hier die versprochene Liste:

  • Caching (ein recht komplexes Optimierungs-Thema, das hier leider keinen Platz mehr hatte)
  • SEO (Suchmaschinen-Optimierung. Habe ich gerade von komplexen Themen gesprochen? Das ist noch eins.)
  • Inhaltsübersicht (table of contents) für Seiten, so wie Sie es auf dieser und den anderen Seiten hier auf WebsiteBerater.com sehen
  • Einen Button zum direkten Anrufen einer Kontakttelefonnummer, der nur am Smartphone sichtbar wird (so wie hier auf WebsiteBerater.com. Wenn Sie den Anruf-Button sehen wollen, rufen Sie diese Seite einfach auf Ihrem Smartphone auf)
  • Einbinden von Social Media (sowohl Sharing als auch Profile-Integration, so wie hier auf … ach, Sie wissen schon)
  • Das Sammeln von Email-Adressen für einen Newsletter
  • Das Einbinden von Tabellen
  • Das Einbinden und Anzeigen externer Dokumente
  • Das Erstellen eines Internet-Shops
  • Das Verwalten von Mitgliedern
  • Das Verwalten und Anzeigen eines Event-Kalenders

Und das ist nur die Spitze des Eisbergs.

Nächste Schritte

In diesem Artikel haben wir uns eingehend mit einigen konkreten Beispielen für WordPress-Plugins befasst. Nach diesem zweiten Teil, in dem es um Plugins und damit um die Funktionalität einer WordPress-Website gegangen ist, wird es jetzt Zeit, dass wir uns endlich auch einmal ein Bisschen um das Aussehen einer WordPress-Website kümmern.

Bevor wir aber zu konkreten Auswahlkriterien für WordPress-Themes kommen, ist es wichtig, dass wir etwas erschaffen oder herstellen oder vorbereiten, womit man auch konkret ausprobieren kann, wie gut ein gewähltes Theme wirklich aussieht und ob es funktioniert oder nicht.

Daher geht es im nächsten Teil erst einmal um Inhalte und wie man ein paar solche erstellt. Da das manchen Menschen nicht unbedingt leicht fällt (das Schreiben von Texten nämlich), gebe ich als nächstes 9 super-einfache Tipps für erste Website-Inhalte. Viel Vergnügen damit!

Jetzt Teil 13 lesen!

Pin It on Pinterest