What's new
kishansavaliyakb@gmail.com
Chat on WhatsApp
Toggle Nav
My Cart
Performance Optimizer for Magento 2

Performance Optimizer for Magento 2

Panth Performance Optimizer is an admin-configurable Magento 2 extension that improves Core Web Vitals and page speed out of the box - defer third-party scripts, font-display: swap, x-cloak CLS prevention, automatic image dimensions, and iframe lazy loading. Every optimization...

Magento 2.4.6–2.4.8 PHP 8.1–8.4 Hyva + Luma Ready Free

Key Features:

  • Automatically adds `defer` to every `<script>` loaded fro...
  • Excluded Domains list lets you whitelist payment gateways...
  • Uses a `MutationObserver` to catch scripts added dynamica...
  • Reduces Total Blocking Time (TBT) and improves INP

Additional Services

$0.00
In stock
SKU
panth-performance-optimizer
Links
Pay with Wise
Lifetime Updates Every Magento release
1-Year Free Support Email + WhatsApp
Adobe-Certified Magento 2 Developer
Free Forever No subscription, no upsell
What you get

Everything in the box

Built-in from day one. No add-ons, no upsell, no licence keys to renew.

Automatically adds `defer` to every `<script>` loaded fro...

Excluded Domains list lets you whitelist payment gateways...

Uses a `MutationObserver` to catch scripts added dynamica...

Reduces Total Blocking Time (TBT) and improves INP

Overview

Panth Performance Optimizer is an admin-configurable Core Web Vitals extension for Magento 2 and Adobe Commerce that bundles the five highest-impact frontend optimizations into a single toggle-driven module.

The Panth Performance Optimizer module targets the exact frontend issues that wreck LCP, CLS, and INP on real Magento storefronts: render-blocking third-party scripts (chat widgets, analytics, pixels, A/B tools), Flash of Invisible Text from custom fonts, Alpine x-cloak flashes on Hyvä themes, images shipped without width and height attributes, and heavy iframes above or below the fold.

Every optimization is a toggle in the admin — script deferral, font-display: swap, x-cloak CLS prevention, automatic image dimensions, and iframe lazy loading — so merchants enable only what their stack needs. No theme edits, no template changes, no code changes. Flip the toggles, flush cache, and ship measurable Core Web Vitals improvements to production in a single deploy.

The performance optimizer works on both Hyvä and Luma storefronts across Magento 2.4.4 to 2.4.8 and PHP 8.1 to 8.4. Because every fix is opt-in, the module slots cleanly into already-tuned storefronts without overriding existing critical CSS, deferred-script pipelines, or CDN-based image transformations a merchant may already run.

Best for:

  • Magento 2 stores failing Core Web Vitals on PageSpeed Insights and CrUX field data
  • Hyvä storefronts dealing with x-cloak flashes and font-swap CLS spikes
  • Merchants who want admin-driven performance toggles without hiring a frontend developer

Why Performance Optimizer

Most Magento 2 stores suffer from the same five frontend performance problems:

  1. Render-blocking third-party scripts — chat widgets, analytics, pixels, A/B testing tools load synchronously and freeze the main thread
  2. Flash of Invisible Text (FOIT) — custom fonts block text rendering for hundreds of milliseconds
  3. Alpine x-cloak flash — on Hyva themes, components render their raw template before Alpine hydrates
  4. Images without width/height — the single biggest cause of Cumulative Layout Shift (CLS) in Magento storefronts
  5. Heavy iframes above/below the fold — YouTube embeds, maps, and social widgets download megabytes before the user needs them

Panth Performance Optimizer fixes all five with zero template edits. Every fix is a single admin toggle. Every toggle is safe to disable.

What you get

Panth Performance Optimizer ships the five highest-impact Core Web Vitals fixes as admin toggles:

  • Defer third-party scripts — chat, analytics, pixels, A/B tools — without breaking initialization
  • font-display: swap injection to eliminate Flash of Invisible Text (FOIT)
  • Alpine x-cloak CLS prevention for Hyvä themes during hydration
  • Automatic width and height attributes on every storefront image to stop layout shift
  • Iframe lazy loading for YouTube embeds, maps, and social widgets above and below the fold

Key Features

Defer Third-Party Scripts

  • Automatically adds defer to every <script> loaded from a domain other than your storefront
  • Excluded Domains list lets you whitelist payment gateways or scripts that require synchronous execution
  • Uses a MutationObserver to catch scripts added dynamically after page load
  • Reduces Total Blocking Time (TBT) and improves INP

Font-Display: swap

  • Injects a global @font-face { font-display: swap !important } rule
  • Eliminates FOIT across every custom font on every page
  • Improves LCP by letting browsers paint text with fallback fonts immediately

x-cloak CLS Prevention

  • Injects [x-cloak]{display:none!important} into <head> early in the critical path
  • Prevents raw Alpine.js template markup from flashing before hydration
  • Essential for Hyva storefronts — a single toggle that every Hyva store should enable

Automatic Image Dimensions

  • Client-side script sets missing width/height attributes on <img> tags
  • Reads naturalWidth / naturalHeight immediately for loaded images, attaches load listener for the rest
  • Reduces CLS without requiring any template edits

Iframe Lazy Loading

  • Below-the-fold iframes have their src swapped to data-lazy-src on DOMContentLoaded
  • IntersectionObserver with a 200px root margin restores the src just before the iframe enters the viewport
  • Saves megabytes of YouTube, Maps, and social widget payload on initial page load

Admin-Friendly

  • Every optimization is a checkbox in Stores → Configuration → Panth Extensions → Performance Optimizer
  • No theme edits, no template overrides, no layout XML required
  • Safe to toggle individually — disable any single optimization without affecting the others
  • Fully translatable via standard Magento __() strings

MEQP Compliant

  • Passes Adobe's Magento Extension Quality Program
  • Zero severity-10 violations
  • Uses only Magento framework classes — no third-party dependencies

How Each Optimization Works

1. Script deferral

A MutationObserver watches the DOM for new <script> nodes. If the src attribute points to a domain that is not your storefront's hostname and is not in the Excluded Domains list, defer = true is applied. Existing third-party scripts are also patched on DOMContentLoaded.

2. font-display: swap

A <style> block is injected early in the page containing @font-face { font-display: swap !important }. Every CSS-loaded font on the page now shows a fallback immediately and swaps in the custom face once it finishes downloading.

3. x-cloak style

Alpine.js marks hidden-until-ready elements with x-cloak. Without a matching CSS rule those elements briefly flash their raw template markup. Performance Optimizer injects the CSS rule early enough that it takes effect before Alpine initializes.

4. Image dimensions

After the page loads, a script scans every <img> element without explicit width/height attributes. For already-loaded images it reads naturalWidth / naturalHeight and sets both attributes synchronously; for images still loading it attaches a load listener and fills them in when the image resolves.

5. Iframe lazy loading

On DOMContentLoaded, every <iframe> whose bounding rect sits below the viewport has its src moved to data-lazy-src. An IntersectionObserver with a 200px root margin restores the src as soon as the iframe comes within scroll range.

Measuring Impact

We recommend benchmarking before and after enabling the module using:

  • Google PageSpeed Insights — pagespeed.web.dev
  • Chrome DevTools → Lighthouse — run against the homepage, category, product, and cart pages
  • Chrome DevTools → Performance panel — record a page load and check Total Blocking Time, LCP, CLS
  • Web Vitals Chrome extension — real-time LCP/CLS/INP overlay while browsing

Typical gains on a default Luma storefront with several third-party scripts:

  • LCP: 0.3–0.8s improvement (font-display + script deferral)
  • CLS: 0.05–0.15 improvement (image dimensions + x-cloak)
  • TBT / INP: 100–400ms improvement (script deferral + iframe lazy loading)

Actual numbers vary by theme, hosting, third-party stack, and CDN configuration.

Troubleshooting

Issue Cause Resolution
No optimizations visible on frontend Module disabled or full-page cache stale Enable in Core Settings, then run bin/magento cache:flush
Third-party script stops working after deferral Script requires synchronous execution Add the script's domain to Excluded Domains
Fonts still flash invisible Font loaded via JavaScript, not CSS The font-display descriptor only applies to CSS-loaded fonts
Images still cause CLS above the fold Images load before the client-side script runs For critical above-the-fold images, add width/height directly in templates
Iframe never loads Iframe was marked lazy but IntersectionObserver never fires Verify the iframe is actually scrollable into view; disable iframe lazy loading if your layout keeps iframes in a hidden container
Admin section missing ACL not refreshed or Panth_Core not installed Install mage2kishan/module-core, log out and back in to admin

Quick Links

Ready to hit Lighthouse 90+ on your Magento 2 store?

SEO Keywords: magento 2 performance, magento 2 page speed, magento 2 core web vitals, magento 2 defer scripts, magento 2 defer third-party scripts, magento 2 font display swap, magento 2 cls prevention, magento 2 cumulative layout shift fix, magento 2 lazy loading iframes, magento 2 iframe lazy load, magento 2 image dimensions, magento 2 x-cloak hyva, magento 2 alpine cloak, magento 2 lighthouse optimization, magento 2 lcp optimization, magento 2 inp optimization, magento 2 tbt reduction, magento 2 render blocking scripts, magento 2 performance module, magento 2 speed optimization extension, hyva performance optimizer, luma performance optimizer, panth performance optimizer, magento 2 page speed insights, magento 2 seo core web vitals, magento 2.4.8 performance, php 8.4 magento performance, hire magento performance developer, top rated plus magento freelancer, kishan savaliya magento, panth infotech magento, mage2kishan, mage2sk, magento 2 hyva performance optimization, magento 2 luma performance tuning, magento 2 critical css, magento 2 frontend optimization, magento 2 lighthouse 100

Compatibility

Requirement Versions Supported
Magento Open Source 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud 2.4.4 — 2.4.8
PHP 8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme 1.0+ (fully supported, recommended)
Luma Theme Native support
Required Dependency mage2kishan/module-core (free)

Tested on:

  • Magento 2.4.8-p4 with PHP 8.4 on Hyva 1.3
  • Magento 2.4.7 with PHP 8.3 on Luma
  • Magento 2.4.6 with PHP 8.2 on Hyva 1.2

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-performance-optimizer
bin/magento module:enable Panth_Core Panth_PerformanceOptimizer
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

  1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
  2. Extract to app/code/Panth/PerformanceOptimizer/
  3. Ensure Panth_Core is also installed (required dependency)
  4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_PerformanceOptimizer
# Expected output: Module is enabled

Then navigate to:

Admin → Stores → Configuration → Panth Extensions → Performance Optimizer

Configuration

All settings live at Stores → Configuration → Panth Extensions → Performance Optimizer.

General Settings

Setting Default Description
Enable Performance Optimizer Yes Master toggle. When disabled, no optimizations are injected into the frontend.

Script Optimization

Setting Default Description
Defer Third-Party Scripts Yes Automatically adds the defer attribute to third-party <script> tags.
Excluded Domains (empty) One domain per line. Scripts loaded from these domains will not be deferred. Useful for payment gateways.

Font Optimization

Setting Default Description
Add font-display: swap Yes Injects a global CSS rule that forces font-display: swap on all @font-face declarations.

Layout Stability (CLS Prevention)

Setting Default Description
Add x-cloak Style Yes Injects [x-cloak]{display:none!important} into the page head. Essential for Hyva storefronts.
Set Image Dimensions Yes Client-side script adds width and height to images missing them.

Iframe Lazy Loading

Setting Default Description
Enable Iframe Lazy Loading Yes Defers loading of below-the-fold iframes using IntersectionObserver.

After changing any setting, flush the full-page cache:

bin/magento cache:flush

License

Panth Performance Optimizer is distributed under a proprietary license — see LICENSE.txt.

More Information
Module Category Performance
Best For All Sizes

Need this customised?

Talk to Kishan directly — written quote, scope and timeline within 24 hours. No sales call.

WhatsApp

Performance Optimizer for Magento 2

$0.00
Step up

Customers usually upgrade to