Resource Hints: Preload Critical Resources & Assets for 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 For Magento 2
Preload Critical Resources & Assets

Improve your Core Web Vitals page experience KPIs and conversion rate by preloading Largest Contentful Paint (LCP) images and other critical resources.

The Magento Extension For Preload / DNS Prefetch / Preconnect / Prefetch / Early Hint Critical Resources & Assets Via Resource Hints:

  • Core Web Vitals Optimization
  • Preload Hero-Images / Largest Contentful Paint (LCP) Images
  • Preload JS / Font / CSS Files
  • Early Hints For JS / Font / CSS Files (with Cloudflare)
  • DNS-Prefetches & Preconnect
    For External Resources & Assets
  • Prefetch Assets
    For Sub-Sequent Page Views
  • Compatible With WebP Optimized Images & Ultimate Image Optimizer

See All Highlights

License:


Magento Marketplace Approved by
  • One-Time Payment
  • Lifetime Access To Source Code
  • 1 Year Free Support
  • 1 Year Free Updates
awesomeicons6/brands/magento

Approved & Verified by Magento Marketplace

awesomeicons6/solid/award

1st Extension Provider
     With Hyvä Support
     Awesome since 2021!

awesomeicons6/solid/code-fork

Unencrypted. 100% Open Source & Customizable

awesomeicons6/solid/code

Coding Standards Applied. Clean & Readable Code

awesomeicons6/regular/face-smile-beam

Countless Satisfied Customers: Be The Next One!

awesomeicons6/regular/heart

Made With Love

Our extensions are made with love & passion for building new things, perfection & performance in mind.

awesomeicons6/solid/handshake

Field Tested

Our extensions are field-proven in our own client projects.

Customer Feedback

Solution

Improve Your Core Web Vitals Page Experience KPIs And Conversion Rate By Making Your Magento 2 Pages Load Faster.

With Resource Hints For Preload Critical Resources & Assets For Better Core Web Vitals And Improved Largest Contentful Paint (LCP) For Your Magento 2 Store!

THE PROBLEM
PAGE SPEED &
CWV & LCP
OPTIMIZATION

When your customer visits your store, the browser has to first download the HTML document, parse the HTML to discover all the resources needed to render the page, and then download these numerous additional resources and assets such as CSS files, JS files, and images.
This process and loading all these many resources takes time. So when it comes to page load times and performance KPIs it is important to load critical resources first to make sure the browser can render the page for your customers as fast as possible. Even more so since Google introduced the new Core Web Vitals (CWV) KPIs for measuring performance, with a stronger focus on user experience and fast rendering. For example, the Largest Contentful Paint (LCP), one of these Core Web Vitals, is in most cases dependent on the biggest image above-the-fold, also called "Hero-Image".
So it is important to tell the browser which resources and assets are "critical" for rendering and should be loaded first. When done right, making the browser download the right assets first, is a great chance to improve page loading speed, especially regarding CWV and Largest Contentful Paint.

Don't miss on this opportunity to significantly speed up your site and improve your performance KPIs such as LCP that are part of the page experience ranking signals used by Google.

THE SOLUTION
RESOURCE HINTS:
PRELOAD CRITICAL
RESOURCES & ASSETS

Already did all the common performance optimizations in your Magento 2 store, but still not fully happy with your page load times and performance scores? Want to optimize your Largest Contentful Paint KPI for passing the Core Web Vitals test?
Then it is time to give your Magento 2 store another speed bump for improved page loading times by using resource hints for preloading all the critical resources and assets on your site.
Preloading via resource hints is a means of prioritizing which resources and assets are required or important for the browser to render and show a website as fast as possible. So instead of letting the browser first download the HTML, then parse and discover the resources on the page and only then start downloading them, we tell the browser: "Hey dear browser, you need this important thing shortly, please download it right away". By using this neat little trick you can realize some significant gains regarding page speed and specifically for example regarding your Largest Contentful Paint (LCP) score.
Preload Hero-Images / Largest Contentful Paint elements:
JaJuMa Preload Critical Resources & Assets extension enables you to preload the hero-image / Largest Contentful Paint element on each of your pages individually. You can configure the relevant image for your homepage as well as any other CMS page in your Magento 2 store. For category pages, you can choose to either get the category image automatically or configure the preloaded image individually for each category.
On Product Pages, the first image in Media Gallery will be preloaded automatically.

Highlights

Resource Hints: Preload Critical Resources & Assets by JaJuMa-Develop
The Magento Extension For
Preload / DNS Prefetch / Preconnect / Prefetch / Early Hints

Critical Resources And Assets Via Resource Hints And For Preload LCP Images.

Improve Your Magento 2 Store Performance.
Optimize Your Core Web Vitals Values And Largest Contentful Paint (LCP)

awesomeicons6/regular/image

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

For Core Web Vitals Optimization

awesomeicons6/regular/copy

Automatically Or
Manually Configured

Preload Image For Each Page

awesomeicons6/solid/angles-right

Allows DNS-Prefetches
And Preconnect

For External Resources And Assets

awesomeicons6/solid/earth-europe

Global Configs for DNS-Prefetch/Preconnect/Preload/Prefetch

JS/CSS/Font Files

awesomeicons6/solid/stopwatch

Supports
Early Hints

With Cloudflare

awesomeicons6/solid/file-lines

Configurable
And/Or Automatic

Largest Contentful Paint Image Preload

🚀

Core Web Vitals / Largest Contentful Paint (LCP)

Optimization

JaJuMa WebP Optimized Images Extension

Compatible With JaJuMa WebP Optimized Images

Automatically Preload WebP Image If Available

JaJuMa Ultimate Image Optimizer Extension

Compatible with JaJuMa Ultimate Image Optimizer

Automatically Preload AVIF, WebP + High-Res & Responsive Image If Available

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

Details

Resource Hints For Preload Critical Resources & Assets
Extension for Magento 2 by JaJuMa In Detail.

Allows You To Control Your Magento 2 Waterfall.

Let The Browser Know What's Really Important To Load First For Improved Core Web Vitals Via Resource Hints.

Preloading Via Resource Hints Is A Powerful Tool For Optimizing Page Speed, Especially Regarding User-Centric CWV KPIs

Resource Hints tell the browser what needs to be fetched sooner because its important for rendering the page.
One typical candidate for preloading is usually the LCP element/image. JaJuMa Preload Critical Resources & Assets allows you to preload your LCP element on product pages, the first product image in media gallery, on category pages, the category image, automatically or via manual configs for category pages and CMS pages. For category and CMS pages you can even configure responsive images to be preloaded depending on clients device. By this the browser will only preload the matching image, for mobile or for desktop devices.
Additionally, with our extension you can configure global preloads/prefetch/preconnects/early hints for critical assets such as JS, CSS or Font files, that are applied to all pages on your site.
To make things even better, if you are using our WebP Optimized Images or Ultimate Image Optimizer extension, always the best available image format will automatically be preloaded, WebP, AVIF and even high-resolution & responsive images will be considered and downloaded by browsers as supported by clients device.

Global Resource Hints Configurations

JaJuMa Preload Critical Resources & Assets supports 5 different Resource Hints:
  • DNS Prefetch
  • Preconnect
  • Preload
  • Prefetch
  • 103 Early Hints (with Cloudflare)
Resource Hints Explanations:
“DNS Prefetch”
Resource Hints:

DNS prefetching tells the browser to perform a DNS lookup for the configured domain in the background.

DNS Prefetch minimizes latency as the DNS lookup has already taken place once the download of a resource from this domain starts.

“Preconnect”
Resource Hints:

Preconnect tells the browser to setup a full connection to configured domain in the background, including DNS lookups, TLS negotiations, TCP handshakes.

Preconnect minimizes latency by eliminating costly roundtrips before the download of a resource from this domain starts.

“Preload”
Resource Hints:

Preload tells the browser to fetch a resource that will be used on current page.

Preloading ensures e. g. a JS/CSS file that would otherwise be discovered only late, will be already loaded and available when required for rendering the current page.

“Prefetch”
Resource Hints:

Prefetching tells the browser to fetch a resource with low priority and save it in cache

Prefetched resources will be then already available when the user visits a page later that requires this file.

“103 Early Hints”
Resource Hints:

Indicate to the browser to load a resource as soon as possible. Early Hints sends preload hints to the browser ahead of a final response.

Allowing it to start fetching critical resources (e.g., fonts, CSS, JavaScript) immediately, even before main document was loaded.
(This option only works for sites running on Cloudflare)

awesomeicons6/regular/lightbulb
Use Resource Hints and Preloading wisely:
Only preload resources that are really critical. Otherwise, when "preloading everything", there might be no or even a negative impact.

Preload Largest Contentful Paint (LCP) Images per Layout

JaJuMa Preload Critical Resources & Assets supports preloading Largest Contentful Paint (LCP) images via Resource Hints for:
  • Homepage / CMS Pages
  • Category Pages
  • Product Detail Pages
Options for Preloading Largest Contentful Paint (LCP) Images:
Homepage/
CMS Pages:

For the Homepage and each CMS Page, the extension allows to manually configure the LCP element to be preloaded manually.

Optionally, it is also possible to preload responsive images, for Desktop and Mobile view.

Category
Pages:

Same as for CMS Pages, you can configure the LCP element for Category Pages manually, including responsive images.

Alternatively, if no image is configured manually, you can choose to automatically preload the category image or first grid item image automatically.

Product Detail
Pages:

For Product Detail Pages, you can enable to automatically preload the first product image in media gallery.

awesomeicons6/regular/lightbulb
For best results regarding Largest Contentful Paint (LCP) optimization:
For best results regarding Largest Contentful Paint (LCP) optimization: This extension is compatible with WebP Optimized Images & Ultimate Image Optimizer extension. We recommend to use it together with one these two extensions. With these extensions installed, the best available image format (WebP, AVIF & High-Res) will be preloaded automatically.

Write Your Review

Your Rating:
Loading...

You submitted your review for moderation.

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)

More Extensions

Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store

Our Customers Are Excited!

How do you like this extension?