JaJuMa Preload Critical Resources & Assets Extension

Resource Hints:
Preload Critical
Resources & Assets

Für Magento 2

Get it Now!

Approved & Verified by
Magento Marketplace
 

Unencrypted.
100% Open Source
& Customizable

Coding Standards Applied.
Clean & Readable Code

Countless Satisfied Customers:
Be The Next One!

Beschreibung

Verbessern Sie Ihre Core Web Vitals Seite Erfahrung KPIs und Conversion-Rate,
indem Sie Ihre Magento 2 Seiten schneller laden.

Durch die Verwendung von Resource Hints für das
Preloading kritischer Resourcen & Assets für schnellere Ladegeschwindigkeit und
Verbesserte Largest Contentful Paint (LCP) Werte für Ihren Magento 2 Shop!

Das Problem
Page Speed &
CWV & LCP
Optimierung

Wenn Ihr Kunde Ihr Geschäft besucht, muss der Browser zunächst das HTML-Dokument herunterladen, das HTML analysieren, um alle Ressourcen zu ermitteln, die zum Rendern der Seite erforderlich sind, und dann diese zahlreichen zusätzlichen Ressourcen und Assets wie CSS-Dateien, JS-Dateien und Bilder herunterladen.
Dieser Prozess und das Laden all dieser vielen Ressourcen braucht Zeit. Wenn es also um Seitenladezeiten und Leistungs-KPIs geht, ist es wichtig, kritische Ressourcen zuerst zu laden, um sicherzustellen, dass der Browser die Seite für Ihre Kunden so schnell wie möglich darstellen kann. Dies gilt umso mehr, seit Google die neuen Core Web Vitals (CWV) KPIs zur Leistungsmessung eingeführt hat, die sich stärker auf die Nutzererfahrung und das schnelle Rendering konzentrieren. Zum Beispiel ist der Largest Contentful Paint (LCP), einer dieser Core Web Vitals, in den meisten Fällen vom größten Bild above-the-fold, auch "Hero-Image" genannt, abhängig.
Daher ist es wichtig, dem Browser mitzuteilen, welche Ressourcen und Assets für das Rendering "kritisch" sind und zuerst geladen werden sollten. Wenn man es richtig macht und den Browser dazu bringt, die richtigen Assets zuerst herunterzuladen, ist das eine große Chance, die Ladegeschwindigkeit der Seite zu verbessern, insbesondere in Bezug auf CWV und Largest Contentful Paint.

Lassen Sie sich diese Gelegenheit nicht entgehen, um Ihre Website erheblich zu beschleunigen und Ihre Performance-KPIs wie LCP zu verbessern, die Teil der von Google verwendeten Ranking-Signale für die User Experience (UX) sind.

Die Lösung
Resource Hints:
Preload Critical
Resources & Assets

Sie haben bereits alle gängigen Performance-Optimierungen in Ihrem Magento 2 Shop vorgenommen, sind aber noch nicht ganz zufrieden mit Ihren Seitenladezeiten und Performance-Werten? Möchten Sie Ihren Largest Contentful Paint KPI optimieren, um den Core Web Vitals Test zu bestehen?
Dann ist es an der Zeit, Ihrem Magento 2 Shop einen weiteren Geschwindigkeitsschub für verbesserte Seitenladezeiten zu geben, indem Sie Ressourcenhinweise zum Vorladen aller wichtigen Ressourcen und Assets auf Ihrer Website verwenden.
Vorladen über Resource-Hints ist ein Mittel, um Prioritäten zu definieren, welche Ressourcen und Anlagen erforderlich oder wichtig sind, damit der Browser eine Website so schnell wie möglich rendern und anzeigen kann. Anstatt also den Browser zuerst das HTML herunterladen zu lassen, dann die Ressourcen auf der Seite zu analysieren und zu entdecken und erst dann mit dem Herunterladen zu beginnen, sagen wir dem Browser: "Hey, lieber Browser, du brauchst diese wichtige Sache in Kürze, bitte lade sie sofort herunter". Mit diesem kleinen Trick können Sie einige signifikante Verbesserungen in Bezug auf die Seitengeschwindigkeit und insbesondere in Bezug auf Ihren Largest Contentful Paint (LCP) Score erzielen.
Preload Hero-Images / Largest Contentful Paint Elemente:
Die JaJuMa Preload Critical Resources & Assets Extension ermöglicht es Ihnen, das Hero-Bild / Largest Contentful Paint Element auf jeder Ihrer Seiten individuell vorzuladen. Sie können das entsprechende Bild sowohl für Ihre Homepage als auch für jede andere CMS-Seite in Ihrem Magento 2-Shop konfigurieren. Für Kategorieseiten können Sie wählen, ob das Kategoriebild oder das Bild des ersten Produkt im Grid automatisch geladen werden soll oder ob Sie das vorgeladene Bild individuell für jede Kategorie konfigurieren möchten.
Auf Produktdetailseite wird automatisch das erste Bild in der Media Gallery vorgeladen.

 

Sie haben noch Fragen? Einen Feature-Request?
Oder benötigen individuelle Anpassungen?
Schreiben Sie uns:

Highlights

Resource Hints: Preload Critical Resources & Assets by JaJuMa-Develop
Die Magento Extension für Preload / DNS Prefetch / Preconnect / Prefetch Ihre kritischen Ressourcen und Vermögenswerte über Resource Hints
für Preload des LCP Element.
Performance-Optimierung Ihres Magento 2 Shops und
Optimierung Ihrer Core Web Vitals-Werte für Largest Contentful Paint (LCP)

Preload Hero-Images /
Largest Contentful Paint (LCP) Elemente

Automatisch oder manuell konfiguriert
LCP-Bild für jede Seite vorladen

Ermöglicht DNS-Prefetches und Preconnect
für externe Ressourcen und Assets

Globale Konfigurationen für
DNS-Prefetch/Preconnect/Preload/Prefetch JS/CSS/Font Files

Konfigurierbarer und/oder automatischer
Largest Contentful Paint Image Preload

🚀

Core Web Vitals / Largest Contentful Paint (LCP)
Optimierung

Details

Resource Hints for Preload Critical Resources & Assets Extension für Magento 2 by JaJuMa Im Detail.
Steuern Sie jetzt Ihren Magento 2 Waterfall.
Lassen Sie den Browser über Resource-Hints wissen, was wirklich wichtig ist, und laden Sie es zuerst, um Ihre Core Web Vitals zu verbessern.

Vorladen über Resource Hints kann ein mächtiges Werkzeug zur Optimierung der Seitengeschwindigkeit sein, insbesondere im Hinblick auf nutzerzentrierte KPIs wie Core Web Vitals, indem dem Browser mitgeteilt wird, was früher geholt werden muss, weil es für das Rendern der Seite wichtig ist.
Ein typischer Kandidat für Preloading ist üblicherweise das LCP element/image.
JaJuMa Preload Critical Resources & Assets ermöglicht es Ihnen, Ihr LCP-Element auf Produktseiten, das erste Produktbild in der Mediengalerie, auf Kategorieseiten, das Kategoriebild oder das erste Produktbild im Grid, automatisch oder über manuelle Konfigurationen für Kategorieseiten und CMS-Seiten vorzuladen. Für Kategorie- und CMS-Seiten können Sie sogar konfigurieren, dass responsive Bilder je nach Gerät des Kunden vorgeladen werden. Dadurch lädt der Browser nur das passende Bild vor, egal ob für Mobil- oder Desktopgeräte.
Zusätzlich können Sie mit unserer Erweiterung globale Preloads/Prefetch/Preconnects für kritische Assets wie JS-, CSS- oder Font-Dateien konfigurieren, die auf alle Seiten Ihrer Website angewendet werden.
Um die Sache noch besser zu machen, wenn Sie unsere Extensions WebP Optimized Images oder Ultimate Image Optimizer verwenden, wird immer das beste verfügbare Bildformat vorgeladen, WebP, AVIF und sogar hochauflösende Bilder werden berücksichtigt und von den Browsern automatisch heruntergeladen, wenn sie vom Gerät des Kunden unterstützt werden.

 

Global Resource Hints Konfigurationen:

JaJuMa Preload Critical Resources & Assets unterstützt 4 verschiedene Resource Hints:

  1. DNS Prefetch

  2. Preconnect

  3. Preload

  4. Prefetch

Resource Hints Erläuterungen:

“DNS Prefetch”
Resource Hints:

DNS-Prefetching weist den Browser an, im Hintergrund eine DNS-Abfrage für die konfigurierte Domäne durchzuführen.
DNS Prefetch minimiert die Latenzzeit, da der DNS-Lookup bereits stattgefunden hat, sobald der Download einer Ressource von dieser Domain beginnt.

“Preconnect”
Resource Hints:

Preconnect weist den Browser an, im Hintergrund eine vollständige Verbindung zu der konfigurierten Domäne aufzubauen, einschließlich DNS-Lookups, TLS-Verhandlungen und TCP-Handshakes.
Preconnect minimiert die Latenzzeit, indem es kostspielige Roundtrips eliminiert, bevor der Download einer Ressource von dieser Domain beginnt.

“Preload”
Resource Hints:

Preload weist den Browser an, eine Ressource zu holen, die auf der aktuellen Seite verwendet wird.
Das Vorladen stellt sicher, dass z. B. eine JS/CSS-Datei oder ein Bild, die sonst erst spät entdeckt würde, bereits geladen und verfügbar ist, wenn sie für das Rendern der aktuellen Seite benötigt wird.

“Prefetch”
Resource Hints:

Prefetching weist den Browser an, eine Ressource mit niedriger Priorität abzurufen und im Cache zu speichern
Vorabgerufene Ressourcen sind dann bereits verfügbar, wenn der Benutzer später eine Seite besucht, die diese Datei benötigt.

Verwenden Sie Ressourcen-Hinweise und Vorladen mit Bedacht:
Laden Sie nur Ressourcen vor, die wirklich wichtig sind. Andernfalls kann es sein, dass beim "Vorladen von allem" keine oder sogar eine negative Auswirkung entsteht.

Preload Largest Contentful Paint (LCP) Images per Layout:

JaJuMa Preload Critical Resources & Assets unterstützt Preloading von Largest Contentful Paint (LCP) Bildern via Resource Hints für:

  1. Homepage / CMS Pages

  2. Category Pages

  3. Product Detail Pages

Optionen für das Preloading von Largest Contentful Paint (LCP) Bildern:

Homepage/
CMS Pages:

Für die Homepage und jede CMS-Seite ermöglicht die Extensions die manuelle Konfiguration des LCP-Elements, das vorgeladen werden soll.
Optional ist es auch möglich, responsive Bilder für die Desktop- und Mobile-Ansicht vorzuladen.

Category
Pages

Wie bei CMS-Seiten können Sie das LCP-Element für Kategorieseiten manuell konfigurieren, einschließlich responsiver Bilder.
Wenn kein Bild manuell konfiguriert wird, können Sie alternativ das Bild der Kategorie oder das Bild des ersten Produkt im Grid automatisch vorladen lassen.

Product Detail
Pages

Für Produktdetailseiten können Sie aktivieren, dass das erste Produktbild in der Mediengalerie automatisch vorgeladen wird.

Für ein optimales Ergebnis bzgl. Largest Contentful Paint (LCP) Optimierung:
Diese Extension ist kompatbible mit WebP Optimized Images & Ultimate Image Optimizer Extension.
Wir empfehlen, diese Extension zusammen mit einer dieser beiden Erweiterungen zu verwenden. Wenn diese Erweiterungen installiert sind, wird das beste verfügbare Bildformat (WebP, AVIF & High-Res) automatisch vorgeladen.

Konfigurations-Menü & Screenshots

Extension Configuration

General Configuration

Global Preload Resources

Preload LCP Image - CMS Page

Preload LCP Image Category 1

Preload LCP Image Category 2

Preload LCP Image Product Page

PageSpeed - No Preload

PageSpeed - Using Resource Hints/ Preload

JaJuMa Resource Hints - Preload Critical Resources & Assets Extension Configuration
JaJuMa Resource Hints - Preload Critical Resources & Assets General Configuration
JaJuMa Resource Hints - Preload Critical Resources & Assets - Global Preload Resources
JaJuMa Resource Hints - Preload Critical Resources & Assets - Preload LCP Image CMS Page
JaJuMa Resource Hints - Preload Critical Resources & Assets - Preload LCP Image Category Page 1
JaJuMa Resource Hints - Preload Critical Resources & Assets - Preload LCP Image Category Page 2
JaJuMa Resource Hints - Preload Critical Resources & Assets - Preload LCP Image Product Page
JaJuMa Resource Hints - Preload Critical Resources & Assets - PageSpeed - No Preload
JaJuMa Resource Hints - Preload Critical Resources & Assets - PageSpeed - Using Resource Hints/ Preload

Manual & FAQ



Einfacher gehts nicht:

  • Extension installieren,
  • Ihre Resource Hints for Preloading konfigurieren
  • Ihr LCP Element preloading konfigurieren und

...los geht's!


Changelog

 

Version: 1.0.0

  • Initial Release

Compatibility

 

Magento 2.0

Magento 2.1

Magento 2.2

Magento 2.3

Magento 2.4


Hyvä Theme Compatible
Hyvä Demo