Resource Hints: Preload Critical Resources & Assets für Magento 2

Resource Hints: Preload Critical Resources & Assets Extension for Magento 2
Hyvä Compatible Themes Out-of-the-box
Mage-OS Compatible
Composer Installation 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 / Early Hint Critical Resources & Assets Via Resource Hints:

  • Core Web Vitals Optimierung
  • Preload Hero-Images / Largest Contentful Paint (LCP) Bilder
  • Preload JS / Font / CSS Dateien
  • Early Hints für JS / Font / CSS Dateien (mit Cloudflare)
  • DNS-Prefetches & Preconnect
    Für Externe Ressourcen & Assets
  • Prefetch Assets
    Für nachfolgende Page Views
  • Kompatibel Mit WebP Optimized Images & Ultimate Image Optimizer

Alle Highlights Anschauen

Lizenz:


Magento Marketplace Approved by
  • Einmalige Zahlung - Kein Abo
  • Lebenslanger Zugriff auf Quellcode
  • 1 Jahr kostenfreier Support
  • 1 Jahr kostenfreie Updates
awesomeicons6/brands/magento

Geprüft und verifiziert von Magento Marketplace

awesomeicons6/solid/award

1st Extension Provider
     Mit Hyvä Support
     Awesome seit 2021!

awesomeicons6/solid/code-fork

Unverschlüsselt. 100% Open Source & anpassbar

awesomeicons6/solid/code

Coding Standards. Sauberer & lesbarer Code

awesomeicons6/regular/face-smile-beam

Unzählige zufriedene Kunden: Seien Sie der Nächste!

awesomeicons6/regular/heart

Made With Love

Unsere Extensions sind gebaut mit Liebe und Leidenschaft für neue Dinge, Perfektion und Performance.

awesomeicons6/solid/handshake

Praxis Erprobt

Unsere Extensions sind in unseren eigenen Kundenprojekten praxiserprobt.

Kunden Feedback

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 / Early Hints

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)

awesomeicons6/regular/image

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

zur Core Web Vitals Optimierung

awesomeicons6/regular/copy

Automatisch oder
manuell konfiguriert

LCP-Bild für jede Seite vorladen

awesomeicons6/solid/angles-right

Ermöglicht DNS-Prefetches
und Preconnect

für externe Ressourcen und Assets

awesomeicons6/solid/earth-europe

Globale Konfigurationen für DNS-Prefetch/Preconnect/Preload/Prefetch

von JS/CSS/Font Dateien

awesomeicons6/solid/stopwatch

Unterstützt
103 Early Hints

Mit Cloudflare

awesomeicons6/solid/file-lines

Konfigurierbarer und/oder
automatischer

Largest Contentful Paint Image Preload

🚀

Core Web Vitals / Largest Contentful Paint (LCP)

Optimierung

JaJuMa WebP Optimized Images Extension

Kompatibel mit JaJuMa WebP Optimized Images

Automatischer Preload des WebP Bild wenn verfügbar

JaJuMa Ultimate Image Optimizer Extension

Kompatibel mit JaJuMa Ultimate Image Optimizer

Automatischer Preload des AVIF, WebP, Responsive + High-Res & Responsive Bild wenn verfügbar

awesomeicons6/brands/hyva-colored
Hyvä Theme Compatible
Zur Hyvä Demo
awesomeicons6/brands/mage-os-filled
Mage-OS Compatible
Zur Mage-OS Demo

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/Early Hints 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

JaJuMa Preload Critical Resources & Assets unterstützt 5 verschiedene Resource Hints:
  • DNS Prefetch
  • Preconnect
  • Preload
  • Prefetch
  • 103 Early Hints
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.

“103 Early Hints”
Resource Hints:

Weisen Sie den Browser darauf hin, eine Ressource so schnell wie möglich zu laden. Early Hints sendet Preload-Hinweise an den Browser vor einer endgültigen Antwort.

Es kann sofort mit dem Abrufen wichtiger Ressourcen (z. B. Fonts, CSS, JavaScript) begonnen werden, noch bevor das Hauptdokument geladen wurde.
(Diese Option funktioniert nur für Websites, die über Cloudflare laufen)

awesomeicons6/regular/lightbulb
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:
  • Homepage / CMS Seiten
  • Kategorieseiten
  • Produktdetailseiten
Optionen für das Preloading von Largest Contentful Paint (LCP) Bildern:
Homepage/
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.

Kategorie-
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.

Produktdetail-
seiten:

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

awesomeicons6/regular/lightbulb
Für ein optimales Ergebnis bzgl. Largest Contentful Paint (LCP) Optimierung:
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

Ihre Bewertung:
Laden...

Sie haben Ihre Bewertung für die Moderation übermittelt.

Frequently Asked Questions

General Magento Extension Questions
How to install Magento 2 extensions from JaJuMa?

We offer different ways of Magento 2 extension installation:

Before Installing

  • We recommend you to duplicate your live store on a staging/test site and try installation on your staging/test site before deploying to your live store
  • Backup Magento files and the store database


Please Note:
It’s very important to backup all themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not skip this step.

Manual Extension Installation via FTP/SSH:

After purchasing an extension, you can download the module as .zip package in your Customer Account.
After downloading the .zip package, please follow these steps for installation:

  1. Log into your hosting space via a FTP client (e. g. FileZilla, WinSCP, cuteFtp)
  2. Create Folder: /app/code/Jajuma/[ExtensionName]*
  3. Unzip extension package and upload files into: /app/code/Jajuma/[ExtensionName]*
  4. Enter and run the following commands at the command line:
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy

* Note: [ExtensionName] can be found in registration.php file: Jajuma_[ExtensionName]

 

Extension Installation via Composer / Magento Marketplace:

For installation via composer, please get the extension

  • from Github and install as any other extension from Github or
  • from Magento Marketplace and follow this Installation Guide and
    make sure to use the correct key for Marketplace repo (the key that belongs to the account that purchased the module).
    In case of issue with installing via composer, please double-check to use the correct key for Marketplace repo.
    Your key should be in your auth.json file.


Links for composer installation to Github/Marketplace can be found on top of this page in technical info section - Click Here

Error Could not find a matching version of package jajuma/[module-name]. Check the package spelling, your version constraint and that the package

With this error message, most likely the key used for the Marketplace repo is wrong/invalid, i. e. not the key that belongs to the account that purchased the module. Please double-check to use the correct key for the Marketplace repo.

For installing extensions from Magento Marketplace, please follow this guide and make sure to use the correct key for the Marketplace repo:
Installation Guide

Please feel free to get in touch with our support in case you have any further questions or concerns or check with Marketplace support in case the installation issue can not be resolved.

Do you offer free technical support?

After purchasing a (non-free) extension we provide 12 month support via support ticket for free.

Do you offer customization service for your extensions?

Yes, please get in touch with our customer support so we can clarify your requirement and provide a quote.

Where can I download my extension?

You can download your extension from your customer account as soon as the payment has been processed.

Do you offer a free trial period?

Unfortunately, we can not offer a free trial period.

However, we do have demo site for all our extensions. Feel free to test all the features and see how the extensions work.

In case of any questions or concerns regarding compatibility or how some extension works our customer support is also always happy to help.

Do you offer refunds?

All our extensions are non-tangible downloadable goods. Hence we can unfortunately not issue refunds.

Refunds will NEVER be issued for services provided such as installation support, customization and software development work.

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

Version: 1.0.3

  • Added: Compatibility with Ultimate Image Optimizer v3, incl. preloading responsive images
  • Added: Early Hints (only for sites running on Cloudflare)

Mehr Extensions

Vielleicht auch interessant für Sie?
Weitere wertvolle Extensions und Add-Ons für Ihren Magento-Shop

Unsere Kunden sind begeistert!

Wie gefällt Ihnen die Extension?