JaJuMa Services
Description
Improve your Core Web Vitals page experience KPIs and conversion rate by
making your Magento 2 pages load faster.
By Using Resource Hints For
Preload Critical Resources & Assets for faster loading speed 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
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.
Further Questions? Have a Feature-Request?
Or need some individual customization?
Lets get in touch:
Highlights
Resource Hints: Preload Critical Resources & Assets by JaJuMa-Develop
The Magento Extension for Preload / DNS Prefetch / Preconnect / Prefetch your critical resources and assets via Resource Hints
and for Preload your LCP Element.
Improve your Magento 2 store performance and
Optimize your Core Web Vitals Values for Largest Contentful Paint (LCP)
Preload Hero-Images /
Largest Contentful Paint (LCP) elements
Automatically or manually configured
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
Details
Resource Hints for Preload Critical Resources & Assets Extension for Magento 2 by JaJuMa In Detail.
Control your Magento 2 Waterfall now.
Let the Browser know what's really important via resource hints to load first for improving your Core Web Vitals.
Preloading via resource hints can be a powerful tool for optimizing Page Speed especially regarding user-centric KPIs such as Core Web Vitals by telling 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 be preloaded, WebP, AVIF and even High-Resolution images will be considered and downloaded by browsers automatically as supported by clients device.
Global Resource Hints Configurations:
JaJuMa Preload Critical Resources & Assets supports 4 different Resource Hints:
DNS Prefetch
Preconnect
Preload
Prefetch
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.
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.
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.
Configuration Menu & 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
Manual & FAQ
As easy as it can get::
- Install Extension,
- Configure Your Resource Hints for Preloading
- Configure Your LCP Element preloading and
...thats it!
Changelog
Version: 1.0.0
- Initial Release
Compatibility
More Extensions
Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store
Magento Extensions - Discover Now!
We get back to you as soon as possible!
