# 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 ``. * **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 `` 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. ```php 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`: ```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 | ```