Lösung: Weiße Flächen BJ Lazy Load auf AMP Pages

Ihr habt das das WordPress Plugin BJ Lazy Load installiert und habt im AMP Lesemodus Probleme mit weißen Flächen oder doppelten Bildern? Dieses CSS löst das Problem.

Problemstellung: Lazy Load Images auf AMP-Seiten

Mittlerweile läuft ein großer Teil meines Traffics über die AMP-Versionen meiner Blog-Beiträge und unter Seiten. Umso erschrockener war ich, als ich vor ein paar Wochen bemerkt habe, dass meine AMP-Seiten massig überflüssigen Whitespace aufweisen. Typischer Weise immer oberhalb von Bilder-Elementen und am Anfang der Seite (dort wo sich sonst das Beitragsbild befindet.

Checken wir das Ganze mal in der AMP-Version des Artikels Deine Lieblingswebsites in Comic Sans MS.

AMP Lazy Load Features Image Whitespace — Whitespace oberhalb des Stage Images im Beitrag, das automatisch eingefügt wird.

AMP Lazy Load Image Whitespace — Whitespace oberhalb eines Bildes, das im Editor in den Beitrag eingebunden wurde.

Ganz schön hässlich, oder?! Finde ich optisch und für Experience nicht gut. Insbesondere der Leerraum oben vermittelt den Nutzern, die meine Website in Suchmaschinen finden keinen guten ersten Eindruck und wird meine Bounce Rate mit Sicherheit unnötig in die Höhe treiben.

Ursache: Doppelte Bilderausgabe über das BJ Lazy Load Plugin

Ich konnte nicht genau nachvollziehen welche Funktion im Code hier etwas doppelt oder falsch lädt, aber ich konnte das Problem in der HTML-Version der Seite sehen. Anscheinend werden die Bilder des Artikels im Frontend doppelt gerendert:

Was auf den ersten Blick nach zwei identischen Bildern im <amp-img> Tags aussieht hat einen kleinen Unterschied in der Klassifizierung.

HTML-Code des ersten Bildes:

<amp-img width="970" height="545" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-type="image" data-lazy-src="https://internetzkidz.de/wp-content/uploads/cropped-Comic-Sans-Web_spotify_1.jpg" class="lazy lazy-hidden attachment-large size-large wp-post-image amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" ...></amp-img>

HTML-Code des zweiten Bildes:

<amp-img width="970" height="545" src="https://internetzkidz.de/wp-content/uploads/cropped-Comic-Sans-Web_spotify_1.jpg" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" ...></amp-img>

Die Unterschiede sind subtil, aber ekennbar. Das erste Bild führt die Attribute:

data-lazy-type=“image“
class=“lazy lazy-hidden“

Ironischer Weise machen die lazy-hidden Klasse nicht, was sie verspricht: Sie versteckt den Container nicht bzw. blendet nur die Child-Elemente aus. Entsprechend müssen wir dem ersten amp-img noch beibringen sich zu verstecken.

Lösung: Custom CSS via Customizer oder Yoast Glue Plugin

Wir können das Ganze mit einer bzw. drei Zeilen CSS lösen. Und zwar benötigen wir lediglich:

amp-img.lazy.lazy-hidden {
    display: none;
}

Ich hinterlege das Ganze in meinem Glue for Yoast & AMP Plugin. Dazu navigiere ich zu

(Yoast) SEO > AMP > Design > Extra CSS

In der kleinen Extra-CSS-Box hinterlege ich das entsprechende CSS.

Und wir erkennen: Die lästigen Whitespaces sind verschwunden:

BJ Lazy Load Featured image Whitespace gone

Der dritte Strike nach der WordPress Pagespeed Optimierung

Wenn auch etwas entfernt handelt es sich hierbei um das dritte Problem, das ich aus meinem Experiment internetzkidz Pagespeed Optimierung mit OMT Tipps „mitgebracht“ habe. Leider habe ich diese Fehlerchen immer erst Häppchenweise entdeckt. Die beiden anderen Probleme habe ich in den Artikeln

W3Total Cache & Autoptimize Konflikt Canonical Slash

W3Total Cache deaktiviert Trailing Slash Redirect

gefixt und beschrieben.