Responsive Images in WordPress 4.4

WordPress 4.4 führt Responsive Images ein.

Responsive Images im Responsive-Web-Design

Responsive Images zur Suchmaschinenoptimierung?

Oft wird ja die Frage gestellt, ob ein regelmäßiges Update von WordPress und Plugins wirklich notwendig sei. Einerseits heißt es „Never change a running system“ und andererseits bringen neue Versionen so feine Dinge wie Responsive Images.

Was ist der Unterschied von Responsive Images zu Responsive Design? Während Responsive Design die Anordnung von (block level) Elementen auf dem entsprechenden Gerät regelt, weisen responsive Bilder den Browser an, die jeweils passendste Größe eines Bildes zu laden.

Der Vorteil liegt auf der Hand – kleinere Bilder werden schneller geladen was die Suchmaschinen freut und somit der Suchmaschinenoptimierung (SEO) dient.

Zuvor wurde ein Bild, das in der Desktopversion z. B. über die ganze Seite ging, auf einem Smartphone lediglich mithilfe des responsive Designs verkleinert (zuvor aber in der vollen Größe). Da aber WordPress in der Regel Bilder in den Größen Vorschaubild, Mittel, Groß und vollständige Größe anlegt (manche Themes und Plugins auch noch weitere Größen), können auf den kleinen Handybildschirmen die kleineren Formate der Bilder geladen werden.

Wie macht WordPress das?

Gottseidank automatisch mit den HTML Attributen srcset und sizes des <IMG>-Tags.

<img class="alignnone wp-image-1910 size-large"
src="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg" alt="Responsive Images im Responsive-Web-Design" width="650" height="397" srcset="http://domain.com/wp-content/uploads/2016/05/Bild-650x397.jpg 650w, http://domain.com/wp-content/uploads/2016/05/Bild-300x183.jpg 300w, http://domain.com/wp-content/uploads/2016/05/Bild.jpg 900w" sizes="(max-width: 650px) 100vw, 650px">

In srcset sind drei Bilder mit den Größen (eigentlich Breiten = width) 650w, 300w und 900w hinterlegt.

In sizes= wird angegeben, dass bis zu einer maximalen Breite des Browserfensters von 650 Pixel (max-width: 650px) das Bild in 100% Breite angezeigt wird (100vw = 100% der Viewport Width = Breite des Browserfensters). In allen anderen Fällen wird eine Breite von 650 Pixel verwendet.

Responsive Bilder in eigenen Plugins

Die Automatik von WordPress, die Bilder responsive macht greift allerdings nicht, wenn eigene Plugins den Content mit get_the_content() aus der Datenbank abfragen.

Hie muss zusätzlich die Funktion wp_make_content_images_responsive() auf den Content angewendet werden.

$content=get_the_content(); $content=wp_make_content_images_responsive(do_shortcode($content));

Geschwindigkeit in WordPress mit W3 Total Cache

W3 steht zwar nicht unbedingt für Warp Geschwindigkeit, aber eine WordPress-Installation um den Faktor 3 zu beschleunigen ist schon möglich. Eine schnelle Website wird in einer schnelllebigen Zeit immer wichtiger, wenn man nur einen Mausklick oder Fingertip von der nächsten (womöglich schnelleren) Seite entfernt ist.

Geschwindigkeit durch WordPress PluginDadurch, dass die Seite nicht jedesmal neu am Webserver „zusammengebaut“ werden muss, sondern fix fertig aus dem Cache kommt, ist die Zeit für das sogenannte First Byte natürlich wesentlich und spürbar kürzer. Da macht das Surfen dann auch wieder Spaß, wenn auch die Gesamtladezeit der Seite nicht durch das Caching verkürzt wird. Es müssen immerhin noch genau so viele Bytes vom Server übertragen werden.

Was aber die Geschwindigkeit erhöht ist das sogenannte Minify, bei dem Leerzeichen, Tabulatoren, Absätze u. dgl. aus dem Quelltext von HTML-, CSS- und Javascript-Dateien entfernt wird.

Geschwindigkeit für Kundenwebsite

Für ein Kundenprojekt habe ich mal die Vorher-Nachher-Werte protokoliert und der Unterschied ist gewaltig. Nicht nur, dass die Seite gefühlt wesentlich schneller ist, der Geschwindigkeitsvorteil macht sich auch bei der Bewertung du Googles PageSpeed Insight deutlich bemerkbar. Die Tools zur Geschwindigkeitsmessung sind auf einer eigenen Seite beschrieben.

Also zunächst das Plugin installieren und dann aktivieren und zu den Einstellungen wechseln. Die sind in der Auswahlleiste ganz links unter Performance zu finden.

Das hat sich bislang bewährt (nur die Änderung zur Standardeinstellung sind angeführt):

General Settings

  • Page Cache Enable
  • Minify Enable, Minify Mode Manual (Auto bringt eine Fehlermeldung auf meinem Server)
  • Database Cache Enable
    Wenn Woocommerce verwendet wird _wc_session_ unter Database Cache Ingnored Query Strings hinzufügen
  • Object Cache Enable
  • Browser Cache Enable

Minify

Wird das Sucuri Security Plugin verwendet, muss die now.php von W§ Total Cache im Plugins-Verzeichnis (wp-content) auf die Whitelist Blockes PHP Files gesetzt werden.

  • Disable minify for logged in users … sonst wird das Debugging schwierig (optional)
  • Minify error notification: Admin Notification kann hier nützlich sein
  • HTML minify settings: Enable, Inline CSS minification, Inline JS minification, Line break removal
  • JS minify settings: Enable, Embed type: Non-blocking using „async“, Preserved comment removal, Line break removal

    Wenn MinifyMode Manual dann müssen hier alle Javascripts eingetragen werden. Die jqery.js, die Javascripts von

    • Awsome Responsive Menu,
    • Background Manager,
    • T(-) Countdown und
    • Wp Lightbox Bank Plugin

      können z. Zt. nicht erfolgreich minified (bzw. in den Fußbereich der Seite gestellt) werden. Um zumindest die Dateigröße zu vermindern, kann der Inhalt der Dateien manuell verkleinert werden. Ein Online-Tool hierzu findet sich unter Online Javascript Compression Tool.

      Die JS’s von Visual Form Builder und MapPress Easy Google Maps Plugin scheinen dankenswerterweise nur auf Seiten auf, auf denen es auch Formulare gibt.

  • CSS minify settings: Enable, Preserved comment removal,  Line break removal, @import handling: Process.

    Auch hier müssen im manuellen Minify Modus die CSS-Dateien eingetragen werden.

    Mit <!– W3TC-include-css –> kann man die zusammengefassten CSS in der footer.php ans Ende stellen (vor </body>). Analog dazu gibt es auch einen Tag für JavaScript: <!– W3TC-include-js-head –>

Database Cache

  • Wenn Woocommerce verwendet wird _wc_session_ unter Database Cache Ignored

Browser Cache

General

  • Set expires header
  • Set cache control header
  • Set entity tag (eTag)

Install

  • WordPress SEO by Yoast Extension aktivieren falls WordPress SEO verwendet wird

Suchmaschinenoptimierung …

… schnell, schneller am schnellsten zur Suchmaschinenoptimierung

Suchmaschinenoptimierung leicht gemachtDie Geschwindigkeit einer Seite wird offenbar zum Thema beim Suchmaschinen-Ranking und somit zur Suchmaschinenoptimierung. Warum? Ganz einfach, kein Besucher mag 4 Sekunden auf den Seitenaufbau einer Seite warten, wenn schnellere Seiten nur einen Mausklick entfernt sind.

PageSpeed Insights

PageSpeed Insights liefert Ranking und Tipps für die Mobil- und die Desktopversion einer Seite. Ab einem Ranking von 85 ist man im grünen Bereich.

Es gibt auch ein Plugin für Chrome, dass dann PageSpeed als Reiter bei den Entwicklertools einfügt.

Test auf Optimierung für Mobilgeräte

Dieser Google Developers Test zeigt eine kurze Übersicht ob eine Site für Mobilgeräte optimiert ist. Allerdings ist das Ergebnis nicht so aufschlussreich wie unter PageSpeed Insights.

YSlow

YSlow gibt es als Plugin für viele Browser (nicht für den Internet Explorer)

GTmetrix

GTmetrix 

WebPagetest

WebPagetest 

Pingdom Tools

Pingdom 

Weiterlesen