Improving Website Speed When Using Astra With Elementor

Astra is built to load quickly, and it works great with Elementor. When you use them together, your website performance depends not only on the theme but also on specific Elementor settings and general optimization practices. This guide explains how to configure Elementor for better performance while using Astra and highlights additional steps that can improve your load time.

First Steps

Before applying performance changes, make sure both Astra and Elementor are updated to their latest versions.

Elementor Settings That Improve Performance

The following Elementor settings directly affect front-end loading behavior. Adjusting them can help reduce requests, simplify CSS output, and improve rendering.

1. CSS Print Method

• Navigate to Elementor > Settings > Performance.
• Update the CSS Print Method: From External File to Internal Embedding

Why this helps:

Internal embedding reduces the number of separate CSS files that must be fetched on the first load. This makes the initial paint faster on sites that rely on caching or have low traffic.

2. Google Fonts

• Navigate to Elementor > Settings > Advanced
• Switch Google Fonts Load: From Enable to Disable

Why this helps:

Elementor will stop loading external Google Fonts. This reduces external requests and prevents duplicate font loading if Astra already handles fonts, if you use locally hosted fonts, or if you prefer system fonts.

Astra supports local Google Fonts delivery, which further improves performance. Learn more about it here: Host Google Fonts Locally.

3. Inline Font Icons

• Navigate to Elementor > Settings > Features
• Update Inline Font Icons from Default to Active

Why this helps:

Activating inline icons eliminates external icon library requests and improves the time to first render.

4. Optimized Markup

• In the same Features list: Set Optimized Markup from Default to Active

Why this helps:

Elementor outputs cleaner, reduced HTML. Your browser parses fewer nodes, which improves rendering speed and lowers page weight.

Use Astra’s Built-In Performance Options

Astra includes optimization settings that complement Elementor’s performance. Loading Google Fonts locally eliminates external requests to Google’s servers. Preloading fonts ensures they’re ready before your content renders. File Generation creates external minimized files for your CSS and JavaScript of the Astra theme, which helps your browser load them more efficiently.

Navigate to WordPress Dashboard > Astra > Settings. And apply the recommended settings mentioned below:

• Enable “File Generation“
• From the Performance tab, enable “Load Google Fonts Locally” and “Preload Local Fonts.“

Important: If you’re using caching, disable Astra’s File Generation as the two features are incompatible.

Additional Performance Recommendations

1. Avoid Using Multiple Animation Libraries

If Elementor animations are enabled, avoid adding additional animation plugins. Multiple animation scripts increase JavaScript execution time and can block rendering.

2. Optimize Images Used in Elementor Sections

Elementor allows inserting large background images, sliders, and galleries. Heavy images slow down your Astra-powered pages even if the theme itself is optimized.

Suggested steps:

• Compress images before upload
• Serve images in WebP
• Avoid full-size uploads for section backgrounds
• Enable lazy loading (native WordPress handles this automatically)

3. Browser and Server-Level Performance Tips

Although not theme-specific, these steps significantly improve your Astra + Elementor speed:

• Use caching (LiteSpeed Cache, WP Super Cache, or WP Rocket)
• Enable server gzip/ Brotli compression
• Use a CDN for static files
• Use the latest and stable PHP such as PHP 8.1 or higher

You’ve now configured both Astra and Elementor for optimal performance. By updating these settings, you should see noticeable improvements in your loading time.

If your site still feels slow after applying these steps, review your caching setup, hosting resources, and large media elements in your design.

Related Resources:

> For more details, see Astra Performance Settings
> Learn about Image Optimization Best Practices
> Check out Website Performance Optimization in Elementor
> Learn more about Elementor’s Performance Features

Need more help? Our support team is here for you. Reach out through your Astra dashboard or visit our support portal.