Resource Hints: Preload Critical Resources & Assets für Magento 2
Composer Installation? Resource Hints Für Magento 2
Preload Critical Resources & Assets
Verbessern Sie Ihre Core Web Vitals Page Experience KPIs und Konversionsrate, indem Sie Largest Contentful Paint (LCP) Bilder und andere wichtige Ressourcen preloaden.
Die Magento Extension Für Preload / DNS Prefetch / Preconnect / Prefetch Critical Resources & Assets Via Resource Hints:
- Core Web Vitals Optimierung
- Preload Hero-Images / Largest Contentful Paint (LCP) Bilder
- Preload JS / Font / CSS Dateien
- DNS-Prefetches & Preconnect
Für Externe Ressourcen & Assets - Prefetch Assets
Für nachfolgende Page Views - Kompatibel Mit WebP Optimized Images & Ultimate Image Optimizer
Lizenz:
- Einmalige Zahlung - Kein Abo
- Lebenslanger Zugriff auf Quellcode
- 1 Jahr kostenfreier Support
- 1 Jahr kostenfreie Updates
Geprüft und verifiziert von Magento Marketplace
Hyvä Theme
Kompatibel
Unverschlüsselt. 100% Open Source & anpassbar
Coding Standards. Sauberer & lesbarer Code
Unzählige zufriedene Kunden: Seien Sie der Nächste!
Made With Love
Unsere Extensions sind gebaut mit Liebe und Leidenschaft für neue Dinge, Perfektion und Performance.
Praxis Erprobt
Unsere Extensions sind in unseren eigenen Kundenprojekten praxiserprobt.
- Extension Konfiguration
- Allgemeine Konfiguration
- Global Preload Ressourcen
- Preload LCP Bild Kategorien 1
- Preload LCP Bild Kategorie 2
- Preload LCP Bild - CMS Seite
- Preload LCP Bild Produktseite
- PageSpeed - Ohne Preload
- PageSpeed - Mit Resource Hints/ Preload
Configurations & Screenshots
Lösung
Verbessern Sie Ihre Core Web Vitals Page Experience 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.
Highlights
Resource Hints: Preload Critical Resources & Assets by JaJuMa-Develop
Die Magento Extension für Preload / DNS Prefetch / Preconnect / Prefetch
Ihre kritischen Ressourcen und Assets über Resource Hints und für Preload des LCP Element.
Performance-Optimierung Ihres Magento 2 Shop.
Optimierung Ihrer Core Web Vitals-Werte für Largest Contentful Paint (LCP)
Preload Hero-Images / Largest Contentful Paint (LCP) Bilder
zur Core Web Vitals Optimierung
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
von JS/CSS/Font Dateien
Konfigurierbarer und/oder
automatischer
Largest Contentful Paint Image Preload
Core Web Vitals / Largest Contentful Paint (LCP)
Optimierung
Kompatibel mit JaJuMa WebP Optimized Images
Automatischer Preload des WebP Bild wenn verfügbar
Kompatibel mit JaJuMa Ultimate Image Optimizer
Automatischer Preload des AVIF, WebP, Responsive & High-Res Bild when verfügbar
Details
Resource Hints Für 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
Resource Hints teilen dem Browser mit, was früher downgeloaded werden muss, weil es für das Rendern der Seite wichtig ist.
Ein typischer Kandidat für Preloading ist üblicherweise das LCP Element/Bild.. 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 Responsive & 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
- DNS Prefetch
- Preconnect
- Preload
- 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.
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.
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.
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.
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
- Homepage / CMS Seiten
- Kategorieseiten
- Produktdetailseiten
CMS Seiten:
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.
seiten:
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.
seiten:
Für Produktdetailseiten können Sie aktivieren, dass das erste Produktbild in der Mediengalerie automatisch vorgeladen wird.
Diese Extension ist kompatibel mit WebP Optimized Images und Ultimate Image Optimizer Extensions. Wir empfehlen, diese Extension zusammen mit einer dieser beiden Erweiterungen zu verwenden. Wenn diese Extensions installiert sind, wird das beste verfügbare Bildformat (WebP, AVIF, Responsive & High-Res) automatisch vorgeladen.
Schreiben Sie Ihre Bewertung
Frequently Asked Questions
Changelog
Version: 1.0.0
- Initial Release
Version: 1.0.1
- Bugfix: Update db_schema.xml
Version: 1.0.2
- Added: Option to enable/disable preload high-res images on PDP
Mehr Extensions
Vielleicht auch interessant für Sie?
Weitere wertvolle Extensions und Add-Ons für Ihren Magento-Shop
