Wie man eine Website auf Drupal beschleunigt? Lazy-load Modul und seine Möglichkeiten

Die Ladegeschwindigkeit einer Website ist ein sehr wichtiger Aspekt in der Wahrnehmung des Portals durch den Nutzer. Wie können Sie also das Laden einer Website beschleunigen, die viele Medien oder iframes enthält? Eine der besten Lösungen ist die Nutzung von Lazy Loading. Der einfachste Weg, diese Methode in Drupal zu nutzen, ist das Lazy-load-Modul.

Was ist die Ladegeschwindigkeit einer Website?

Es ist die Zeit, die benötigt wird, um eine Website einem Benutzer anzuzeigen, berechnet ab dem Moment, in dem der Link geklickt wird. Sie hängt von der Menge des Textes, eingebetteten Elementen (wie iframes), Skripten und Medien (Bilder, Videos) ab, wobei auch die Größe eine Rolle spielt. Oft dauern die Medien und eingebetteten Elemente am längsten zu laden. Auf großen Websites sind viele Elemente für die Nutzer unsichtbar, bis sie die Seite scrollen, werden jedoch geladen, bevor der Teil gezeigt wird, der auf das Display passt.

Google hat SEO-Richtlinien eingeführt, in denen die Ladegeschwindigkeit bei der Positionierung einer Website berücksichtigt wird. Daher lohnt es sich, auf eine flüssige Anzeige von Webseiten zu achten. Zwei wichtige Kennzahlen in Bezug auf die Ladegeschwindigkeit einer Website sind TBT (Total Blocking Time) und LCP (Largest Contentful Paint). TBT gibt die Zeit an, die für das Abschließen langer Aufgaben benötigt wird, während LCP bestimmt, nach welcher Zeit der Inhalt einer Website voraussichtlich nutzbar ist. Beide Kennzahlen werden stark von der Anzahl und Größe der geladenen Elemente beeinflusst.

Laden der Website auf Drupal - Lazy-load-Modul

Neuere Versionen von Drupal (v9.1.0 und höher), zusammen mit gängigen Browsern (Chrome ab v76, Firefox ab v75), unterstützen Lazy Loading direkt nach der Installation. Man muss jedoch damit rechnen, dass viele Websites ältere Versionen von Drupal verwenden. Meistens sind dies Websites, die seit Jahren entwickelt werden und daher oft eine Menge Daten (einschließlich Medien und eingebetteten Elementen) enthalten, deren lange Ladezeit die Wahrnehmung des Portals verschlechtert. In solchen Fällen lohnt es sich zu prüfen, ob Lazy Loading genutzt werden kann, um die Ladezeit der Website und den erforderlichen Transfer für das Laden sichtbarer Elemente zu reduzieren.

Veröffentlicht am 10. April 2018, ermöglicht es das Drupal Lazy-load-Modul, das Laden der oben genannten Elemente auf nur die zu einem bestimmten Zeitpunkt benötigten zu beschränken. Dies reduziert die Ladezeit der Website und vor allem den Übertragungsverbrauch. Aufgrund seiner Nützlichkeit wird das Modul von über 10.000 Websites genutzt. Es gibt Versionen sowohl für Drupal 8+ (die neueste Version 8.x-3.11 vom 31. Januar 2022) als auch für Drupal 7 (die neueste Version 7.x-1.4 vom 22. April 2019).

Es ist lobenswert, dass Osman Gormus der einzige Wartungsperson des Projekts ist, und dennoch hat das Modul seit seiner Erstellung keine Unterstützung verloren.

Um die Effektivität des Lazy-load-Moduls zu veranschaulichen, hier die Testergebnisse auf einer Website mit 36 iframes (von denen 6 im geladenen Bereich sichtbar sind) und 116 Bildern, die außerhalb der Sichtweite sind.

Im obigen Beispiel kann der Benutzer die Website fast fünfzig Prozent schneller sehen, wenn das Modul genutzt wird. Zudem beträgt die Link-Einsparung mehr als 98%. Natürlich hängen die Ergebnisse für jede Website stark von der Größe und Anzahl der Elemente außerhalb des Ladebereichs ab. Obwohl das Beispiel grotesk ist (es ist unwahrscheinlich, dass wir auf eine Website mit einer so großen Anzahl an Bildern oder eingebetteten Elementen stoßen), soll es verdeutlichen, wie wichtig der Einsatz einer Lazy Loading-Strategie für die Wahrnehmung einer Website sein kann.

Installation

Das Modul nutzt zusätzliche Bibliotheken, daher erfordert die Installation deren Berücksichtigung. Der einfachste und schnellste Weg ist die Nutzung der composer.json-Datei dafür. In wenigen Schritten können wir eine vollständige Installation des Moduls einschließlich Abhängigkeiten durchführen.

1. Im Abschnitt repositories fügen wir Folgendes hinzu:

   { 
     "type": "composer", "url": "https://asset-packagist.org"
   }

2. Dann müssen wir den Befehl ausführen (wir fügen die -W-Option am Ende hinzu, falls erforderlich):

   composer require drupal/lazy:^3.0 bower-asset/lazysizes:^5.1 oomphinc/composer-installers-extender:^2.0 --no-update

3. Wir müssen den extra-Abschnitt in composer.json bearbeiten, um Folgendes einzuschließen:

   "installer-types": ["bower-asset", "npm-asset"],
   "installer-paths": {
     …
     "web/libraries/{$name}": ["type:drupal-library", "type:bower-asset", "type:npm-asset"],
     …
   }

4. Jetzt können wir den composer update-Befehl ausführen.

Vollständige Anweisungen finden Sie in den offiziellen Dokumentationen.

Falls Sie eine manuelle Installation benötigen, laden Sie die Moduldateien von der Website auf Drupal.org und die auf GitHub verfügbare Bibliothek herunter und entpacken sie diese nacheinander in die Ordner von modules/contrib/lazy und libraries/lazysizes. Vollständige Anweisungen finden Sie auf der Modul-Website.

Wie verwendet man das Lazy-load-Modul?

Wichtig: Das Modul hat seine eigene Konfiguration, die sich unter dem Pfad admin/config/content/lazy befindet. Sie ist in 3 Tabs unterteilt.

1. Allgemeine Einstellungen

1. Bevorzugen Sie native Lazy Loading - die Auswahl dieser Option erzwingt die Verwendung von Lazy Loading, das im Browser eingebettet ist.
2. skipClass - Elemente, die die eingegebene Klasse haben, verwenden kein Lazy Loading.
3. Platzhalterbild-URL - Bild, das anstelle von geladenen Objekten eingefügt wird.
4. Standard-CSS-Effekt aktivieren - aktiviert Standardübergänge beim Laden von Objekten und nutzt CSS mit entsprechenden Klassen.
5. Verwenden Sie minimierte Versionen - die Auswahl dieser Option führt zur Verwendung minimierter Versionen von Skripten.
6. Lazysizes-Bibliothekspfad oder URL - Pfad oder Adresse zur Lazysizes-Bibliothek (erforderlich für das Modul).

2. Sichtbarkeit

1. Seiten - die Pfade von Webseiten, die Lazy Loading verwenden oder deaktiviert haben sollen, abhängig vom Kontrollkästchen aus Punkt 2.
2. Lazy Loading NUR auf bestimmten Seiten aktivieren - die Option, die bestimmt, ob die in Punkt 1 eingegebenen Pfade Lazy Loading deaktiviert haben sollen (nicht ausgewählte Option) oder ob es nur auf den angegebenen Webseiten aktiv sein soll (ausgewählte Option).
3. Lazy Loading für Verwaltungsseiten deaktivieren - blockiert die Ausführung des Modulscripts auf administrativen Webseiten.

3. Lazysizes Konfiguration

1. lazyClass - eine Klasse, die die Elemente kennzeichnet, die für Lazy Loading berücksichtigt werden sollen.
2. loadedClass - eine Klasse, die zugewiesen wird, wenn das Element geladen ist.
3. loadingClass – eine Klasse, die zugewiesen wird, wenn das Element geladen wird.
4. preloadClass - eine Klasse, die die Elemente kennzeichnet, die nach "onload" geladen werden sollen.
5. errorClass - eine Klasse, die den Elementen zugewiesen wird, deren Laden nicht korrekt abgeschlossen wurde.
6. autosizesClass - eine Klasse, die die Elemente kennzeichnet, die automatisch skaliert werden.
7. srcAttr - das Attribut von src
8. srcsetAttr - das Attribut von srcset
9. sizesAttr - das Attribut von sizes
10. minSize - zur Verwendung mit data-sizes=”auto”. Die Mindestbildgröße zum Berechnen des Attributs von sizes.
11. customMedia - ein Objekt, das ein Alias für die Zuordnung verschiedener Media Queries ist. Es kann verwendet werden, um die Implementierung (Layout) mehrerer spezifischer Media Queries von dem Attribut source[media] (Inhalt/Struktur) zu trennen/zentralisieren, indem getaggte Media Queries erstellt werden.
12. init - bestimmt die Initialisierung der Lazysizes-Bibliothek. In einigen Fällen kann es erforderlich sein, die automatische Initialisierung zu deaktivieren. Manuelle Initialisierung ist dann erforderlich durch Verwendung von lazySizes.init();.
13. expFactor - ein Faktor, der angibt, wie viele Assets geladen werden sollen, wenn keine gültige Aktion ausgeführt wird.
14. hFac – ein Faktor analog zu expFactor, allerdings in horizontaler Ausrichtung.
15. loadMode - Lademodus. 0 - kein Laden, 1 - Laden nur sichtbarer Elemente, 2 - Laden sichtbarer und naher Elemente, 3 - Laden sichtbarer, naher und auffangender Elemente innerhalb der Reichweite der Erweiterung durch expFactor. Während onload wird die Option automatisch auf 3 gesetzt.
16. loadHidden - bestimmt, ob versteckte Elemente ebenfalls geladen werden sollen. LazySizes lädt solche Elemente mit Verzögerung.
17. rlcTimeout - Verzögerungsoption für requestIdleCallback.
18. throttleDelay - Verzögerung, die für listeners verwendet wird.
19. Plugins - Auswahl der Plugins, die angehängt werden sollen. Die vollständige Spezifikation und Beschreibung der Plugins finden Sie auf Github.

Um Lazy Loading anzufügen, ist es erforderlich, die Anzeige der Felder zu bearbeiten, für die die Nutzung benötigt wird. Zum Beispiel möchten Sie das Hinzufügen von Bildern aktivieren, die Lazy Loading auf Websites des Seiten-Typs unterstützen. Dazu müssen Sie folgende Schritte ausführen:

1. Wählen Sie Struktur -> Inhaltstypen -> Inhaltsseite -> Felder verwalten im Admin-Panel (admin/structure/types/manage/page/fields).

2. Fügen Sie ein neues Feld hinzu (z.B. vom Typ Bild).

3. Gehen Sie zur Anzeigeverwaltung. 

4. Erweitern Sie die Feldeinstellungen (klicken Sie auf das Symbol rechts).

5. Aktivieren Sie in den erweiterten Einstellungen das Kontrollkästchen Lazy Loading aktivieren.

Ab diesem Moment verwenden alle in diesem Feld hinzugefügten Bilder Lazy Loading. Darüber hinaus werden Klassen hinzugefügt, die in der Konfiguration des Moduls (admin/config/content/lazy) im Tab Lazysizes-Konfiguration festgelegt sind, die zuvor im Abschnitt Lazysizes-Konfiguration besprochen wurde.

Mit den obigen Einstellungen können wir Effekte auf Elemente mit Lazy Loading hinzufügen, abhängig von ihrem Status, unter Verwendung von Stilarten in CSS-Dateien (wie das Verblassen von Bildern, die noch geladen werden, oder das Hinzufügen eines roten Rahmens zu Elementen, deren Laden fehlgeschlagen ist). Unten sehen Sie ein Beispiel mit zwei Bildern – eines vollständig geladen (oben) und eines im Ladeprozess (unten):

Für eingebettete Inhalte, die innerhalb des Inhalts hinzugefügt werden, vergewissern Sie sich, dass das Attribut loading=”lazy” hinzugefügt wird, wie im Fall von iframe:

<iframe loading="lazy" src="example-page">

Hook

Das Modul fügt den hook von hook_lazy_field_formatters_alter hinzu, der es erlaubt, noch nicht unterstützte Formatierer zu bildbasierten Feldern hinzuzufügen.

Beispiel:

function hook_lazy_field_formatters_alter(array &$formatters) {
  $formatters[] = 'xyz_module_field_formatter';

  return $formatters;
}

Drupal Lazy-load-Modul - Zusammenfassung

Die Verwendung des Drupal Lazy-load-Moduls verkürzt die Ladezeit von Websites erheblich, die mehrere Medien enthalten, die sich außerhalb des sichtbaren Bereichs befinden, unmittelbar nach dem Laden, und reduziert die Datenübertragung der Benutzer. Lazy-load ist nützlich für ältere Versionen von Drupal, da neuere Versionen native Lazy-load-Unterstützung enthalten. Dennoch ist dieses Modul auch für sie bemerkenswert, aufgrund seines konfigurierbaren Styling von Elementen, abhängig von ihrem aktuellen Ladezustand.

Fragen Sie sich, ob das Lazy-load-Modul für Ihre Website geeignet ist? Wir warten und entwickeln viele Webseiten auf Drupal. Deshalb empfehlen wir Ihnen gerne, welche Lösung am besten für Ihre Website geeignet ist, basierend auf unserer Erfahrung.