M

MLOG

Deutsch

Ein umfassender Leitfaden zum Lazy Loading von Bildern und Komponenten zur Steigerung der Website-Performance und Benutzererfahrung für ein globales Publikum.

Lazy Loading: Optimierung der Web-Performance mit Bildern und Komponenten

In der heutigen digitalen Landschaft ist die Website-Performance von größter Bedeutung. Benutzer erwarten schnelle, reaktionsschnelle Erlebnisse, und Suchmaschinen bevorzugen Websites, die dies liefern. Eine entscheidende Technik zur Leistungssteigerung ist das Lazy Loading. Dieser Artikel bietet einen umfassenden Leitfaden zum Lazy Loading von Bildern und Komponenten und hilft Ihnen, Ihre Website für ein globales Publikum zu optimieren.

Was ist Lazy Loading?

Lazy Loading ist eine Technik, die das Laden von Ressourcen (Bilder, iFrames, Komponenten usw.) aufschiebt, bis sie tatsächlich benötigt werden – typischerweise, wenn sie im Begriff sind, in den Ansichtsbereich (Viewport) zu gelangen. Das bedeutet, anstatt alle Assets im Voraus zu laden, lädt der Browser nur die Ressourcen, die für den Benutzer beim ersten Laden der Seite sichtbar sind. Wenn der Benutzer die Seite nach unten scrollt, werden weitere Ressourcen geladen, sobald sie sichtbar werden.

Stellen Sie es sich so vor: Sie packen für eine Reise. Anstatt Ihre gesamte Garderobe von Anfang an mitzuschleppen, packen Sie nur die Kleidung ein, von der Sie wissen, dass Sie sie sofort benötigen. Im Laufe Ihrer Reise packen Sie zusätzliche Gegenstände aus, wenn Sie sie brauchen. So funktioniert im Wesentlichen Lazy Loading für Websites.

Warum Lazy Loading verwenden?

Lazy Loading bietet mehrere wesentliche Vorteile:

Lazy Loading von Bildern

Bilder sind oft die größten Assets auf einer Website und damit Hauptkandidaten für Lazy Loading. So implementieren Sie Lazy Loading für Bilder:

Natives Lazy Loading

Moderne Browser (Chrome, Firefox, Safari und Edge) unterstützen jetzt natives Lazy Loading mit dem loading-Attribut. Dies ist die einfachste und effizienteste Methode, um Bilder per Lazy Loading zu laden.

Um natives Lazy Loading zu aktivieren, fügen Sie einfach das Attribut loading="lazy" zu Ihrem <img>-Tag hinzu:

<img src="image.jpg" alt="Mein Bild" loading="lazy">

Das loading-Attribut kann drei Werte haben:

Beispiel:

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokio Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

In diesem Beispiel werden die Bilder der London Bridge, der Skyline von Tokio und von Rio de Janeiro erst geladen, wenn der Benutzer zu ihnen scrollt. Dies ist äußerst hilfreich, insbesondere wenn ein Benutzer nicht bis ganz nach unten auf der Seite scrollt.

Lazy Loading mit JavaScript

Für ältere Browser, die kein natives Lazy Loading unterstützen, können Sie JavaScript-Bibliotheken verwenden oder Ihr eigenes Skript schreiben. Hier ist ein grundlegendes Beispiel mit der Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

Erklärung:

  1. Wir wählen alle <img>-Elemente aus, die ein data-src-Attribut haben.
  2. Wir erstellen eine neue IntersectionObserver-Instanz. Die Callback-Funktion wird ausgeführt, wenn ein beobachtetes Element den Ansichtsbereich betritt oder verlässt.
  3. Innerhalb der Callback-Funktion iterieren wir über die entries (die Elemente, die den Ansichtsbereich gekreuzt haben).
  4. Wenn ein Element sich schneidet (entry.isIntersecting ist true), setzen wir das src-Attribut des Bildes auf den Wert des data-src-Attributs.
  5. Wir entfernen dann das data-src-Attribut und beenden die Beobachtung des Bildes, da es nicht mehr benötigt wird.
  6. Schließlich beobachten wir jedes Bild mit observer.observe(img).

HTML-Struktur:

<img data-src="image.jpg" alt="Mein Bild">

Beachten Sie, dass die tatsächliche Bild-URL im data-src-Attribut anstelle des src-Attributs platziert wird. Dies verhindert, dass der Browser das Bild sofort lädt.

Verwendung von Lazy-Loading-Bibliotheken

Mehrere JavaScript-Bibliotheken können den Prozess des Lazy Loadings von Bildern vereinfachen. Einige beliebte Optionen sind:

Diese Bibliotheken bieten in der Regel eine einfache API zur Initialisierung des Lazy Loadings und bieten zusätzliche Funktionen wie Platzhalterbilder und Übergangseffekte.

Lazy Loading von Komponenten

Lazy Loading ist nicht nur für Bilder; es kann auch auf Komponenten angewendet werden, insbesondere in modernen JavaScript-Frameworks wie React, Angular und Vue. Dies ist besonders nützlich für große Single-Page-Anwendungen (SPAs) mit vielen Komponenten.

Lazy Loading in React

React bietet eine integrierte React.lazy()-Funktion zum Lazy Loading von Komponenten. Diese Funktion ermöglicht es Ihnen, Komponenten dynamisch zu importieren, die dann nur geladen werden, wenn sie gerendert werden.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Lade...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

Erklärung:

  1. Wir verwenden React.lazy(), um die MyComponent dynamisch zu importieren. Die import()-Funktion gibt ein Promise zurück, das zum Komponentenmodul aufgelöst wird.
  2. Wir umschließen die MyComponent mit einer <Suspense>-Komponente. Die Suspense-Komponente ermöglicht es Ihnen, eine Fallback-Benutzeroberfläche (in diesem Fall „Lade...“) anzuzeigen, während die Komponente geladen wird.

Lazy Loading in Angular

Angular unterstützt das Lazy Loading von Modulen über die loadChildren-Eigenschaft in der Routing-Konfiguration.

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Erklärung:

  1. Wir definieren eine Route für den my-module-Pfad.
  2. Wir verwenden die Eigenschaft loadChildren, um anzugeben, dass das MyModuleModule per Lazy Loading geladen werden soll. Die import()-Funktion importiert das Modul dynamisch.
  3. Die then()-Methode wird verwendet, um auf das Modul zuzugreifen und die MyModuleModule-Klasse zurückzugeben.

Lazy Loading in Vue.js

Vue.js unterstützt das Lazy Loading von Komponenten durch dynamische Importe und den component-Tag.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

Erklärung:

  1. Wir verwenden den <component>-Tag mit dem :is-Attribut, um eine Komponente dynamisch zu rendern.
  2. Im mounted-Lifecycle-Hook verwenden wir die import()-Funktion, um die MyComponent.vue dynamisch zu importieren.
  3. Anschließend setzen wir die Daten-Eigenschaft dynamicComponent auf den Standardexport des Moduls.

Best Practices für Lazy Loading

Um sicherzustellen, dass Lazy Loading effektiv implementiert wird, beachten Sie diese Best Practices:

Überlegungen zur Internationalisierung

Bei der Implementierung von Lazy Loading für ein globales Publikum sollten Sie diese Internationalisierungsfaktoren berücksichtigen:

Fazit

Lazy Loading ist eine leistungsstarke Technik zur Optimierung der Website-Performance und zur Verbesserung der Benutzererfahrung. Durch das Aufschieben des Ladens von Ressourcen außerhalb des Bildschirms können Sie die anfängliche Ladezeit der Seite reduzieren, den Bandbreitenverbrauch senken und die Serverlast verringern. Egal, ob Sie eine kleine persönliche Website oder eine große Unternehmensanwendung erstellen, Lazy Loading sollte ein zentraler Bestandteil Ihrer Strategie zur Leistungsoptimierung sein. Indem Sie die in diesem Artikel beschriebenen Best Practices befolgen und Internationalisierungsfaktoren berücksichtigen, können Sie sicherstellen, dass Ihre Lazy-Loading-Implementierung effektiv ist und eine positive Benutzererfahrung für ein globales Publikum bietet.

Nutzen Sie Lazy Loading und erschließen Sie ein schnelleres, effizienteres und benutzerfreundlicheres Web-Erlebnis für alle.