Kategorien
Tipps, Tricks & Tutorials

Wie Du Klienten ihre WordPress-Website zeigen kannst, bevor sie live geht

Du hast eine wunderschöne Website mit WordPress erstellt, die genau den Bedürfnissen deines Kunden entspricht und bist auf alle Wünsche und Anforderungen eingegangen. Doch es gibt eine Hürde: dein Klient möchte die Website nicht veröffentlicht wissen, bevor er sie gesehen und abgesegnet hat. Andere Kunden hingegen mögen vielleicht in regelmäßigen Abständen die Fortschritte an ihrer Website sehen. Wie auch immer – du benötigt eine angemessene Präsentations-Methode.

Wie Du Klienten ihre WordPress-Website zeigen kannst, bevor sie live geht

Vorab: Prüfe die wichtigen Faktoren

Mehrere Faktoren sind zu berücksichtigen, wenn es darum geht, die Kunden am geschicktesten auf dem Laufenden zu halten. Zum Beispiel:

  • Wieviel Zeit wird der Kunde zur Prüfung benötigen?
  • Möchte der Kunde eine praktische Prüfung vornehmen oder nur eine rein visuelle?
  • Wie lang sollte die Möglichkeit der Vorschau bestehen? Je länger du eine Prüfungsmöglichkeit zulässt, desto mehr Kommentare, Wünsche und Anfragen wirst du erhalten.
  • Wie viel Zeit wird die von dir gewählte Art der Präsentation einnehmen?
  • Kannst du den Ablaufplan mit deinem Klienten abgleichen und eine erweiterte Live-Demonstration einrichten?

Es gibt verschiedene Methoden, dieses Problem anzugehen und zu lösen. Die letztendliche Auswahl hängt ganz von deinem Klienten, deinen Vorlieben, dem Workflow und dem Zweck der Präsentation ab. In diesem Artikel konzentrieren wir uns auf drei Methoden, die du zur Präsentation wählen könntest.

Methode 1: Website lokal halten und live präsentieren

live-praesentation
Die direkte Präsentation deiner Arbeit bei einem Besuch deines Klienten.

Die einfachste Methode und die Beste, wenn es darum geht, dass der Kunde nicht viel Zeit hat und nur einen kurzen Überblick gewinnen möchte. Du behältst einfach die Website lokal auf deinem Rechner und startest eine Präsentation mit einem Tool wie zum Beispiel Teamviewer oder Google Hangouts. So kann dein Klient direkt auf seinem Rechner sehen, wie die Website von dir präsentiert wird.

Natürlich kannst du dich auch mit deinem Klienten treffen. So kannst du ihm die Website direkt auf deinem Notebook zeigen, er kann sie ausprobieren und gewinnt zudem einen praktischen Eindruck.

Wenn es darum geht, die Website abzusegnen, damit sie live gehen kann, dann dürfte ein persönliches Treffen eine gute Wahl sein.

Methode 2: Website online stellen und mit Passwort-Schutz versehen

der-passwort-schutz

Nicht immer ist eine Live-Präsentation der optimale Weg für jeden Klienten. Eine weitere, naheliegende Option wäre das Migrieren der Website auf einen Webserver. Die Ansicht der Website kann dann mit einem Passwort vor unberechtigten Zugriffen geschützt werden. Erst nach Eingabe von Zugangsdaten kann die Website dann angesehen werden.

Dafür allerdings muss zuerst einmal die richtige Hosting-Methode gefunden werden. Sicherlich kannst du die Website kurz auf deinem Server hosten, um eine Präsentation sicherzustellen. Geschickt wäre das jedoch nicht. Die smartere Lösung wäre ein Hosting direkt auf dem Server des Klienten, falls dieser bereits eine Website besitzt.

Sollte er noch keine Website sein eigen nennen, so muss er – um die von dir erstellte Website hosten zu können – auch einen Server / Webhostingpaket besitzen. Also sollte darüber auch die Preview-Website gehostet werden. Du könntest die Website dann gleich mit einer Sub-Domain der späteren Live-Website aufsetzen.

Danach fügst du noch eine Passwort-Protektion hinzu und kannst damit deinen Kunden glücklich machen. Allerdings sollte dann den Suchmaschinen das Indexieren der Preview-Website verboten werden. Gehe hierzu im Adminbereich von WordPress zu »Einstellungen > Lesen« und setze das entsprechende Häkchen.

Die meisten Kunden werden diese Art der Präsentation lieben. Denn sie können die Website dann in Augenschein nehmen, wenn sie Zeit dafür haben. Sie müssen keinen Termin mit dir zu einer Zeit vereinbaren, die vielleicht besser genutzt werden könnte. Zudem hat es noch den Vorteil, dass der Klient die Website auf verschiedenen Geräten testen kann.

Die schlechte Nachricht:

Der Klient könnte durchaus seine ganze freie Zeit in die Prüfung der Website stecken und dich mit Vorschlägen und Wünschen bombardieren. Zudem könnten auch nach dem vorher festgelegten Zeitraum der Überprüfung noch Änderungswünsche auftauchen.

Die Lösung:

Solltest du dich für diese Methode entscheiden, dann vereinbare ein ganz klares Zeitfenster mit deinem Kunden, in dem die Website für ihn zugänglich ist. Danach wird die Website entweder wieder entfernt, oder das Passwort geändert.

Websites mit Passwortschutz versehen:

Es existieren viele WordPress-Plugins, die eine Website sperren und mit einen Zugangsschutz versehen können. Zwei davon sind zum Beispiel Maintenance und Maintenance Mode. Beide Plugins werden aktiv weiterentwickelt.

Methode 3: Installiere die Website auf einem USB-Stick

website-auf-usb-stick

Wenn dein Kunde sich für eine eingehende Überprüfung Zeit nehmen will, eine Online-Demo jedoch nicht infrage kommt, dann könnte diese Möglichkeit eventuell passend sein. Alles, was du dafür tun musst, ist einen lokalen Server auf einem USB-Stick zu installieren und die Website im Anschluss zu migrieren.

Danach musst du deinem Klienten nur noch den Stick aushändigen mit einer Anweisung, wie der Server zu starten ist und wie die Website aufgerufen wird. Klingt kompliziert? Ist es nicht. Du bekommst mittlerweile gute Lösungen für die Problematik und könntest zum Beispiel entweder Xampp oder Instant WordPress nutzen.

Solltest Du Xampp nutzen, dann achte darauf, bei der Installation nicht den Installer zu nutzen, sondern die entpackten Pakete nur auf den Stick zu kopieren.

Du bist dir nicht sicher, ob es eine gute Idee ist, dem Kunden die Preview-Möglichkeit auf einem USB-Stick zu liefern?

Hier kommen gute Gründe:

  • Die Website ist komplett offline und kann nicht unabsichtlich der Öffentlichkeit zugänglich gemacht werden.
  • Die Sicherheit: dein Klient kann nichts an der Website abändern. Sollte er am Stick herumspielen, ist kein wirklicher Schaden eingetreten.
  • Kundenfreundlich: dein Kunde kann zu jeder Zeit einen Blick auf die Website werfen. Er ist an keinerlei Termine gebunden und kann sich ausreichend Zeit für die Ansicht nehmen.

Natürlich gibt es auch Nachteile:

  • Von allen drei Methoden ist dies die komplizierteste. Es ist zeitaufwändig zu realisieren, da nicht nur die Website migriert werden, sondern auch ein lokaler Webserver auf den Stick installiert werden muss.
  • Es existiert keine Lösung für Apple. Dein Klient und du müssen daher Zugriff auf einen Windows-Rechner haben.
  • Die Lösung ist nicht für jeden Kunden geeignet. Kunden mit einem geringen technischen Verständnis wären überfordert.
  • Du gibst jegliche Kontrolle über einen angemessenen Zeitrahmen zur Prüfung deiner Arbeit aus der Hand.

Fazit

Die Auswahl der besten Methode, um den Kunden eine Kontroll-Möglichkeit zu verschaffen, ist recht kompliziert. Zu vieles gilt es zu beachten und nicht jeder Kunde ist gleich. Grundsätzlich jedoch ist es immer von Vorteil, wenn die gewählte Methode einen ganz klar abgesteckten Zeitrahmen zur Prüfung beinhaltet und danach dann um qualifiziertes Feedback gebeten wird.

Quelle: wpmudev

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress gehackt? So kommst du wieder an deine Website

Eines Tages wachst du auf und stellst fest, dass dein WordPress gehackt wurde. Die Startseite zeigt vielleicht einen Totenschädel und verhöhnt dich, weil du eventuell den einen Fehler begangen hast, der dem Hacker Zugriff gewährte. Jetzt hast du ein echtes Problem, denn egal welche Benutzernamen- und Passwort-Kombination du ausprobierst, du kommst einfach nicht mehr in den Adminbereich deiner Website. Bleib cool, auch auf diese Frage hat Dr. Web eine Antwort.

Gehackt? So kommst du wieder in den Admin-Bereich von WordPress

Natürlich funktioniert der Trick, den ich dir gleich zeigen werde, auch bei vergessenen Zugangsdaten. Was immer das Problem ist, egal wodurch du keinen Zugriff mehr auf deinen Admin-Account hast, es ist lösbar.

Wenn du keine Backups für deine Website hast, die du wieder einspielen könntest, dann musst du dir anders zu helfen wissen. Hast du allerdings eine gute Backup-Strategie, dann kannst du mit nur wenigen Klicks deine Website wiederherstellen. Wenn nicht, dann verfahre wie folgt:

Neue Zugangsdaten anlegen in phpMyAdmin

In circa 98 Prozent aller Fälle wird ein Hacker nicht alle Bereiche einer Website oder eines Servers kompromittieren wollen oder gar können. Du wirst also jederzeit Zugriff auf phpMyAdmin haben und damit auf deine Datenbank, welche von WordPress genutzt wird.

Wenn du auch keinen Zugriff mehr auf deinen Server / dein Webhostingpaket haben solltest, dann kontaktiere den Support deines Hosters.

Die Zugangsdaten stehen übrigens in der wp-config.php, falls du sie vergessen haben solltest. Logge dich mit diesen Zugangsdaten also in deine phpMyAdmin-Oberfläche ein. Wähle dann die richtige Datenbank aus, falls du mehrere Websites hast.

Mache nun ein manuelles Backup deiner Datenbank, damit du sie wieder importieren kannst, wenn du bei der folgenden Arbeit einen kapitalen Fehler machen solltest.

backup-datenbank
Zuerst: Immer ein Backup machen.

Jetzt geht es an das Eingemachte. Wir werden neue Zugangsdaten in der Datenbank anlegen, damit du schnell wieder Zugriff bekommst und deine Website wieder herstellen kannst.

Neue Zugangsdaten in der Datenbank setzen

Klicke auf der linken Seite auf die Tabelle wp_users. Bitte beachte, dass deine Tabelle auch anders heißen könnte, wenn du ein abweichendes Datenbank-Präfix als wp_ nutzt. Vielleicht heißt die Tabelle dann meinblog_users. Auch das kannst du aus der wp-config.php erfahren.

In der oberen Zeile klickst du auf den ersten Menüpunkt namens »Anzeigen«. Jetzt siehst du die Benutzer-Accounts und klickst bei deinem Administrator auf »Bearbeiten«.

Die User-Accounts in der Tabelle wp_users.
Die User-Accounts in der Tabelle wp_users. Ein Klick öffnet eine größere Ansicht.

Setze jetzt eine funktionierende E-Mail-Adresse in das Feld mit der E-Mail und speichere die Daten ab. Trage Sorge dafür, dass du auf diese E-Mail-Adresse wirklich Zugriff hast und damit auch Mails empfangen kannst.

Setze eine neue und funktionierende E-Mail-Adresse und speichere diese ab.
Setze eine neue E-Mail-Adresse und speichere diese ab. Ein Klick öffnet eine größere Ansicht.

Ein neues Passwort anfordern

Nachdem Du eine neue E-Mail-Adresse gesetzt hast, kannst du dich aus phpMyAdmin ausloggen und rufst den Adminbereich deiner Website mit der folgenden URL auf:

http://deine-website.de/wp-login.php

Nutze jetzt die WordPress-Funktion für ein vergessenes Passwort. Klicke auf »Passwort vergessen« und gebe in das sich nun öffnende Fenster deine soeben gesetzte E-Mail-Adresse ein.

Neues Passwort anfordern.

WordPress sendet dir automatisch ein neues Passwort an die von dir in die Datenbank eingetragene E-Mail-Adresse zu. Somit hast Du wieder vollen Zugriff auf deine Website und kannst sie von Schadcode befreien.

Bitte wähle, nachdem du dich wieder einloggen kannst, ein wirklich sicheres Passwort mit mindestens 10 – besser 12 – Stellen, Buchstaben, Zahlen, sowie Groß- und Kleinschreibung. Mit einem vernünftigen Passwort machst du es dem nächsten Hacker sehr viel schwerer, in deine Website einzudringen.

Auf ein Wort: Die richtige Backup-Strategie

Die ganze Prozedur, die du soeben zu machen hattest, konnte nur geschehen, weil du deine Website nicht ausreichend gesichert oder nicht auf dem neuesten Stand gehalten hast. Ich weiß, das ist hart, solche Worte zu hören. Und doch ist es die Wahrheit.

Niemand muss es so einfach hinnehmen, dass sein Blog gehackt wurde. Du kannst viel dafür tun, das zu verhindern. Alles beginnt mit den Updates. Halte deine Seite, die Plugins und Themes immer auf dem neuesten Stand. Damit schließt du Sicherheitslücken. Sorge für eine optimale .htaccess-Datei, die es Hackern fast unmöglich macht, in den Blog einzudringen. Nutze ein wirklich sicheres Passwort. So wirst du in Zukunft wesentlich besser schlafen können.

Weiterführende Informationen:

Dr. Web: Mehr Speed, mehr Sicherheit: die optimale .htaccess

Meine Empfehlung für ein regelmäßiges Backup

Es gibt nichts wichtigeres als einen guten Backup-Dienst. Ja, einen Dienst, kein Plugin. Ein Plugin erfordert Fachwissen und Zeit bei einer Wiederherstellung eines Blogs. Zudem sichern die meisten Plugins ihre Backups auf dem eigenen Server. Ich arbeite bereits seit Jahren mit VaultPress, einem kostenpflichtigen Dienst aus dem Hause Automattic, der Firma hinter WordPress. Diesen Dienst möchte ich dir ans Herz legen.

Für nur 5 US-Dollar im Monat bekommst du tägliche Backups, die du mit einem Klick wiederherstellen kannst. Die Daten werden nicht auf deinem Server gesichert, sind also bei einem Angriff auf deinen Server immer vorhanden. Zudem benötigt VaultPress keine Zugangsdaten zur Website, sondern nur die Daten für den (S)FTP-Zugang. Du bekommst auch die Wahl, was genau wiederhergestellt werden soll: die ganze Installation inklusive WordPress, oder einzelne Dateien.

VaultPress-Dashboard
Die VaultPress-Backups. Ein einziger Klick auf »Restore« spielt ein Backup wieder ein.

Für die Registrierung und den Abschluss eines Vertrags benötigst du ein WordPress.com Konto und eine Kreditkarte, wobei auch Prepaid-Kreditkarten wie die von Number26 akzeptiert werden.

Weiterführende Informationen:

(dpe)

Kategorien
E-Business Technik Tipps, Tricks & Tutorials WordPress

CDN: Wann brauchst du wirklich eins?

Content Delivery Networks – kurz CDN – sind in aller Munde und stehen oftmals auf dem Wunschzettel von Bloggern. Fast überall kannst du lesen, dass ein CDN deine Website überirdisch schnell macht und du es unbedingt haben musst. Die Frage ist nur: muss das wirklich sein, oder gibt es andere Wege, die vielleicht besser sind?

Brauchst du wirklich ein CDN für deine Website?

Was ist eigentlich ein CDN?

Ein CDN ist ein verteilter Verbund von Servern, die sich auf der ganzen Welt befinden. Sie speichern die statischen Dateien einer Website zwischen, also die Bilder, CSS- und JavaScript-Dateien. Die Anbieter kopieren deine statischen Dateien auf ihre Server. Diese Dateien werden dann immer von dem Server ausgeliefert, der deinem Besucher an nächsten ist.

Ein CDN fungiert auch als Load Balancer; die meisten CDN-Anbieter haben Netzwerke von Servern pro Standort, was bedeutet, dass sie leicht eine größere Anzahl von Anfragen handhaben können, als dein Server, auf dem deine Website liegt. Soweit die Theorie.

Daraus kann man schlussfolgern, dass ein CDN deine statischen Dateien immer schneller ausliefern müsste, als dein eigener Server. Stimmen muss das nicht immer, hier entscheidet die Antwortzeit des Servers. Und die kann bei deinem Server in einigen Szenarien durchaus besser sein. Hier muss ein eingehender Test entscheiden, ob dem wirklich so ist.

In welchen Szenarien kann ein CDN nötig sein?

Ich blogge auf Deutsch. Brauche ich ein CDN?

Nicht jeder Blogger braucht ein CDN. Im Gegenteil, nötig ist es nur in wenigen denkbaren Szenarien. Wenn du nur auf Deutsch schreibst, wirst du auch nur Leser ansprechen, die aus dem deutschsprachigen Raum stammen. Hier würde ein CDN nur etwas bringen, wenn dein Server oder dein Webhosting-Paket schwach auf der Brust und aufstockungswürdig ist.

Natürlich gibt es auch bei einer deutschen Website denkbare Anwendungsbereiche. Wenn du zum Beispiel über erheblichen Besucherverkehr verfügst (mindestens mehrere hunderttausend Zugriffe monatlich), dann wäre es schon an der Zeit, über ein CDN nachzudenken. Hier entscheidet der Traffic und vor allem die gleichzeitigen Zugriffe auf den Blog.

Ich blogge auf Englisch

Wenn du auf Englisch schreibst, dann sprichst du eine Zielgruppe an, die auf der ganzen Welt verteilt ist. In diesem Szenario ist ein gutes CDN wirklich nötig, denn ein Besucher aus den USA wird die Geschwindigkeit deiner Website ganz anders erfahren, als einer aus Freiburg im Breisgau.

Zugriffe aus dem Ausland – gerade auch außerhalb der EU, werden meist wesentlich langsamer von deiner Website bedient, als Besuche aus Deutschland. In diesem Fall benötigst Du wirklich ein CDN, denn es hilft dir, deine Website gerade für Besucher aus anderen, weiter entfernten Ländern schneller ausliefern zu können.

Ein deutscher Besucher bekommt dann die Bilder und das CSS, sowie das JavaScript von einem deutschen Server ausgeliefert, ein Besucher aus den USA bekommt die statischen Ressourcen von einem Server in den USA ausgeliefert. Das macht deine Website wesentlich schneller.

Allerdings hängt das alles auch von deinem Besucheraufkommen ab, je mehr Besucher du auf deinem Blog begrüßen darfst, desto dringender wird ein CDN, weil einfach mehr Anfragen gleichzeitig beantwortet werden können.

Erst die Website optimieren, dann ein CDN

Viele Blogger sind der Ansicht, dass nur ein CDN ihre Website so richtig schnell macht. Das ist natürlich völliger Unsinn. Ein CDN kann immer nur unterstützend wirken und das letzte Quäntchen Speed aus einer bereits wirklich optimierten Website herausholen. Bei einem deutschen Blog ist immer noch die Frage, ob ein CDN wirklich nötig ist, im Vordergrund.

Denn ganz ohne den Einsatz eines CDNs kannst du deine Website bereits in den Millisekundenbereich der Ladegeschwindigkeit bringen. Natürlich ist das eine Menge Arbeit, entscheidend ist jedoch, was du wirklich willst.

Willst du absoluten Speed, dann kannst du ihn ohne CDN erreichen. Auch in Spitzenzeiten mit bis zu 95.000 Besuchern monatlich ist meine Website nicht in die Knie gegangen. Doch vielleicht sind diese Besucherzahlen für den einen oder anderen ja kalter Kaffee.

Wenn dem so ist, empfehle ich Dir ein CDN. Allerdings: auch kaum optimierte Seiten können relativ schnell sein, wie Dr. Web beweist. Hier ist der Server ausschlaggebend.

Das ist ohne CDN bereits möglich:

Speedtest der Democratic Post vom 28.06. Selbstverständlich ohne CDN.
Speedtest der Democratic Post vom 28.06. Selbstverständlich ohne CDN.

Im obigen Screenshot siehst du den ersten Testlauf meiner Website. Der zweite darauf folgende wäre noch schneller. Das ist vollkommen ohne CDN möglich. Und auch kein Einzelfall, denn mein persönlicher Blog lädt noch schneller, obwohl ihm noch ein SSL-Zertifikat und damit auch HTTP2 fehlt.

Speedtest meines Blogs Techbrain.de vom 28.06. Ohne CDN, ohne HTTPS und ohne HTTP2.
Speedtest meines Blogs Techbrain.de vom 28.06. Ohne CDN, ohne HTTPS und ohne HTTP2.

Was WordPress-Websites wirklich schnell macht

Wie dieses Ergebnis erreicht wurde, habe ich in einer Artikelserie hier auf Dr. Web bereits eingehend beschrieben:

Zusammenfassend kann man sagen

Bevor du über ein CDN nachdenkst, optimiere zuerst die Flaschenhälse deines Blogs. Allein damit lockst du bereits extrem viel Speed hinter dem Ofen der Langsamkeit hervor. Die wichtigsten Punkte wären:

  • Ein vernünftiger Server, eventuell der Managed-Root Cloud Server von hostNET für 14,40 Euro monatlich. Ohne einen angemessenen Server geht gar nichts.
  • Sehr gute Bildoptimierung – Optimus HG ist die beste und kann auch webP erzeugen
  • PHP7 + HTTPS + HTTP2
  • So wenig Plugins wie nötig
  • So wenig Spielereien wie möglich
  • Eine optimale Behandlung von CSS- und JavaScript-Dateien. Zum Beispiel Jetpack CSS aufteilen, unnötiges Jetpack-CSS löschen, Dateien nur laden lassen, wo auch nötig und so weiter…

Du willst trotzdem ein CDN? Hier sind zwei Empfehlungen

Wichtig und zu beachten sind kleine Details, wie zum Beispiel HTTP/2 und SSL-Zertifikate, in beiden Fällen bieten die Dienste eine Unterstützung für Let’s Encrypt. Let’s Encrypt bietet kostenfreie SSL-Zertifikate an.

1 – KeyCDN – Content Delivery made easy

KeyCDN

Die Zielsetzung von KeyCDN ist es, das am leichtesten zu bedienende CDN zu sein und trotzdem seinen Kunden sehr viel Power zu bieten. Die Integration ist dank eines eigenen WordPress-Plugins sehr einfach, die Funktionen überzeugend. Zudem bezahlt man nur für das, was man auch nutzt. Ein Test-Account ist vorhanden. Alle Funktionen können also kostenlos getestet werden.

Ein eingehender Test wird zeigen, wie gut dieses CDN wirklich ist. Wir werden davon berichten.

2 – CDN77.com

cdn77

CDN77.com ist ein Anbieter aus Großbritannien, und bietet dir neben dem HTTP/2 und automatischer Let’s Encrypt Zuweisung auch den neuen Kompressionsstandard Brotli von Google. Google verspricht eine um 40 Prozent schnellere Auslieferung der Ressourcen, als mit dem normalen Gzip-Standard. Allerdings bietet CDN77 nur eine Integration mit drei Cache-Plugins in WordPress an. WP Fastest Cache, W3 Total Cache und ZenCache werden unterstützt.

Fazit

Ob du wirklich ein CDN brauchst, oder nicht, hängt ganz stark von den persönlichen Umständen ab. Wer einfach nur etwas mehr Speed braucht, ist mit anderen Maßnahmen besser beraten. Wenn du jedoch eine Website dein eigen nennst, die entweder in englischer Sprache verfasst wird oder gigantischen Traffic bekommt, dann ist ein CDN auch angeraten. Denn besonders in den Spitzenzeiten kann es dir dann helfen, deinen Blog schnell auszuliefern. Normale Blogs sollten eher über andere Dinge nachdenken, welche wesentlich mehr Einfluss auf die Geschwindigkeit haben, als es ein CDN jeweils haben könnte.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials WordPress

PHP 7 und WordPress: Kannst Du den Turbo bereits zünden? [Infografik]

Seit dem dritten Dezember 2015 ist die neueste Version von PHP erhältlich. Um Altlasten zu beseitigen, entschied man sich dazu, teilweise die Abwärtskompatibilität aufzugeben. Für WordPress-User stellt sich nun die Frage, ob PHP7 bereits nutzbar ist und welche Vorteile die Nutzung bringen kann. Daher werfen wir einen kurzen Blick auf diese wichtigen Fragen.

PHP 7 und WordPress: Kannst Du es bereits einsetzen?

Ein kleiner Hinweis: Dieser Artikel befasst sich nur kurz und bündig mit PHP7 und WordPress, um die Frage zu klären, ob die neue Version bereits problemlos eingesetzt werden kann.

PHP7 und WordPress – ein Dreamteam?

PHP7 heißt der offizielle Nachfolger von PHP5 seit Dezember 2015. Verzichtet wurde bei der Entwicklung der Programmiersprache weitgehend auf die Abwärtskompatibilität. Es stellt sich die Frage, ob es bereits im Live-Betrieb einsetzbar ist oder nicht.

Der große Vorteil der neuen Version ist die um bis zu 30 Prozent geringere Ausführungszeit als PHP 5, da unter anderem Hashtabellen neu implementiert wurden. Das sollte einen ungeheuren Performance-Schub für deine WordPress-Website bedeuten.

PHP ist die Programmiersprache, mit der WordPress entwickelt wurde. PHP macht das Web erst zu dem, was es heute ist. Alle Funktionen und Elemente deiner Website werden von PHP generiert und ausgegeben. Ohne PHP wäre das Web statisch, es würden wahrscheinlich nur reine HTML-Seiten existieren können.

Ist ein PHP-Update wichtig?

PHP-Updates sind sehr selten, dafür aber um so wichtiger. Grundsätzlich kann man sagen, dass die Updates immer sicherheits- und performancerelevant sind. Sicherheitslücken werden geschlossen und ein Tick an Performance kommt hinzu. Daher ist es immer ratsam, die neueste Version von PHP einzusetzen, wenn die eigenen Webanwendungen damit problemlos laufen.

PHP7 = Eine erhebliche Steigerung der Performance

PHP7 bringt WordPress zum Rennen, weil die Ausnutzung der gegebenen Ressourcen bedeutend besser ist als zuvor. Alle PHP-Operationen benötigen mit der neuen Version erheblich weniger CPU-Rechenleistung, als es noch unter der alten Version 5.6 der Fall war. Es wird also Serverleistung im Normalbetrieb gespart, die der Website bei plötzlichem, sehr hohen Besucheraufkommen dann zur Verfügung steht.

WordPress benötigt wesentlich weniger Rechenpower, um das alte Speed-Niveau zu halten. Grob gesagt besitzt deine Website unter PHP7 eine bis zu doppelt so hohe Performance. Das haben eingehende Tests von Zend – dem Entwickler von PHP – gezeigt. Zend nutzte für seine Tests die WordPress-Version 4.1, unter der aktuellen Version 4.5.3 dürfte sich kein Unterschied ergeben. Weiter unten findest du die Infografik von Zend.

Ist PHP7 bereits einsetzbar?

Seit etlichen Wochen teste ich bereits die neue Version von PHP und konnte keinerlei Unverträglichkeiten feststellen. Bisher wurde im Netz immer Zurückhaltung geübt, wenn es um den Einsatz von PHP7 ging.

Ich jedoch konnte an zwei (wichtigen) Websites mit unterschiedlicher Bestückung von Plugins keinerlei Fehler feststellen. Ganz im Gegenteil, sofort nach Aktivierung der neuen Version von PHP waren meine Websites schneller. Kein Theme, kein Plugin zeigte eine Unverträglichkeit. Ebenfalls habe ich auch auf meinen Testseiten kein Problem feststellen können. Alles läuft absolut reibungslos und wirklich schnell.

Allein eine Kunden-Website wurde unter dem Einsatz von PHP7 langsamer als sie es zuvor war. Ich vermute stark, dass ein Problem mit den benutzerdefinierten Scripts für die Auslieferung von Werbeblöcken vorlag.

Viele Hoster haben heute bereits die aktuelle PHP-Version in den Einstellungen für die Hosting-Pakete, sie muss dann nur noch in den Einstellungen aktiviert werden. In meinem Managed-Root Cloud Server musste ich nur in der httpd.conf die neue Version aus- und die alte Version ein-kommentieren.

PHP7 ist im Live-Betrieb einsetzbar, wenn:

  • du die neueste Version von WordPress nutzt.
  • du alle Plugins immer aktualisierst.
  • du keine eigens entwickelten Plugins nutzt, die nicht weiterentwickelt werden.

Letztendlich bleibt nur eines: testen, testen, testen. Aktiviere PHP7 und schaue, was passiert. In geschätzt über 90 Prozent der Fälle läuft alles reibungslos, nur halt wesentlich schneller. Solltest du Probleme feststellen, können diese vielleicht schnell behoben werden. Oftmals reicht bereits eine Umstellung auf aktuelle WordPress-Funktionen, der Codex hilft schnell weiter.

Die Infografik von Zend

php7-infographic

Weitere relevante Artikel zur Optimierung der Ladegeschwindigkeit

Fazit

Der Einsatz von PHP7 ist absolut zu empfehlen. Du wirst kaum Gelegenheit bekommen, Probleme festzustellen. Wenn WordPress, deine Plugins und deine Themes immer auf dem neuesten Stand sind, wirst du einen erheblichen Performance-Schub feststellen und dich zu der Entscheidung des Einsatzes beglückwünschen.

(dpe)

Kategorien
Tipps, Tricks & Tutorials

Die Wahrheit über CDN: KeyCDN im Praxistest

Wie du vielleicht mitbekommen hast, bin ich ein absoluter Geschwindigkeits-Fanatiker, was die Ladezeiten meiner Websites angeht. Ich strebe stets für jede meiner Websites einen Speed von unter einer Sekunde an und halte eine Ladezeit von circa 500 – 600 Millisekunden für angemessen. Aus Spaß an der Freude habe ich nun ein CDN (KeyCDN) getestet, weil ich wissen wollte, ob überhaupt und wenn ja, wieviel es wirklich bringt.

Die Wahrheit: Der KeyCDN-Erfahrungsbericht - richtig viel Speed?

Wie viel bringt ein CDN wirklich – lohnt es sich?

Genau das war die Frage, die sich mir stellte. Wie viel bringt ein CDN für eine normale, sehr extrem auf Speed optimierte Website, die nur Zugriffe aus dem deutschsprachigen Raum bekommt? Den Anbieter habe ich mir reiflich überlegt und ausgesucht.

Der CDN Anbieter KeyCDN

KeyCDN.com

KeyCDN habe ich aus mehreren Gründen gewählt. Erstens gilt der Anbieter als wirklich schnell, zweitens läßt sich das CDN (Content Delivery Network) durch ein Plugin sehr leicht in WordPress-Websites integrieren – ohne lästige Code-Arbeiten. Drittens kann man die Dienstleistung 30 Tage kostenfrei testen.

Kurz erklärt: Das ist ein CDN und das soll es bewirken:

Ein Content Delivery Network (auch bekannt als Content Distribution Network) ist ein System von geografisch verteilten Servern rund um den Globus. Die Server verwalten jeweils eine Kopie der Daten. Primär geht es bei einem Content Delivery Network um Geschwindigkeit, Page Speed und Hochverfügbarkeit, jedoch bringt ein CDN noch eine ganze Reihe von weiteren Vorteilen.

Lange Ladezeiten sind ein No-Go für moderne Webseiten. Ein Content Distribution Network reduziert die Ladezeit einer Webseite signifikant. Die Inhalte werden immer vom nächstgelegenen Standort geliefert, so kann eine tiefe Latenz und minimaler Paketverlust sichergestellt werden. Eine tiefere Latenz hat auch eine schnellere Ladezeit zur Folge. Quelle: KeyCDN

Diese Vorteile hören sich natürlich sehr gut an. Allgemein wird zudem angenommen, dass ein CDN die Ladezeit einer Website durchaus auch halbieren kann. Heute beschäftigen wir uns jedoch nicht mit schönen Werbeversprechen, sondern mit der harten Realität und schauen genau hin, was ein CDN in der Realität bringt.

KeyCDN – Anmelden und Einrichten

Der CDN-Dienst von KeyCDN kann 30 Tage kostenlos getestet werden. Es müssen keinerlei Zahlungsdaten angegeben werden. Der Testzeitraum läuft automatisch aus, ohne sich zu verlängern. Wer den Dienst weiter nutzen möchte, muss seine Kreditkartendetails in das persönliche Profil eingeben.

Die Anmeldung

Klicke den »Try for free« Button auf der Startseite von KeyCDN und gebe deine Daten ein. Spätestens 15 Minuten danach bekommst du die Bestätigungsmail und kannst dich dann einloggen. Es kann durchaus sein, dass du keine Erfolgsbestätigung nach dem Ausfüllen und Absenden des »Start your free Trial«-Formulars bekommst.

Keine Panik, es funktioniert trotzdem.

Die Einrichtung einer Pull-Zone in der KeyCDN-Oberfläche

Ich habe eine Pull-Zone gewählt, weil die Einrichtung wesentlich schneller geht. Der Unterschied zu einer Push-Zone ist der, dass du keine Dateien auf den Server von KeyCDN hochladen musst. Der Anbieter holt sich die nötigen Dateien und Bilder von deiner Website selbsttätig. Das funktioniert hervorragend und schnell. Ich rate dir also dazu, eine Pull-Zone einzurichten.

Pull-Zone einrichten

Klicke in der linken Navigation auf »Zones« und danach auf »New Zone«.

new-zone
Neue Zone in KeyCDN erstellen.

Hier sind die Einstellungen, die ich getätigt habe. Da meine Website mit einem SSL-Zertifikat ausgeliefert wird, habe ich zudem die Einstellungen SSL auf Shared und Force SSL auf enabled gesetzt. Der Screenshot verdeutlicht meine Einstellungen. Für die erweiterten Einstellungen bitte den Haken bei »Show Advanced Features« setzen.

Ein Klick öffnet die vollständige Grafik.

Die Zonen-Einstellungen

Ein Klick auf »Safe« speichert die Einstellungen und erstellt die neue Zone. Das kann je nach Größe des Blogs einige Minuten dauern. Ein grüner Balken zeigt den Fortschritt der Aktion an.

Die neue Zone wird erstellt. Das kann einige Zeit dauern.
Die neue Zone wird erstellt. Das kann einige Zeit dauern.

Eine Besonderheit: Nachdem die Zone erstellt ist – der grüne Balken steht auf 100 Prozent – aktualisiert sich das Fenster nicht. Der Status »deploying« bleibt stehen. Ein Reload der Website zeigt den neuen Status dann korrekt an.

Die CMS Integration Guides von KeyCDN

Das CDN läßt sich mehr oder weniger einfach in wirklich jedes Content Management System oder eine beliebige Shop-Software integrieren. Du bekommst eingehende Tutorials für jede Plattform.

KeyCDN Integration in WordPress

Leichter kann es nun wirklich nicht gehen. Du benötigst dazu das kostenlose Plugin »CDN Enabler« von KeyCDN. Das kannst du dir von WordPress.org herunterladen und installieren.

CDN Enabler Plugin

Die Einstellungen des CDN Enabler Plugins

Die wenigen Einstellungen des Plugins sind schnell getätigt. Den markierten Punkt musst du nur ausfüllen, wenn deine Website über HTTPS ausgeliefert wird.

Die wenigen Einstellungen des CDN Enabler Plugins für WordPress.
Die wenigen Einstellungen des CDN Enabler Plugins für WordPress.

Ein Klick auf »Änderungen übernehmen« aktiviert das CDN. Solltest du ein Caching-Plugin benutzen, müssen auch dort Einstellungen getroffen werden. Ich nutze Cachify in Verbindung mit Autoptimize. Cachify cacht die Website und Autoptimize kombiniert und cacht mein JavaScript.

Einstellungen für das Autoptimize Plugin

In den Einstellungen von Autoptimize müssen die erweiterten Einstellungen aktiviert werden. Danach ist die CDN-URL in das Feld »CDN Basis URL« einzutragen.

Autoptimize-Optionen

Fertig! Jetzt läuft das CDN bereits und lädt die statischen Dateien von den CDN-Servern.

cdn-funktioniert
Ein Klick öffnet eine größere Auflösung.

Was mir gut gefällt

KeyCDN holt sich wirklich jede Datei, um sie von den CDN-Servern ausliefern zu können. Auch die direkt in den Theme-Dateien hardgecodeten Links. Da ich meine CSS-Dateien mit einem Versionierungs-System versehen habe, um sie einwandfrei vom Browser cachen zu lassen, habe ich sie direkt in die Theme-Dateien header.php und footer.php geschrieben, wie im vierten Teil unserer Serie über WordPress Highspeed beschrieben.

Selbst diese Dateien werden nun von KeyCDN ausgeliefert und die Versionierung der Dateien funktioniert immer noch reibungslos. Respekt!

Der Kostenfaktor

KeyCDN möchte 0,04 US-Dollar pro Gigabyte haben. Mindestens 29 USD muss man per Kreditkarte oder PayPal auf sein Konto laden. Dabei gilt folgendes: 1 Credit = 1 USD. Für welche Aktion sich die Credits wie verbrauchen, ließ sich für mich nicht ermitteln.

Die Wahrheit über ein CDN – die Ergebnisse

Einen Tag vor der Umstellung auf ein CDN habe ich einen Speedtest mit den Pingdom Tools durchgeführt und kam zu einem wirklich guten Ergebnis. Jede Arbeit an meiner Website Techbrain.de hat sich gelohnt, sie ist ohne CDN rasend schnell:

Vorher, ohne CDN:

Die Testergebnisse vom 05.07.2016. Erster Abruf unter 500 Millisekunden.
Die Testergebnisse vom 05.07.2016. Erster Abruf bereits unter 500 Millisekunden.

478 Millisekunden Ladezeit ist ein echter Ritterschlag, ich war mehr als zufrieden.

Nachher, mit CDN:

Der erste Aufruf meiner Website nach der Implementierung des CDNs hat 1,2 Sekunden Ladezeit gezeigt. Leider habe ich davon keinen Screenshot mehr. Nach etlichen weiteren Versuchen ist folgendes dabei herausgekommen:

Der Speed-Test vom 11.07.2016. Etwas schneller nach etlichen Aufrufen.
Der Speed-Test vom 11.07.2016. Etwas schneller nach etlichen Aufrufen.

Ich hatte ein Widget in die Sidebar gezogen, deshalb 29 anstatt 27 Requests.

Das Endergebnis – lohnt sich ein Content Delivery Network?

Meine Website lädt – nach einigen Aufrufen – durchaus schneller. Ganze 106 Millisekunden. Da hatte ich mir wirklich mehr erwartet. Der Unterschied zwischen 478 und 372 Millisekunden ist mit dem Auge nicht mehr wahrnehmbar. Zudem sind 478 Millisekunden bereits richtig – wirklich richtig – schnell.

Im Grunde genommen habe ich dieses Ergebnis durchaus erwartet. Wenn auf einem wirklich guten Server gehostet wird, der PHP7 und HTTP/2 unterstützt, und SSD anstatt einer HDD anbietet, dann kann man mit einigem Aufwand auch ganz normale Websites mit vielen Grafiken auf der Startseite das Rasen beibringen. Du möchtest dafür eine Anleitung haben?

Hier ist meine Artikel-Serie dazu:

Mein Fazit

Wenn du mich fragst, ob sich ein CDN lohnt, muss ich eindeutig sagen, dass es sich nur lohnt, wenn du einen englischsprachigen Blog besitzt. Dann kommt Traffic aus der ganzen Welt auf deine Website, die dann wirklich von einem CDN profitieren könnte. Eine deutschsprachige Website sollte zuerst alle anderen Maßnahmen umsetzen. Schon das bringt unglaublich viel Einsparung und lässt den Blog extrem schnell werden.

KeyCDN – eine berechtigte Kritik

Nirgendwo auf der Website ist der Test-Account, zu dem man sich anmelden kann, korrekt beschrieben. Es wird nur von einem 30-tägigen Testzeitraum gesprochen. Angeblich 30-tägig. Leider ist dem nicht so. Anscheinend funktioniert der Test-Account nach einem »Credit-System«. Ich erhielt einige Minuten nachdem ich die Screenshots für diesen Beitrag angefertigt hatte, folgende E-Mail:

Die E-Mail vom KeyCDN-Support

Sind die Credits aufgebraucht, wird sofort der Service eingestellt. Folgendes passiert dann:

KeyCDN: Verbrauchte Credits und die Folgen.
KeyCDN: Verbrauchte Credits und die Folgen.

Das ist natürlich suboptimal, besonders, weil man ja nicht ständig am Rechner sitzt und die Auswirkungen der verbrauchten Credits wieder beheben kann. Ich hatte somit nur vier Tage die Möglichkeit, den Dienst zu testen.

Problembehebung:

Um die Darstellung der Website zu normalisieren, muss nur das CDN Enabler Plugin deaktiviert werden und die CDN-URL aus Autoptimize entfernt werden. Danach wird alles wieder korrekt angezeigt.

Trotzdem, das geht so gar nicht! Der Dienst sollte schon einige Stunden aufrechterhalten werden, damit man seine Website ohne dieses Problem wieder umstellen kann und die Besucher keine völlig zerschossene Website zu Gesicht bekommen.

Meine Website läuft jetzt wieder ohne CDN und ist immer noch schnell genug, wie der erneute Test bestätigt, den ich eben gerade durchlaufen ließ.

Speed Test ohne CDN vom 11.07.2016
Speed Test ohne CDN vom 11.07.2016.

Und, welche Erfahrungen hast du mit einem CDN gemacht?

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

WordPress Backup: Die richtige Strategie

Eine Backup-Strategie ist für jede Website oder jeden Blog immens wichtig. Vielleicht hast du es schon zu oft gelesen und kannst es nicht mehr hören. Und doch solltest du schnellstens darüber nachdenken, wenn du deinen Blog noch nicht regelmäßig mit Backups versorgst. Denn er kann schneller zerstört sein, als dir lieb ist.

Wichtig: Die richtige WordPress-Backup-Strategie

Darum ist eine Backup-Strategie eklatant wichtig

Jeden von uns kann es zu jeder Zeit treffen. Das muss man sich klar machen. Ich zum Beispiel dachte, dass ich nicht für jede meiner Websites ein Backup benötige. Dementsprechend wurde meine persönliche Website andreas-hecht.com nicht mit Backups gesichert, weil wenig Inhalte vorhanden waren. Das habe ich bitter bereuen müssen.

Vor einigen Wochen sah ich, dass mein Theme – Enfold von Kriesi – ein Update benötigte. Nichts böses erwartend, habe ich den Update-Button gedrückt. Einige Minuten später stand ich vor den rauchenden Überresten der Website. Enfold hat in Sekunden meine Website zerstört. Das Theme gab ab dem öffnenden <head> keinerlei HTML-Quellcode mehr aus. Auch eine versuchte Installation einer älteren Version ließ sich nicht zur Darstellung einer kompletten Website überreden.

Die Installation eines WordPress-Basis-Themes brachte mir dann wenigstens noch die Blog-Inhalte zurück, die hinterlegten Seiten waren unwiederbringlich zerstört.

Und das nur, weil ich Idiot fünf Dollar im Monat sparen wollte. Denn meine anderen Websites werden von VaultPress gesichert, das ich weiter unten noch vorstellen werde.

Weiterführende Informationen:

Killed in Action: Wenn Deine Website plötzlich stirbt

WordPress-Backup-Lösungen – das gibt es, das ist sinnvoll

Möglichkeiten zur Erstellung von Backups gibt es für WordPress viele. Nicht alle sind sinnvoll, denn für einige – kostenfreie – Varianten musst Du eingehende Kenntnisse im Bereich Datenbank-Administration haben, um die Backups wieder einspielen zu können. Daher empfehlen sich für unbedarfte User oder Menschen, die eine professionelle Lösung favorisieren, die vollautomatischen Backup-Lösungen. Dort lassen sich die Backups mit einem Klick wieder zurückspielen. Gute Backup-Lösungen sind allerdings niemals kostenfrei. Allerdings sind die Kosten, die auf dich zukommen, sehr überschaubar.

Ich stelle dir im folgenden jeweils zwei Beispiele für die einzelnen Backup-Möglichkeiten vor.

Die vollautomatischen Lösungen: Backup-Dienste

Diese Backup-Dienste sind immer kostenpflichtig. Allerdings halten sich die Kosten im Rahmen und bewegen sich zwischen fünf USD bis neun Euro monatlich.

1 – VaultPress

VaultPress WordPress-Backups

VaultPress dürfte einer der bekanntesten und beliebtesten Dienste für vollautomatische WordPress-Backups sein. Die gebotene Qualität und die Benutzerfreundlichkeit ist sehr gut. VaultPress ist übrigens ein Projekt von Automattic, der Firma hinter WordPress.

So funktioniert es: Logge Dich mit einem WordPress.com-Account in VaultPress ein, gib deine Website URL an und deine Kreditkartendaten für die Zahlungen. Danach installiere in deinem Blog das VaultPress-Plugin und gib die Registrierungsnummer ein, die du im VaultPress-Dashboard erhalten hast. Nun musst du nur noch die SFTP- oder SSH-Zugangsdaten für deinen Server angeben, damit VaultPress korrekt arbeiten kann.

Die in VaultPress hinterlegten Zugangsdaten für deinen Server / dein Webhosting-Paket.
Die in VaultPress hinterlegten Zugangsdaten für deinen Server / dein Webhosting-Paket.

Der Dienst nimmt nun sofort seinen Dienst auf und macht ein erstes Backup deiner kompletten Website inklusive der Uploads.

Die Ansicht der einzelnen Backups, die von VaultPress erstellt wurden.
Die Ansicht der einzelnen Backups, die von VaultPress erstellt wurden.

Wie man sehr gut erkennen kann, sind die einzelnen Backups mit nur einem Klick wiederherstellbar.

Informationen:

  • Kostenpflichtig: Ja, ab 5 USD monatlich pro URL/Website
  • Von was genau werden Backups erstellt:  Von der kompletten WordPress-Installation
  • Wo werden die Backups gehostet: Auf den Servern des Dienstes (USA)
  • Support: Ja, über E-Mail. Schnell und gut nach eigener Erfahrung – nur auf Englisch
  • Nachteile: Keine ersichtlichen, abgesehen von der Speicherung der Daten in den USA
  • Empfehlenswert: Uneingeschränkt nach eigener Erfahrung
  • Testzeitraum vorhanden: Nein
  • Zahlungsmöglichkeit: Nur Kreditkarte
  • Mögliche Zahlungsweisen: Monatlich und jährlich. Jährliche Zahlungen sparen einen Monat Gebühr
  • Kündigungsmodalitäten: Kündigung jederzeit möglich über das Dashboard mit einem Klick
  • Ein WordPress.com-Account ist Pflicht
  • Link zum Produkt

2 – blogVault

WordPress-Backup-blogVault

BlogVault bietet dir nicht nur die einfache und schnelle Backup-Lösung mit Wiederherstellung an, sondern auch interessante, zusätzliche Funktionen. Vorteilhaft ist die Test-Wiederherstellung, die VaultPress nicht bieten kann. Die Funktion erfordert ebenfalls die Installation eines Plugins.

Was blogVault leistet:

  • Bis zu 30 Tage Backup-Historie: Es können einzelne Seiten oder die gesamte Website wiederhergestellt werden
  • Ein-Klick-Wiederherstellung: Keine Fummelei mit Datenbank-Dateien oder ähnlichem.
  • Test-Wiederherstellung: Du kannst testen, ob deine Webseite  vollständig gesichert wurde. Der Dienst stellt dir eine Test-Wiederherstellung per Klick auf seinen Servern zur Verfügung.
  • Hohe Sicherheit: blogVault speichert deine Backups auf Servern von Hetzner und zusätzlich bei Amazon S3. Zusätzlich kann das Backup in deiner Dropbox gesichert werden.
  • Zusatzfunktion: blogVault bietet einen einfachen Umzug einer WordPress-Installation an.
  • E-Mail-Support: Zurzeit nur auf englisch

Informationen:

  • Kostenpflichtig: Ja, ab 9 Euro monatlich für eine Website
  • Von was genau werden Backups erstellt:  Von der kompletten WordPress-Installation
  • Wo werden die Backups gehostet: Auf den Servern des Dienstes bei Hetzner und zusätzlich auf Amazon S3
  • Support: Ja, über E-Mail – nur auf Englisch
  • Nachteile: Keine ersichtlichen
  • Empfehlenswert: Höchstwahrscheinlich
  • Testzeitraum vorhanden: Ja, sieben Tage lang. Erst danach wird berechnet
  • Zahlungsmöglichkeit: Nur PayPal
  • Mögliche Zahlungsweisen: Monatlich und Jährlich. Jährliche Zahlungen sparen zwischen 12 und 16 Prozent.
  • Kündigungsmodalitäten: Kündigung jederzeit möglich über das Dashboard mit einem Klick
  • Link zum Produkt

BlogVault hört sich vielversprechend an. Ich werde den Dienst in nächster Zeit einmal auf Herz und Nieren testen. Danach können dann gesicherte Aussagen gemacht werden. Allerdings kann man durch den 7-tägigen-Testzeitraum nichts falsch machen und genau prüfen, ob der Dienst alle Erwartungen erfüllt.

Die Lösungen mittels WordPress-Plugin

Die manuellen Lösungen für ein WordPress-Backup sind zumeist die bekannten und kostenlosen Plugins. Diese können wohl ein Backup erstellen, jedoch nicht zurückspielen. Deshalb muss man über Erfahrungen im Umgang mit phpMyAdmin verfügen, um die gesicherte Datenbank wieder in das System zu bringen. Allerdings existiert auch eine Plugin-Lösung, welche die gesicherten Backups wieder einspielen kann. Diese Lösung ist jedoch kostenpflichtig, erscheint aber empfehlenswert zu sein.

1 – BackupBuddy

wordpress-backup mit BackupBuddy
Die Benutzeroberfläche von BackupBuddy

Auch BackupBuddy ist eine kostenpflichtige Backup-Lösung. Nach eigener Aussage schützt es seit 2010 bereits über eine halbe Million WordPress-Websites. BackupBuddy bietet dir ebenfalls Backups, die mit einem Klick wieder eingespielt werden können. Es können viele verschiedene Arten eines Backups gefahren werden. Entweder kann die gesamte Website gesichert werden, oder nur die Daten oder die Datenbank.

Eine Restore-Funktion wird ebenfalls angeboten, zusätzlich kann man mittels BackupBuddy auch seine Seite komfortabel auf einen anderen Server umziehen. Die gesicherten Daten werden nach Belieben in der Dropbox, auf Amazon S3 oder Google Drive ebenso gespeichert, wie auf den Servern des Unternehmens. Die gespeicherten Backups können zudem heruntergeladen werden.

Was BackupBuddy leistet:

  • Backup-Wiederherstellung: Einzelne Bereiche oder die gesamte Website lassen sich wiederherstellen
  • Ein-Klick-Wiederherstellung: Keine Fummelei mit Datenbank-Dateien oder ähnlichem.
  • Hohe Sicherheit: blogVault speichert deine Backups auf eigenen Servern oder in deiner Dropbox. Ebenfalls ist das Speichern in Amazon S3 und Google Drive möglich. Zusätzlich kannst du das Backup jeweils herunterladen.
  • Zusatzfunktion: BackupBuddy bietet einen einfachen Umzug einer WordPress-Installation. sowie sehr interessante Funktionen für Entwickler an. Migration, ein Klonen und eine Staging-Website können einfach realisiert werden. Interessant ist die Staging-Funktion, sie erlaubt dir eine Entwicklerseite zu klonen und mit wenigen Klicks stets aktuell zu halten. Ebenfalls integriert sind Funktionen für den Umzug auf eine neue Domain und das automatische Ersetzen der alten Domain durch die neue Domain. Zudem bietet das Plugin noch etliche zusätzliche Funktionen und Tools. Es ist sehr umfangreich.
  • Ticket-Support: Zurzeit nur in englischer Sprache erhältlich

Informationen:

  • Kostenpflichtig: Ja, ab 80 USD pro Jahr und Website. Zurzeit bekommt man 25 Prozent Rabatt bei Anmeldung im Newsletter.
  • Updates und Supportzeitraum: Jeweils ein Jahr, da man pro Jahr bezahlt
  • Von was genau werden Backups erstellt:  Von der kompletten WordPress-Installation oder von ausgesuchten Bereichen
  • Wo werden die Backups gehostet: Auf den Servern des Dienstes in den USA, oder in Amazon S3, Google Drive oder der eigenen Dropbox.
  • Support: Ja, über ein Ticket-System – nur auf Englisch
  • Nachteile: Keine ersichtlichen
  • Empfehlenswert: Höchstwahrscheinlich
  • Testzeitraum vorhanden: Nein
  • Zahlungsmöglichkeit: Nur mit Kreditkarte
  • Mögliche Zahlungsweisen: Jährlich
  • Kündigungsmodalitäten: Lizenz läuft automatisch aus, wenn nicht verlängert wird. Somit ist eine Kündigung nicht nötig.
  • Link zum Produkt

2 – BackWPup – kostenlos

BackWPup-WordPress-Plugin

BackWPup dürfte das bekannteste kostenlose Backup-Plugin sein. Es funktioniert zumindest auf etwas teureren Hosting-Möglichkeiten einwandfrei. Bei günstigen Shared-Hostings bricht das Plugin gern mit einer Fehlermeldung ab, weil der Backup-Job länger dauert, als vom Hoster freigegeben. Das ist jedenfalls meine eigene Erfahrung mit diesem Plugin.

Das Plugin sichert je nach Bedarf entweder deine gesamte Seite oder nur die Datenbank. Zudem kann ein Backup für die Daten (die XML-Import-Datei) und die Plugins durchgeführt werden. Es stehen zudem sehr viele Möglichkeiten der Sicherung zur Verfügung, unter anderem der eigene Server, die Dropbox, Amazon S3, FTP und so weiter.

BackWPup hat jedoch auch einen Nachteil: es kann keine Backups zurückspielen. Das muss händisch geschehen und es erfordert Fachwissen im Bereich Datenbank-Administration. Hat man dieses Fachwissen nicht, muss ein Fachmann beauftragt werden. Eine kostenpflichtige Version ist ebenfalls erhältlich, diese kann jedoch auch keine Backups wiederherstellen.

Die Funktionen im Überblick:

  • Datenbank Backup (benötigt mysqli)
  • WordPress XML Export
  • Erzeugt eine Datei mit den installierten Plugins
  • Optimiert die Datenbank
  • Checkt und repariert die Datenbank
  • Daten Backup
  • Backups in zip, tar, tar.gz, tar.bz2 Format (benötigt gz, bz2, ZipArchive)
  • Speichert die Backups in: Server, DropBox, Amazon S3, Microsoft Azure, RackSpaceCloud und SugarSync

Informationen:

  • Kostenlos von WordPress.org
  • Keine Wiederherstellung des Backups
  • Nur Basis-Support über das Support-Forum auf WordPress
  • Wird ständig weiterentwickelt
  • Entwickler: Inpsyde GmbH, Frank Bültge, Daniel Hüsken
  • Neueste Version vom: Mai 2016
  • Download von WordPress.org

Fazit

Eine gute Backup-Strategie ist unverzichtbar. Allerdings existieren viele Fallstricke; gerade bei den kostenlosen Lösungen. Empfehlenswert ist daher immer eine kostenpflichtige Lösung, die bereits für kleines Geld zu haben ist. Die Erfahrung zeigt, dass man sich nach der Installation und Inbetriebnahme nicht mehr um die Backups kümmern muss, alles läuft geschmeidig im Hintergrund ab. Und wenn es dann doch einmal zum Super-Gau kommt, dann ist dieser mit der Restore-Funktion nach einigen Minuten wieder schnell behoben.

Aus meiner Misere habe ich gelernt, dass man keine Website ohne Backups betreiben sollte. Daher hat jetzt jede meiner Websites eine Backup-Lösung. So kann ich wieder ruhig schlafen.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Bloggen für Einsteiger: Plugin-Grundausstattung und Themewahl [#2]

Im ersten Teil unserer kleinen Serie „Bloggen für Einsteiger“ hast du deinen Webhoster gewählt und dich für eine Domain entschieden. In diesem zweiten Teil geht es nun darum, eine Grundausstattung der wichtigsten Plugins zu installieren und ein Theme zu wählen, damit du schnell mit dem Bloggen anfangen kannst.

Bloggen für Einsteiger: Plugin-Grundausstattung und Themewahl [#2]

Plugins und ein passendes Theme sind sehr wichtig für einen WordPress-Blog. Sie entscheiden darüber, wie ein Blog aussieht und wie er sich verhält. Design ist ein wichtiges Thema, denn ein schreckliches Design kann deine potenziellen Leser – wie das Adjektiv schon impliziert – abschrecken.

Die Auswahl eines passenden Themes

Ein Theme entscheidet darüber, wie dein Blog aussieht. Durch programmierte Funktionen kann ein Theme durchaus auch darüber entscheiden, welche Möglichkeiten du zur Anpassung auf deine persönlichen Bedürfnisse hast. Ob du die Farben auswählen kannst, das grundsätzliche Layout bestimmen kannst – also wie viele Spalten das Theme nutzt.

Themes können hierbei ein- bis dreispaltig die Inhalte anzeigen. Das bedeutet, dass du einen Haupt-Inhaltsbereich (den Content) hast, und bis zu zwei Sidebars, in die unterstützende Inhalte einsortiert werden. Zum Beispiel die letzten Kommentare, die neuesten Artikel und so weiter.

Das »Hueman«-Theme in dreispaltiger Ansicht.
Das »Hueman«-Theme in dreispaltiger Ansicht. Es kann auch zweispaltig dargestellt werden.

Die meisten Themes wirst du in einem zweispaltigen Layout bekommen. Dieses Layout hat sich durchgesetzt. Links wirst du den Haupt-Inhaltsbereich finden und rechts die Sidebar. Ein gutes Theme lässt dich vieles anpassen. Die Farbe der Links und des Inhaltsbereichs, ob du ein Hintergrundbild verwenden kannst, wie viele Spalten das Layout hat und ob du ein eigenes Logo verwenden kannst.

Das abgebildete Theme kann all das und noch viel mehr. Du kannst es kostenlos von WordPress.org beziehen. WordPress.org bietet dir mittlerweile circa 4.000 kostenlose Themes zur Auswahl. Du kannst innerhalb deines Adminbereichs danach suchen und sie mit einem Klick installieren.

Beispiel: ein zweispaltiges Theme

Ein zweispaltiges Theme. Das Theme ist ein überarbeitetes »Graphy« von WordPress.org.
Das Beispiel eines zweispaltigen Themes. Inhalt links, Sidebar rechts.

Theme: Eine überarbeitete Version des Graphy Themes von WordPress.org

Themes suchen und installieren

Theme-Auswahl
Unter Design => Themes => Installieren findest du alle kostenfreien Themes.
Auf dieser Ansicht kannst du die Themes nach Eigenschaften filtern.
Auf dieser Ansicht kannst du die Themes nach Eigenschaften filtern.

Weiterführende Information und Theme-Vorschläge

Die WordPress-Plugin Grundausstattung

Plugins sind wichtig. Sie erweitern die Grundfunktionalität von WordPress um viele, zumeist sehr nützliche Funktionen. Sie dienen zum Beispiel der Spam-Abwehr innerhalb der Kommentar-Funktion von WP. Ich habe dir eine Liste mit den Plugins zusammengestellt, die eine Grundausstattung für jeden Blog darstellen sollten.

Alle vorgestellten Plugins haben sich bewährt und werden ständig aktualisiert und weiterentwickelt.

1- Antispam Bee

antispam-bee

Das wichtigste Plugin. Es dient der Abwehr von Spam-Kommentaren und sorgt dafür, dass sich auf deinem Blog nur von Menschen verfasste Kommentare finden.

2 – Yoast SEO

yoast-seo

Ein SEO-Plugin ist unverzichtbar. Zuallererst optimiert es die Ausgabe der Meta-Beitragstitel und der zugehörigen Meta-Beschreibung, und kann diese Dinge für die Sichtbarkeit in den Suchergebnissen von Google optimieren. Dabei meint Meta-Titel und Meta-Beschreibung die für Google wichtigen Daten. Hier ein Beispiel, wie beides in den Suchergebnissen angezeigt werden kann:

Die SEO-Metadaten. Der Meta-Titel und die Meta-Beschreibung.
Die SEO-Metadaten. Der Meta-Titel und die Meta-Beschreibung.

Dieser Editor erscheint unter Beiträge verfassen unter jedem Artikel. Du kannst die Daten noch manuell überarbeiten, für eine bessere Variante einer Beschreibung.

3 – Publish Confirm

publish-confirm

Publish Confirm sorgt dafür, dass du keine Beiträge versehentlich veröffentlichst, die noch nicht fertig sind. Das Plugin erzeugt dabei ein kleines Pop-Up, in dem du ein zweites Mal bestätigen musst, dass der Beitrag veröffentlicht werden soll. Dieses Plugin gehört für mich zum absoluten Standard und ich verwende es bei jeder meiner Websites.

4 – Autoptimize

autoptimize

Autoptimize hilft dir, deine Website zu beschleunigen. Es fasst alle JavaScript-Dateien zu einer einzigen zusammen und komprimiert den Code. Genauso verfährt das Plugin mit deinen CSS-Dateien. Das sorgt für eine schnellere Ladezeit deines Blogs.

5 – Cachify

cachify

Cachify ist die optimale Ergänzung zu Autoptimize. Cachify speichert deine Website zwischen und liefert die gecachte Seite an deine Besucher aus. Das steigert die Geschwindigkeit deiner Website nochmals enorm und macht daher deine Besucher und auch Google glücklich, da die Ladezeit einer Website einen Ranking-Faktor darstellt.

Die richtige Einstellung für einen Anfänger ist die folgende:

cachify-einstellungen

Profis stellen fest, dass Cachify – in Verbindung mit einer sehr weitgehenden Speed-Optimierung – das schnellste Caching-Plugin auf dem Markt ist. Zudem kann es durchaus auch große Websites optimieren. Für Anfänger ist es zudem am Besten geeignet, da es sehr einfach einzustellen ist.

6 – Contact Form 7

contact-form-7

Mit Hilfe dieses Plugins kannst du auf einfache Art und Weise ein Kontaktformular für deine Kontaktseite erstellen. Sehr effektiv und vor allem einfach einzustellen.

7 – Optimus – WordPress Bildoptimierung

optimus

Die Bilder und Grafiken einer Website sind der Flaschenhals der Ladegeschwindigkeit. Daher ist ein gutes Plugin zur Bildoptimierung sehr wichtig. Du kannst dieses Plugin kostenlos nutzen, ich empfehle jedoch dringend eine Premium-Lizenz zu kaufen, da die kostenfreie Version nur Bilder bis 100KB optimiert. Die Premium-Lizenz kostet 19 Euro im Jahr. Dafür bekommst Du das zur Zeit beste Plugin zur Bildoptimierung mit Support für das WebP-Bildformat.

Dringend empfohlen: Ein professionelles Backup

Eigentlich hätte dieser Punkt an Nummer eins stehen sollen. Doch ein wirklich gutes Backup ist kostenpflichtig. Trotzdem spreche ich es an. Das Wichtigste beim Bloggen überhaupt ist ein Backup deines Blogs. Täglich und automatisch erstellt, zudem mit einer Ein-Klick Wiederherstellungsfunktion ausgestattet.

Es kann so viel passieren. Dein Blog könnte gehackt werden. Möglich ist auch, dass ein Plugin- oder Themes-Update deine Website zerstört. Dann gibt es keine andere Möglichkeit mehr, als das Einspielen des letzten Backups. Wenn das mit einem Klick geschehen kann, dann ist jeder dafür ausgegebene Cent Gold wert. Natürlich existieren auch kostenfreie Backup-Plugins, doch wenn es darum geht, die Website wiederherzustellen, dann musst du die Datenbank händisch per phpMyAdmin importieren.

Erstens dauert dass, zweitens erfordert es Fachwissen. Deshalb habe ich seit Jahren eine kostenpflichtige Lösung.

Der VaultPress Backup-Dienst

VaultPress

Das nötige Plugin kannst du von WordPress kostenlos downloaden, die Backup-Funktion erfordert jedoch den Abschluss eines Vertrags. Der Dienst ist ein Angebot aus dem Hause Automattic, der Firma hinter WordPress.

So einfach: Backup wiederherstellen

Backup wiederherstellen mit VaultPress. Ein Klick auf »Restore« reicht.
Backup wiederherstellen mit VaultPress. Ein Klick auf »Restore« reicht.

Die Funktionen im Video:

Ergänzende Informationen:

Natürlich existieren noch weitere gute Möglichkeiten, ein Backup deines Blogs zu machen. Der folgende Artikel zeigt die weiteren Möglichkeiten ausführlich auf.

Dr. Web: Nervenschonende WordPress Backup-Strategien für jedermann

Fazit

Heute hast du alle vorbereitenden Arbeiten abgeschlossen. Du hast ein Theme ausgewählt und die wichtigsten Plugins installiert. In der nächsten Folge beschäftigen wir uns mit dem wichtigsten Aspekt eines Blogs: dem Inhalt. Wie sollte er formatiert sein, wo kannst du dich informieren und so weiter…

(dpe)

Kategorien
Tipps, Tricks & Tutorials

Sitemap mit WordPress: Ein Inhaltsverzeichnis für deine Leser

Ein professioneller Blog ist nicht nur gut, weil er gute Inhalte bietet, die von den Besuchern gern gelesen werden. Viele andere Aspekte haben einen Anteil an einem professionellen Auftritt. Einer dieser Aspekte ist eine hohe Benutzerfreundlichkeit, denn ein guter Blogger denkt stets zuerst an seine Besucher. Damit diese schnell die gesuchten Informationen finden können, bietet sich eine Sitemap – ein Inhaltsverzeichnis – für den Blog an.

Wie Du eine wirklich gute Sitemap für Deine Leser erstellst

Eine Sitemap ist etwas sehr Praktisches für deine Leser. Auf einen Blick haben sie alle Möglichkeiten, schnell etwas Passendes zu den gesuchten Informationen zu finden. Diesen Service solltest du deinen Besuchern einfach bieten. Die Sitemap an sich ist schnell erstellt, allerdings erfordert die Aufteilung vorher etwas Gehirnschmalz, wenn etwas wirklich Gutes dabei herauskommen soll.

Bedenke folgendes, bevor du ans Werk gehst: Du musst dich von den vielen anderen Blogs abheben, die es zu deinen Themenbereichen bereits gibt. Es ist daher erforderlich, dich in deine Besucher hinein zu versetzen und dich zu fragen, was dir auf einem fremden Blog helfen würde.

Übrigens: Ich spreche nicht von der XML-Sitemap, die Google und andere Suchmaschinen für die bessere Indexierung deiner Website hernehmen können.

Eine gute Sitemap erstellen – so geht es

Eine Sitemap für deine Besucher sollte folgende Elemente aufweisen:

  • Eine Möglichkeit, Artikel nach Jahr und Monat zu suchen
  • Eine gewisse Anzahl von Artikel pro Jahr sollte ausgegeben werden. Vielleicht die letzten 20?
  • Alle Beiträge nach Kategorien sortiert
  • Alle Seiten, die du im Theme nutzt
  • Alle Kategorien mit RSS-Feed

Mit dieser Aufteilung hat dein Besucher eine Menge gut strukturierter Möglichkeiten, die von ihm gewünschten Informationen schnell finden zu können. Um die oben beschriebene Sitemap zu erstellen, benötigen wir zwei kostenlose Plugins und eine WordPress-Funktion.

Das komplette Inhaltsverzeichnis kann im Schreib-Editor von WordPress erstellt werden, es müssen keinerlei Template-Dateien bearbeitet werden.

1 – Compact Archives

compact-archives

Compact Archives sorgt für die Darstellung der Archive nach Jahr und Monat. Es stellt dir einen einfachen Shortcode zur Verfügung, mit dessen Hilfe du deine Sitemap nach eigenen Bedürfnissen erstellen kannst.

  • Entwickler: Syed Balkhi
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: Vor elf Monaten
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

2 – List category posts

list-category-posts

Dieses Plugin bietet dir durch die Vielfalt der Konfigurationsmöglichkeiten seines Shortcodes eine Menge Optionen, um eine gute Sitemap anlegen zu können. Du kannst die Beiträge nach Jahr, Monat, Kategorie, Tag und vielen weiteren Möglichkeiten sortieren. Einen vollständigen Überblick über die Konfigurationsvielfalt des Shortcodes findest du hier.

  • Entwickler: fernandobt
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: Vor drei Monaten
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

3 – Alle Kategorien mit den RSS-Feeds anzeigen

Der folgende Code-Schnipsel gehört in die functions.php deines Themes.

Das Inhaltsverzeichnis (Sitemap) erstellen

Ich habe dir versprochen, dass du keine Template-Datei anfassen musst, um eine gute Sitemap zu erstellen. Natürlich halte ich mein Versprechen. Gehe daher im Dashboard von WordPress auf »Seiten => Erstellen« und lege eine neue Seite an mit dem Titel »Sitemap«.

Als Erstes schreibst du einige Worte zu deiner Sortierung, damit deine Leser eine erste Orientierung bekommen, wie und wo sie suchen müssen.

1 – Beiträge nach Jahr und Monat listen

Zuerst liste ich die Beiträge nach Jahr und Monat auf. Diese Liste gibt mir auch die Monate zurück, in denen nichts gepostet wurde. Monate ohne Beiträge sind hierbei nicht anklickbar.

2 – Alle Beiträge nach den jeweiligen Jahren auflisten

Der Shortcode zeigt alle Beiträge aus dem jeweiligen Jahr an. Wenn es zu viele Artikel sind, kann man die Anzahl der angezeigten Beiträge bestimmen.

3 – Beiträge nach Kategorie auflisten

Hierzu nutzen wir den Slug – also die URL – der Kategorie. IDs können ebenfalls genutzt werden.

Alle Konfigurationsmöglichkeiten des List Category Posts Shortcodes findest du auf dieser Seite:

Wie man das Plugin nutzt

4 – Alle Kategorien mit RSS-Feed auflisten

Nun kommt der von uns vorhin erstellte Shortcode zum Einsatz. Er hat keinerlei Konfigurations-Möglichkeit.

Bonus: meine komplette Konfiguration zum Kopieren in den Editor

Wenn du dir nicht sicher bist, wie du die Shortcodes nutzen kannst, dann kopiere einfach meine eigene Konfiguration in den Textbereich des Schreib-Editors von WordPress. An dieser Stelle kannst du von der visuellen Ansicht auf die Textansicht umschalten:

editor-textansicht

Das Gist mit meinen Einstellungen:

Das Endergebnis im Screenshot

Inhaltsverzeichnis-TechBrain-Vorschau
Ein Teil der Sitemap. Für die komplette Ansicht bitte auf die Grafik klicken.

Demo: TechBrain.de/sitemap/

Fazit

Wenn du deine Sitemap nun noch prominent verlinkst, so dass deine Besucher sie auf den ersten Blick finden können, dann hast du bereits viel für die Benutzerfreundlichkeit getan. Zudem dürfte ein solches Inhaltsverzeichnis die Absprungrate senken und damit auch Google glücklich machen.

(dpe)

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

WordPress Maintenance Mode: Warte mal

Jeder WordPress-Nutzer kennt ihn wohl: den WordPress Maintenance Mode. Bei jedem Update versetzt das CMS sich selbsttätig in den Wartungsmodus, egal ob es sich um ein Core-, Theme-, oder Plugin-Update handelt. Für die Besucher bedeutet dies, dass deine Website in diesen Momenten nicht zugänglich ist. Klingt erstmal nicht so gut, ist aber eine praktische Sache.

Eine Einführung in den WordPress Maintenance Mode

Der WordPress Maintenance Mode

Es kann viele Gründe geben, um seine Website in den Wartungsmodus zu schicken. Die wichtigsten sind Website-Updates, Theme- und Plugin-Updates.

Website Updates

Jedes Mal, wenn an einer Website gearbeitet wird, sollte diese für die Öffentlichkeit in den Wartungsmodus versetzt werden. Das bedeutet, dass die Website nicht mehr öffentlich zugänglich ist. Der Besucher sieht dann auf einen Blick, dass die Seite für eine gewisse Zeit nicht zugänglich ist, und dass er etwas später voraussichtlich mehr Glück haben wird.

Der Begriff Updates meint jedoch in diesem Fall nicht nur Theme-Updates, sondern auch die Installation und Einrichtung neuer Themes. Natürlich kommen auch andere Dinge in Betracht, die länger als einige Sekunden, beziehungsweise einige Minuten dauern. Also Änderungen am Stylesheet, die Integration neuer Bereiche und so weiter.

Theme- und Plugin-Updates

Die Installation neuer Themes braucht einige Zeit. Doch auch das einfache Update eines Themes oder eines Plugins kann durchaus etwas dauern. Deshalb versetzt sich dein WordPress selbstständig und ohne dein Zutun in den Wartungsmodus. Besucher bekommen in dieser – zumeist kurzen – Zeit dann die folgende Nachricht zu sehen:

Briefly unavailable for scheduled maintenance. Check back in a minute.

Hierbei ist es egal, ob deine Website eine deutsche Spracheinstellung besitzt, oder nicht. Die Nachricht kommt immer in englischer Sprache.

Der integrierte Wartungsmodus von WordPress

Die Nachricht ist Teil des eingebauten Wartungsmodus unseres geliebten CMS. Sie wird bei jedem Update eines Themes, eines Plugins oder dem WordPress-Core dynamisch erzeugt. Ab und an kann es durchaus vorkommen, dass sich diese Nachricht nicht automatisch löscht, wie es eigentlich sein sollte. Das musst du dann selbst tun.

Rufe einfach mit einem FTP-Programm deine WordPress-Installation auf, sorge dafür, dass auch »unsichtbare Dateien« von dem Programm angezeigt werden, und lösche dann die Datei .maintenance vom Server.

maintenance-datei-loeschen

WordPress manuell in den Wartungsmodus versetzen

Die obige Methode mit dem automatischen Wartungsmodus von WordPress funktioniert gut und ist sicher ausreichend. Doch für weitergehende Aufgaben als ein kurzes Plugin- oder Theme-Update kann der automatische Modus nicht genutzt werden.

WordPress kann jedoch durchaus manuell in den Wartungsmodus versetzt werden. Dazu ist nicht viel Aufwand nötig.

Maintenance Mode per Snippet

Ein einfaches Snippet mit einigen Zeilen Code reicht und erfüllt seinen Zweck.

Das Snippet wird in die functions.php des aktiven Themes kopiert und versetzt die Website sofort in den Wartungsmodus. Wenn der Maintenance Mode nicht benötigt wird, kommentiert man den Aufruf der Funktion einfach aus. Das sieht dann so aus:

In diesem Snippet ist der Wartungsmodus deaktiviert. Werden die beiden Slashes vor add_action() gelöscht, ist der Modus wieder aktiv.

So sieht das Ergebnis des Code-Snippets aus:

manueller-wartungsmodus

Maintenance Mode per Plugin

Wenn länger dauernde Arbeiten an einer Website erfolgen, dann sollte mit dem Wartungsmodus etwas mehr Aufwand getrieben werden. Denn eine Wartung muss stets auch aus der Sichtweise des Besuchers betrachtet werden. Ein Besucher kann durchaus sehr ungeduldig sein, wenn er zum Beispiel von Googles Suchergebnissen auf die gerade gewartete Seite kommt, weil er sich eine Problemlösung erwartet.

Daher sollten auf einer guten Wartungsseite einige Dinge einfach Standard sein. Folgendes sollte sie beinhalten:

  • Eine deutlich verständliche Nachricht, warum die Website offline ist
  • Eine realistisch geschätzte Uhrzeit, wann die Seite wieder erreichbar sein wird.
  • Eine E-Mail-Adresse für Nachfragen der Besucher
  • Optional, aber benutzerfreundlich: Eine E-Mail-Liste, in die sich der Besucher eintragen kann. Nach Beendigung der Arbeiten kann dann eine Mail versendet werden, dass die Website wieder erreichbar ist.
  • Optional: Die Social Networks des Website-Betreibers

Zwei gute Plugins für den Wartungsmodus

Sicherlich gibt es sehr viele gute Plugins für den manuellen Wartungsmodus. Ich kann jedoch hier nicht alle aufführen und möchte daher nur diejenigen vorstellen, mit denen ich bereits Erfahrungen gesammelt habe. Deshalb kannst du dir sicher sein, dass diese Plugins dann im Fall eines Falles sicher funktionieren und einen guten Job machen.

Dabei ist zu beachten, dass die Oberfläche der Website nur dem eingeloggten Administrator zugänglich ist, alle anderen Besucher sehen die Oberfläche der Wartungsseite.

IgniteUp – Coming Soon and Maintenance Mode

igniteup

IgniteUp ist ein Kombi-Plugin und kann ebenfalls für schicke »Coming Soon«, also »Bald Online« Websites eingesetzt werden. Du kannst zwischen einigen vordefinierten Templates wählen und diese dann auf deine persönlichen Wünsche anpassen. Das Ergebnis auf meinem persönlichen Blog sieht dann so aus:

wartungsmodus-techbrain

  • Entwickler: Ceylon Systems
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: Vor zwei Monaten
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: IgniteUP – mit Demos der Templates
  • Download von WordPress.org

WP Maintenance Mode

wp-maintenance-mode

Auch hier bekommst du eine stark anpassbare Seite für den Wartungsmodus an die Hand. WP Maintenance Mode funktioniert jedoch nicht über vordefinierte Templates, sondern über eine Oberfläche, die selbst mit etwas Aufwand schick gemacht werden muss. Dafür hast du dabei jedoch mehr gestalterische Möglichkeiten.

Screenshot

  • Entwickler: Designmodo
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 20.06.2016
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht vorhanden
  • Download von WordPress.org

Fazit

Der Wartungsmodus ist eine sehr wichtige Sache und sollte bei jeder Arbeit an der Website benutzt werden. Ansonsten könnte es sein, dass man seine Besucher schnell verärgert, und genau das möchte man ja vermeiden. Wie du den Wartungsmodus aktivierst, ob nun einfach per Snippet oder mit einem Plugin, das bleibt dir überlassen.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress-Sicherheit: Diese wp-config.php schützt deine Website

Die meisten Menschen denken, dass ihre WordPress-Website sicher wäre, weil sie keine Inhalte bereitstellt, die es sich zu hacken lohnen würde. Doch das ist leider nicht richtig. Websites werden oftmals gehackt, um etwa Spam-E-Mails darüber versenden zu können. Oder die Core- und Theme-Dateien werden mit Schadcode gefüllt, um die Rechner deiner Website-Besucher zu verseuchen und zu hacken. Es besteht durchaus die Möglichkeit, dass du den Schaden erst bemerkst, wenn Google dich aus dem Index entfernt hat. Lass es dazu gar nicht erst kommen und beherzige meine heutigen Tipps zur wp-config.php.

Optimiere die wp-config.php für mehr WordPress-Sicherheit

Es existieren viele Möglichkeiten, seine auf WordPress basierende Website davor zu schützen, gehackt zu werden. Als einen wichtigen Teil einer vernünftigen Sicherheitsstrategie kann die Optimierung der wp-config.php Datei angesehen werden. Natürlich ist die Website im Anschluss nicht die Bank von England, jedoch hat man es den Hackern wieder ein wenig erschwert.

Um die wp-config.php zu optimieren, werden sogenannte Konstanten genutzt. WordPress verfügt über sehr viele Konstanten, die genutzt werden können. Doch was ist eigentlich eine Konstante? PHP.net beschreibt die Konstanten folgendermaßen:

Eine Konstante ist ein Bezeichner (Name) für einen einfachen Wert. Wie der Name bereits nahelegt, kann der Wert einer Konstanten zur Laufzeit des Skripts nicht verändert werden (ausgenommen die Magischen Konstanten, die aber keine wirklichen Konstanten sind.) Eine Konstante unterscheidet standardmäßig zwischen Groß- und Kleinschreinbung (case-sensitive). Nach gängiger Konvention werden Konstanten immer in Großbuchstaben geschrieben.

Konstanten sind in die define() Funktion eingebettet und sehen so aus: define('NAME_DER_KONSTANTE', value);

Die wp-config.php ist die Steuerungsdatei für WordPress. Sie wird vor allen anderen Dateien geladen, allein schon deshalb, weil WordPress eine Datenbankverbindung herstellen muss. Die dazu nötigen Angaben finden sich in der Config-Datei. Wenn du den Wert einer Konstante änderst, eine Konstante hinzufügst oder ihren Wert änderst, dann änderst du auch das Verhalten von WordPress.

Vor der Arbeit: Bitte ein Backup anfertigen

Erstens: Fertige vor der Bearbeitung der wp-config.php ein Backup dieser Datei an. Mit falschen oder fehlenden Einträgen wird deine Website nicht mehr funktionieren.

Zweitens: Bitte füge alle benutzerdefinierten Angaben über dem im folgenden Screenshot markierten Bereich ein.

Füge alle selbstdefinierten Konstanten oberhalb dieses Bereichs ein.
Füge alle selbstdefinierten Konstanten oberhalb dieses Bereichs ein.

Wichtig: WordPress und Plugins immer sofort updaten

Du wirst es schon öfter gehört haben. Doch gerade dieser Punkt ist so wichtig, dass man ihn nicht oft genug wiederholen kann. Immer und immer wieder werden Websites gehackt, weil WordPress oder die Plugins nicht auf dem neuesten Stand waren. Updates sind die beste Versicherung gegen Hacking!

Die aktuelle Sicherheitslage:

Die Sicherheitsspezialisten Sucuri warnen gerade vor einer Sicherheitslücke im beliebten Jetpack-Plugin für WordPress. Über die Shortcode-Embed-Funktion kann schadhafter Code eingefügt werden. Automattic wird sicherlich zeitnah reagieren und eine neue Version herausbringen.

So ist die Sicherheitslücke vorerst zu schließen:

Solltest du meine »optimale .htaccess«-Datei verwenden, dann droht dir keine Gefahr. Dort wird die berühmte 6G-Firewall verwendet, die solche Angriffe abzuwehren vermag.

Die Vorbereitung:

Für alle nun folgenden Arbeiten benötigst du ein FTP-Programm und einen HTML-Editor. Die wp-config.php wird auf den Desktop heruntergeladen, im HTML-Editor bearbeitet und im Anschluss wieder auf den Server geladen.

1 – Nutze die Sicherheitsschlüssel

Die Sicherheitsschlüssel in WordPress verschlüsseln zum Beispiel die Anmeldeinformationen in Cookies und sind daher extrem wichtig. Auch wenn deine wp-config.php bereits über eingetragene Sicherheitsschlüssel verfügt, so kann es nicht schaden, sie noch einmal zu ändern. Wenn die Schlüssel abgeändert werden, werden alle noch offenen Anmeldungen deiner Benutzer abgemeldet. Im Anschluss kannst du dich wieder ganz normal mit deinem Benutzernamen und dem vergebenen Passwort anmelden.

Solltest du jedoch bereits gehackt worden sein, dann solltest du zuerst deine Website vom Schadcode bereinigen. Eine entsprechende Anleitung findest du in den weiterführenden Informationen zu diesem Punkt. Danach besuchst du den WordPress Generator für die Sicherheitsschlüssel und kopierst dir einen neuen Satz. Ersetze den alten Teil mit dem Neuen – siehe Screenshot:

Die Sicherheitsschlüssel in der wp-config.php.
Die Sicherheitsschlüssel in der wp-config.php.

Solltest du noch keine Sicherheitsschlüssel eingefügt haben, dann ist nun der richtige Zeitpunkt, um es zu tun.

Weiterführende Informationen:

2 – Erzwinge die Verwendung von HTTPS

Ein SSL-Zertifikat verschlüsselt die Verbindung zwischen deiner Website und dem Browser deines Besuchers. Mit HTTPS wird es den Hackern unmöglich gemacht, persönliche Daten abzufangen und zu stehlen. Wenn du bereits ein SSL-Zertifikat für deine Website besitzt, dann kannst du die Nutzung von HTTPS anstatt HTTP forcieren, also deine Website zwingen, es auch zu nutzen. Das steigert die Sicherheit deiner Website sehr. Solltest du bislang über kein SSL-Zertifikat verfügen, dann denke eingehend darüber nach, eines zu nutzen.

Vor großartigen Kosten musst Du keine Angst haben, SSL gibt es mittlerweile auch kostenlos. Wir hatten bereits darüber geschrieben.

Die folgenden Einträge solltest du verwenden, wenn deine Website bereits SSL verwendet. Der oberste Eintrag ist für das geschützte Einloggen gedacht, der untere Teil zwingt den Browser, auch den Adminbereich von WordPress nur mit SSL nutzbar zu machen.

3 – Ändere das Datenbank-Präfix

Das Datenbankpräfix ist auch unter der Bezeichnung Tabellenpräfix bekannt. Dieses Präfix wird als Ergänzung vor jede von WordPress generierte Datenbank-Tabelle gesetzt. Der Standard ist hierbei wp_. Dieser Standard sollte in irgend etwas anderes abgeändert werden. Je kryptischer der Wert, umso besser. Keine Angst, du musst dir nicht merken, was du hier vergibst. Dieser Wert wird nur ein einziges Mal gesetzt.

Genau betrachtet ist die Möglichkeit einer SQL-Injektion nicht sehr wahrscheinlich. Doch sie ist möglich. Daher ändere den Wert ab, bevor du WordPress installierst. Nutze zum Beispiel etwas wie hdr7rf_.

Achtung: Solltest du den Wert bei einer bereits bestehenden WordPress-Installation ändern, dann ist die Website nicht mehr zugänglich!

Wenn du das Tabellenpräfix bei einer bestehenden WordPress-Website ändern möchtest, dann kann dir das Plugin Acunetix WP Security helfen. Damit kannst du den Wert problemlos ändern und musst dich im Anschluss nur neu einloggen. Trotzdem solltest du vorher ein Backup machen.

4 – Schalte den Plugin- und Theme-Editor ab

In jeder WordPress-Installation kann man Theme- und Plugin-Dateien direkt im Adminbereich bearbeiten. Unter den Menüpunkten »Design« und »Plugins« findet man auch jeweils den Editor für die betreffenden Dateien. Dieser Editor ist sehr gefährlich, wenn er in die Hände eines Hackers gerät. Dateien könnten zerstört und Viren, Trojaner, Spam und andere Malware könnten hinzugefügt werden. Doch auch für dich als Administrator deiner Website ist der Editor gefährlich. Ein einziger Fehler, ein einziges vergessenes Semikolon kann bereits die berühmten weißen Seiten anzeigen und dann geht nichts mehr.

Änderungen an Theme- oder Plugin-Dateien werden grundsätzlich nur über (S)FTP gemacht, das ist wesentlich sicherer. Also müssen die Editoren abgeschaltet werden. Eine einzige Zeile in der wp-config.php schaltet beide Editoren sicher ab:

5 – Verschiebe die wp-config.php

Die wp-config.php ist das Herz deiner Website. Alle relevanten Daten inklusive den Passwörtern für die Datenbank sind dort eingetragen. Daher ist es sehr wichtig, diese Datei so sicher wie möglich zu halten. Hierzu gibt es zwei Ansätze. Der erste Ansatz ist eine Zugriffssperre über die .htaccess-Datei. Der zweite Ansatz verschiebt die Datei an einen anderen Ort, unter dem ein Hacker sie nicht vermuten würde.

  • Problematisch wird es mit dem Verschieben, wenn sich die Website in einem Unterverzeichnis befindet und du ein günstiges Shared-Hosting nutzt.
  • Ebenfalls schwierig werden kann das Verschieben, wenn du sehr viele Websites in eigenen Verzeichnissen hast. Treffen beide Konstellationen nicht auf dich zu, dann kannst du die Datei verschieben.

Wenn du den Pfad zur wp-config.php korrekt angepasst hast, dann sollte deine Website anschliessend funktionieren.

6 – Erzwinge die Nutzung von FTPS

Wenn dein Webhoster das File Transfer Protocol Secure (FTPS) aktiviert hat, dann kannst du die Verwendung von FTPS zur Übertragung von Dateien erzwingen. Das verschlüsselt dann die Verbindung zwischen dem Benutzer und deinem Server. Es ist nun nicht mehr möglich, mit dem unsicheren FTP-Protokoll auf die Daten auf dem Server zuzugreifen. FTP ist unsicher, weil die Zugangsdaten unverschlüsselt und im Klartext an deinen Server übertragen werden. Daher nutze – wenn möglich – nur die sichere Verbindung über FTPS. Dein Webhoster kann dir beantworten, ob eine FTPS-Verbindung möglich ist.

So einfach kannst du die Nutzung von FTPS erzwingen:

Weiterführende Informationen:

Wikipedia: FTP über SSL

7 – Erzwinge die Nutzung von SFTP

Manche Hoster haben anstatt des FTPS-Protokolls das SFTP-Protokoll zur Datenübertragung aktiviert. Auch hier findet eine verschlüsselte Verbindung zwischen dem FTP-Programm des Users und dem Server statt. Mit der folgenden Code-Zeile kann die Nutzung von SFTP erzwungen werden:

Weiterführende Informationen:

Wikipedia: SSH File Transfer Protocol

8 – Den Debug-Modus ausschalten

Solltest du für Entwicklungszwecke den Debug-Modus von WordPress eingeschaltet haben, dann ist es sehr wichtig, ihn wieder abzuschalten. Denn unter Umständen werden mit aktiviertem Debug-Modus sensible Daten weitergegeben, die Hackern bei ihrer Arbeit helfen können. Auf einem Live-System ist ein aktivierter Debug-Modus daher extrem gefährlich. Auch ich habe diesen kleinen und dummen Fehler bereits begangen, der Mensch vergisst zu leicht. Daher solltest du noch mal einen kurzen Kontrollblick darauf werfen. Ausgeschaltet wird der Fehlermodus wie folgt:

9 – Schalte die Anzeige von PHP-Fehlern aus

Solltest du aus irgendeinem Grund den Debug-Modus von WordPress dringend aktiviert benötigen, dann empfehle ich dir, die öffentliche Ausgabe der Fehlermeldungen auszuschalten. Die für dich wichtigen Fehlermeldungen können auch in ein nicht öffentlich zugängliches Log geschrieben werden. Das wäre die wesentlich sichere und elegante Möglichkeit. Um den Fehler-Modus von WordPress aktiviert zu lassen und einfach nur die öffentlich sichtbare Fehlerausgabe zu unterdrücken, benötigst du diese Konstante:

10 – Schalte die automatischen Updates ein

Wie ich bereits weiter oben im Beitrag erwähnte, ist das sofortige Updaten des WordPress-Kerns und aller Plugins sehr wichtig für die Sicherheit des Systems. Bei jedem Release einer neuen WordPress-Version werden auch die Sicherheitslücken in der jeweils vorangegangenen Version öffentlich. Das verschafft einem Hacker eine solide Grundlage, um deine Website hacken zu können. Ergo sollten diese Schwachstellen so schnell wie nur möglich behoben werden.

Seit der WordPress-Version 3.7 werden kleinere Sicherheitsupdates automatisch durchgeführt. Dieses gilt allerdings nicht für Hauptversionen von Core-Updates. Hauptversionen müssen immer noch händisch aktualisiert werden. Doch man kann die automatischen Updates für alle Versionen von WP ganz leicht einschalten:

Es ist übrigens auch möglich, die Plugins automatisch updaten zu lassen. Das ist jedoch mit etwas mehr Arbeit verbunden. Es erfordert die Erstellung eines Plugins:

Dieses Plugin muss in den Ordner /wp-content/mu-plugins/ verschoben werden. Sollte der Ordner nicht existieren, dann lege ihn einfach an. Der Ordner /mu-plugins/ beinhaltet die »must use« Plugins. Sein Inhalt wird vor allen anderen Plugins geladen.

Übrigens kann man auf die gleiche Art auch die Themes automatisch updaten lassen. Dazu muss das Plugin um die folgende Zeile ergänzt werden:

Bitte informiert euch vorher im Codex über diese automatischen Plugins und nutzt den Code nur, wenn ihr genau wisst, was ihr tut. Es versteht sich von selbst, dass die beiden Filter nur Plugins und Themes auf dem neuesten Stand halten können, die auch aus dem offiziellen Verzeichnis von WordPress stammen. Es werden keine Themes und Plugins aktualisiert, die du aus einer anderen Quelle bezogen hast.

Weiterführende Informationen:

WordPress Codex: Must Use Plugins

Fazit

All diese Punkte zusammengenommen steigern die Sicherheit deines WordPress bereits sehr und sollten ein Teil einer guten Sicherheitsstrategie sein. Denn der Umstand, dass WordPress das beliebteste Content Management System der Welt ist, zieht natürlich auch Hacker an. Die Situation ist durchaus vergleichbar mit dem PC-Betriebssystem Windows. Unter Windows installiert man eine Antiviren-Software, unter WordPress ist zumeist Handarbeit angesagt. Doch der Zugewinn an Sicherheit rechtfertigt diesen kleinen Arbeitsaufwand.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

High Speed: Was WordPress-Websites wirklich schnell macht [#5]

In dieser kleinen Serie beschäftigen wir uns mit den Dingen, die WordPress-Websites wirklich schnell machen, also in den Millisekunden-Bereich der Ladegeschwindigkeit bringen. Viel Handarbeit ist angesagt, wie wir im letzten Beitrag herausgefunden haben. Im diesem letzten Teil beschäftigen wir uns mit den Nacharbeiten, die noch bleiben. Wir tunen die URLs, verschaffen Jetpack eine Schlankheitskur, wandeln die Website mit Caching in statische HTML-Seiten um und lassen Videos defer (= zuletzt) laden.

Was WordPress-Websites wirklich schnell macht [#5]

Performance durch die richtige Permalinkstruktur

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

https://www.drweb.de/?p=123

Diese Struktur ist für Mensch und Maschine nicht sehr gut lesbar, deshalb ging man dazu über, lesbare Permalinks mit Keywords zu verwenden.

https://www.drweb.de/beispiel-beitrag/

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

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

Google legt kaum noch Wert auf die sprechenden URLs

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

Permalinks auf einfache IDs umstellen

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

http://andreas-hecht.com/466/

Der folgende Screenshot verdeutlicht die nötigen Einstellungen:

WordPress-Websites wirklich schnell

Videos Defer laden lassen

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

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

Teil 1: Die PHP-Funktion

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

Teil 2: Der JavaScript-Code

Ein Klick öffnet das Gist bei GitHub
WordPress-Websites wirklich schnell - Defer Videos Teil 2

Der zweite Teil des Codes wird nur auf der Seite eines einzelnen Beitrags geladen. Wer Videos auch auf Seiten oder der Homepage verwendet, muss das Snippet noch auf die eigenen Bedürfnisse anpassen.

Caching: Blog auf statische HTML-Seiten umstellen

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

Vorteil:

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

Nachteil:

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

Lösung:

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

Statische HTML-Seiten mit dem Plugin Cachify erzeugen

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

Cachify Download von WordPress.org

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

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

Die nötigen Einstellungen des Cachify-Plugins

WordPress-Websites wirklich schnell

Die Schlankheitskur für Jetpack

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

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

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

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

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

WordPress-Websites wirklich schnell

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

WordPress-Websites wirklich schnell - Module Control

Download Module Control for Jetpack

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

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

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

Das Endergebnis: Eine wirklich schnelle Website

Der erste Durchgang mit den Pingdom Tools

WordPress-Websites wirklich schnell - Pingdom 1

Der zweite Durchgang mit den Pingdom Tools

WordPress-Websites wirklich schnell - Pingdom 2

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

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

WordPress-Websites wirklich schnell: die Serie

Links zum Beitrag:

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

High Speed: Was WordPress-Websites wirklich schnell macht [#4]

In unserer kleinen Serie beschäftigen wir uns mit den Dingen, die WordPress-Websites wirklich schnell machen. Google Page Speed Insights interessiert uns hierbei nicht, es geht ausschließlich um Geschwindigkeit. Wir wollen mit unserer Website in den Millisekunden-Bereich vordringen. Die Basis dafür haben wir im ersten, im zweiten und dritten Teil gelegt. Heute beschäftigen wir uns mit der Auslieferung von CSS- und JavaScript-Dateien.

WordPress-Websites wirklich schnell

CSS und JavaScript sind maßgeblich am Speed beteiligt

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

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

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

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

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

Wo werden welche Dateien geladen?

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

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

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

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

CSS und JavaScript – Teil 1: Query-Strings entfernen

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

http://server.example/wp-content/themes/hemingway/style.css?ver=4.1

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

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

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

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

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

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

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

WordPress-Websites wirklich schnell

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

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

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

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

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

Wofür man Dateiversionen benötigt

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

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

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

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

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

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

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

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

Teil 3: Alle CSS-Dateien händisch komprimieren

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

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

<link rel="stylesheet" href="<?=auto_version('/path/to/style.css')?>" />

Der richtige Pfad könnte zum Beispiel so aussehen:

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

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

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

Style.css

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

Alle anderen CSS-Dateien

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

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

Die Steuerung der Dateien, also wo genau was geladen wird, erfolgt über die Tags is_single und is_page. Unter Umständen kann man beide Tags auch kombinieren, wie bei mir im oberen Bereich erfolgt. Die oberen drei Dateien werden auf einzelnen Beiträgen und auf einer Seite geladen. Der grundsätzliche Aufbau sieht dabei so aus:

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

Der Screenshot zeigt deutlich, dass die betreffende CSS-Datei nur auf dem Beitrag mit der ID 4368 eingebunden wird, überall woanders wird die Datei nicht geladen.

WordPress Codex: Conditional Tags richtig verwenden

Die Behandlung von JavaScript

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

Ein Screenshot:

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

JavaScript bündeln und komprimieren mit Autoptimize

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

WordPress-Websites wirklich schnell

Fazit

Wer bisher am Ball geblieben ist, hat bereits jetzt seine WordPress-Websites wirklich schnell gemacht. Jedoch haben wir ebenfalls feststellen müssen, dass eine wirklich schnell ladende Website sehr viel Handarbeit erfordert. Vielleicht mag es die eine oder andere Lösung noch etwas intelligenter und komfortabler geben, jedoch gibt es immer Verbesserungsmöglichkeiten. Auf jeden Fall wird das CSS jetzt optimal von den Browsern gecached und daher nur beim ersten Seitenaufruf geladen. Jeder weitere Seitenaufruf wird bedeutend schneller sein.

Im nächsten und letzten Teil beschäftigen wir uns mit einigen kleineren Aufgaben, die noch abzuarbeiten sind. Unter anderem wird es auch darum gehen, wie man dem beliebten Jetpack-Plugin Beine macht. Denn je nachdem, welche Funktionen von JetPack genutzt werden, kann es durchaus auch blitzschnell sein und die Website nicht verlangsamen. Doch das erfordert einige Eingriffe.

WordPress-Websites wirklich schnell: die Serie

Links zum Artikel:

(dpe)

Kategorien
Tipps, Tricks & Tutorials Webdesign WordPress

High Speed: Was WordPress-Websites wirklich schnell macht – [#3]

In dieser Serie beschäftigen wir uns mit den Dingen, die eine WordPress-Website wirklich schnell machen. Es geht keinesfalls darum, die berühmten 100/100 Punkte bei Google Page Speed zu erreichen, denn oftmals lassen die angesprochenen Punkte viel Potenzial hinter sich. Um genau dieses Potenzial geht es uns. Wir wollen so viel Geschwindigkeit wie nur möglich aus einer Live-Website heraus kitzeln und dabei in den Millisekundenbereich der Ladezeit vordringen. Den Grundstock haben wir bereits im ersten und im zweiten Teil gelegt.

High Speed: Was WordPress-Websites wirklich schnell macht – [#3]

WordPress Performance-Fresser abschalten

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

1 – WordPress Heartbeat API

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

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

Ein Klick öffnet das Gist bei Github
heartbeat-abschalten

2 – wp-cron.php abschalten

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

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

wp-cron-weg

Der Umgang mit Website-Logos

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

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

Der base64 Code der Logo-Grafik

Die Optimierung eines Google-Webfonts

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

Google Font auf deinem Server bereithalten

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

google-font

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

Ein Klick öffnet das Gist bei Github
varela-round-font-face

Wenn du das getan hast, dann wird der Font nun von deinem Server geladen und sollte super-schnell ohne Verzögerung angezeigt werden. Zudem wird er nur ein einziges Mal geladen, wenn das CSS ordentlich gecached wird.

Fazit

Wieder haben wir einige nötige Arbeiten auf dem Weg zu einer wirklich schnellen Website erledigt. Du ahnst es sicher schon, dass war noch lange nicht alles. In der nächsten Folge unserer Serie (es werden voraussichtlich fünf Teile) beschäftigen wir uns mit dem arbeitsintensivsten Teil, bei dem auch Fortgeschrittene etwas ins Schwitzen kommen werden: dem optimalen Ausliefern von CSS und JavaScript. Wenn du mit deiner Website in den Millisekundenbereich vordringen willst, dann muss alles stimmen. Besonders dieser Teil. Fast alles wird Handarbeit sein, doch ich versichere dir: es wird sich lohnen!

WordPress-Websites wirklich schnell: die Serie

Quellen:

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

High Speed: Was WordPress-Websites wirklich schnell macht – [#2]

Im ersten Teil unserer Serie haben wir die Wichtigkeit der richtigen Webhosting-Lösung angesprochen. Dabei haben wir Fragen beantwortete wie, welche Vorteile das Hosting auf SSDs bietet und warum es wichtig ist, dass HTTP/2 auf dem Server aktiviert ist. In diesem Teil werden wir uns mit Prefetch und Preconnect ebenso beschäftigen, wie mit der wirkungsvollen Optimierung von Bildern und Grafiken. Denn gerade Bilder bilden den Flaschenhals in einer Performance-Optimierung, an diesem Punkt scheitern die meisten Nutzer und geben letztendlich die Optimierung auf, weil sie nicht weiter wissen. Zudem behandeln wir den sinnvollen Einsatz von Google-Adsense-Anzeigen.

WordPress Performance #2

1 – Prefetch und Preconnect

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

DNS – Prefetch

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

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

Preconnect

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

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

Mein Header sieht daher so aus:

Prefetch und Preconnect

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

2 – Die Bildoptimierung

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

WordPress-Plugin zur Bildoptimierung: Optimus HQ

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

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

Die Optimus HQ Einstellungen

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

WebP-Support mit der .htaccess sicherstellen

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

Ein Klick öffnet das Gist bei GitHub
htaccess-fuer-webp

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

HTML-Quelltext

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

Als WebP an den Browser ausgelieferte Grafik

Hier noch einmal deutlicher zu erkennen:

Die als WebP ausgelieferte JPEG-Datei

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

Das Ergebnis ist überzeugend

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

Browser-Support für WebP-Grafiken

WebP Browser-Support

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

3 – Google Adsense-Anzeigen

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

a – Adsense-Anzeigen haben nichts auf der Startseite zu suchen!

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

b – Google Adsense nur im Inhalt der Artikel einbinden

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

c – WordPress Funktion zum automatischen Einbau der Anzeigen

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

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

High Speed: Fazit des zweiten Teils

Mit den heutigen Modifizierungen haben wir bereits sehr viel Geschwindigkeit gewonnen und die größten Flaschenhälse der Performance-Optimierung geschlossen. Grafik- und Anzeigen-Optimierung bringt eine Menge Speed ein, den Google mit einer besseren Platzierung deiner Website in den Suchergebnissen honorieren wird.

WordPress-Websites wirklich schnell: die Serie

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

High Speed: Was WordPress-Websites wirklich schnell macht – [#1]

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. Deshalb beschäftigen wir uns in dieser kleinen Serie nicht mit den 100 von 100 Punkten bei Google Page Speed, sondern mit der Frage, wie man Websites so richtig schnell macht.

High Speed: Was WordPress-Websites wirklich schnell macht - [#1]

Websites rasend schnell machen

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

Erster Test:

Der erste Test

Zweiter Test:

Der zweite Test

Warum wir Google Page Speed nicht beachten

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

High Speed Tipp #1 – Die Wahl des richtigen Hosters

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

Managed WordPress Hosting

Raidboxes - Premium WordPress Hosting aus Deutschland

Raidboxes bietet Premium WordPress-Hosting aus Deutschland. Das Hosting ist ein Managed WordPress-Hosting. Das bedeutet, dass du dich um nichts kümmern musst. Ab dem Paket „Starter“ ist ein eigener virtueller Server inklusive, den du dir mit niemandem teilen musst. Wichtig bei der Auswahl des richtigen Hosters ist, ob dieser die Websites auf SSDs oder normalen HDDs speichert. Deine Wahl für mehr Geschwindigkeit muss zwingend immer SSD sein. Raidboxes bietet dir grundsätzlich nur SSDs an. Das „Starter Paket“ kostet monatlich 17,85 Euro inklusive MwSt. Dafür bekommst du zusätzlich einen guten Support, der sogar deine Website für dich kostenlos umzieht. Du kannst das Managed WordPress Hosting bei Raidboxes 14 Tage kostenlos testen. Diese Art des Hosting ist richtig für dich, wenn du wenig Ahnung von Server-Konfiguration hast.

Managed-Root Cloud Server von hostNET

Managed-Root-Cloud Server von hostNET

Der Managed-Root Cloud Server der deutschen Firma hostNET ist meine Wahl. Alles was die Sicherheit und grundsätzliche Konfiguration des Servers angeht, wird durch hostNET erledigt. Wenn jedoch zusätzliche Dinge installiert werden müssen, musst du das selbst erledigen. Der Root-Cloud Server stellt dir eine SSD zur Verfügung, die in einem RAID5 System mit Hot-Spare und zusätzlichem HA-Failover-Cluster abgebildet werden. Das schafft einen richtigen Performance-Schub. Zusätzlich – als kleinen Service – bekommst du noch eine eigene IP-Adresse dazu. Das wirklich Interessante an dieser Hosting-Möglichkeit ist jedoch, dass sie mit deiner Website und den Anforderungen mit wächst. Denn du kannst den Speicherplatz, die CPU-Anzahl und den Arbeitsspeicher jederzeit selbst erhöhen und auch wieder verringern, wenn es nötig wird. Abgerechnet wird sekundengenau. Der Root-Cloud Server kostet ab 14,88 Euro inklusive MwSt. im Monat. Sieben Tage lang kann der Server kostenfrei getestet werden. Wir haben den Service bei Dr. Web schon ausführlicher vorgestellt.

High Speed Tipp #2 – Auf HTTP/2 bei der Hosterwahl achten

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

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

High Speed Tipp #3 – Die Plugins ausmisten

Plugin Performance Profiler Ergebnis

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

Den Quellcode deiner Website prüfen

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

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

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

High Speed Tipp #5 – Den Header von WordPress ausmisten

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

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

Fazit des ersten Teils

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

WordPress-Websites wirklich schnell: die Serie

Links zum Beitrag:

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress 4.4 entschlacken: Weg mit Embeds und Responsive Images

Neue WordPress-Versionen bringen neue Funktionen mit sich. Auch WordPress 4.4 hat uns wieder mit einigen neuen Funktionen überrascht, die viele Nutzer absolut nicht benötigen. Doch das Team um Matthew Mullenweg nimmt den Usern die Entscheidung ab, ob neue Funktionen genutzt werden möchten oder nicht. Verwendest du WordPress, verwendest du automatisch alle neuen Features. Die wichtigsten Neuerungen in WordPress 4.4 sind Embeds und Responsive Images. In diesem Beitrag erkläre ich dir, warum beides für die meisten Nutzer unnötig ist, und wie man es abschaltet.

WordPress 4.4 entschlacken: Weg mit Embeds und Responsive Images

WordPress Embeds und warum man sie abschalten sollte

WordPress Embeds sorgen dafür, dass du jeden WordPress-Artikel eines anderen Blogs ganz einfach in deine Beiträge einbetten kannst. Du musst nur die URL des betreffenden Beitrags in deinen Artikel eingeben, und schon wird dieser Beitrag in deinen Artikel eingebettet. Sichtbar wird nicht der komplette Artikel, sondern nur ein längerer Anreißer.

Problematisch hierbei sind mehrere Dinge: erstens sind die Embeds technisch nichts weiter als ein iFrame. Bei jedem Aufruf des Embeds wird also Last auf deinem Server erzeugt, was mitunter sehr auf die Performance drücken kann. Zweitens existiert kein echter Backlink. Das ist schon aus Sicht der Suchmaschinenoptimierung problematisch. Zudem kann das Feature auch dazu genutzt werden, einen Server anzugreifen und lahmzulegen. Außerdem kann man durch diese Vorgehensweise leicht mit dem Leistungsschutzrecht in Konflikt geraten, weshalb ich Embeds ganz generell nie verwenden würde, es sei denn für eigene Artikel.

Disable Embeds Plugin

Es kann daher nur von Vorteil sein, wenn man die WordPress-Embeds völlig abschaltet. Dies betrifft natürlich lediglich die Funktion des Einbettens von Artikeln, und nicht die anderen Features für Videos oder ähnliches. Das Plugin Disable Embeds erledigt den Job des Abschaltens der Funktion problemlos.

Disable Embeds Plugin

  • Entwickler: Pascal Birchler
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: Vor drei Monaten
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

WordPress 4.4: das neue Responsive Image Feature

Die Idee hinter dieser Funktion ist grundsätzlich nicht schlecht gedacht. Es sollen alle verfügbaren Bildergrößen parat gehalten werden, um diese dann nach Bedarf an die unterschiedlichen Auflösungen der Endgeräte auszuliefern. Smartphones bekommen kleinere Bilder ausgeliefert und die Desktop-Geräte die größeren. Doch leider funktioniert das nicht mit allen Auflösungen.

Ein Klick vergrößert die Auflösung der Grafik
Der Code für die responsiven Images

Zudem bläht es den HTML-Quellcode der Website ziemlich auf und kann auch keine nachlässig entwickelten responsiven Websites verbessern. Denn gerade eine mobile Ansicht stellt den Entwickler vor größere Probleme, wenn diese schnell ausgeliefert werden soll. Somit ist diese Funktion für viele Blogs völlig unnötig und sollte daher auch abgeschaltet werden.

Responsive Images abschalten

Mit nur wenig Code ist das zu erledigen. Das folgende Code-Snippet sollte entweder in die functions.php des aktiven WordPress-Themes oder in das seitenspezifische Plugin der Website kopiert werden.

Ein Klick öffnet das Gist bei GitHub
Disbale Responsive Images WordPress

Im Anschluss sollte auch bei dir wieder alles beim Alten sein und nichts mehr auf die neue Funktion hindeuten.

alter-quellcode

Fazit

Viele Funktionen von WordPress erleichtern das Leben im alltäglichen Umgang mit der Software. Allerdings existieren auch Funktionen, die man einfach so hinnehmen muss, ohne sie beeinflussen zu können – schlimmer noch, ohne zu wissen, dass es sie gibt. Das kann nicht der richtige Weg sein. Neue Funktionen im WordPress-Core sollten generell modular abschaltbar sein, so wie es beim Vorzeige-Plugin von Automattic, Jetpack, möglich ist. Denn weniger ist oftmals mehr.

Quelle: WordPress 4.4 entschlacken

(dpe)