Progressive Lazy Loading for Joomla

Großartige Inhalte auf Joomla! zu erstellen ist eine Sache, sie zugänglich zu machen eine andere. Lazy loading ist eine Lösung, die beides kombiniert, ohne Ihren Workflow zu ändern. Mit fortschreitendem lazy loadingwerden Bilder nur geladen, wenn sie benötigt werden. Wenn der Leser ein Bild auf der Webseite nie erreicht, wird es nie heruntergeladen. Jetzt ist lazy loading auch auf Joomla! verfügbar

Die Vorteile von lazy loading sind vielfältig; Seiten laden schneller, was bedeutet, dass die Benutzererfahrung besser ist, SEO-Werte in die Höhe schnellen und Ihre Joomla-Inhalte für Benutzer auf Low-End-Geräten oder mit langsamer Internetverbindung besser zugänglich sind. Vor einigen Wochen haben wir eine Verbesserung des grundlegenden lazy loading-Rezepts auf WordPress vorgestellt. Heute präsentieren wir es auch für Joomla!, aber zuvor werfen wir einen Blick darauf, wie Sie progressives lazy loading auf Joomla! aktivieren können.

Aktivieren von Lazy Loading auf Joomla!

Lazy loading auf Joomla! ist Teil der Speed Cache-Erweiterung. Die Aktivierung von lazy loading ist so einfach wie das Umschalten eines Schalters. Joomla!'s Speed Cache enthält jedoch auch andere Funktionen, die Ihnen helfen, das Beste aus lazy loading herauszuholen.

Um auf Ihrem Joomla!-Blog zu konfigurieren, gehen Sie zu Ihrem -Dashboard. Klicken Sie dort auf die Konfigurations--Schaltfläche, um zur brandneuen -Einstellungsseite zu gelangen.

Die lazy loading Einstellungen befinden sich im Parameter Tab. Navigieren Sie dorthin oder verwenden Sie die brandneue Suchfunktion, um nach den lazy loading Einstellungen zu suchen. Um lazy loading zu aktivieren, schalten Sie einfach die lazy loading Option ein. Sobald Sie dies tun, zeigt Speed Cache neue Optionen an, um lazy loading an Ihre Website anzupassen.

Bilder von Joomla! Lazy Loading ausschließen

Mit den ersten beiden Feldern können Sie bestimmte Bilder von lazy loading ausschließen, wenn sie sehr klein sind, wie z.B. Icons oder kleine Logos. Dies ist nützlich, um lazy loading nur für Bilder zu aktivieren, die tatsächlich die Ladezeit Ihres Joomla!-Blogs beeinflussen. Stellen Sie daher sicher, dass Sie nur sehr kleine Bilder ausschließen, damit lazy loading nicht wirkungslos bleibt.

In einigen Fällen möchten Sie jedoch möglicherweise ganze Sätze von Joomla!-Beiträgen oder -Seiten von lazy loadingausschließen (oder einschließen). Die Gründe, warum Sie dies tun, variieren stark und sind vernünftig – vielleicht ist das Medium, das sie enthalten, integraler Bestandteil des Inhalts. Die folgenden zwei Felder werden zu diesem Zweck verwendet.

Mit dem ersten Feld können Sie lazy loading nur für bestimmte Seiten aktivieren, und mit dem zweiten Feld können Sie lazy loading nur für eine Auswahl des Inhalts deaktivieren. In beiden Fällen sind auch Platzhalter erlaubt; verwenden Sie das Sternchen-Symbol, um lazy loading auf Sätze von gleichnamigen Joomla!-Beiträgen oder -Seiten anzuwenden. Speichern Sie die Änderungen, um lazy loadingzu aktivieren: lazy loading wird auf Ihrem Joomla!-Blog automatisch wirksam.

Wie Progressive Lazy Loading auf Joomla! funktioniert

Lazy loading liefert Inhalte, sobald sie benötigt werden. Normalerweise bestehen Seiten aus einer Kombination von Text und Bildern. Das Herunterladen von Medien dauert länger als das Herunterladen von Text, insbesondere auf Low-End-Mobilgeräten oder bei langsamer Internetverbindung. Während Ihr Joomla!-Blog Mobilgeräte oder Internetverbindungen nicht magisch beschleunigen kann, kann er das Nächstbeste tun: die Benutzererfahrung verbessern.

Was lazy loading tatsächlich bedeutet, ist, dass der Browser zunächst den Text lädt, der üblicherweise ein integraler Bestandteil Ihres Joomla!-Blogs ist. Text ist auch viel kleiner in der Größe, so dass er schneller lädt und Ihre Leser folgen können. Wenn sie nach unten scrollen und ein Bild in Sicht kommt, lädt lazy loading herunter und zeigt das Bild an.

In der Realität kann es immer noch einige Zeit dauern, bis ein Bild geladen ist. Daher erstellt das progressive Bild-Lazy-Loading automatisch eine kleine Version der Bilder – 20 Pixel breit, mit 4 Farben und nur wenigen KB Größe – vergrößert sie auf die ursprüngliche Größe und verwischt sie dann. Der Effekt ist eine unscharfe Version des Bildes in voller Größe, die anzeigt, dass das Bild noch heruntergeladen wird. Wenn das Lazy-Loading das Herunterladen des Bildes beendet hat, ersetzt Joomla! das unscharfe Bild durch das vollständige Bild.

Das progressive lazy loading wird automatisch mit lazy loadingaktiviert, was bedeutet, dass Sie keine weiteren Änderungen vornehmen müssen. Am besten ist, dass die progressive lazy loading durch die Verwendung von nur kleinen Bildversionen sehr wenig Overhead für Ihren Joomla!-Speicherplatz erzeugt.

Lazy Loading in Joomla!-Galerien

Lazy loading diskriminiert nicht. Speed Cache’s lazy loading funktioniert für jedes Bild, einschließlich Galerien, wie z.B. Droppics Galerien. Ähnlich wie bei normalen Bildern vergrößert Speed Cache eine kleine Version der Bilder in der Galerie und verwischt sie. Wenn Benutzer nach unten scrollen, lädt lazy loading die Bilder in voller Größe herunter.

Am besten ist, dass Speed Cache lazy loading Ihren Arbeitsablauf nicht behindert. Stattdessen injiziert es lazy loading in Ihren Prozess: Einfach ein Bild oder eine Galerie an beliebiger Stelle in Ihrem Joomla!-Blog einfügen und Speed Cache lädt die Bilder lazy mittels AJAX einzeln nach dem Hauptinhalt - hauptsächlich Text und kleine Bilder, die von Ihren Einstellungen ausgeschlossen sind - geladen wurden.

Intelligentes Lazy Loading basierend auf der Bildschirmhöhe

Lazy loading dreht sich alles um Scrollen und Bildschirmhöhe. Speed Cache’s lazy loading ist sehr intelligent, indem es nur auf die aktuelle Bildschirmhöhe (basierend auf dem Viewport) angewendet wird und die nächste vorlädt. Wenn Sie also eine schnelle Verbindung haben oder langsam scrollen, werden Sie nicht einmal bemerken, dass lazy loading auf Ihrer Joomla-Website aktiviert ist.

Darüber hinaus gilt diese lazy loading basierend auf der Bildschirmhöhe nur für die aktuelle Bildschirmhöhe, auch wenn sie sich in der Mitte der Seite befindet, beispielsweise bei einem Link zu einem Anker. Dann wird die lazy loading angewendet, sobald Sie nach oben oder unten scrollen.

Joomla-SEO und Lazy Loading

Das in Speed Cache verwendete Lazy-Loading hat keinen Einfluss auf SEO. Tatsächlich werden Suchmaschinen, die Ihre Inhalte crawlen, wie der Google-Bot, nur Vorteile sehen:

• Die Ladezeiten der Seite sind deutlich besser;
• Alle Bildinhalte, einschließlich Alternativtext, Bildtitel und Beschreibung, werden sofort ohne lazy loadinggeladen; und
• Bildunterschriften werden auch geladen, wenn die Seite zum ersten Mal gerendert wird.

Das progressive Lazy-Loading ist ein Kompromiss zwischen der Anzeige von Medien und der Verzögerung des Herunterladens durch Hinzufügen visueller Hinweise. Gleichzeitig sorgt Lazy-Loading dafür, dass die Navigation auf Ihrem Joomla!-Blog schneller und angenehmer wird. Es sollte keine Grenzen geben, großartige Inhalte zu teilen, und jetzt gibt es mit dem progressiven Lazy-Loading auf Joomla! auch keine Grenzen mehr, sie zugänglich zu machen.

Natürlich können wir auch daran denken, dass Speed Cache auch viele andere großartige Tools wie ein wirklich schönes Cache-Modul anbietet, das es uns ermöglicht, unsere Sites zu beschleunigen und auf die nächste Stufe zu heben!

Überprüfen Sie Speed Cache für Joomla:  https://www.joomunited.com/products/speed-cache