Lazyload - oder lieber doch nicht?

[xoni]

Einen sonnigen guten Morgen,

ich bin auf der Suche nach Optimierungsmöglichkeiten um
meinen Page Speed zu verbessern.

Ich liebäugle mit dem Einsatz von jquery.unveil.js

https://github.com/luis-almeida/unveil/ ... .unveil.js

Allerdings sind da noch ungeklärte Fragen.

Ist Goolge mittlerweile in der Lage, das Ersetzen einer Image-SRC zu erkennen?
Welche Maßnahmen kann ich umsetzen, um meine Bilder für Google zugänglich zu machen?
Eine Image-Sitemap?
Ein Fallback mit dem Noscript-Tag in dem die tatsächliche Image-URL steht?

Ich würde mich freuen, hier einige Tipps lesen zu können.
Beste Grüße

[elmex]

Meine Tipps dazu:

Pagespeed wird besser mit WENIGER Scripten, nicht mit mehr

Grafiken optimieren, statt riesen Dateien per JS nachzuladen

Irgendwann wurde aus "Google austricksen" was anderes: "sich an die Richtlinien halten"

Maximale Erfolge!

[xoni]

Pagespeed wird besser mit WENIGER Scripten, nicht mit mehr

OK, das Script hat nur wenige Zeilen und dürfte nicht weiter ins Gewicht fallen.

Grafiken optimieren, statt riesen Dateien per JS nachzuladen

Man kann auch bereits optimierte Bilder nachladen, oder?

Irgendwann wurde aus "Google austricksen" was anderes: "sich an die Richtlinien halten"

Hm, ich verstehe nicht, was das mit austricksen zu tun haben soll.
Es geht hier ja nicht darum, Google hier andere Inhalte vorzugaukeln, sondern
die Bilder erst zu laden, wenn sie beim Scrollen in den sichtbaren Bereich des Users
gelangen - ich denke hier gerade an die Mobil-Nutzer.

[Boa]

Da Google das z.B in der Bildersuche auch macht, kann es ja nicht ganz verkehrt sein.

[pimpi]

Ich nutze Lazy Load auch, aus einem Grund der für mich zählt: es macht das Surfen auf mobilen Geräten sehr viel angenehmer, eben weil's Laden nur dann notwendig wird wenn gescrollt wird.

[xoni]

Vielen Dank für die bisherigen Beiträge.

Wie bereits erwähnt, sehe ich auch gerade bei den mobilen Geräten den entscheidenden Vorteil.

Der Ablauf dieser Scripte ähnelt sich, es wird lediglich das src-Attribut des Bildes ersetzt.
Und da liegt meiner Meinung nach aber auch der Hase im Pfeffer.

Ein Beispiel:

Code: Alles auswählen

<img src="no_image.gif" data-src="img1.jpg" />
<img src="no_image.gif" data-src="img2.jpg" />
<img src="no_image.gif" data-src="img3.jpg" />

Google erkennt hier nur das normale src-Attribut.

Gerade für die Bildersuche ist aber 3 x "no_image.gif "
nicht das, was gewollt ist.

Wie mit diesem Problem umgehen?

[mogli]

Unter anderem aus diesem Grund vermeide ich derzeit noch den Einsatz und bleibe bei optimierten Bildern im Zusammenspiel mit dem picturefill polyfill.

Vor zwei Monaten habe ich mal ein Script gefunden, welches SEO-technisch ein sicheres Lazyload lieferte (weil der Autor eben auch wusste, dass das Problem existiert). Hier war der Vorgang umgekehrt: im Markup standen in der src-Angabe die richtigen Bilder, wurden dann aber per JS durch Platzhalter ersetzt.

Vorteil: Google hat alle Bilder sauber indexiert.

Nachteil: Je nach Geschwindigkeit werden immer noch einige erste Bytes des normalen Bilds durch den Browser geladen und dann via Script der Vorgang abgebrochen. Also alles andere als eine "saubere" Implementierung. Es tat seinen Dienst, gefiel mir aber einfach trotzdem nicht.

[xoni]

@mogli

Hier war der Vorgang umgekehrt: im Markup standen in der src-Angabe die richtigen Bilder, wurden dann aber per JS durch Platzhalter ersetzt.

Ja, das Script kenne ich bereits und verwende es den von Dir genannten Gründen auch nicht.

Ok, so wie es aussieht gibt es zur Zeit noch kein Workaround für dieses Problem.
Der Einsatz wird also noch ein wenig warten müssen.

Danke, für Eure zahlreichen Anregungen!

[trixta]

Folgendes script funktioniert mit google wunderbar:
https://github.com/aFarkas/lazysizes