Optimize Astra HTML and CSS – For Existing Astra Users (Before v3.3)

Astra brings major performance improvements in version 3.3. In this version, we have optimized HTML and CSS on the page. This reduces the page size and brings faster loading time for pages in the frontend.

Here is a complete list of pages that are made faster with this optimization –

• Latest Blog Post
• Single Post
• All Archives (including blog archive, category archive, tab archive, author archive, pagination, and so on.)
• WooCommerce – Shop Page and Single Product Page
• Easy Digital Downloads (EDD) – Single Product Page
• LifterLMS – All Courses and Single Course Page
• LearnDash – All Courses and Single Course Page

Users those are starting to use Astra directly from this version, would get new speed improvements directly on their websites.

But existing users – those who are already using Astra and updating it to v3.3 – will not see these improvements directly on the website.

Why?

The main reason is not to disturb exiting websites’ layout, structure, and design. In the process of HTML and CSS optimization, we have merged some code and removed an extra one. If we implement this directly on existing websites some of the design might get affected by this. Any custom code written on removed HTML divs or CSS classes might not work.

So to avoid such issues, we haven’t implemented new code directly on existing websites.

But you can certainly get this optimizations on your wbesites with a simple filter code.

How?

Below is a custom code that you can use to apply HTML and CSS optimizations on your website.

But before using code –

1. Make sure you have Astra theme and Astra Pro updated to version 3.3
2. Take a backup of your website

Paste the following code in your child theme’s functions.php file.

add_filter( 'astra_apply_flex_based_css', '__return_true' );

Done!