3 min read

Optimizing Elementor Hello Child: Render Blocking Resources

Based on the waterfall analysis provided, the site suffers from significant render-blocking requests. The primary issues are the synchronous loading of jQuery (1.4s delay) and the fragmentation of CSS into many tiny files (causing multiple round-trips).

1. The Problem List

  • Heavy JavaScript: jquery.min.js (1.4s) and jquery-migrate.min.js (350ms) are loading in the <head>.
  • CSS Fragmentation: Elementor is loading separate CSS files for every widget type (widget-icon-list, widget-google_maps, widget-heading, etc.).
  • Unused Assets: widget-google_maps.min.css is loading even if a map might not be visible above the fold.
  • Theme Styles: Standard Hello Theme files (theme.css, reset.css, header-footer.css) are separate requests.

2. Immediate Fixes (Code & Settings)

A. Handle jQuery & jQuery Migrate

WordPress loads jQuery in the <head> by default. jquery-migrate is often unnecessary for modern environments.

Action: Add this to your child theme's functions.php to remove Migrate and potentially move jQuery to the footer.

function optimize_jquery_loading() {
    if (!is_admin()) {
        // 1. Remove jQuery Migrate (Save ~350ms)
        wp_deregister_script('jquery-migrate');

        // 2. Move jQuery to footer (Save ~1.4s render block)
        // We deregister the core script and re-register it with 'in_footer' = true
        wp_deregister_script('jquery');
        wp_register_script('jquery', includes_url('/js/jquery/jquery.min.js'), false, NULL, true);
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'optimize_jquery_loading');

B. Elementor Native Optimization

Elementor has built-in experiments to combine those tiny widget CSS files.

Action: Go to Elementor > Settings > Features.

  1. Set Improved CSS Loading to Active. (Combines widget CSS).
  2. Set Improved Asset Loading to Active. (Stops loading code for widgets not on the page).
  3. Set Inline Font Icons to Active.
  4. Click Save Changes.
  5. Go to Elementor > Tools and click Regenerate Files & Data.

C. Dequeue Unused Styles

If you are not using Google Maps on the specific page being tested, you should dequeue its styles.

Action: Add to functions.php:

function dequeue_elementor_unused_assets() {
    // Remove Google Maps styles if not needed
    wp_dequeue_style('elementor-widget-google_maps');

    // Remove Gutenberg block library if you are purely using Elementor
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
}
add_action('wp_enqueue_scripts', 'dequeue_elementor_unused_assets', 100);

3. Aggregation (Plugin Approach)

Even with Elementor's settings, you still have theme.css, reset.css, style.css, and header-footer.css.

Action: Use a lightweight optimization plugin (like Autoptimize or WP Rocket).

  1. Aggregate CSS: This will combine all those 0.5KB - 2KB files into one autoptimize_xxxxx.css file.
  2. Defer JavaScript: This moves the heavy jquery.min.js execution until after the HTML is parsed.

4. Font Optimization

The request …css/kumbhsans.css indicates a font load.

Action:

  1. Go to Elementor > Settings > Advanced.
  2. Set Google Fonts Load to Swap.
  3. Better: Host the font locally using a plugin like OMGF to avoid the DNS lookup to Google servers.

5. Summary of Expected Gains

Resource Optimization Strategy Estimated Gain
jquery.min.js Defer or Move to Footer 1.4s (Render Unblocking)
jquery-migrate Dequeue (Remove) 350ms
Widget CSS Improved CSS Loading (Elementor) Fewer HTTP Requests
theme.css / reset.css Aggregate (Autoptimize) Fewer HTTP Requests