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) andjquery-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.cssis 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.
- Set Improved CSS Loading to Active. (Combines widget CSS).
- Set Improved Asset Loading to Active. (Stops loading code for widgets not on the page).
- Set Inline Font Icons to Active.
- Click Save Changes.
- 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).
- Aggregate CSS: This will combine all those 0.5KB - 2KB files into one
autoptimize_xxxxx.cssfile. - Defer JavaScript: This moves the heavy
jquery.min.jsexecution until after the HTML is parsed.
4. Font Optimization
The request …css/kumbhsans.css indicates a font load.
Action:
- Go to Elementor > Settings > Advanced.
- Set Google Fonts Load to Swap.
- 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 |