Bilder nachladen ohne Lazy Load oder jQuery

Dieser Artikel beschreibt einen einfachen Weg, um Bilder nachladen zu können ohne Lazy Load oder jQuery. Lazy Load ist zwar eine tolle Sache, funktioniert jedoch gerade auf Smartphones nicht immer. Lange Ladezeiten lassen sich mit diesem kleinen Trick sehr gut in den Griff bekommen.

Was sind nachgeladene Bilder (Deferring Images)?

Einer der Gründe, warum Websites langsam laden, sind die Bilder. Damit sind nicht nur die gemeint, die man gerade sieht, sondern auch diejenigen, die weiter unten auf der Website eingebunden sind.

All diese Bilder konkurrieren um die gleiche Bandbreite wie die anderen Seitenressourcen CSS und Javascript. Das bedeutet, dass die Bilder im Weg stehen, um den anfänglich sichtbaren Teil Ihrer Webseite den Benutzern so schnell wie möglich zur Verfügung zu stellen.

Entwickler und Webseiten-Besitzer versuchen das Problem durch eine Methode namens „Lazy Loading“ zu lösen.

Bekannte Probleme mit Lazy Load

Lazing Loading Images ist eine Lösung, bei der die Bilder nach Bedarf geladen werden, wenn der Benutzer die Seite nach unten scrollt. Das ist schon eine coole Sache, die auch ich oft einsetze, aber unproblematisch ist das nicht.

Denn:

• Lazy Load kann Leistungsprobleme verursachen (längere Ladezeiten als ohne)
• Lazyloading stellt für einige Webseiten keine praktikable Lösung dar
• Lazy Load ist nicht ideal für die mobile Performance

Bilder nachladen ohne Lazy Load und jQuery

Lazy Load ist nur eine ziemlich komplizierte Art, den Ladevorgang von Bildern aufzuschieben, damit sich andere Bereiche schneller aufbauen können. Wir hingegen werden auf die Grundlagen zurückkommen und Bilder ohne Leistungseinbußen nachladen.

Wie funktioniert Lazy Load genau?

1. Es beobachtet eine Scroll-Position
2. Es überwacht die Scroll-Position
3. Es reagiert auf eine Bildlaufposition
4. Bilder nachladen

Bei den vier oben genannten Dingen kümmert sich nur die Nummer 4 um das, was wichtig ist: das Bilder nachladen. Der Rest ist ein Überhang an Funktionen, die viel JavaScript-Dateigröße erfordert. Deshalb sind einige Projekte mit dieser Art des Nachladens auch langsamer, als sie es ohne wären.

Schauen wir uns Punkt vier genauer an

Wenn wir eine Website in einem Browser aufrufen, versucht dieser, alle Bilder zu laden, die er auf der Website findet. Findet er ein Bild, lädt der Browser ein Bild herunter. Findet der Browser 400 Bilder, wird er alle 400 Bilder laden. Das ist das Standardverhalten eines Webbrowsers. Je mehr Bilder zu laden sind, desto langsamer wird daher der Seitenaufbau.

Der einzige zuverlässige Weg, dies zu umgehen (gilt für alle Browser), besteht darin, den Browser so zu täuschen, dass er glaubt, diese Bilder seien nicht vorhanden.

Der Weg, der beim Lazy Loading und anderswo beschritten wird, besteht darin, ein winziges Standardbild in unserer HTML-Datei bereitzustellen und dieses Standardbild dann per Javascript auf das echte Bild, das wir anzeigen wollen, umzuschalten.

Das bedeutet, dass Bilder in etwa wie folgt markiert sind…

<img src="fake.png" data-src="dein-echtes-bild.png">

Wenn die Seite zum ersten Mal geladen wird, sieht der Browser nur das fake.png. Das ist das einzige Bild, was er sieht. Ob ein oder hundert Bilder in eine Seite eingebunden sind, spielt keine Rolle, fake.png wurde ja bereits heruntergeladen.

Per JavaScript wird nun das falsche Bild gegen das korrekte Bild ausgetauscht. Sobald der Browser das neue Bild im HTML bemerkt, wird es geladen. Das ist dann der Zeitpunkt, wo der User das richtige Bild sieht.

Dieser relativ einfache Schritt kann erstaunliche Ergebnisse liefern. Es ist mit dieser Technik durchaus möglich, Seiten-Ladezeiten von 6 Sekunden auf unter eine Sekunde zu bringen.

Wie lädt ein Browser eine Website?

Um zu verstehen, welche Art des Nachladens von Bildern wir verwenden sollten, müssen wir zuerst verstehen, wie eine durchschnittliche Website geladen wird.

1. Zuerst kommt das HTML
2. Danach das CSS und eventuell das JavaScript, wenn es nicht im Footer ist
3. Dann kommt das Hero-Bild im Sichtbereich des Users (Above The Fold)
4. Danach werden die Bilder im Inhaltsbereich geladen
5. Darauf folgen die Bilder im Footer
6. Zuletzt das JavaScript, wenn es im Footer eingebunden ist

Auf dieser eher typischen Seite konkurriert jede einzelne Ressource darum, zur gleichen Zeit heruntergeladen zu werden.

Muss das so sein? Nein! Das einzige, was sofort geladen werden muss, ist Above The Fold – also im direkten Sichtbereich des Users – zu finden. Nur der zuerst sichtbare Bereich der Website muss direkt und ohne Verzögerung geladen werden.

Benötigt würde also nur:

1. Das HTML
2. Das CSS
3. Das Hero-Bild (Hauptbild im sichtbaren Bereich)

Schauen wir uns an, wie wir dafür sorgen können, dass diese Seite extrem viel schneller als jetzt geladen wird.

• Dazu laden wir nur das Hauptbild direkt.
• Alle anderen Bilder werden verzögert nachgeladen.

Danach haben wir eine Website, die nur wenige Dateien laden muss und daher sehr viel schneller als vorher laden wird.

Realistisch gesehen haben viele Websites sehr viele Bilder eingebunden, die alle geladen werden müssen. Doch diese Methode kann Deine Website wirklich extrem viel schneller laden lassen. Je mehr Bilder du verwendet hast, desto größer ist der Effekt.

Macht Lazy Load nicht genau das?

Doch klar! Im Grunde schon. Problematisch wird es nur, wenn sogenannte One-Page Themes verwendet werden. Wenn die Navigation nicht mehr zu anderen Seiten, sondern zu einem Abschnitt einer einzigen Seite führt, funktioniert Lazy Load nicht mehr.

Dann landen die User auf einem Abschnitt, dessen Bilder nicht geladen werden können. Denn in diesem Szenario funktionieren die 4 Punkte des Lazy Load definitiv nicht.

Die Lösung: Bilder nachladen, sobald der Rest der Website geladen wurde.

Bilder nachladen: so einfach geht es

Um das zu erreichen, manipulieren wir unser Bild-HTML und fügen ein extrem einfaches und kleines Stücken JavaScript hinzu. Diese Methode ist praxiserprobt und recht einfach. Sie verwendet ein Bild auf Basis 64, aber lass Dich davon nicht abschrecken. So können wir die Bilder nachladen und einen maximalen Effekt mit wenig Aufwand erreichen.

Teil 1: Das HTML

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="deine-bild-url">

Teil 2: Das JavaScript

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

So wird es genutzt:

Bei den meisten Seiten kannst Du das Skript einfach direkt vor das End-Body-Tag in Deinem Theme einfügen. Was die Bilder betrifft, so nutzt Du den obigen Code (mit der Bezeichnung „Das HTML“) und ersetzt „deine-bild-url“ durch den tatsächlichen Bildpfad.

Beispiel:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://seoagentur-hamburg.com/wp-content/uploads/2020/04/sichtbarer-bereich-wird-geladen.webp">

JavaScript im Footer von WordPress laden

<?php

// Ab hier kopieren
if ( ! function_exists( 'ah_load_defer_images_script' ) ) :
/**
 * Deferring images for faster pages
 */
function ah_load_defer_images_script() {
?>
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
<?php }
add_action('wp_footer', 'ah_load_defer_images_script');
endif;

[link-box headline=“Quelle:“ link=“https://varvy.com/pagespeed/defer-images.html“ linktext=“How to defer images“]