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!
Sujay Pawar is the co-founder and CEO of Brainstorm Force. He brings a one-of-a-kind fusion of tech brilliance, business savvy and marketing mojo to the table. Sujay has consistently spearheaded the development of innovative products like Astra, CartFlows, ZipWP and many others that have become market leaders in their respective niches.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
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. 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 🙂
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
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.
Thanks!
Speed and optimization are important! Definitely a deciding factor in switching to Astra. Thank you for keeping this a priority!
Cool, great to see that you guys do REAL improvements to the Theme. Applause!
Will this interfere with WP-Rocket at all or can they both be turned on for added benefit?
Astra 2.1 works well with WP Rocket ?
What if we have a plugin that doesn something similar, do we leave this or disable that in the plugin and use this feature?
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
What is that debugging/profiling tool on your screenshot?
Hello Chris,
That’s Blackfire that we are using! 🙂
Thanks for the change. Why did you make it an option in the customizer and not default behavior?
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.
Parece brincadeira, vocês falam que estão super rápidos, e ao jogar essa paginas (https://wpastra.com/astra-2-1/) no Google Speed, sua nota dá 26 para mobile e 64 para desktop, fala sério…
Sounds like a joke, you guys say you’re super fast, and when you play this page (https://wpastra.com/astra-2-1/) on Google Speed, your grade is 26 for mobile and 64 for desktop, seriously. .
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.
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 ??
Astra 2.1 is made to work with all caching and minification plugins. So it should work with WP Rocket as well 🙂
I think the question doesn’t apply to WP Rocket’s caching / minification, but to its optimized (critical) CSS delivery…
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?
Thanks
Hi
How will this interact with plugins like Fast Velocity Minify?
Thanks!
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.
why there is still NO PAGE VIEW COUNTER for blog post ” number of ppl viewed the post” ?????
Do you mean on our blog? Or this as a feature in Astra theme?
Curious, what is the testing tool that you show in the post?
Hey James,
That’s Blackfire! 🙂
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?
Thanks
There should not be any difference. Astra is very compatible with Elementor.
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.
It gets created in the wp-content/uploads/astra folder 🙂
Hmm… Now I have tried alot with both Astra and Astra Pro.
I have now activated Astra Pro on Powercube.dk 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.
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.
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!
Isn’t inline CSS supposed to be a good thing, as it eliminates the loading of a render blocking CSS file?
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.
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
Thks for this post Sujay.
One question : which service or software is it? : screenshot
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.
I turned on the CSS file as you instructed and the page load speed is also better.
However, there is a problem that increases the css file in the host, and increases the host capacity significantly.
Made my host on red alert.
Do you have any way to solve this problem.
Hello there, we haven’t come across similar reports with 2.1. It’s an old release, do you face a similar issue with the latest versions of the Theme and Pro addon. If so, please reach out to us through our Support Portal and we are more than happy to help.
Can I enable it with Ezoic Leap?
Hello there, we haven’t tested this feature with Ezoic leap! Do give it a try and let us know how that goes.
I’m not sure how generating thousands of mostly identical CSS files is a benefit. Every single post, page, category, tag, etc… has a CSS file in both the /uploads/astra/ and /uploads/astra-addon/ directories. The files are 80+ KB and 24+ KB respectively. Browser caching is not going to help much when these two directories are consuming almost 300MB of disk space on a new site I’ve been working on. Who thought generating a unique CSS file for every post, page, and category (that are virtually identical not to mention bloated) was a good idea?
Hello Anthony,
This option is also available for Spectra – Spectra.
Like you, I wondered why this is useful, especially when working on a Litespeed server with the Litespeed cache extension…?
So I never know if I should activate these options or not…
You are apparently more competent on this point than I am…
Can you advise me?
Thanks
Thomas