Unveil für WordPress

Immer mehr Studien zu Performance-Optimierung von Webseiten belegen die Wirksamkeit der sogenannten Lazy Load Technik für Bilder: Der Geschwindigkeitsvorteil einer Webseite ergibt sich durch die reduzierte Menge an geladenen Grafiken. Beim Seitenaufruf werden nicht restlos alle Bilder vom Server angefordert und abgebildet, sondern nur die kleine Auswahl, die sich im Blickwinkel des Betrachters befindet. Bewegt sich der Leser innerhalb der Seite (= scrollt), lädt Unveil.js benötigte Bilder dynamisch nach. Je nach Bildgröße ergibt sich für den Nutzer solch einer Seite nahezu kein visueller Unterschied bzw. bringt keinerlei Nachteile mit sich.

Nach der Inbetriebnahme des WordPress-Plugins laden Blogseiten deutlich schneller, da weniger Bytes durch die Leitung transferiert werden. Auch die Anzahl an parallelen (und beschränkten) Anfragen zum Server reduziert sich und beschleunigt den Ladevorgang zusätzlich. Optimal auch für Mobile-optimierte WordPress-Projekte.

Video

Darstellung der Funktionsweise des Plugins auf YouTube. Beim Scrollen der Webseite (Fenster oben) werden Bilder automatisch geladen. Im unteren Fenster (Entwickler-Tools) werden entsprechend stattgefundene Requests abgebildet.

Messwerte

Nachfolgende Vergleichswerte verdeutlichen den erzeugten Performance-Gewinn: Eine Beispielsseite mit aktivem Unvail für WordPress ist fast doppelt so klein (376 KB vs. 663 KB) und lädt deutlich schneller (1.05 Sekunden vs. 1.65 Sekunden). Beide Werte hängen natürlich von der Bildmenge innerhalb einer Blogseite ab.

• Unvail für WordPress aktiv
• Unvail für WordPress inaktiv

Vorteile

• Das Unveil WordPress-Plugin kann jederzeit gefahrlos aktiviert und deaktiviert werden, da an den Artikeln bzw. in der Blog-Datenbank keine Änderungen vorgenommen werden.
• Funktioniert mit jedem Caching-Plugin - auch mit Cachify.
• Korrekte Funktionsweise der Lazy Load Technik: Beim Aufruf der Blogseiten werden Bilder erst nach Bedarf nachgeladen und nicht wie bei zahlreichen anderen Lösungen erst komplett geladen und dann bei Bedarf angezeigt. Ein Traffic-lastiger und Performance-bedeutender Unterschied.
• Berücksichtigt werden alle im Artikel eingebundene Bilder inkl. Beitragsbild (Thumbnail).
• Keine Einstellungen vonnöten. Aktivieren, läuft.
• Schlicht und geschwind in der Ausführung.

Beachtenswert

Das Unveil WordPress-Plugin sollte mit jedem WordPress-konformen Theme fehlerfrei und auf Anhieb funktionieren. Dennoch einige wichtige Punkte aufgelistet:

• Es werden Bilder in WordPress-Beiträgen berücksichtigt, die über die Mediathek eingefügt oder als Beitragsbild (Post thumbnail) definiert wurden und somit automatisch CSS-Klassen wp-image-* bzw. wp-post-image zugewiesen bekommen haben. Auf genannte CSS-Klassen baut das komplette Plugin auf.
• Das Theme-Template footer.php muss den WordPress-Funktionsaufruf wp_footer() beinhalten. An dieser Stelle wird das erforderliche JavaScript geschrieben.
• Beim Seitenaufruf bekommen alle Beitragsbilder automatisch eine leere Grafik zugewiesen. Dies verhindert den ungewünschten Ladevorgang der Bildelemente im Browser. Das jQuery-Plugin Unveil sorgt dafür, dass nur die sichtbaren Bilder vom Server geladen und angezeigt werden.
• Für Suchmaschinen und Nutzer ohne aktiviertes JavaScript liefert das WordPress-Plugin seit Version 0.0.3 das jeweilige Bild im noscript-Tag aus. Auf diese Weise entstehen keinerlei Beeinträchtigungen durch den Einsatz des Unveil WordPress-Plugins.

Formatierung

Optional können noch nicht geladene Bilder als Platzhalter via Theme-CSS dekoriert werden. Denkbar wäre ein punktierter Rahmen als eine Art visuelle Abgrenzung der Bilder. Auch ein Loader macht sich gut.

img[src*='data:image/gif;base64'] {
	border: 1px dashed #dbdbdb;
}

img[class*=wp-image-],
img[class*=wp-post-image] {
	background: url(/wp-includes/images/wpspin-2x.gif) no-repeat center center;
	background-size: 16px 16px;
}

Inbetriebnahme

1. Obere Punkte beachten
2. Plugin downloaden (Download ZIP rechts in der Sidebar)
3. Ordner ins plugins WordPress-Verzeichnis kopieren
4. Unveil für WordPress aktivieren

Flattr

Autor

Sergej Müller / Google+ / Twitter / WordPress-Plugins

Todos

• Implementierung der HiDPI-Unterstützung

Häufige Fragen

Wie stelle ich sicher, dass das Unveil WordPress-Plugin funktioniert?
In Entwickler-Tools des Browsers (Reiter Netzwerk o.ä.) erkennt man wunderbar, dass Bilder erst beim Scrollen geladen werden. Siehe dazu auch das Video mit dem Ladevorgang.

Changelog

Version: 0.0.4

• Keine Bildbehandlung bei Feeds

Version: 0.0.3

• Unterstützung für Nutzer ohne JavaScript
• Sicherstellung der Bildindexierung durch Google

Version: 0.0.2

• Berücksichtigung der Beitragsbilder (Thumbnails)
• Beispiele für CSS-Formatierungen in der Doku

Version: 0.0.1

• Unveil für WordPress geht online