Nicht sichtbare Bilder verschieben

Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle nicht sichtbaren oder ausgeblendeten Bilder auf Ihrer Seite zusammen mit den potenziellen Einsparungen in Kibibyte (KiB) aufgeführt. Sie können Lazy Loading für diese Bilder verwenden, nachdem alle kritischen Ressourcen vollständig geladen wurden, um die Zeit bis Interaktivität zu verringern:

Screenshot der Prüfung von nicht sichtbaren Bildern mit Lighthouse Defer

Weitere Informationen finden Sie im Codelab zum Lazy Loading von nicht sichtbaren Bildern mit Lazysizes.

Stackspezifische Anleitung

AMP

Mit amp-img kannst du Bilder automatisch per Lazy Loading laden. Weitere Informationen finden Sie im Leitfaden zu Images.

Drupal

Installieren Sie ein Drupal-Modul, das das Lazy Loading von Bildern unterstützen kann. Solche Module bieten die Möglichkeit, nicht sichtbare Bilder aufzuschieben, um die Leistung zu verbessern.

Joomla

Installieren Sie ein Lazy-Loading-Joomla-Plug-in, mit dem Sie nicht sichtbare Bilder zurückstellen können, oder wechseln Sie zu einer Vorlage, die diese Funktion bietet. Ab Joomla 4.0 kann über das Plug-in „Content – Lazy Loading Images“ ein spezielles Lazy Loading-Plug-in aktiviert werden. Sie sollten sich auch überlegen, ein AMP-Plug-in zu verwenden.

Magento

Sie können Ihre Produkt- und Katalogvorlagen ändern, um das Lazy Loading der Webplattform zu nutzen.

WordPress

Installieren Sie ein Lazy-Loading-Plug-in für WordPress, mit dem Sie nicht sichtbare Bilder aufschieben können. Alternativ können Sie auch zu einem Design wechseln, das diese Funktionen bietet. Sie können auch das AMP-Plug-in verwenden.

Ressourcen