Introducing Astra 2.0 – Speedy Customizer with Enhanced User Experience

There is always some scope for improvement!

We say this always and believe in it from day one! Astra too was built to be the best WordPress theme and we are overwhelmed by the love we received for it. 🙂

But, our work hasn’t stopped! Through a number of updates, we’ve proved that we are continuously working to make it even faster. Along with the website loading time, we now wish to reduce your website design time too!

Today we are here with our next ambitious update – Astra 2.0, with a faster customizer and clean user interface.

Just to give you a quick idea, this is how your layout structure like Primary Header, from Astra 2.0 customizer will look –

Did you notice that all styling options are put together? Interesting, right? Let’s dig in to this new version of customizer –

Why we did this

We planned to simplify the customizer editing experience and make things faster. Here are a few thoughts that compelled us to bring up this improvement –

• Boost up the customizer performance
• Minimize the clicks to reach setting within the customizer
• Ease down the process of website designing
• Make everything available under a single tab
• Reduce to and fro steps in the customizer
• Provide a clean settings-window that categorizes options easily

While designing a particular section user used to spend time searching for corresponding color and typography settings. This also included the time required for a customizer to load a number of tabs. We don’t want our users to experience this anymore.

What did we do?

We summed up all requirements in two parts and decided to work on

• Presenting theme with better-customized user experience and
• Decreasing the customizer operation time

To achieve this we made some UI and performance modifications in the customizer –

Merged all customization options under one hood

Color and Typography settings for various theme sections are moved under respective layouts. That means you can customize the entire section along with colors and typography from one place.

For example – Consider you are designing primary header.

Previously:

• Layout settings were available under Layout > Header > Primary Header
• Color options under Colors & Background > Layout > Header
• Typography options under Typography > Layout > Header

Now:

• All options i.e. Layout, Colors & Background, Typography will be available under Layout > Header > Primary Header. Like shown below –

Reduced PHP Calls to boost customizer performance

Previously PHP calls were sent as soon as you hit to open a customizer. This made the customizer loading process a little bulky and time-consuming.

With advanced Astra version, the customizer option will load only when a user clicks to edit them.

For example – Previously color options for primary header are loaded along with the customizer. But now they will load only when you visit colors and background setting under Primary header tab and click on the edit icon, as shown below –

Combined Google font loading requests

Google fonts are available in the font-family list. These are loaded separately for every sections’ typography settings. That means while loading customizer different calls were sent to render google fonts list in typography options.

Now all these calls are combined and Google Fonts list will be loaded in a single call.

Made live preview faster

Till now, changes made in the customizer needed quick reloading of the page. But new customizer will reflect changes in the live preview without reloading the page.

For example – Font family selected will be applied to content WITHOUT refreshing the page.

Results we obtained

After combining all the efforts, the results we got are stunning! We found that the latest version works much faster. Here are some statistics –

See how Astra 2.0 reduced customizer loading time by 60.71%

1. DevTools – Network Activity Compared

1.1 Astra Customizer Version 1.0 ( with all modules activated ): Load time – 19.6 seconds | Resources – 7.7 MB

1.2 Astra Customizer Version 2.0 ( with all modules activated ): Load time – 7.7 seconds | Resources – 6 MB

2. Blackfire Profiling Compared

2.1 Astra Customizer Version 1.0: Time – 3.83 seconds | Peak Memory – 16.9 MB | More details on the link here

2.2 Astra Customizer Version 2.0: Time – 1 second | Peak Memory – 13.6 MB | More details on the link here

Quick designing with Astra 2.0 customizer

As mentioned earlier, Astra 2.0 customizer reduces the number of clicks to design any theme section. Let’s compare the number of clicks to add site title – tagline and style it with color and typography.

With Astra 1.0

With Astra 2.0

See the customizer in action!

Excited to see how the new customizer works? Well we’ll not keep you waiting!

We are releasing the first beta for Astra 2.0. Beta version will be available for both, Astra Theme and Astra Pro.

Warning! We strongly recommend you to use the beta version of the theme and plugin in a test environment only. DO NOT use it on a live site. This will let you try new features without worrying about what breaks.

Not sure how to install the beta version?

1. Install the Easy Theme and Plugin Upgrades plugin.
2. Download the latest beta version of the Astra theme from here.
3. If you are Astra Pro user, download the beta of Astra Pro Plugin from your account on our store.
4. Install the zip files you just downloaded just like any WordPress theme/plugin.

Help us to hit the mark!

Your suggestions and feedbacks are important for putting things in place! So, go ahead, check this beta and see how it is impacting your workflow. Experience how easy and quick it is to design your website. If you have something to share; please write to our support center.

Happy with the new customizer’s glittering performance? Don’t forget to invite us to the party 😉 Let us know your thoughts in the comments below.

Cheers!