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)

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und schreibt seit 2012 für Dr. Web. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress. Auf seinem Blog TechBrain.de schreibt er über das Schreiben und Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Klaus Kreutz
Gast
Klaus Kreutz
6 Monate 7 Tage her

Hallo,

interessanter zweiter Teil der Serie. Ich frage mich, ob Optimus HQ wirklich die beste Lösung ist. Die ersten Versuche mit imagify waren sehr überzeugend. Man hat hier tatsächlich auch die Möglichkeit, aggressiv zu optimieren und die Originale zur Not auch wieder vom Server zu holen.

VG
KK

Franz Meyer
Gast
Franz Meyer
6 Monate 6 Tage her

Danke für diesen Artikel! Ein paar Dinge waren für mich vollkommen neu.

Markus
Gast
6 Monate 6 Tage her

Hallo Andreas,
Was sagst du zu der Idee die Bilder lieber per jquery lazyload zu laden.
Da WebP noch nicht vollständig unterstützt wird, würde ich eher noch bei JPG bleiben.

Alternativ könnte man auch über responsiv Images nachdenken so wie es in Contao gelöst wird.
https://contao.org/de/funktionen.html

LG

Markus

Franz Meyer
Gast
Franz Meyer
6 Monate 4 Tage her

Welches Dateiformat ist für Bilder auf einer Webseite das Beste, wenn man eine geringe Dateigröße bei trotzdem sehr guter Qualität haben möchte?
WEBP oder JPEG 2000 oder JPEG XR ?

Marcus
Gast
4 Monate 15 Tage her

Wie muss ich denn das Snippet für die webp-Unterstützung anpassen, wenn die Bilder auf einer Subdomaon liegen?

wpDiscuz