Last Updated 25 Jul 2024
|

Astra 3.5 – Faster Loading, New Controls, and Improved Accessibility

Quick Summary ↪ Astra 3.5 brings significant enhancements, including faster load times, improved accessibility, optimized CSS, new controls for related posts, accessibility improvements, and enhanced screen reader support. Upgrade to Astra 3.5 today to experience these exciting new features.

Astra 3.5 - Faster Speed, 100% Accessibility Ready

In our continuing quest to make your websites faster, we are here with a new update – Astra 3.5!

This is the next step in Astra 3.0 series where your favorite theme is setting new standards with its performance and speed. And the latest Astra 3.5 update is no different.

Taking Astra’s performance to the next level, version 3.5 introduces powerful CSS optimizations for faster frontend loading.

It also delivers advanced options for recently released related posts and better responsive visibility for the site title and site tagline.

With this update, Astra takes a big step forward in becoming a fully accessible theme.

We are also happy to announce that your favorite Astra theme is almost ready for Google Core Web Vitals. As you’re probably aware, CWV is the next big thing on the internet and Astra will be fully compatible with it.

Let’s see more about this update:

Faster Frontend Loading With Optimized CSS

Do you also love designing websites with different colors, typography, layouts, and designs?

Know that with more styling comes even more code. And with more code, there’s more CSS?

With Astra 3.5 onwards, no matter how many styling options you use, all the code will be served by optimized CSS files. This gives you the fastest loading speed in the frontend and adds wings to your creativity!

This update focuses on the optimization of CSS that loads with Astra on your page.

Here is what we did to improve CSS loading:

  • Conditional loading of CSS: What this means is that Astra will now load CSS only if the particular style is applied to the website or if an element is used on the website. The corresponding CSS will be generated based on the design options you choose in the Astra customizer. This also includes elements you use in the header footer builder and will prevent loading CSS you don’t need.
  • Load only relevant page builder CSS: Astra will first detect the page builder you use and then load the respective CSS code.
  • Fully optimized CSS: We examined every line of CSS applied for both the desktop and responsive views. We’ve optimized and reduced the CSS to the best possible extent.

This covers all the CSS that is applied by Astra, giving you the much-improved loading time.

Here is a result of a test that we ran using Astra’s previous and upcoming version.

Before Astra 3.5, the main CSS file had a file size of 18.5 KB.

Astra 3.4 - Performance score

With Astra 3.5, the CSS file size was reduced to 16.4KB.

Astra 3.5 - Performance score

New Controls for Related Posts

The new related posts feature was introduced with Astra 3.4.

Using this feature, you can display related posts on your posts and pages from the Astra customizer.

This option now has additional controls.

Let’s see what they are:

1. Custom Title

Grid Columns Responsive

Sometimes you might need to highlight your related post section with an engaging title.

With the Custom Title option, you can set any string as a title to the related posts section and manage its alignment.

2. Manage Column Number on Responsive Devices

Relates Posts Grid Columns Responsive

With the previous version, you could set a number of columns for related posts. You can now manage the column numbers across all devices.

Responsive Visibility for Site Title and Site Tagline

This adds the new responsive option for the toggle button for the site title and site tagline for desktop, tablet, and mobile devices.

Site Tagline

Site Title Color Option Now Accessible to Everyone

The site title color option was available only with the Astra Pro addon. It has now moved to the Astra theme.

You can find it in the logo element under the design tab.

Astra 3.5 Site Title Color

Improved Accessibility

As you know Astra is already an accessibility-ready theme. But with version 3.5, Astra is taking a step ahead in becoming a fully accessible theme.

In recent years having an accessibility-ready website is one of the important aspects of web design. Building accessible websites that don’t exclude people with different needs is important.

Improving Astra further, version 3.5 now has the following updates:

  • Background and foreground colors will now have an increased contrast ratio.
  • The search button of the search form is now made fully accessible.
  • Always show aria-label attributes on builder social icons for accessibility.
Astra 3.5 - Accessibility Ready

Get Astra 3.5 Today!

Excited to experience a faster Astra and try new features? Update Astra theme and Astra Pro today.

As hinted in the beginning Astra is almost ready for Core Web Vitals. CWV are metrics provided by Google to measure areas of website design that relate to a good user experience. Its release is around the corner and we are getting Astra ready. Stay tuned for this! 

Do let us know how you like Astra 3.5 in the comments below. If you need any help with this update contact our awesome support team. 

Before you proceed with the update, have you checked a brand new course on our online learning platform? A few days back we launched a new SkillJet course – Speed-up Your WordPress Website.

It helps you tackle common misconceptions about website speed optimization and keep you up-to-date with the latest website optimization best practices. 

See you next time! Cheers! 

Article by
Sujay Pawar

LinkedInTwitter

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!

10 comments
  1. Kevin Profile Pic

    I think you are aware, but please check all blocks to ensure they include all available and relevant sizes in the srcset attribute. I also noticed some blocks were missing the native lazy load attribute as well.

    One thing I found useful for Web Core Vitals was to make use of media queries and the ‘max-size’ value on the size attribute.

    I find using Astra with Gutenberg gives the best results. I tried Elementor, but Its very bloated and some of their blocks aren’t optimised – especially the background images.

    Great work team!

    1. Team Astra Profile Pic

      Hello Kevin,

      Can you write to us at [email protected] or open a ticket with us through our Support Portal. We would love to take a closer look and answer your queries and even take your feedback.

      Appreciate your reaching out in advance! 🙂

  2. Suman Gaudel Profile Pic

    Next update please add fetaure to arrange bottom part of the single blog post similar like this.
    Post content
    Social sharing button
    Comment box
    then related post

    dont want to use elementor

  3. Zoliandru Profile Pic

    Hi there,

    About the CSS optimisation, you say “Load only relevant page builder CSS” – is this on page level or website level?
    I may need to use Elementor on one single page, but not for the rest of the website, so the styling options of elementor used on this page will only load on this particular page, or the styling options will be served on the whole website ?

    Thanks

  4. Tibor Profile Pic

    Which one is preferred by you for better accessibility compliance?

    – Use WP Astra Pro with Elementor Pro page builder
    or
    – Use WP Astra Pro with Gutenberg Editor (plus Spectra)?

    thanks
    Tibor

  5. Ladislav Profile Pic

    Yes, it’s nice that the template is more accessible. Unfortunately, from the point of view of the https://validator.w3.org/ validator, it still has a lot of errors. For example: “Duplicate ID”. Will you fix this error and other errors to make the template really accessible?

    Thank you

    1. Team Astra Profile Pic

      Hello Ladislav, we have fixed a few Duplicate ID issues in our latest Astra theme version 3.7.4. More details here. Hope that resolves your concern, feel free to reach out to your Support if you are facing any issues. 🙂

    1. Team Astra Profile Pic

      Hello Erin, we use the tool by Google called PageSpeed Insights for performance tests and the inbuilt Chromer browser tool called Lighthouse tool from Google.

Leave a Comment

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

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

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

Download Free Astra Theme - Modal Popup Form
Scroll to Top