Automatische SEO-Lazy-Tags für Bilder: Einrichtung und Hilfe

Laden Sie die ZIP-Datei unter Modul > "Module Manager" > "Upload a module" hoch. Installieren Sie das Modul und klicken Sie auf "Configure". Dies öffnet den Konfigurationscontroller mit dem Formular Lazy-Loading-Einstellungen.

Erfordert PrestaShop 1.6.1 oder neuer und PHP 7.1 oder neuer.

Klicken Sie auf Speichern.

Bilder in HTML-Feldern, die durch filterHtmlContent laufen, erhalten Attribute direkt im aufbereiteten Inhalt. Dazu können Beschreibungen und CMS-Inhalte gehören, wenn Ihre PrestaShop-Version diese Felder durch diesen Hook leitet.

Verwenden Sie für ein Bild, dessen Ladeverhalten erhalten bleiben muss, die konfigurierte Klasse:

<img src="/img/cms/banner.jpg" alt="Store banner" class="no-autolazy">

Dies verhindert neue loading- und decoding-Attribute im normalen Ausschlusspfad. Es fügt kein loading="eager" hinzu. Um sofortiges Laden ausdrücklich anzufordern, verwenden Sie:

<img src="/img/cms/banner.jpg" alt="Store banner" loading="eager">

Das Modul erhält vorhandene loading-Werte. Bei aktivierter asynchroner Dekodierung kann es einem Bild mit vorhandenem loading weiterhin decoding="async" hinzufügen, selbst wenn es auch die Ausschlussklasse oder eine Daten-URI hat. Die Verarbeitung vorhandener loading-Werte erfolgt vor diesen Prüfungen.

Ein gewöhnliches geeignetes Inhaltsbild kann so aussehen:

<img decoding="async" loading="lazy" src="/img/cms/detail.jpg" alt="Product detail">

Bilder mit Ausschlussklasse oder mit src, das mit data: beginnt, werden übersprungen, wenn sie kein vorhandenes loading-Attribut haben. Vorhandene decoding-Werte im HTML-Inhalt bleiben erhalten.

Produkt-Hooks ergänzen Daten in Array-Einträgen von cover, default_image und images. Sie setzen loading auf lazy und bei Aktivierung decoding auf async. Diese Zuweisungen können vorhandene Werte in aufbereiteten Arrays ersetzen. Die Inhalts-Ausschlussklasse steuert diesen Verarbeitungspfad nicht.

Ihr Theme muss die Werte in seinen tatsächlichen Bild-Tags ausgeben. Verfügbare Werte sind:

{$product.cover.loading}
{$product.cover.decoding}
{$product.default_image.loading}
{$product.default_image.decoding}

Fügen Sie beispielsweise diese Attribute zum entsprechenden Titelbild-Tag in einem eigenen Template hinzu:

loading="{$product.cover.loading|default:'lazy'|escape:'html':'UTF-8'}"
{if isset($product.cover.decoding)}decoding="{$product.cover.decoding|escape:'html':'UTF-8'}"{/if}

Wenden Sie dasselbe Prinzip auf jedes Galerie- oder Listenbild mit dessen eigenen aufbereiteten Daten an. Vermeiden Sie doppelte loading-Attribute, wenn Ihr Template diese bereits enthält. Steuern Sie das endgültige Template-Attribut bewusst, wenn ein Bild sofort geladen werden soll. Das Modul erkennt das erste sichtbare Produktbild nicht automatisch.

Fügen Sie in einem unterstützten HTML-Inhaltsfeld ein Testbild unterhalb des sichtbaren Bereichs ein. Speichern Sie, öffnen Sie die Shopseite und prüfen Sie den Bild-Tag. Bestätigen Sie loading="lazy" und bei Aktivierung decoding="async".

Testen Sie ein Bild mit class="no-autolazy" und dann eines mit loading="eager". Das Klassenbeispiel sollte über den normalen Ausschlusspfad keine neuen Attribute erhalten. Das eager-Beispiel sollte seinen loading-Wert behalten und kann asynchrone Dekodierung erhalten.

Öffnen Sie ein Produkt und eine Liste. Prüfen Sie das endgültige HTML, statt anzunehmen, dass ergänzte Presenter-Felder automatisch erscheinen. Nutzen Sie beim Scrollen die Netzwerkwerkzeuge des Browsers, um dessen Ladeverhalten zu prüfen. Der Browser entscheidet, wann er ein für natives Lazy Loading markiertes Bild herunterlädt.

Das Modul ändert Attribute und aufbereitete Daten, keine Bilddateien oder gespeicherten Beschreibungen. Es analysiert nicht die endgültige Seitenantwort. Später per JavaScript eingefügte Bilder werden nur behandelt, wenn ihr ursprünglicher Inhalt die entsprechenden PHP-Hooks durchlaufen hat.

Prüfen Sie, ob Lazy Loading aktivieren auf Ja steht. Bleiben Bilder in bearbeitbaren Inhalten unverändert, prüfen Sie, ob das Feld filterHtmlContent durchläuft. Prüfen Sie Ausschlussklasse, vorhandenes loading-Attribut und Daten-URI-Bedingungen.

Bleiben Produktbilder unverändert, prüfen Sie die Bild-Tags des Themes. Das Template muss die aufbereiteten loading- und decoding-Werte verwenden. PHP-Hooks allein fügen beliebigem Theme-HTML keine Attribute hinzu.

Aktualisieren Sie nach Einstellungsänderungen den Seitencache. Verwenden Sie "Integrity" für Konfigurations- und Infrastrukturprüfungen. Prüfen Sie Ihre Einstellungen nach dem Upgrade einer älteren Installation.

Setzen Sie Lazy Loading aktivieren auf Nein, um die Verarbeitung anzuhalten und Einstellungen zu behalten. Deinstallieren Sie über "Module Manager", um Modulmenü und gemeinsame Konfigurationseinträge zu entfernen.

Manuell in Theme-Templates oder gespeicherte Inhalte eingefügte Attribute bleiben erhalten, bis Sie diese bearbeiten. Entfernen Sie eigene Template-Ergänzungen gesondert, wenn Sie sie nicht mehr benötigen.