Performance & Optimization

Overview

Magical Shop Builder includes a comprehensive performance system (class-mpd-performance.php, 673 lines) that optimizes asset loading and rendering. All optimizations are configurable through the Settings panel.

The performance module provides:

• CSS & JS minification — reduce file sizes by stripping comments and whitespace
• JavaScript deferring — prevent render-blocking scripts
• Template caching — cache rendered output for faster page loads
• Lazy loading — defer off-screen content loading
• Preloader system — smooth loading experience with FOUC prevention
• Intelligent asset management — load only the CSS/JS needed for each page

CSS Minification

When enabled, the plugin automatically minifies its CSS files and caches the results for optimal delivery.

• Plugin CSS files are minified and cached on first load
• Cache location: wp-content/uploads/mpd-cache/
• Only processes plugin assets (prefix mpd- or known handles like mgproducts-*, bootstrap-*, swiper)
• Skips already-minified files (.min.css, .min.js)

Cache is automatically invalidated on:

• Settings change
• Template save
• Plugin update

wp-content/
  uploads/
    mpd-cache/
      mpd-display-style.min.css
      mpd-ajax-search.min.css
      bootstrap-custom.min.css
      ...

JavaScript Minification

JavaScript minification uses the same file-based caching approach as CSS minification.

• Strips comments and whitespace from plugin JS files
• Preserves functionality — no code transformations or mangling
• Only processes the plugin’s own scripts
• Cached output stored in wp-content/uploads/mpd-cache/

JavaScript Deferring

When enabled, the plugin adds the defer attribute to its script tags, allowing them to load asynchronously without blocking page render.

• Scripts download in the background while the page renders
• Only defers plugin-specific scripts, not WordPress core or third-party
• Improves perceived load time and Core Web Vitals scores

<!-- Without deferring -->
<script src="mpd-global-widgets.js"></script>

<!-- With deferring enabled -->
<script src="mpd-global-widgets.js" defer></script>

Template Caching

Template caching stores the rendered HTML output of Magical Shop Builder templates, eliminating repeated PHP processing and database queries on subsequent page loads.

• Caches rendered template output in the database
• Configurable cache duration (default: 3600 seconds / 1 hour)

Cache is automatically invalidated when:

• A template is edited and saved
• Settings are changed
• Cache is cleared manually from the Settings panel

Lazy Loading

Lazy loading defers the loading of off-screen content until the user scrolls near it, reducing initial page weight and improving load times.

• Widget content — lazy load widget content for off-screen widgets
• Product images — lazy load product images for faster initial page load
• Uses the Intersection Observer API for efficient, performant detection

Preloader System

The preloader system (class-mpd-preloader.php, 652 lines) provides a smooth loading experience and prevents Flash of Unstyled Content (FOUC). It has two modes depending on whether it is enabled or disabled in settings.

When Enabled

A full preloader overlay is displayed while the page loads:

• Full-screen preloader overlay with animation
• Configurable styles: spinner (and other animation types)
• Customizable colors: primary, secondary, background, and text
• Optional logo display
• Custom loading text
• Page-specific targeting: shop, product, cart, checkout, my-account, thank-you, or all pages
• Automatically skips Elementor editor/preview mode
• Only applies on WooCommerce pages

When Disabled (FOUC Prevention)

Even when the preloader is disabled, a lightweight FOUC prevention mechanism is active:

• Hides the body with opacity: 0, then reveals smoothly on window.load
• Safety fallback: reveals the page after 4 seconds if the load event doesn’t fire
• Zero performance cost — no additional assets loaded

<style>body { opacity: 0; transition: opacity 0.3s ease; }</style>
<script>
window.addEventListener('load', function() {
    document.body.style.opacity = '1';
});
// Safety fallback
setTimeout(function() {
    document.body.style.opacity = '1';
}, 4000);
</script>

Asset Management

The plugin uses intelligent asset loading (assets-managment.php, 292 lines) to register and enqueue only the CSS and JavaScript files needed for each page. Assets are conditionally loaded based on which widgets and features are active.

Registered CSS Handles

Registered JS Handles

Widget Enable/Disable

Disabling unused widgets is one of the most effective ways to reduce page weight. Each disabled widget saves both its CSS and JS payload from being loaded.

• Navigate to Magical Shop Builder > Settings > Widgets tab
• Toggle off any widgets you are not using
• Each disabled widget prevents its CSS and JS from being registered and enqueued

Best Practices

Follow these recommendations to get the best performance from Magical Shop Builder:

1. Enable CSS and JS minification on production sites to reduce file sizes
2. Enable JS deferring for non-critical scripts to avoid render-blocking
3. Enable template caching to avoid repeated PHP processing
4. Disable unused widgets in the Widgets tab to eliminate unnecessary asset loading
5. Enable lazy loading for product images to speed up initial page load
6. Use the preloader on pages with heavy content for a smoother user experience
7. Test with PageSpeed Insights after enabling optimizations to measure improvements