Resource Hints: Preload Critical Resources & Assets for Magento 2
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 Critical Resources & Assets Via Resource Hints:
- Core Web Vitals Optimization
- Preload Hero-Images / Largest Contentful Paint (LCP) Images
- Preload JS / Font / CSS Files
- DNS-Prefetches & Preconnect
For External Resources & Assets - Prefetch Assets
For Sub-Sequent Page Views - Compatible With WebP Optimized Images & Ultimate Image Optimizer
License:
- One-Time Payment
- Lifetime Access To Source Code
- 1 Year Free Support
- 1 Year Free Updates
Approved & Verified by Magento Marketplace
Hyvä Theme
Compatible
Unencrypted. 100% Open Source & Customizable
Coding Standards Applied. Clean & Readable Code
Countless Satisfied Customers: Be The Next One!
Made With Love
Our extensions are made with love & passion for building new things, perfection & performance in mind.
Field Tested
Our extensions are field-proven in our own client projects.
- Extension Configuration
- General Configuration
- Global Preload Resources
- Preload LCP Image Category 1
- Preload LCP Image - CMS Page
- Preload LCP Image Category 2
- Preload LCP Image Product Page
- PageSpeed - No Preload
- PageSpeed - Using Resource Hints/ Preload
Configurations & Screenshots
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
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)
Preload Hero-Images / Largest Contentful Paint (LCP) images
For Core Web Vitals Optimization
Automatically Or
Manually Configured/p>
Preload Image For Each Page
Allows DNS-Prefetches
And Preconnect
For External Resources And Assets
Global Configs for DNS-Prefetch/Preconnect/Preload/Prefetch
JS/CSS/Font Files
Configurable
And/Or Automatic
Largest Contentful Paint Image Preload
Core Web Vitals / Largest Contentful Paint (LCP)
Optimization
Compatible With JaJuMa WebP Optimized Images
Automatically Preload WebP Image If Available
Compatible with JaJuMa Ultimate Image Optimizer
Automatically Preload AVIF, WebP & High-Res Image If Available
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 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
- DNS Prefetch
- Preconnect
- Preload
- 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.
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.
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.
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.
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
- Homepage / CMS Pages
- Category Pages
- Product Detail Pages
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.
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.
Pages:
For Product Detail Pages, you can enable to automatically preload the first product image in media gallery.
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
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
More Extensions
Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store
