Optimizing your WordPress website can feel like a balancing act — especially when you’re using powerful tools like Elementor and Astra. On one hand, you want a fast, lightweight site. On the other, you don’t want to lose the design flexibility and beautiful layouts you’ve worked hard to build.

The good news is, you don’t have to sacrifice either.

In this guide, you’ll learn how to manually optimize your WordPress site built with Astra and Elementor — without adding extra plugins or breaking your layout. Every tweak is custom, safe, and focused on performance and maintainability.

Why Avoid Plugin-Based Optimization?

Plugins like WP Rocket, Asset CleanUp, and Autoptimize can be helpful — but they also come with overhead, compatibility concerns, and sometimes even break Elementor layouts if not configured correctly.

Instead, custom code and manual configuration give you:

• Full control over what loads and when
• Zero plugin bloat
• Better long-term stability
• Higher performance scores with less risk

Technical Disclaimer: Always back up your website before making any direct changes.

Reduce Elementor Bloat: Only Load What You Need

Elementor is powerful, but it loads more than most sites use. Let’s cut the fat.

a. Enable Optimized DOM Output

Go to: Elementor → Settings → Experiments → Optimized DOM Output → Enable

This reduces unnecessary wrapper divs and keeps the page structure clean — improving both speed and SEO.

b. Turn Off Unused Elementor Features

Head to: Elementor → Settings → Features

Disable what you don’t use:

• Landing Page
• Icon Libraries
• Usage Data tracking
• Global Fonts or Colors (if you style via theme)

Every feature you turn off lightens the frontend payload.

Clean Up WordPress Core Bloat

WordPress ships with a lot of scripts and styles you don’t need — especially if you’re using a visual builder like Elementor.

Add the following to your child theme’s functions.php file:

function dequeue_extra_assets() {
    // Disable Gutenberg block CSS
    wp_dequeue_style('wp-block-library');

    // Disable Elementor icons if unused
    wp_dequeue_style('elementor-icons');

    // Remove dashicons for non-logged-in users
    if (!is_user_logged_in()) {
        wp_deregister_style('dashicons');
    }
}
add_action('wp_enqueue_scripts', 'dequeue_extra_assets', 100);

This reduces unnecessary CSS/JS, improving your initial load and Largest Contentful Paint (LCP).

Use WebP Images and Lazy Loading (The Smart Way)

WebP images are 30–40% smaller than JPEG or PNG.

a. Upload WebP Images Directly

Most modern browsers support WebP. If your image editor doesn’t export WebP, use an online tool like Squoosh.

b. Use the <picture> Tag (If You’re Comfortable With HTML)

Insert a Custom HTML widget in Elementor and paste:

<picture>
  <source srcset="/wp-content/uploads/2025/04/image.webp" type="image/webp">
  <img src="/wp-content/uploads/2025/04/image.jpg" alt="Descriptive Alt" loading="lazy">
</picture>

This ensures fallback compatibility with older browsers while serving WebP to modern ones.

Inline Critical CSS for Faster First Paint

This is an advanced technique but highly effective.

Use a tool like Critical to generate above-the-fold CSS. Then:

• Paste it into Elementor → Custom Code
• Or add it inside <style> tags in your child theme’s header.php

Warning: Only do this for CSS used in the viewport. Inline too much, and you’ll slow down the site instead of speeding it up.

Disable Emojis, Embeds, and WordPress Extras

These features run JavaScript on every page — even if you don’t use them.

Add this to functions.php:

// Disable emojis
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// Disable embeds
function disable_embeds_code_init() {
    remove_action('rest_api_init', 'wp_oembed_register_route');
    remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
}
add_action('init', 'disable_embeds_code_init', 9999);

That’s a quick win for TTFB and script execution time.

Note:- Time to First Byte (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server.

Defer JavaScript for Non-Critical Scripts

JavaScript blocking your render? Let’s fix that:

function defer_custom_scripts($tag, $handle, $src) {
    if (is_admin()) return $tag;

    $defer_list = ['elementor-frontend', 'astra-theme-js']; // Add more as needed
    if (in_array($handle, $defer_list)) {
        return '<script src="' . esc_url($src) . '" defer></script>';
    }
    return $tag;
}
add_filter('script_loader_tag', 'defer_custom_scripts', 10, 3);

This defers specific scripts, allowing HTML and CSS to load first. Keep Elementor’s core scripts untouched unless tested.

Self-Host Fonts: No More Google Fonts Lag

a. Use System Fonts (Fastest)

Go to: Astra → Customize → Global → Typography
 Choose system fonts like:

• Arial
• Helvetica
• Georgia

No external requests = lightning fast loads.

b. Self-Host Custom Fonts

Want to use Poppins or Lato?

1. Use google-webfonts-helper to generate font files.
2. Upload to your child theme /fonts folder.
3. In style.css, add:

@font-face {
  font-family: 'Poppins';
  src: url('/wp-content/themes/your-child/fonts/poppins.woff2') format('woff2');
  font-display: swap;
}

Apply it via Elementor’s Site Settings → Typography

Server-Side Tweaks for Even More Speed

If your hosting provider allows .htaccess, add:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css application/javascript text/html
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

This enables compression and long-term caching.

Test Everything: Speed, Stability, and Structure

Use these tools regularly:

• Lighthouse (DevTools) → Audit Core Web Vitals
• PageSpeed Insights → Find layout shift or blocking scripts
• WebPageTest.org → Analyze time to first byte, paint, and filmstrip loading

Each test reveals a new bottleneck — then you optimize again.

Conclusion: Lean, Fast, and Fully in Control

By skipping the plugin route and customizing your Astra + Elementor setup manually, you get the best of both worlds: blazing-fast performance and full design freedom.

You’re not just chasing scores — you’re building a sustainable, scalable website that delights users and ranks well in search engines.