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

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

Andreas Hecht

ist freier Journalist, WordPress-Experte und -Entwickler, Spezialist für WordPress-Sicherheit und WordPress Performance....

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.

E-Book WordPress Sicherheit von Andreas Hecht

E-Book: WordPress Sicherheit

Jeden Tag werden Zigtausend WordPress-Websites angegriffen und gehackt. Wahrscheinlich wurde auch deine Website bereits angegriffen. Du kannst es in den Server-Logs sehen. Schütze deine Arbeit und sichere dein WordPress effektiv und nachhaltig ab! [...]

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)

Andreas Hecht

ist freier Journalist, WordPress-Experte und -Entwickler, Spezialist für WordPress-Sicherheit und WordPress Performance. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog schreibt er hauptsächlich über WordPress und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Google Font auf eigenen Server?
Gast

Google Font auf deinem Server bereithalten ????

Meiner Meinung nimmt man so den Browsern die Möglichkeit, auf eine im Cache gespeichert google font zuzugreifen!!!

Andreas Hecht
Gast

Nein, tut man nicht. Im Gegenteil, das Cachen funktioniert so besser. Zudem macht es die Website messbar schneller. Sonst hätte ich es nicht bei meiner Website gemacht und hier darüber geschrieben.

Oguz
Gast

Was noch sehr interessant wäre, wie man ohne Plugin den kompletten connect zu den Google Fonts Server cuttet.

Andreas Hecht
Gast

Das ist doch geschehen, wenn die Fonts auf dem eigenen Server gehostet werden. Der Font wird von dem Google-Server heruntergeladen und dann in den Theme-Ordner verfrachtet.

Andreas
Gast

Gute Tipps, das mit wp-cron wusste ich z.B. noch gar nicht.
Aber ist es nicht besser, das Logo abhängig von der Geräteauflösung auszuliefern, also per media query als background-image oder mit srcset? Dann würde nur das Logo geladen, das auch wirklich gebraucht wird.
Je nach Logo sollte man auch über svg nachdenken. Kann man nach belieben auch inline in den quellcode schreiben oder mit anderen svgs zusammenpacken in eine Datei.

Andreas Hecht
Gast

Das Logo darf ruhig etwas größer sein und für alle Bildschirmauflösungen funktionieren. Die Dateigröße ist im Vergleich zu anderen Dingen echt zu vernachlässigen. Es geht darum, das Logo sofort sichtbar zu machen, auch beim allerersten Laden der Website. Das funktioniert wirklich prächtig.

Daniel
Gast

Hallo Andreas,
danke für die guten Tipps. Da habe ich noch einiges vor mir. Meine Seiten sind speziell für Mobile User recht langsam.
Ist das immer so, das der Wert für Mobile schlechter ist als für Desktop?
VG, Daniel

Andreas Hecht
Gast

Stimmt schon, Mobil ist schwieriger. Ich habe auf meiner Website beobachtet, dass alle Ressourcen im Header geladen wurden, trotz meiner Anstrengungen. Ich musste bei der mobilen Ansicht auch tricksen, damit alle Ressourcen Mobil wie auch Desktop in der gleichen Reihenfolge laden.

wpDiscuz