Das Problem von VGWort und LazyLoad Optimierungen

Die Idee hinter der VG Wort und was man tun muss

Die Ausgangslage ist easy:

Man baut per Plugin oder Manuell einen Zählpixel (=unsichtbare Grafik) in Blogbeiträge ein, durch die die VG Wort Zugriffe aus Deutschland registriert.
Für jedes Jahr gibt es Grenzen (Mindestzugriffe, Zeichenanzahl), wenn diese erreicht werden erhält man im darauffolgenden Jahr Geld. 2018 waren das z.B. 35 für alle Texte mit mind. 1800 Zeichen und 1500 Mindestaufrufen (aus Deutschland)

Jeder, der diesen Post findet dürfte darüber informiert sein, aber alle anderen finden bei leitmedium einige Infos zum Sinn und Zweck sowie zur Tipps zur VGWort.

Das LazyLoad Problem

Die Idee hinter dem Einsatz einer LazyLoad Funktion ist schnell erklärt: beim Seitenaufruf im Browser des Besuchers werden nur sichtbare Bilder geladen, die anderen werden nachgeladen, wenn sie in den Sichtbereich kommen, sprich beispielsweise gescrollt wird. Das Problem geht genau hier los: durch LazyLoad Funktionalität, die diverse Plugins und Themes anbieten kann es passieren, dass der Pixel nicht geladen wird.

Wie kann man prüfen, ob der VGWort Pixel geladen wird

Am einfachsten mit Entwicklertools eures Browsers. Aufrufen könnt ihr diese auf folgende Art und Weise:

Chrome: Rechtsklick auf der Internetseite, die ihr prüfen wollt und “Untersuchen” anklicken
Firefox: Rechtsklick auf der Internetseite und “Element durchsuchen” anklicken
Safari: Rechtsklick auf der Internetseite und “Element Informationen” anklicken

Je nach Einstellung öffnet sich dann in der Regel am unteren Rand eures Bildschirms die Anzeige.

Ob der Pixel korrekt geladen wurde seht ihr daran, dass eine externe Verbindung zu den VGWort Servern hergestellt wurde. Je nach Browser geht das folgendermaßen:

Chrome: Tab “Sources” aufrufen und bei den angezeigten Quellen nach vgwort.de suchen
Safari: Tab “Netzwerk” aufrufen und in der Domain Spalte nach einem vgwort.de Eintrag suchen, die Subdomain kann sich unterscheiden
Firefox: Tab “Netzwerkanalyse” aufrufen und in der Spalte Host nach vgwort.de suchen

Sicherheitshalber solltet ihr diesen Test in einem Inkognito Fenster ausführen. Nachfolgend noch Screenshots, auf denen ihr die Verbindung seht.

Netztwerkverbindungen in Google Chrome
Netztwerkverbindungen in Safari
Netztwerkverbindungen in Firefox

Tipps zu einigen LazyLoad-Plugins und Einstellungen

WP Rocket Caching und separates LazyLoad Plugin von WPRocket

Sowohl bei dem Caching Plugin als auch bei dem separaten LazyLoad Plugin könnt ihr Bilder ausschließen, indem ihr data-no-lazy="1" zu dem jeweiligen Bild hinzufügt. Beim Prosodia VG Wort Plugin könnt ihr auf dem folgenden Screenshot sehen, wo der Wert eingetragen werden kann. Ihr finde die entsprechende Seite über https://eureurl.de/wp-admin/admin.php?page=wpvgw-configuration

In einigen Fällen konnten wir feststellen, dass der Pixel auch ohne diesen Zusatz richtig geladen wurde, allerdings war in diesen Fällen im Prosodia Plugin die Funktion “Zählmarken verzögert ausgeben/laden (Lazy Loading) aktiviert” aktiviert, probiert ruhig mal aus, ob das bei euch auch so geht, wobei der Zusatz data-no-lazy="1" auch nicht stört.

Autoptimize Plugin und LazyLoad

Wenn ihr Autoptimize einsetzt und darin LazyLoad aktiviert bekommt ihr ein Feld angezeigt, dass es euch ermöglicht CSS Klassen zu benennen, für das LazyLoad deaktiviert bleiben soll. Das einfachste Vorgehen wäre dann:

Vergebt im Prosodia Plugin eine Klasse für den Imagetag, ähnlich wie in der WPRocket Anleitung eine Klasse nach folgendem Muster: class="vgwortpixel"
Diese Klasse tragt ihr dann auch bei Autoptimize ein, ohne "", lediglich vgwortpixel wird dort eingetragen.

CSS Klasse, die dann von LazyLoad ausgeschlossen wird.

Worthy VG WortPlugin

Oliver von Empfehlbar hat mich netterweise darauf hingewiesen, dass das WP Worthy Plugin bereits eine Lösung eingebaut. Für Autoptimize lässt sich die automatisch vergebene Klasse wp-worthy-pixel-img nutzen und für WP Rocket ist bereits data-no-lazy="1" in den Image Tag eingebaut. Siehe folgender Screenshot.