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 Plugins für WordPress 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.

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.

Vorteile

• Das Unveil WordPress-Plugin kann jederzeit gefahrlos deaktiviert werden, da an den Artikeln 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.
• 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 aus WordPress-Beiträgen berücksichtigt, die über die Mediathek eingefügt wurden und somit automatisch die CSS-Klasse wp-image-* zugewiesen bekommen haben. Auf diese CSS-Klasse 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.
• Es ist davon auszugehen, dass Beitragsbilder von Google nicht länger indexiert werden können, da diese per Default nicht geladen werden.

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

Autor

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

Todos

• Lösung für Nutzer ohne JavaScript
• 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.1

Unveil für WordPress geht online