How To Speed Up WordPress Websites With Spectra and WP Rocket

How do you make a positive first impression on the web?

Use the Spectra website builder and the WP Rocket caching plugin to make it blazing fast!

Have you ever waited for a website to load and ended up hitting the back button in frustration?

We all expect information to be at our fingertips instantly. If a site takes ages to load, we’re likely to leave right away.

That’s the last thing we want!

Fortunately, there are powerful plugins out there that help you deliver the information users want, when they want it.

It all starts with the right website builder and powerful cache plugin.

Why Speed Matters

Fast page load times have three main benefits:

1. Enhanced user experience and engagement
2. Improved SEO visibility
3. Increased conversions and sales.

Let’s delve into each of these a little deeper.

Enhanced User Experience and Engagement

Fast-loading websites have obvious benefits – nobody enjoys waiting endlessly for a web page to load!

The probability of bounce rises 32% as page load times increase.

Imagine yourself on a slow website – would you stick around? Would you trust it with sensitive information like your credit card number?

The longer it takes a page to load, the higher the bounce rate (where a visitor leaves immediately).

Improved SEO

Optimizing website speed is essential for maintaining visibility and attracting organic traffic.

Google counts website speed into its SEO algorithm. Fast sites score well and should experience SEO benefits. Slow sites won’t.

Increased Conversions and Sales

The faster your website loads, the more likely visitors are to stay.

Research indicates that even minor improvements in loading time can have a significant impact on conversion rates.

A study by Bidnamic in 2024, revealed the conversion rate increases by 17% for every second a website loads faster.

Google says that for every second delay in mobile page load, conversions can fall by up to 20%.

That’s how important performance is to websites!

The 5 Main Factors Impacting Speed

Understanding the factors that affect website speed is key to optimizing performance.

Here are the five main elements that can impact how quickly your website loads, along with simple tips to address each issue:

1. Using a heavy theme
2. Building pages with a bloated page builder
3. Not taking advantage of caching
4. Not optimizing code and images
5. Too many HTTP requests

Using a Heavy Theme

A heavy theme typically contains numerous features, advanced design elements, and extensive code.

None of which will be optimized for load times.

💡Hint: A lightweight theme, such as Astra, is designed with optimized code, prioritizing speed and performance.

Of course, we are a little bit biased but don’t take just our word for it. Astra is an incredibly popular WordPress theme, trusted by over 2,300,000 websites!

Building Pages With a Bloated Page Builder

Unoptimized page builders can also contribute to slow website speed.

Some page builders we could mention come with excessive features and options that load whether you use them or not.

This can lead to increased page size and longer loading times.

💡Hint: Use a page builder like Spectra that works with the default WordPress block editor.

While page builders are sometimes criticized for their impact on performance, Spectra breaks the mold by ensuring that your site remains blazing fast.

Not Taking Advantage of Caching

If you’re not using caching on your WordPress site, you’re missing out on huge performance potential.

Caching greatly improves performance by making copies or web pages and storing data for immediate access.

When a visitor arrives on a page, the cache will send them a copy of the page instantly rather than WordPress having to build it from scratch.

It’s a simple but very effective way to speed up page load times!

💡Hint: Opt for a caching plugin like WP Rocket 🚀to help optimize site speed.

No technical skills required as the plugin does all the heavy lifting for you and goes way beyond caching.

WP Rocket applies 80% of the performance best practices automatically as soon as you activate it.

Not Optimizing Code and Images

Another reason for a slow WordPress site is unoptimized code and a lack of image optimization.

There are four main aspects to address performance issues related to code and images, which we explain below:

• Clean and optimized code: Improves code efficiency, reducing redundancies. Often achieved using minification and CSS and JS optimization (removing unused CSS, deferring and delaying JavaScript files).
• Image compression: Reduces image size without compromising quality.
• Lazy loading: A technique that delays the loading of images and videos until they need to be displayed.
• Next-gen image formats conversion: Converting images to WebP or AVIF makes them lighter. According to Google, WebP images are 25-34% smaller than comparable JPEG images, ensuring a faster loading page.

💡 Hint for image optimization: Consider using a free WordPress image compression plugin like Imagify. The plugin can also convert images to WebP and AVIF formats, saving time and server space.

💡 Hint for code optimization: Use a page builder like Spectra, which prioritizes minimizing code and file size to enhance page load speed. The builder also reduces CSS and JS loaded for WordPress blocks, further optimizing performance.

🚀 WP Rocket can also help with lazy loading and code optimization. It can remove unused CSS and delay and defer non-critical JavaScript.

Too Many HTTP Requests

Every time a browser has to load a page element, it has to make an HTTP request for it.

The more requests that are made, the more time a page takes to load.

Solutions to this include combining files to require fewer requests, reducing unnecessary elements, and implementing lazy loading techniques.

💡Hint: Caching and optimizing scripts with WP Rocket, optimizing images with Imagify, and using a content delivery network (CDN) significantly reduce the number of HTTP requests.

Speed Up WordPress Websites With Spectra and WP Rocket

This section explains why we chose Spectra and WP Rocket to ensure your WordPress site loads quickly.

Spectra is a page builder also developed with performance in mind.

It’s faster than other page builders, loads less code onto a page and is designed to work hand in hand with WordPress.

WP Rocket is one of the best caching plugins for WordPress.

It’s a comprehensive plugin that speeds up load times and improves the user experience.

It also improves Core Web Vitals using caching, lazy loading, delaying JS, removing unused CSS, cleaning the database, and much more.

Here’s how to activate the Spectra page builder:

• Log into WordPress.
• Navigate to Plugins > Add New Plugin and search for Spectra.
• Click on the Install Now button and then Activate the plugin.

You can install and activate WP Rocket just as easily!

Performance Tests

We will conduct three performance tests using Lighthouse, a tool developed by Google to measure website performance.

The goal of these tests is to demonstrate the speed of Spectra and to show how WP Rocket and Imagify can fine-tune performance.

• Test #1: Blank WordPress installation with Spectra and no optimization
• Test #2: Performance test with Spectra + WP Rocket 🚀
• Test #3: Bonus – Performance test after image optimization with Imagify

How We Test Performance ⏱️

KPIs: The 5 Lighthouse metrics, total loading time, and number of HTTP requests.

Performance tools and KPIs used for the audit:

• Google PageSpeed Insights (Largest Contentful Paint, Cumulative Layout Shift, Speed Index, Total Blocking Time, and First Contentful Paint).
• GTmetrix (Fully loaded time, page size, and the number of HTTP requests – from an iPhone 12 in Paris).

Device and servers: Results will be evaluated on mobile devices with servers located in France, and tests also conducted from France.

Theme and Plugins We Have Selected for Our Test Site

Page builder: Spectra

Theme: Astra

Other plugins: WP Rocket (not activated on the first test), and Imagify (activated only for the final test).

Let’s get to the data!

Test #1: Blank Installation With Spectra and No Optimization

The results are excellent, with a score of 92/100 on PageSpeed Insights, placing us in the green.

It’s worth noting that no manual optimization has been made; all we did was install some pre-made blocks from Spectra, and the results are great out of the box.

Here are the KPIs results for Spectra:

• Largest Contentful Paint: 3.3 s
• Cumulative Layout Shift: 0
• Speed Index: 3.4 s
• Total Blocking Time: 40 ms
• First Contentful Paint: 1.7 s
• Fully loaded time: 1.5 s
• Page size: 2.3 MB
• Number of HTTP requests: 18

While performance is almost optimal, there’s still room for improvement, as indicated by the diagnostics tab:

• Image optimization (Serve images in next-gen formats and efficiently encode images). In plain English, Lighthouse recommends converting images to WebP or AVIF and compressing them.
• Caching (Serve static assets with an efficient cache policy).
• Reduce unused CSS (Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content).
• Eliminate render-blocking resources (Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles).

That’s where Spectra and WP Rocket comecomes in!

Test #2: Performance Test With Spectra + WP Rocket 🚀

With both Spectra and WP Rocket installed, we’ve boosted our performance score from 92/100 to a perfect 100/100 on mobile.

Here are the KPIs results for Spectra + WP Rocket

Let’s compare them side by side with the unoptimized installation from test #1.

The audit section is also better with 3 more warnings in the ‘passed audit’ section thanks to WP Rocket:

How Did We Score 100/100 With WP Rocket?

By default, WP Rocket automatically applies 80% of performance best practices.

The plugin will activate the following features by default:

• Page and browser caching
• Mobile caching
• Cache preloading
• Link preloading
• GZIP compression
• Google font optimization

We then activated some key performance features to address the flags from Lighthouse:

• Remove unused CSS
• Minify JavaScript
• Load JavaScript deferred
• Delay JavaScript execution

Note: WP Rocket also offers the lazy load options for images, CSS background images, videos, and iframes. We did not use these for this performance test.

All we had to do was check a box to activate each advanced feature:

• Optimize CSS delivery

• Eliminate render-blocking resources (mainly to optimize JavaScript)

There are two remaining warnings related to image optimization, we will use Imagify to fix them.

Test #3: Bonus – Performance Test After Image Optimization With Imagify

Imagify is one of our favorite image optimization tools for WordPress.

You can automatically optimize your entire image library in bulk or fine-tune images individually. It’s very easy to do.

The plugin is available for free in the WordPress repository.

Here are the features that improve performance:

• Smart compression mode (efficiently encode images): With just a few clicks, you can shrink image file sizes while maintaining their visual quality.
• AVIF and WebP (next-gen format) conversion: Imagify generates WebP by default, but you can choose to have AVIF versions instead.
• Resize larger images: This allows you to automatically resize the larger images and avoid performance issues.

Now let’s take a look at the bytes saved with Imagify.

From the WordPress library, you can see the savings Imagify has achieved:

Here’s an example of an optimized image:

Imagify also helps your site pass image-related Page Speed Insights audits:

Key performance takeaways:

• Spectra’s built-in speed optimization ensures your site starts on the right foot (92% on PageSpeed Insights).
• WP Rocket takes it to the next level by fine-tuning every aspect for optimal performance (100% on PageSpeed Insights).
• Imagify also helped address image optimization recommendations and make the page lighter, contributing to increased performance.

We recommend always using an image optimizer, especially if you have many large images!

Additional Optimization Tips To Speed Up Your WordPress Site

We’ve witnessed the significant impact of a well-coded page builder (Spectra), caching and other key performance features (WP Rocket), and image optimization (Imagify).

If you want to further enhance performance on WordPress, here are five additional techniques you can implement.

1. Use a CDN: Expand your website’s reach by using a Content Delivery Network (CDN), ensuring fast load times for visitors across the world.
2. Clean up your database: Keep your website running smoothly by regularly cleaning up your database. WP Rocket offers a handy tool for this.
3. Keep PHP updated: Stay ahead of performance issues by keeping your PHP version up to date.
4. Split comments: Manage large volumes of comments more efficiently by splitting them into multiple pages. This prevents page slowdowns and enhances user experience.
5. Remove unused plugins: Less is more. Streamline website performance and storage space by removing unused plugins.

Wrapping Up

Having a fast WordPress site is key to providing a good user experience, higher conversion, and SEO.

Search engines prioritize fast websites, making speed optimization essential for attracting organic traffic.

All you need is the right tools: a lightweight theme, a page builder with built-in performance features and clean code to ensure optimal website speed.

Spectra proves to be the ideal ally in this regard, achieving a score of 92/100 on PageSpeed Insights.

WP Rocket is one of the best cache and performance plugins available and provides a tangible performance boost to load times.

When paired together, the resulting site speed is truly remarkable. They help you achieve top speeds easily and pass the Core Web Vitals test with flying colors.

Are you ready to build a lightning-fast website with Spectra and WP Rocket?

This is a guest article contributed by Marine Larmier on behalf of WP Rocket. Marine has 10 years of experience crafting engaging SEO content in the WordPress world.