Cleaner HTML and Faster Load Time with Astra 2.1!

Astra 2.1 is Out with Cleaner HTML and Faster Load Time!

A few weeks ago we launched our most ambitious update yet – Astra 2.0!

To be honest, we were a bit surprised by how customers really loved the new release.

Here are just a few responses from the community that made us happy ?

I only shared a couple here – but there are plenty more reviews and feedback we have received – on our blog, email replies and also on social media.

But, as you know we can’t just stop there, right? 🙂 

We made a promise to add more customizations, enhancements, and updates in the near future.

And as you know by now – continuous and never-ending improvement is a core part of our cultural DNA!!

So, I am excited to announce our latest update Astra 2.1!

In version 2.1 we are launching a method to generate a CSS file for Astra – so that CSS will not show up inline in the Source Code.

This will make it relatively easy for the browsers to cache CSS (which means an improvement in load time and speed).

Read on to learn what’s changed, and how it will benefit you and your website.

The Past… Inline CSS

Up until the recent update (Astra 2.0) –  whenever you made any changes to your website using the Astra Customizer – the theme generates a dynamic CSS.

This Dynamic CSS was added to every page of your website.

Astra CSS Code:

Here’s what we learned from the feedback our customers gave –

The inline CSS generated by the Astra theme – made the HTML look a little bulkier. 

Sophisticated users and developers always want a cleaner HTML.

Well – we have heard that! And here’s what we have changed.

The Path Forward… CSS File Generation

With today’s update – Astra 2.1 – we are further delivering on our promise to help you create faster websites.

Once you have updated your Astra theme and Astra Pro Addon Plugin to version 2.1, you will see a new option on the Astra Options page as below:

When you enable it – you will notice that the inline CSS will not show up in the Source Code anymore.

The inline CSS will now be added as a separate file.

Note that this option is available with the Astra Pro.

Based on your settings in the Astra Customizer – the CSS file will be generated for each of the pages and will be loaded along with the page. So instead of generating inline dynamic CSS every time, a separate file will serve required CSS from the addon. Browsers can easily cache this file.

You can read how these CSS files are named here.

What Does This Mean for You?

There are a few benefits that you will notice with this update.

This will make the browser caching faster.

And this improves your website’s response time, which means your users/customers can retrieve your web pages and content faster.

We are getting there folks !! 

This update will improve your site loading speed with 8.47% 🙂

Our mission to make websites faster is a never-ending quest –  and we will help you get there (one update like this at a time).

Here is a detailed document that will show how to get started with this update?

Stay tuned for more updates like this (coming soon). To get a preview of what’s coming down the path – here’s where you will find our public roadmap. In case of any query write to our awesome support team.

As usual – we always welcome your feedback.  Please let us know your thoughts in the comments below!

Join 304,719 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.


  1. 1) So to be clear, upon update everything will initially work the same as before (inline) – and then we would need to activate the new feature using the ‘enable’ button.

    2) Would I be correct that once enabled, we could then disable it, back to inline?

    3) And if there is no CSS in the customizer – and feature enabled – then no (blank) css file is generated, correct?

    Thank you.

    1. 1. Correct.
      2. Correct
      3. The inline CSS is generated for the options in the customizer. So there is always some inline CSS which you can output as a separate CSS file after Astra 2.1 🙂

      1. Ah that’s right – I was only thinking about the added css section – but there are the other elements too. All makes sense. Well thought out. Thanks much

  2. This is solid Sujay! Really love this as I’ve spent a ton of time optimizing my sites (all Astra now) and seeing that in-line Astra CSS was always a little rough on the eyes ;).

    This is great.


  3. Speed and optimization are important! Definitely a deciding factor in switching to Astra. Thank you for keeping this a priority!

  4. What if we have a plugin that doesn something similar, do we leave this or disable that in the plugin and use this feature?

    1. If you’re already using a plugin to take all inline CSS into a dedicated CSS file, you can skip this optional feature we have added in Astra 2.1

    1. Because inline CSS is good in some cases. This change is not suitable for all sites out of the box and it should be enabled case-by-case basis.

    1. A theme alone does not give you good grades in page speed tools. And quite honestly — the speed testing tools are quite dated and their grades do not make any difference. What one should follow is the time it takes to load the website for your visitors.

  5. Gary Buckingham

    Awesome guys!! Astra period!! Quick question we have WPRocket on all of our Astra sites will this update with inline CSS conflict with WPRocket?

    Thanks ??

      1. I think the question doesn’t apply to WP Rocket’s caching / minification, but to its optimized (critical) CSS delivery…

  6. Hi, thanks for the update.

    1. Why is there an Enable button, surely this feature should be default?
    2. Why would anyone want to Disable the feature later?


    1. We have not tested this particular plugin ourselves. But Astra 2.1 plays well with all caching and minification plugins. So there should not be any problems. If you need any help, please feel free to lodge a support ticket.

  7. Hi

    I am also using Elementor page builder to build part og my website. If I enable this option, how will it impact my website?


  8. Where does the generated CSS file get created? For sites on Pantheon, which does not enable ftp access on live sites, the file destination needs to be editable by the end-user. I have a ticket open on this item.

  9. Michael Bay Sørensen

    Hmm… Now I have tried alot with both Astra and Astra Pro.

    I have now activated Astra Pro on and there is a small blink on the screen before it’s loaded. Is this because of the new inline css in a dynamic changed file?

    We are using Litespeed, and has set critical CSS on.

    Also the navigation is “zooming” in and out when refreshing the page.

    1. Hi, This is probably because of the critical CSS generated by lightspeed and not because of CSS generation from Astra.
      You should contact support of Lightspeed plugins for this issue.

  10. Great improvement, Sujay.

    I’ve just enabled on my first site and got an immediate improvement with GTMetrix performance going from B to A and shaving over a second off the load time.

    Thank you, Brainstorm Force team!

    1. Hi- It is recommended to have the css inline if it ve very small. but if you use a lot of options from Astra Pro it can generate a lot of CSS depending on a number of options that you change. in such case, it is recommended to have the CSS loaded from a file to get benefits from the browser cache.

  11. we use WP Astra and Elementor pro on our website and very satisfied with easy of design and the speed. after speed optimization we got 96 in google pagespeed insight for desktop and 71 in mobile pagespeed. load time average below 2sekon, thanks for this awesome theme.

    performance in GTmetrix we can get 100 pagespeed and 89 YSlow without CDN. if using CDN or Cloudflare maybe YSlow can achieve 95.

    so for you that need speed for website, our recommendation is using WP ASTRA theme

    1. Hi Ronan,

      The tool mentioned in the screenshot is Blackfire. It helps developers profile, test, debug, and optimize performance of their applications. You can refer to this link.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Astra 3.0 Is Here! Our Biggest Update Ever!

Download is Just A Click Away!

Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.