Experience Faster Gutenberg Pages with Optimized Code

Hello Everyone! 

Hope you all are safe and doing great!

We are back with the latest update of your favorite plugin – Spectra.

This update means pages built with Spectra will load faster than ever before and will deliver truly impressive results!

Spectra is now a collection of 25+ unique and advanced Gutenberg blocks. Here are a few of the recent ones you must be using already;

• Forms – Display conversion-friendly contact forms anywhere. s. Use the many creative options to design interactive forms.
• Tabs – A great way to display your long-form content in smaller chunks and enhance the user experience.
• Review Schema – Improve credibility with trustworthy reviews. Also, get a chance to rank higher in search results with default review schema support.

With every Spectra update, we try to deliver modern blocks while keeping our code optimized at the same time. All so that you can design beautiful, fast,conversion-optimized websites.

Let’s now explore how the code optimizations in the latest Spectra update help speed up page load time. 

Improved Asset Loading for Faster Gutenberg Pages 

Spectra version 1.23.0 focuses on speed improvement and scoring. This ensures that when you use any Spectra block on your website, it will load with the minimum page requests and the minimum page size, resulting in a faster loading time.

We achieved this by improving the way Spectra loads the CSS and JS code on every page. 

When you use any Spectra block on-page, the required CSS and JS code will be generated only once and used as many times as required. 

Undoubtedly, this saves time in generating these files every time a user visits your website.

With faster asset loading, the performance of pages improves significantly. It reduces the total page size, file size, and ultimately the page load time.

Here are a few stats to prove it.

Let’s consider a test page where we have added Spectra’s Advanced Heading block.

We start by testing its load time with the Spectra version before the latest 1.23.0 version. The report indicates a 44.8KB page size.

Now, updating to the latest Spectra version will show a significant reduction in the page size, 26.4KB.

This brings a 41% reduction in page size and a significant increase in page load time. Down from 612ms to an impressive 488ms!

You too can experience this performance improvement. All you have to do is update the Spectra plugin. It’s that simple! 

New Controls For Spectra

With this latest update, you also get some additional controls on the Spectra settings (Dashboard > Settings > Spectra) page.

1. Regenerate Assets – After switching to the latest Spectra version, if the colors or design are not showing up properly, you can use this option. This will quickly regenerate the CSS and JS files required for the page. This option could fix any design or layout-related issues on your Spectra pages. 

2. Enable Beta Updates (Settings > Spectra > Tools) – While releasing any major Spectra version, we follow a Beta testing process. It helps us to provide a working copy of the upcoming release with you and get feedback on the new features, improvements, and fixes.

Now you can easily participate in the Beta testing process with this new option. Just visit the setting and click on the ‘Enable Beta Updates’ button. This will fetch the latest beta version and automatically install it on your site.

We recommend you test the beta version only on staging or test site and not on your live site. 

3. Rollback to the Previous Version (Settings > Spectra > Tools) – This is another small but helpful control. After updating Spectra to the latest version, if you do experience any issue, you can easily and quickly roll back to the previous version.

You can choose a version you need to switch back to and just click on ‘Reinstall.’

Bonus: Ready to Import Pages Templates and Block Patterns 

Have you explored the templates and block patterns library that comes inbuilt with Spectra yet?

If not, give it a try today!

When you edit any post or page in the Gutenberg editor, you get a button ‘Spectra Templates’, that opens up a library of page templates and Gutenberg block patterns. 

Single page templates – The Spectra template library offers a single page template. This helps you to import beautiful and ready-made pages to your website. You will see a group of page templates for different niches such as Outdoor Adventure, Mountains, Organic Store, and so on. 

You can import these pages with just a click, add your content, replace images and go live with a beautiful, professional-looking website with minimal effort.

Gutenberg block patterns – These are small ready-made sections of a web page that can be added to any design. You can insert block patterns anywhere on the page with just a click.

You can add patterns to your own design or use different ones to create a unique page.

Some of the benefits of the Spectra templates library include:

• Easy to customize: You can easily edit page templates and block patterns to tweak them. There is no coding required to design them or much of a learning curve to master them.
• Works with all themes: You can import templates and patterns from any of your favorite themes and customize them easily. 
• Adopt customizer settings: Once you import a template or pattern, it will inherit all your customizer settings like color, typography, or layout. This saves a lot of time and effort!
• Responsive ready: All templates and block patterns are fully tested for responsiveness. The design will look great on all screen sizes.
• Available for free: This template and block patterns are available for free with the Spectra plugin. 

Want to learn more? Check out our detailed article on Spectra templates and block patterns.

Update Spectra Today! 

Update Spectra and experience the awesome speed improvements it brings. 

We have released the latest Spectra v1.23.3 to make sure everything works smoothly on our website.

If you have any questions about the update, our support team are always ready to help. 

Do let us know how you liked this update in the comments below.

Until next time, Cheers!