Tag: Themes & Plugins

Are you looking for a fast WooCommerce WordPress theme? We’ve compiled a list of 7 themes you can use for your next e-commerce project! An online shop often means a lot of images, text, videos, reviews, and payment gateways which can, unfortunately, impact the performance. Your clients will not like a slow WordPress site and may be reluctant to complete any purchase if the page takes forever to load. Actually, Portent ran some studies about the impact of site speed on the conversion rate, and you can see the correlation on the graph below. The more it takes for the page to load, the lower the conversion rate is. 

In this article, you’ll find 7 WooCommerce themes you can use for your next project. As a bonus – to prevent you from losing sales and customers on the way – we’re sharing some tips on optimizing your WooCommerce site and making your online store faster than ever. 

Let’s dive in. 

The 7 Fastest WordPress Themes + Test Data

We have selected the most popular WooCommerce themes on the market, and here’s the shortlist we come up with: 

1. Storefront
2. Astra (+ The Pro WooCommerce add-on)
3. Flatsome (+ The UX theme builder)
4. Avada (Fusion WooCommerce builder)
5. Divi (Divi WooCommerceBuilder)
6. BeTheme (BeBuilder)
7. The 7 (Elementor page builder)

We’ve run some fair performance tests for each theme which should help you choose. 

Let’s get to the data! 

1. Storefront

A very basic free theme developed by WooCommerce themselves. The theme is built and maintained by WooCommerce core developers, which avoids compatibility issues. The customization options are limited, but if you want to launch a simple online store, it does the job. 

Performance results for the Storefront theme:

• PageSpeed mobile score: 85/100
• First Contentful Paint: 2.1s
• Largest Contentful Paint: 1.7s
• Cumulative Layout Shift: 2.8s
• Speed Index: 1.3s
• Time To Interactive: 1.3s
• Total Blocking Time: 0 ms
• Total Loading time: 2.1s
• Total page size: 990 KB
• HTTP requests: 18

2. Astra

Astra is one of the best WooCommerce WordPress themes due to its lightweight code, user-friendly interface, and thousands of starter templates for your next shop. The premium add-ons for WooCommerce allow you to create a custom payment page, add an advanced product gallery, filters, and unlimited scrolling to create a site like Pinterest. 

Performance results for the Astra theme (and the WooCommerce add-ons):

• PageSpeed mobile score: 83/100
• First Contentful Paint: 2.2s
• Largest Contentful Paint: 1.7s
• Cumulative Layout Shift: 2.1s
• Speed Index: 1.1s
• Time To Interactive: 1.3s
• Total Blocking Time: 0 ms
• Total Loading time: 2.5s
• Total page size: 990 KB
• HTTP requests: 16

3. Flatsome

The #1 selling WooCommerce theme on Themeforest is multipurpose and responsive for WooCommerce. It comes with the UX builder and some interesting options for your online store, such as the live search, add to wishlist, sale bubble options, change the number of products per row, or the catalog mode options if you don’t want to display any prices. 

Performance results for the Flatsome theme:

1. PageSpeed mobile score: 81/100
2. First Contentful Paint: 2.5s
3. Largest Contentful Paint: 1.7s
4. Cumulative Layout Shift: 1.6s
5. Speed Index: 1.3s
6. Time To Interactive: 2.5s
7. Total Blocking Time: 0 ms
8. Total Loading time: 2.7s
9. Total page size: 997 KB
10. HTTP requests: 18

4. Avada (+ Fusion Woo Builder)

It’s the #1 selling theme on Envato for years, with many thousands of easy-to-customize templates in the library. Avada comes with the Fusion Builder, allowing you to build your site from the header to the footer. It also has powerful WooCommerce widgets allowing users to build customized online stores. You can also use their builder to build custom product and shop pages. 

Performance results for the Avada theme:

• PageSpeed mobile score: 78/100
• First Contentful Paint: 2.9s
• Largest Contentful Paint: 1.8s
• Cumulative Layout Shift: 1.6s
• Speed Index: 1.3s
• Time To Interactive: 2.6s
• Total Blocking Time: 0 ms
• Total Loading time: 2.8s
• Total page size: 998 KB
• HTTP requests: 17

5. Divi (+ Divi WooCommerce Builder)

Divi is a powerful WooCommerce theme thanks to its visual WooCommerce builder. Elegant Themes was among the first companies to bring the WYSIWYG to WordPress. The promise is that you can build everything visually using the Divi framework without touching a single line of code. The WooCommerce builder and modules allow you to create your custom product and shop page quickly. 

Performance results for the Divi theme:

• PageSpeed mobile score: 75/100
• First Contentful Paint: 4.1s
• Largest Contentful Paint: 1.5s
• Cumulative Layout Shift: 2.8s
• Speed Index: 2.4s
• Time To Interactive: 1.2s
• Total Blocking Time: 0.1 ms
• Total Loading time: 3.1s
• Total page size: 1.2 MB
• HTTP requests: 19

6. BeTheme (+ BeBuilder)

BeTheme is a multipurpose website builder and best-selling WordPress theme with 650+ pre-built websites (with a modern design). Their BeBuilder is also compatible with WooCommerce, and they even launched a query builder to build loops and dynamic websites. The promise is that you can build the WooCommerce site you want and design versatile shops & single-product layouts that convert. You can either use a ready-to-use template or create your own. 

Performance results for the BeTheme theme:

• PageSpeed mobile score: 72/100
• First Contentful Paint: 4.1s
• Largest Contentful Paint: 3.9s
• Cumulative Layout Shift: 2.8s
• Speed Index: 1.9s
• Time To Interactive: 1.7s
• Total Blocking Time: 0.5 ms
• Total Loading time: 3.6s
• Total page size: 1.3 MB
• HTTP requests: 21

7. The7 

It’s the #1 selling Elementor theme that offers a lot of customization for WooCommerce. The7 has 60+ prebuilt dummy websites with exclusive templates that can help launch an online store easily. You can build attractive templates for the storefront, product pages and lists, checkout, cart, and more with the advanced WooCommerce Theme Builder. The highlight is that you can easily modify any WooCommerce page and add advanced filters to improve the user experience. 

Performance results for The7 theme:

• PageSpeed mobile score: 70/100
• First Contentful Paint: 4.4s
• Largest Contentful Paint: 4.3s
• Cumulative Layout Shift: 2.9s
• Speed Index: 1.2s
• Time To Interactive: 1.5s
• Total Blocking Time: 0 ms
• Total Loading time: 4.1s
• Total page size: 1.5 MB 
• HTTP requests: 25

Summary Table of the Performance Results

Below we’ve put together the summary of the performance results for each WooCommerce theme. We used Lighthouse’s global “PageSpeed mobile score” to rank them. 

	PageSpeed mobile score	Total Loading time	Largest Contentful Paint	First Contentful Paint
Storefront	85/100	2.1 s	1.7 s	2.1 s
Astra	83/100	2.5 s	1.7 s	2.2 s
Flatsome	81/100	2.7 s	1.7 s	2.5 s
Avada	78/100	2.8 s	1.8 s	2.9 s
Divi	75/100	3.1 s	1.5 s	4.1 s
BeTheme	72/100	3.6 s	3.9 s	4.1 s
The7	70/100	4.1 s	4.3 s	4.4 s

Key Takeaways:

• None of the themes are in the red on mobile, they all lie between the orange and the green regarding the global performance. 
• Storefront, Astra, and Flatsome seem to be the top 3 fastest. 
• The7 seems to be the “slowest” which makes sense with all the advanced customization available. The performance is still acceptable, though, and in the last section, we will show how to put all the KPIs in green! 

How We Tested the Themes 

The selection was based on popularity, high numbers of downloads or sales, library templates, and quality reviews. The performance tests were made using the following performance tools:  

• PageSpeed Insights
• GTmetrix

Both tools are powered by Lighthouse. They analyze the performance and the user experience of your website. Here are the 10 KPIs we’ve used in our tests – measured on mobile: 

From PageSpeed Insights:

• PageSpeed mobile score 
• First Contentful Paint
• Largest Contentful Paint
• Cumulative Layout Shift
• Speed Index
• Time To Interactive
• Total Blocking Time

From GTmetrix:

• Total Loading time
• HTTP requests
• Total page size 

Then, we chose 7 themes that define themselves as WooCommerce friendly because they come with add-ons or specific customization related to online stores: product page or checkout process customization, advanced galleries, personal account page, etc. 

The Test Site

We built a realistic WooCommerce site for each theme. In all cases, the homepage has a hero banner with a button, 1 call to action, 4 icons with texts, 3 customer reviews, 1 ad, and 12 products. Of course, we used the same image and products for each test, we simply swapped the themes between the round of tests. 

We did a fresh installation for each theme and used the same server for each theme’s speed testing (servers are in London).

Disclaimer: Those performance tests have been run on a server based in London, and we built each e-commerce page ourselves. The results we have presented are from our own experience, and the results may differ according to your project.

Give an Extra Performance Boost with WP Rocket

WP Rocket is one of the best caching plugins to optimize any WooCommerce theme, including the ones on our list. Your online store’s performance and Core Web Vitals score will drastically improve upon its activation. 

To understand the impact of WP Rocket on speed, let’s see it in action with the7, which was one of the most complete themes we tested in terms of features and customizations. 

Below are the performance issues flagged by Lighthouse, listed under the “Opportunities” tab: 

Lighthouse suggests using caching, enabling text compression, reducing unused CSS/JS, and deferring offscreen images (image optimization with lazy loading). 

After using WP Rocket on the test site, we noticed that our issues were moved to the “passed audits” section:

But there is more to come. All our performance KPIs improved thanks to WP Rocket, including the mobile score on PageSpeed Insights. The performance score got a 99/100.

WP Rocket also boosted the Core Web Vitals scores (all in green) and decreased the total loading time (from 4.1s to 1.9s). It also reduced the page size and the number of HTTP requests, as you can see in our table below: 

Performance KPIs	The7 Score (no WP Rocket)	The7  Score (with WP Rocket)
PageSpeed mobile score	70/100	99/100
First Contentful Paint	4.4s	1.7s
Largest Contentful Paint*	4.3s	1.7s
Cumulative Layout Shift*	2.9s	0s
Speed Index	1,2	2s
Time To Interactive	1.5s	1s
Total Blocking Time	0ms	0 ms
Total Loading time	4.1s	1.9s
Total page size	1.5 MB	680 KB
HTTP requests	25	8

*Core Web Vitals

Here are more tips about testing and improving the Lighthouse performance score on WordPress.

To address all the PageSpeed Insights warnings and boost the performance, we used the following WP Rocket features:

• Text compression and caching – both features are automatically activated right upon activation of the plugin. You don’t need to do anything. 

You can also set your own options from the advanced cache tab in the WordPress admin:

Want to learn more about page caching on WooCommerce? Read our 7 tips to learn how to implement caching on a WooCommerce site

• CSS code optimization – from the file optimization tab, we selected the optimize CSS delivery button (using the handy remove unused CSS option). We also minified and combined the CSS code to help the browser download and process these files faster.

• JavaScript code optimization – from the files optimization tab, there are also some options to optimize the JavaScript of your WordPress site. In our case, we minified JS files, loaded JS deferred, and delayed the JS execution: 

• Lazyload – to defer offscreen images (and prioritize the loading of the images located in the viewport):

What’s the Best WooCommerce Themes For You?

While we can’t advise you on a specific theme as it highly relies on your design and technical specifications, here are a few pieces of advice: 

• If you need a simple online store with the WooCommerce look and feel by default, without any advanced design or options, then go with Storefront. 
• If you are a freelancer looking for a theme with many demos that you can show to your clients for different industries, then Divi, BeTheme, and the7 may be your best options. 
• If you are an Elementor’s fervent user, then Astra and The7 may be your best bet. 
• If you want to use the WPBakery Page Builder, the 7 theme is the way to go. 
• If you plan to upload thousands of products, a lightweight theme like Astra or OceanWP may be wiser. They both come with advanced WooCommerce features so you can create your own store in minutes. 
• If you need to create your own single product layouts and shop pages and add dynamic data to your website, then take a theme that works well with any other WooCommerce builders.
• If you want to get your theme from Themeforest, then pick Avada, which has been #1 on Themeforest for years. 
• If you are hesitating between two themes, check their demos and remember to look at them on several devices. Many sales happened on mobile!

Finally, our last recommendation would be to choose a theme that is safe with recent updates, fast support, accurate documentation, and in-depth tutorials. You can also check some popular YouTubers that review all those themes and record their screen while they build an online store from scratch. 

Wrapping Up

Now, you should be able to choose the right WooCommerce theme for your next project! 

 In any case, no matter which theme you pick, WP Rocket is the easiest way to improve your WordPress site’s speed, optimize Core Web Vitals, and fix the performance audits on PageSpeed Insights. Plus, you don’t take any risks with the 30-day money-back guarantee. 

The post The 7 Fastest WoooCommerce Themes (2023) appeared first on WP Rocket.

Are you interested in GeneratePress and Astra for your next web project? It makes sense to consider them because they are both lightweight WordPress themes that put performance at the top of their priorities.  

In this article, we’ll look at the performance of GeneratePress and Astra and collect comparison data from a real-case scenario. We’ll also share some techniques for boosting performance and reviewing their main features to help you choose between them.

Which theme is faster: GeneratePress or Astra? You are about to figure it out!

How We’re Testing GeneratePress vs. Astra Performance (Full-Mobile Approach)

To measure the performance of GeneratePress and Astra, we are taking a full-mobile approach with servers located in France. 

Performance Tools and KPIs

Themes: We are comparing the two free versions of the GeneratePress and Astra themes. Although they both offer premium add-ons, we haven’t installed them for this audit. 

Tools and metrics:

• GTmetrix (Page size, fully loaded time, and the number of HTTP requests on mobile – from an iPhone 12 in Paris)
• Google PageSpeed Insights (For the Core Web Vitals: Largest Contentful Paint and the other key performance metrics: Cumulative Layout Shift – Speed Index, Total Blocking Time, and First Contentful Paint)

The Test Sites

To keep things as fair as possible, we built our test sites with the WordPress Editor blocks, and then we simply swapped the themes. We have designed the following modules:

• A hero header with a background image 
• Text and images boxes 
• Icons
• Images gallery (we use the same images for both)

Disclaimer: Our tests have been conducted on a server based in France, and the results we present are from our own experience. They may differ from yours according to your technical setup and the content you add to your site.

GeneratePress vs. Astra Performance Compared

Now let’s compare our two sites using PageSpeed Insights and GTmetrix. Let’s get to the data!

Must read: Check our full guide about how to test your WordPress site performance.

For reference, this is how both our testing sites look like: 

Our page with GeneratePress (same modules)	Our page with Astra (same modules)

Let’s start with the first metric, the mobile performance grade: they are quite similar for both themes. We are getting an orange grade on Google PageSpeed Insights with 81/100 for Astra and 82/100 for GeneratePress.

Astra vs. GeneratePress Summary Performance

Here is a summary table with all the performance KPIs we got for both themes. It should help you to visually compare both themes:

KPIs (mobile performance)	GeneratePress	Astra
PageSpeed mobile score	82/100	81/100
Total Loading time	3,1 s	2.9 s
First Contentful Paint	1.5 s	2.8 s
Largest Contentful Paint*	3.3 s	4.1 s
Cumulative Layout Shift*	0.521 s	0 s
Speed Index	5 s	3.5 s
Total Blocking Time	30 ms	0 ms
Total page size	953 KB	788 KB
HTTP requests	20	21

*Core Web Vitals

Is Astra Faster than GeneratePress? – Key Answers 

• Both themes are very similar in performance as they got 81/100 (Astra) and 82/100 (GeneratePress) on mobile. 
• Astra and GeneratePress have almost the same full loading time of around 3 seconds. 

• About the Core Web Vitals: 
  • Cumulative Layout Shift: Astra is performing better than GeneratePress and avoids the sudden shifts in layouts (with a CLS of 0 s, compared to GeneratePress, which is in the red with a score of 0.521).  
  • Largest Contentful Paint: GeneratePress’s Largest Contentful Paint (LCP) is 3.3 seconds against 4.1 s for Astra (which puts this Core Web Vital in the red.
• The number of HTTP requests is similar (20 and 21), but the Astra page size is lighter: 788 KB (against 953 KB for GeneratePress).

To go deeper into the performance audit, let’s have a look at the Lighthouse diagnosis and opportunities sections below.

PageSpeed Insights Opportunities Section for GeneratePress

GeneratePress’s performance is satisfactory, but there is room for improvement in the following areas:

• Enable text compression – By compressing your content, you ensure that your pages will be served to visitors more quickly.
• Reduce initial server response time – Meaning that we should try to delay JS to have a faster server response. The main solutions are to clean the database, use clean code and implement caching. 
• Reduce unused CSS – Trimming your code by reducing the unused CSS will positively affect the page’s loading time.
• Serve images in the next-gen format – Lighthouse recommends serving images in WebP or AVIF to offer better compression when using images online.
• Serve static assets with an efficient cache policy – It’s all about using an efficient cache plugin.

PageSpeed Insights Opportunities and Diagnostics Section for Astra

Overall, we found out that a lack of caching and poorly optimized images are the main culprits for the red flags below. Here are the improvements we need to implement for our Astra’s test site:

Hint: Most of the performance issues mentioned above can be fixed with WP Rocket and an image optimizer plugin like Imagify, which are very easy to use as they do all the heavy lifting for you. We introduce them in the next section.

Now that we know where we stand in terms of performance for both themes, let’s follow the PageSpeed Insights recommendations and take advantage of WP Rocket (and Imagify) to fix all these performance issues easily.

How to Speed Up Astra And GeneratePress 

To speed up Astra and GeneratePress, the first Lighthouse recommendation is to use a caching plugin like WP Rocket. It reduces the server response time by caching the content, optimizing the code and the database, and implementing text compression. 

WP Rocket is one of the best caching plugins that improve performance and help pass the audit on GTmetrix and PageSpeed Insights. It’s a performance tool recommended by GTmetrix.

Pro Tip: If you are using WP Rocket and run a report on PageSpeed Insights, you’ll see that Lighthouse recognizes the plugin. PageSpeed Insights tells you which features of WP Rocket you should enable to fix each performance issue. Very handy!

Regarding image optimization, Lighthouse suggests enabling Imagify to efficiently encode the images and ensure performance. Imagify is an easy-to-use image optimizer plugin that compresses images and converts them to WebP. 

Alright, it’s time to look at how both themes are now performing after addressing all the issues. 

Improved Performance Results Thanks to WP Rocket (and Imagify)

WP Rocket and Imagify have significantly improved the score on Lighthouse for both themes. We are now scoring 100/100 for GeneratePress and Astra: 

GeneratePress + WP Rocket + Imagify (PSI)	Astra + WP Rocket + Imagify (PSI)

Thanks to WP Rocket and Imagify, we are now passing the PageSpeed Insights audit! We fixed all the issues flagged in the opportunities and diagnostics sections of GeneratePress. 

GeneratePress’s issues flagged by Lighthouse	WP Rocket and Imagify fixed them all!

The same improvements and fixes happened for Astra: 

Astra’s issues flagged by Lighthouse	WP Rocket and Imagify fixed them all!

To summarize, we put together a global comparison table showing both themes’ performance with and without WP Rocket + Imagify (the image optimizer):

Performance KPIs	GeneratePress Performance (no WP Rocket)	GeneratePress Performance with WP Rocket + Imagify	Astra Performance (no WP Rocket)	Astra Performance with WP Rocket + Imagify
PageSpeed mobile score	82/100	100/100	81/100	100/100
Total Loading time	3,1 s	2.1 s	2.9 s	2.2 s
First Contentful Paint	1.5 s	0.5 s	2.8 s	0.4 s
Largest Contentful Paint*	3.3 s	0.7 s	4.1 s	0.6 s
Cumulative Layout Shift*	0.521 s	0 s	0 s	0 s
Speed Index	5 s	0.6s	3.5 s	0.7 s
Total Blocking Time	30 ms	0 ms	0 ms	0 ms
Total page size	953 KB	547 KB	788 KB	588 KB
HTTP requests	20	15	21	16

*Core Web Vitals

Key Conclusions with WP Rocket

Thanks to WP Rocket, we have noticed major performance improvements for both themes, such as:

• The mobile performance grade on PageSpeed Insights moved up to 100/100 for both. 
• WP Rocket improved our Core Web Vitals score, and they all moved to the green.
  • The Largest Contentful Paint (LCP) went from 3.3 s to 0.7 s for GeneratePress and from 4.1 s to 0.6 for Astra.  
  • The Content Layout Shifts (CLS) went from 0.524 to 0 for Generatepress.
• We saved around 1 s in the page loading time for both.
• The number of HTTP requests has also decreased for both themes: from 21 to 16 for Astra and from 20 to 15 for GeneratePress.
• The Speed Index is now 0.6 s for GeneratePress (it was 5 s and was in the red). 
• The page size is much smaller for both themes. It went from almost 788 KB down to 588 KB for Astra and from 957 KB down to 547 KB for GeneratePress.
• All the issues flagged in PageSpeed insights issues are now in the passed audit. 

Key Conclusions with Imagify

• Imagify compressed our images in a couple of clicks which makes it very easy to use. 
• All our images got compressed and converted to WebP (the next-gen format recommended by Google).
• Imagify helped solve the “serve image to the next-gen format” and the “efficiently code images” issues from PageSpeed.

Below are the two buttons we pressed to optimize our images: 

• WebP conversion to make images lighter.

• Smart bulk image compression – The compression of all your images automatically works in the background and does the job for you.

With WP Rocket – no matter the theme you pick – you increase your chances of passing the PageSpeed Insights audits.Â

Let’s discover all the WP Rocket’s features that helped to give an extra speed boost to both page builders: 

• Caching and GZIP and text compression – WP Rocket automatically applies with caching and GZIP compression upon its activation.

• Minify CSS, Combine CSS, and Remove Unused CSS – To optimize the CSS delivery.

• Similarly, there are also some options to minify, defer and delay JavaScript.

Go further on your performance optimization journey and implement more WordPress page speed optimization best practices.

Our performance audit is now completed. Let’s look at each theme’s main features to help you decide which theme is the right choice for your needs.

GeneratePress vs. Astra: Key Features and Pricing

Astra and GeneratePress have the same approach: their free version is a basic framework that allows you to build anything on top of it without impacting performance. 

• Popular lightweight themes – Both Astra and GeneratePress are popular lightweight themes that are a great foundation for having a fast-loading site. A fresh GeneratePress install adds less than 10kb (gzipped) to your page size, and Astra only adds 50KB on the front end. Astra is used on over 1 million sites, and GeneratePress recently passed 500 000 installations. 

Use of the Customizer to customize the theme – They rely on the WordPress Customizer to tweak the options and make the changes visually.

GeneratePress + Native WordPress Customizer	Astra + Native WordPress Customizer

• Starters site library  – They both have intuitive interfaces that are very easy to use. All you need to do is select and import the template you want to use on your WordPress site. You don’t need to be an advanced developer to use both tools, and the templates are very well-designed. 

How to Use the Library For Astra:

• Install the free “Starter Templates” plugin.
• Choose the template of your choice, you can sort by category and add a “premium” filter.
• The import will start automatically..

How to Use the Library For GeneratePress:

• You need to have GP Premium and the site library module activated.
• Go to Appearance > GeneratePress > Site Library.
• Choose your layout to start the import.

GeneratePress Sites Library	Astra Sites Library

• Compatibility with page builders – GeneratePress and Astra are compatible with the most popular page builders, and both offer pre-made templates built on Elementor, Beaver Builder, and the WordPress Editor. 

Page builder-ready GeneratePress templates (Example: Elementor + GeneratePress)	Page builder-ready Astra templates (Example: Elementor + Astra)

• Premium add-ons – Both themes are freemium, meaning that if you want to unlock some advanced features, templates, and integrations, you’ll need to purchase a premium add-on.

What’s In GeneratePress Premium?	What’s In Astra Pro?

• WooCommerce compatibility – both themes are compatible with WooCommerce, and they offer some dedicated features. They both have ready-to-use templates built with WooCommerce to build an online store on solid foundations. 

Dedicated WooCommerce-based demos GeneratePress (extract)	DedicatedWooCommerce-based demos Astra (extract)

• International community – both have a great community worldwide with interesting Facebook groups (10K for GeneratePress and 54K for Astra). However, you are more likely to meet Astra’s team (led by Sujay Payar) at WordCamp as they seem to be more involved in the WordPress community. 

GeneratePress vs. Astra: The Main Differences

• The Customizer is less detailed for GeneratePress – which makes sense for its lightweight, bloat-free approach – but it’s less beginner-friendly than Astra’s, where the customization seems easier. For example, if we need to modify the footer, there is a visual representation of the layout:

• The template library is richer for Astra – Astra comes with many pre-made blocks that can be used, such as header, testimonials, pricing tables, and call-to-action. GeneratePress has a library with pre-built pages, but the blocks are not as impressive from a design perspective. Astra provides more premade headers, so it’s a good idea if you are a beginner or don’t want to start from scratch. 
• White labeling (Astra only) – Astra Pro gives you the option to do white-label which is interesting if you are planning to hand over the site to a client and add your customizations.

• GeneratePress more closely follows the theory of “less is more” and does offer a more minimalistic theme than Astra: everything is integrated into the WordPress interface, and when it comes to activating the advanced options, everything is very straightforward. 
• Astra has more tight integrations with popular plugins like Learndash or LifterLMS that allow you, for example, to launch a complete online course in a few clicks. 

GeneratePress vs. Astra Pricing 

GeneratePress offers two prices with access to the same features. Either you pay $59/year, or you get the lifetime license for $249.  In both cases, you’ll have the premium features, the library, updates, and support. The only limit is using GeneratePress on up to 500 websites.

Astra also offers lifetime and yearly pricing. It starts at $47, but you’ll need the “Essential Bundle” at $137 to access the library. The best value is the “Growth Bundle” because it gives you access to many blocks and SEO add-ons as well as advanced training. 

Wrapping Up

When it comes to speed, the two themes got similar results, the mobile loading time was about the same, and so was the page loading time. The ultimate choice will depend on your needs and how much you need a theme integrated with the rest of the WordPress ecosystem. 

In any case, you can build an advanced site and supercharge it with powerful premium features from both themes. 

If you come across some performance issues during your development process, then you can use WP Rocket and Imagify to tackle them. 

WP Rocket is recommended by GTmetrix to reduce the server response time, for example. 

So, which theme are you going for? Are you currently using a theme that slows down your site? Remember that WP Rocket and Imagify have significantly increased performance and made us score 100/100 on PageSpeed Insights. Use WP Rocket to improve the speed of your WordPress site, and you can also try Imagify for free. You don’t take any risks because if you don’t see any improvements, we provide a refund within 14 days of your purchase. 

The post Astra vs GeneratePress 2023: Performance & Features appeared first on WP Rocket.

Are you hesitating between Beaver Builder and Elementor for your next WordPress project? Page builders are efficient tools that help design beautiful websites faster than ever. However, you want to make sure that you are opting for a builder that offers clean code, an intuitive interface, and that provides regular updates. You also need a tool that does not slow down your WordPress site because website speed is essential for the user experience and SEO. 

In this article, we’ll look at the performance of Beaver Builder and Elementor to help you decide which one fits your next project. We’ll also share some activable tips about boosting performance and review the main features to help you choose the best solution for your needs.

Which page builder is faster: Beaver Builder or Elementor? Let’s find out!

How We’re Testing Beaver Builder vs. Elementor Speed (Full-Mobile Approach)

To measure the performance of Beaver Builder and Elementor, we are taking a full-mobile approach with servers based in Paris. Beaver Builder and Elementor offer both a theme. We are using them respectively on each test site. 

WordPress Versions, Tools, and KPIs

Themes we are using: Beaver Builder theme / Hello Elementor theme 

Plugins we are using:  Beaver Builder Page Builder and the Beaver Themer add-on  / Elementor Pro 

Why is there another plugin installed on my Beaver Builder site? To be fair towards Elementor and compare similar features, I’ve installed another add-on on my Beaver Builder test site called Beaver Themer add-on. I’ll get more design flexibility and control over parts of my site (header, footer, custom templates, dynamic content, post grids, etc.). Those features are also included in Elementor Pro.

Performance tools and KPIs:

• Google PageSpeed Insights (Core Web Vitals: Largest Contentful Paint and Cumulative Layout Shift – Speed Index, Total Blocking Time and First Contentful Paint)

• GTmetrix (Fully loaded time, page size, and the number of HTTP requests on mobile – from an iPhone X in Paris)

The Test Sites

To keep things as equal as possible, we have built our test sites with modules available in both Beaver Builder and Elementor:

• A hero header with a 487 KB image (png format)
• A button with a link
• 3 services using icon boxes  (text and icons)
• A number counter 
• 1 FAQ with 3 toggles and some content 
• A pricing table (two plans available)

Important: Our tests have been conducted on a server based in France, and we built each page from scratch. The results we present are from our own experience, and they may differ from yours according to your whole technical setup and content.

Beaver Builder vs. Elementor Performance Compared

It’s time to compare our two test sites using PageSpeed Insights and GTmetrix. Let’s get to the data!

Interesting reads: Our detailed guide about testing WordPress site performance to learn more about how to audit your WordPress site.

This is how both our testing sites look like: 

Our page with Beaver Builder (same modules)	Our page with Elementor (same modules)

On Google PageSpeed Insights, the first finding is that the mobile performance is orange for both, with an advantage for Elementor (83/100) over Beaver Builder (68/100). 

Elementor vs. Beaver Builder Summary Performance

We put together a summary table with all the performance KPIs so you can visually compare both builders: 

KPIs (Mobile performance)	Beaver Builder	Elementor
PageSpeed mobile score	68/100	83/100
Total Loading time	4.2 s	3.8 s
First Contentful Paint	2.5 s	4.8 s
Largest Contentful Paint*	7.1 s	3.3 s
Cumulative Layout Shift*	0 s	0.026 s
Speed Index	6 s	4.7 s
Total Blocking Time	30 ms	30 ms
Total page size	0.98 MB	0.96 MB
HTTP requests	17	39

*Core Web Vitals

Is Elementor Faster than Beaver Builder? – Key Takeaways  

• Elementor’s full loading time is 3.8 seconds, slightly faster than Beaver Builder, which loaded in 4.2 seconds. Both builders are not too far away from each other regarding speed.

• Core Web Vitals: Elementor is performing better than Beaver Builder. Beaver Builder’s Largest Contentful Paint (LCP) is 7.1 seconds against 3.3 s for Elementor. The Content Layout Shift (CLS) is in green for both. 
• Beaver Builder has a better First Contentful Paint score (2.5 s – it’s 4.8 s for Elementor)
• Their page size is similar, but Beaver Builder triggers fewer HTTP requests than Elementor (17 against 39).  

To go further in the performance analysis, we are sharing the diagnosis and opportunities section from Lighthouse below.

PageSpeed Insights Opportunities Section for Beaver Builder

• Eliminate render-blocking resources – some resources are blocking the first paint of our page, making the page load slow. We should load critical JavaScript and CSS inline immediately and defer/delay all non-critical JS and CSS. 
• Enable caching for static assets text compression – we should cache our content to improve the page speed loading time and offer a better user experience.
• Enable text compression –  we should enable GZIP compression to compress HTML, CSS, and JS files to get smaller and faster files to serve on the visitor’s browser.
• Reduce initial server response time – we should try to eliminate or delay JS to let the server answer faster. 

PageSpeed Insights Opportunities Section for Elementor

Below are all the improvements we need to do for the test site built with Elementor. We found out that a lack of caching, text compression, and a poorly optimized code are responsible for the red flags below: 

Important: Most of the performance issues mentioned above can be fixed with WP Rocket, which we introduce as a solution in the next section.

Now that we have tested both builders’ performance and got the PageSpeed Insights recommendations, it’s time to take advantage of WP Rocket to fix all these performance issues easily!

How to Speed Up Elementor And Beaver Builder 

To speed up Elementor and Beaver Builder, Lighthouse recommends using a caching plugin like WP Rocket. The goal is to reduce the server response time, for example, or even optimize your code. WP Rocket is one of the best caching plugins that helps improve performance and pass the audit on GTmetrix and PageSpeed Insights. 

Important: If you run your report on PageSpeed Insights with WP Rocket activated, PageSpeed Insights automatically detects it. Then, it tells you which features of WP Rocket you should enable to fix the performance issues.

PageSpeed also suggests enabling the “Remove Unused CSS” and “Load JS deferred” features in the WP Rocket dashboard to eliminate render-blocking issues. 

We activated WP Rocket’s options. It’s now time to look at how both page builders perform.

Improved Performance Results With WP Rocket 

WP Rocket improved the score on Lighthouse for both Beaver Builder and Elementor. We finally got a green score mobile and went from 68/100 to 100/100 for Beaver Builder and from 83/100 to 99/100 for Elementor.

Beaver Builder + WP Rocket (PSI)	Elementor + WP Rocket (PSI)

Thanks to WP Rocket, we passed the PageSpeed Insights audit! We fixed all the issues flagged in the opportunities and diagnostics sections for Beaver Builder. The same improvements and fixes happened for Elementor.

Beaver Builder’s issues flagged by Lighthouse	WP Rocket fixed them all!

Here’s a comparison table showing both builders’ performance with and without WP Rocket activated: 

Performance KPIs	Beaver Builder Builder Performance (no WP Rocket)	Beaver Builder Performance with WP Rocket	Elementor Performance (no WP Rocket)	Elementor Performance with WP Rocket
PageSpeed mobile score	68/100	100/100	83/100	99/100
Total Loading time	4.2 s	2 s	3.8 s	1.8 s
First Contentful Paint	2.5 s	1.1 s	4.8 s	1 s
Largest Contentful Paint*	7.1 s	1.1 s	3.3 s	2.2 s
Cumulative Layout Shift*	0 s	0 s	0.026 s	0 s
Speed Index	6 s	1.1 s	4.7 s	1 s
Total Blocking Time	30 ms	20 ms	30 ms	10 ms
Total page size	0.98 MB	179 KB	0.96 MB	252 KB
HTTP requests	17	13	39	11

*Core Web Vitals

Key Conclusions With WP Rocket

We have noticed major performance improvements for both builders, namely: 

• The mobile performance grade on PageSpeed Insights moved up to 99/100 for Elementor.  We hit a 100/100 for Beaver Builder.
• All Core Web Vitals moved to the green. The Largest Contentful Paint (LCP) went from 7.1 s to 1.1 s  for Beaver Builder, which is quite impressive. 
• The fully loaded time metric has decreased for both (it went from 4.9 s to 2 s for Beaver Builder and 3.8 s to 1.8 s for Elementor). 
• The number of HTTP requests has also decreased for both builders: from 39 to 11 for Elementor.
• The total blocking time (TBT) has decreased for both.
• The Speed Index is now 1.1 s for Beaver Builder (against 6 s without WP Rocket).
• The page size is much smaller for both page builders. It went from almost 1 MB down to 252 KB for Elementor and from 1 MB down to 343 KB for Beaver Builder.
• All the issues flagged in PageSpeed insights issues are now in the passed audit (green section), thanks to WP Rocket.

With WP Rocket – no matter the page builder you choose – you increase your chances of passing crucial and complex audits on the Google PageSpeed Insights report.

Did you know? WP Rocket automatically applies 80% of web performance best practices to guarantee blazing-fast websites. Let’s discover all the WP Rocket’s features that helped to give an extra speed boost to both page builders: 

• Caching and GZIP (text) compression – WP Rocket automatically applies caching and GZIP compression as soon as you activate it. On top, you can take care of caching for mobile devices and change a few more settings, including the cache lifespan (the time after wich the global cache is cleared).

• Minify CSS, Combine CSS, and Remove Unused CSS — all the features you need to optimize CSS files.

• We also have activated the options to minify, defer and delay JavaScript — all the features you need to tackle JavaScript.

You can go further with optimizing your site by implementing more WordPress page speed optimization best practices.

Our performance audit is now done. Let’s look at each builder’s main features and pricing to help you choose the right tools for your next project. 

Beaver Builder vs. Elementor: Key Features and Pricing

Both Elementor and Beaver Builder are intuitive and powerful visual drag-and-drop page builders for WordPress. We put together a list of similar features, and you’ll see that they have quite a lot in common. 

Common Key Features For Elementor and Beaver Builder

• Powerful front-end page builder based on the “what you see is what you get” principle  (WYSIWYG) – they have intuitive and ergonomic interfaces that are very easy to use. You don’t need to be an advanced developer or web designer to use both tools.

Beaver Builder Global  Interface	Elementor Global Interface

• Ability to design advanced custom layouts for your WordPress posts, pages, and custom post types.
• Easy customizable modules/widgets – the whole design process is straightforward for both builders, thanks to the “advanced design” tab.

Beaver Builder Styling	Elementor Styling

• WooCommerce builders – both builders allow you to create single product templates and customize your WooCommerce shop page. We personally find Elementor WooCommerce builder easier to use and customize.  

Beaver Builder Woo Builder	Elementor Woo Builder

• Full theme editing/building features – you can design everything around the page’s content, such as custom headers, footers, and other parts of your website. You get full control of everything. 

Header builder (Beaver Builder)	Header builder (Elementor)

• Global modules – you can easily create your own library of reusable content for your website. That’s time-saving because you can reuse your work indefinitely. 
• Dedicated themes and add-ons – Beaver Builder comes with its own theme that offers a lot of customization. Elementor has the lightweight Hello theme that is more of a simple canvas to get you started. The most popular WordPress theme houses (and the best-sellers on Themeforest) have some dedicated designs and themes built with Beaver Builder and Elementor (Astra, OceanWP, etc.). If you need to extend the features of both builders, you’ll find hundreds of interesting add-ons for Beaver Builder and Elementor.
• Extensive international community – both have a great community worldwide with interesting Facebook groups (70K for Beaver Builder and 140K for Elementor). You can also come across both teams at different WordCamps.

Beaver Builder vs. Elementor: The Main Differences

• The block and template library is richer for Elementor – Elementor comes with many pre-made blocks that can be used, such as header, testimonials, pricing tables, and call-to-action. Beaver Builder has a library with pre-built pages, but the blocks are not as impressive from a design perspective. Elementor provides more premade headers, so it’s a good idea if you are a beginner or don’t want to start from scratch. 

Beaver Builder Library (pre-made pages)	Elementor Library pre-made(blocks and pages)

• A/B testing (Beaver Builder only) – The split testing is only available for Beaver Builder thanks to the module called “Beaver Builder Lead”.
• White labeling (Beaver Builder only) – Elementor does not offer this feature, and you’ll need a third-party plugin if you want to go ahead with white labeling. On the contrary, Beaver Builder gives you the option to do it. 

• The loop/query builder (Elementor only) – This allows you to build advanced queries and loop custom post types.

• Conditional logic: Beaver Builder is better than Elementor on that, and everything is controllable from the settings panel: 

Beaver Builder vs. Elementor Pricing 

If you buy the whole Beaver Builder suite, you’ll have access to a theme, a page builder, a theme builder, a WooCommerce builder and a templates library from $199/year. You must go with the agency package if you want the white-label option. Something great with Beaver Builder is that you can use their product on an unlimited number of sites, even if you subscribe to the cheaper package.

For Elementor, the pricing starts at $59 for 1 single site. To have the same features as Beaver Builder (which offers unlimited sites), you’ll need the agency plan, which costs $399/year.

Wrapping Up

When it comes to performance, the two-page builders balance each other out. The loading time was about the same. The number of HTTP requests was higher for Elementor, but the Largest Contentful Paint was much better than Beaver Builder. The final choice will depend on your needs and if the white label option is important for you when you hand over the site to clients. 

WP Rocket is recognized by Lighthouse as a powerful plugin to reduce your server response time, for example. GTmetrix recommends the plugin, and PageSpeed Insights detects that you are using WP Rocket on your site and gives you recommendations based on the functionalities available in the WP Rocket admin.

GTmetrix recommends WP Rocket	PageSpeed Insights gives tailored advice according to WP Rocket’s available features.

So, which page builder are you going for? Are you experiencing any performance issues? Remember that WP Rocket has significantly increased performance and the PageSpeed Insights scores for both Beaver Builder and Elementor (we went up to 99/100 and 100/100). Try WP Rocket to improve the speed of your WordPress site built with a page builder today! You don’t take any risks. If you don’t see any improvements, we provide a refund if you request it within 14 days of your purchase. 

The post Beaver Builder vs. Elementor Performance 2023: Which WordPress Page Builder Is Faster? appeared first on WP Rocket.

This is a guest post. Opinions and recommendations are the author’s own.

WordPress is a popular content management system that helps businesses create and manage their websites. However, one of the drawbacks of WordPress is that it can be slow and clunky when paired with multiple plugins, and themes that haven’t integrated the latest technologies. This is where React (also known as React.js or ReactJS) comes in. 

React is one of the most popular JavaScript (programming language) libraries that helps make web pages more responsive and fast. Many web applications for WordPress, such as Visual Composer, are built with React due to its advantages. 

In this blog post, we will discuss the benefits of using a React-based website builder to achieve better WordPress performance alone and with the help of the WP Rocket web performance optimization plugin. 

The Downside of Using WordPress Alone

First off, let’s look at some of the reasons why you should consider using WordPress products that use React-based technology.

As we know, WordPress (.org) is one of the most popular open-source content management systems on the web. More interestingly, WordPress already uses React at its core – for the Gutenberg Editor and full site editing. Although WordPress is a popular and widely-used content management system, it is not without its drawbacks. Some developers and businesses may be looking for ways to minimize the time and effort required to build and maintain a WordPress website. 

By using WordPress alone, you might run into performance problems, security breaches, and other issues, that are commonly caused by:

• Using too many third-party plugins – plugins demand to be updated regularly to maintain optimal security, but with each update, there’s always chance to run into issues which can compromise your site’s functionality. Plus, different plugins might not be compatible, which might cause you to run into even bigger issues, and using too many plugins is just never a good idea
• Using themes that don’t comply with WordPress coding standards – with thousands of WordPress themes on the market, you can never be sure if you’re choosing one that won’t make you page speed suffer and cause slow loading times

One way to assure you don’t run into the issues mentioned above, is by incorporating a React JS website builder into your WordPress site, which can help make your pages more responsive, safe and fast, by eliminating the need of countless plugins and themes.

ReactJS With WordPress (Benefits Of Using Both)

React can improve the performance of a website by speeding up the loading time of your code. This is particularly important for conversion rates. Research shows that for each additional second a site takes to load, the chances of conversion drop by 29% – 40%. For the highest conversion rates, you should aim for a loading time of no longer than 2 seconds.

React works by rendering components as they are needed. You could even say that React was created specifically to resolve the problems of traditional web development, as it makes it easier to maintain code (by splitting it into reusable components) and speed up DOM (stands for Document Object Model) re-renders. Plus, the virtual DOM that React uses, is designed with enhanced performance.

Before we dive into React, it’s important to know that it is commonly used with REST API (also known as RESTful API), to fetch data from a server. Basically, it ensures sharing of the data between two or more systems, via HTTP requests, which is fundamental for website and software development. 

The WordPress REST API is becoming more commonly used to separate content from the front end, which allows developers to use WordPress as a headless CMS (Content Management System).

React JS with WordPress is most commonly used for developing the user interface for modern web applications. In other cases, as we mentioned, it’s used for creating a headless WordPress site, which mainly uses WordPress for managing content, and another technology, such as React, to build the front end (interface) of the website and display its content.

In addition, React in WordPress is commonly used in various third-party plugins and themes. This makes it easy to incorporate other necessary features into your site while still maintaining good performance.

For those purposes mentioned above, some of the most popular React frameworks, commonly used in conjunction with WordPress projects, are: Next.js, Frontity, Gatsby.js, and Create React App (CRA). 

Benefits Of Using A React-Based Website Builder 

Before we dive into the benefits, it’s worth noting that there is no single answer to whether a website built with React will be faster than one built without React. Factors such as the complexity of the website, the number of pages, and the browser the website is being viewed on can all play a role in how fast the website is. So, it’s always a good idea to test the performance of a website and make any necessary optimizations.

However, React-based website builders have some distinct advantages that can improve the performance of a WordPress website. Some of the key benefits could potentially include improved website speed and performance, enhanced user experience, and more reliable security through efficient updating and rendering of components, reusable code, and built-in security features such as input validation and sanitization.

Compared to traditional WordPress builders, React-based website builders offer faster load times and enhanced performance, allowing you to deliver a better user experience to your visitors. 

Additionally, they are more efficient at handling large volumes of traffic and data thanks to their scalable design. 

Furthermore, using a React-based builder can help ensure the security of your website, as these tools are built with modern technologies that are up-to-date and help protect against online threats.

So, let’s dive deeper into each benefit of using a React website builder and how it works, to help you achieve better results. For this example will be using the Visual Composer website builder.

1. Improved Performance and Page Speed

The very first thing to point out about the use of the latest technologies in Visual Composer is it is a no-shortcode, full website builder, meaning it allows you to build a full site with, more or less a single, low-code, drag and drop tool.

This includes pages, posts, custom website elements (using API), and to some degree even your own theme by using the Layout Builder and Font Manager combo. How this works, is that you can use a minimalistic theme for the base of your website, that doesn’t bloat your site with unnecessary code, and simply override the theme’s default design with your own. 

The next thing that helps with performance is the Visual Composer Hub – a cloud library that offers hundreds of website elements, temples, addons, and free stock images. The highlight is, that you have everything you need for a website within the Hub, plus you can download only the assets you need – keeping your pages lightweight and fast. 

Having all the necessary components you need to build an online store, a portfolio, or a personal website within a single tool means you won’t need to download as many additional third-party plugins. This ties together with what we mentioned before – more plugins, more problems.

2. Better SEO, Responsiveness, and Accessibility

Next up we have search engine optimization (SEO) benefits that come with a modern website builder. How performance ties in with SEO is simple – page load speed is one of the key determining factors for Google’s algorithm, which will either make your website rank or tank. And, while WordPress itself is an ​​SEO friendly CMS, you might always need additional help.

In addition to SEO, Visual Composer also helps improve the accessibility of your website. This means that your site is not only accessible to all visitors but also has optimal color contrast, visibility, and readability. This is important for the UX, because what is the benefit of a fast-loading website if it’s not accessible to all visitors?

This is where Insights comes in. It’s a built-in WordPress content analysis tool, that analyses your pages, and rates them based on Web Accessibility Standards and best SEO practices on the go. That way you can improve your page load time by adjusting them based on smart scenarios Insights provides, such as adding missing meta descriptions, optimizing image sizes, and so on.

The last thing that’s just as important as speed for user experience, is having a responsive website on all devices. For example, the latest studies show that mobile internet usage has increased by almost 25% in the last 5 years. Luckily, modern builders, such as Visual Composer adjust the responsiveness automatically, and also offer custom responsiveness options for all elements on your website.

In addition to image optimization, you should use lazy loading for media on your website. All images in Visual Composer are optimized by using the WordPress native lazy load. This means that media is loaded only when a user actually lands on the image. For example, if all your imagery is on the bottom of the page, the lazy load won’t load it unless the user actually scrolls down – ensuring a faster loading time of the page overall.

3. Increased Security

In general, WordPress sites are more vulnerable to security threats than other websites. React makes it more difficult for attackers to hack your site because they would need to bypass your security features in order to try and hack it. Plus, React.js is much more secure and has fewer points of attack than other frameworks.

One way Visual Composer helps with securing your sites against potential threats is by allowing you to set up user roles for different users that have access to your website. This allows you to ensure, no changes by clients, designers, content writers, etc., are made without your permission.

Furthermore, always having an automated backup of your WordPress site ensures you won’t lose your data in case of a breach. While Visual Composer doesn’t offer automated backups itself, it’s compatible with all of the top-most WordPress popular backup plugins like BlogVault, and hosting providers. For example, Cloudways is one of the securest cloud-hosting providers that allows you to set up automatic backups as often as you like. 

So if you’re looking for ways to speed up your WordPress site, consider incorporating a ReactJS website builder into your existing setup, as well as using tools like WP Rocket, a WordPress caching plugin, to further enhance your site’s speed and performance.

Testing Website Performance With Visual Composer and WP Rocket: 2 Examples

In this part, we’ll be testing and analyzing the performance results of the following websites using GTMetrix – one of the alternatives to PageSpeed Insights when it comes to measuring the performance of your site.

About GTmetrix

The reason why the different performance tools (GTmetrix, PageSpeed Insights, Pingdom) results differ is that they use different testing methodologies, parameters, and configurations, such as location, browser, device, etc.

In this case, The GTmetrix Performance Score is a measure of how well a website performs based on its measurements taken using Google Lighthouse.

To get a good GTmetrix score for your WordPress websites, or any site for that matter, you have to make sure that your indicators are in the following thresholds:

Metric – Weight	Goog, nothing to do here	OK, but consider improvement	Longer than recommended	Much longer than recommended
First Contentful Paint – 10%	0 – 0.934 s	0.934 – 1.205 s	1.205 – 1.6 s	> 1.6 s
Speed Index  – 10%	0 – 1.311 s	1.311 – 1.711 s	1.711 – 2.3 s	> 2.3 s
Largest Contentful Paint  – 25%	0 – 1.2 s	1.2 – 1.666 s	1.666 – 2.4 s	> 2.4 s
Time to Interactive – 10%	0 – 2.468 s	2.468 – 3.280 s	3.280 – 4.5 s	> 4.5 s
Total Blocking Time – 30%	0 – 1.5 s	1.5 – 2.24 s	2.24 – 3.5 s	> 3.5 s
Cumulative Layout Shift (calculated in using detected shifts in the browser) – 15%	0 – 0.1	0.1 – 0.15	0.15 – 0.25	> 0.25

Testing React-based Website Builder Performance (With a Caching Plugin)

In this paragraph, we will examine how the combination of a website builder and caching plugin can enhance the performance of WordPress sites. Specifically, we will focus on the results of using Visual Composer and WP Rocket to illustrate how these tools can provide an extra performance boost.

We selected two B2C websites as examples, tested on April 17th of 2023, from Vancouver, Canada, using Chrome (Desktop) 103.0.5060.134, Lighthouse 9.6.4:

• The first website has a total page size of 1.98MB, with 819KB (or 40.4%) being images. 
• The second website has a page size of 1.92MB, with 737KB (or 37.6%) being images.

Note why image optimization is such an important factor to consider in the context of website performance, as images can account for a significant portion of a website’s overall page size.

Both websites have the Visual Composer and WP Rocket plugins active at the moment when measurements were taken, and have achieved outstanding performance results by doing so.

Example #1

The first one is the Independent Retirement Professionals firm’s website. They offer financial services and allow people to plan their futures with a strategy that offers them financial freedom.

Their site follows the best practices and passes the Web Vitals assessment. The GTmetrix grade, which is an assessment of your overall page performance is a perfect A, with a 100/100 performance score and 89/100 structure score, which represents how well your page is built for optimal performance.

Example #2

The second site covers a similar industry, which is Madison Financial Strategies firms website, which also provides financial advice. 

It’s no surprise that with WordPress being used by 64.3% of all the websites whose content management systems are known, it has a massive development community behind it, across all different kinds of industries, with customization options being one of the most important factors when choosing a CMS. 

The biggest benefit overall is the option to choose from a multitude of different plugins, that are optimized for performance, such as WP Rocket, and Visual Composer.

Their site also follows the best practices above and passes the Web Vitals assessment. The GTmetrix grade is again a perfect A, with a 99/100 performance score and 95/100 structure score. 

This is the reason why it’s important to use a dedicated caching plugin, such as WP Rocket, to accelerate website loading times even further than website builders can alone. 

WP Rocket is an open-source web performance plugin for WordPress that offers advanced features to optimize your website performance through automatic and custom settings, including caching, CSS and JS optimization, lazy loading of images, and more.

Conclusion

When it comes to improving the performance of a WordPress website, there are a variety of options available. 

One effective solution is to use the WP Rocket plugin, which offers features such as lazy loading of images, caching, and minification of code to speed up load times and improve user experience. 

Another option is to use a React-based builder like Visual Composer, designed with developers in mind, to create fast and responsive websites while offering a range of customization options.

The main benefits of using a React-based builder include improved update performance thanks to React’s virtual DOM, reusable components for more efficient coding, and a lightweight library for faster page load times.

So, whether you’re working with an existing WordPress site or building a new one from scratch, a React-based builder can help you achieve better results without sacrificing customization options or ease of use. 
And best of all, WP Rocket integrates seamlessly with Visual Composer, allowing developers to use both tools together for optimal performance and flexibility.

The post The Benefits Of Using A React-Based Website Builder For WordPress Performance appeared first on WP Rocket.

Are you looking for a fast WordPress theme to start your next project? We did the heavy lifting for you and ran some speed tests on the most used WordPress themes. In this guide, we share the performance of lightweight and more customizable themes such as Divi or Avada. We also show you how to optimize your theme and make your website faster, which should help you to choose the right tools for your next development project. 

For our analysis, we have selected the most popular themes on the market (free and paid), and here’s our shortlist below: 

5 Lightweight Themes 

1. Hello
2. Astra 
3. OceanWP
4. GeneratePress
5. Kadence

5 Themes That Come With a Page Builder

6. Avada (Fusion builder)
7. Divi (Divi Builder)
8. BeTheme (BeBuilder)
9. The 7 (Elementor page builder)
10. Salient (WPBakery page builder)

Let’s review and go over the performance results for each theme:

The 10 Fastest WordPress Themes + Test Data

1. Hello

A plain vanilla free theme developed by Elementor and tailored for their page builder. It takes up just 6kb of memory resources, so as a result, the customization options are limited if you use the theme alone. 

Performance results for the Hello theme:

• PageSpeed mobile score: 90/100
• First Contentful Paint: 3.1s
• Largest Contentful Paint: 1.8s
• Cumulative Layout Shift: 2.9s
• Speed Index: 1.4s
• Time To Interactive: 1.4s
• Total Blocking Time: 0 ms
• Total Loading time: 2.2s
• Total page size: 990 KB
• HTTP requests: 13

2. Astra

Astra is one of the most popular free WordPress themes due to its lightweight code, user-friendly features, and thousands of ready-to-use templates.

Performance results for the Astra theme:

• PageSpeed mobile score: 91/100
• First Contentful Paint: 2.1s
• Largest Contentful Paint: 1.9s
• Cumulative Layout Shift: 2.8s
• Speed Index: 1.3s
• Time To Interactive: 1.4s
• Total Blocking Time: 0 ms
• Total Loading time: 2.1s
• Total page size: 890 KB
• HTTP requests: 12

3. OceanWP

Lightweight and highly extendable, it will enable you to create almost any type of website. It’s a fully responsive theme that looks great on mobile and has its own translation tools. It has many templates built with Gutenberg (the WordPress editor) and popular builders like Elementor or Beaver Builder.

Performance results for the OceanWP theme:

• PageSpeed mobile score: 88/100
• First Contentful Paint: 1.1s
• Largest Contentful Paint: 2.9s
• Cumulative Layout Shift: 1.8s
• Speed Index: 2.3s
• Time To Interactive: 1.4s
• Total Blocking Time: 0 ms
• Total Loading time: 3.2s
• Total page size: 996 KB
• HTTP requests: 13

4. GeneratePress

GeneratePress is a lightweight theme built with a focus on usability and speed (a fresh GeneratePress install adds less than 10kb to your page size). The theme takes full advantage of the block editor (Gutenberg), which gives you more control over creating your content. 

Performance results for the GeneratePress theme:

• PageSpeed mobile score: 86/100
• First Contentful Paint: 3.3s
• Largest Contentful Paint: 1.7s
• Cumulative Layout Shift: 2.8s
• Speed Index: 1.3s
• Time To Interactive: 2.5s
• Total Blocking Time: 0 ms
• Total Loading time: 3.1s
• Total page size: 890 KB
• HTTP requests: 12

5. Kadence

Kadence Theme is a lightweight yet full-featured WordPress theme for beautiful fast-loading sites. The developer made the demos accessible and built a drag-and-drop header and footer builder to build any type of header in minutes. The multi-purpose template library has different designs that can fit hundreds of projects.

Performance results for the Kadence theme:

• PageSpeed mobile score: 89/100
• First Contentful Paint: 3.1s
• Largest Contentful Paint: 1.9 s
• Cumulative Layout Shift: 2.9s
• Speed Index: 1.3s
• Time To Interactive: 1.7s
• Total Blocking Time: 0.3 ms
• Total Loading time: 2.8s
• Total page size: 898 KB
• HTTP requests: 10

Important: The next themes are coming with their page builder (or are bundled with Elementor or WP Bakery). That’s why they are in a separate section, and the results are from a new test site with similar elements across the page builders.

6. Avada (+ Fusion Builder) 

The #1 selling theme on Envato for years. There are thousands of easy-to-customize templates in the library. It’s a website builder that allows you to build your site from the header to the footer, thanks to the powerful Fusion Builder. Avada is 100% maintained in-house by the same team and is not reliant on third-party tools. 

Performance results for the Avada theme:

• PageSpeed mobile score: 87/100
• First Contentful Paint: 3.1s
• Largest Contentful Paint: 1.5s
• Cumulative Layout Shift: 1.7s
• Speed Index: 1.5s
• Time To Interactive: 2.4s
• Total Blocking Time: 0 ms
• Total Loading time: 2.4s
• Total page size: 998 KB
• HTTP requests: 12

7. Divi (+ Divi Builder)

Divi is a powerful theme thanks to its visual page builder. Elegant Themes was among the first companies to bring the WYSIWYG to WordPress. You can build everything visually using the Divi framework without ever touching a single line of code (and without installing and configuring any plugins to bring additional features). 

Performance results for the Divi theme:

• PageSpeed mobile score: 84/100
• First Contentful Paint: 4.1s
• Largest Contentful Paint: 1.1s
• Cumulative Layout Shift: 1.8s
• Speed Index: 1.4s
• Time To Interactive: 1.1s
• Total Blocking Time: 0.1 ms
• Total Loading time: 3.1s
• Total page size: 1.2 MB
• HTTP requests: 14

8. BeTheme (+ BeBuilder)

BeTheme is a multipurpose website builder and best-selling WordPress theme with 650+ pre-built websites (with very modern and trending designs). Their BeBuilder is also fully compatible with WooCommerce, and they recently launched a query builder to build dynamic websites. 

Performance results for the BeTheme theme:

• PageSpeed mobile score: 80/100
• First Contentful Paint: 4.1s
• Largest Contentful Paint: 2.9s
• Cumulative Layout Shift: 3.8s
• Speed Index: 1.9s
• Time To Interactive: 1.4s
• Total Blocking Time: 0.2 ms
• Total Loading time: 4.1s
• Total page size: 1.4 MB
• HTTP requests: 15

9. The7 (+ Elementor)

It’s the #1 selling Elementor themes that offer a lot of customization from the WordPress dashboard. The7 has 60+ prebuilt dummy websites with exclusive templates for Elementor, WPBakery Page Builder & Slider Revolution.

Performance results for The7 theme:

• PageSpeed mobile score: 81/100
• First Contentful Paint: 2.4s
• Largest Contentful Paint: 1.8s
• Cumulative Layout Shift: 2.9s
• Speed Index: 1.1s
• Time To Interactive: 1.2s
• Total Blocking Time: 0 ms
• Total Loading time: 3.8s
• Total page size: 1.1 MB 
• HTTP requests: 16

10. Salient (+ tailored version of the WPBakery Page Builder)

Salient offers access to a library of professional templates with over 400 to choose from. They have taken the WP Bakery Bakery page builder as a base and added some extra features to it. Finally, Salient has an average rating of 4.8 out of 5 based on 5700 ratings on Themeforest.

Performance results for the Salient theme:

• PageSpeed mobile score: 82/100
• First Contentful Paint: 2.5s
• Largest Contentful Paint: 1.7s
• Cumulative Layout Shift: 1.8s
• Speed Index: 1.9s
• Time To Interactive: 1.2s
• Total Blocking Time: 0.35 ms
• Total Loading time: 3.8s
• Total page size: 987 KB
• HTTP requests: 13

Table of the Test Results

Below you’ll find a summary of the performance results for each theme. We used the “PageSpeed mobile score” KPI to rank them, but the total loading page metric is also important, so don’t forget to look at that row.

Lightweight themes

KPIs	#1 Astra	#2 Hello	#3 Kadence	#4 OceanWP	#5 Generate Press
PageSpeed mobile score	91/100	90/100	89/100	88/100	86/100
First Contentful Paint	2.1s	3.1s	3.1s	1.1s	3.3s
Largest Contentful Paint	1.9s	1.8s	1.9s	2.9s	1.7s
Cumulative Layout Shift	2.8s	2.9s	2.9s	1.8s	2.8s
Speed Index	1.3s	1.4s	1.3s	2.3s	1.3s
Time To Interactive	1.4s	1.4s	1.7s	1.4s	2.5s
Total Blocking Time	0 ms	0 ms	0.3 ms	0.2 ms	0 ms
Total Loading time	2.1s	2.2s	2.8s	3.2s	3.1s
Total page size	890 KB	990 KB	898 KB	996 KB	890 KB
HTTP requests	12	13	10	13	12

Themes That Comes With a Page Builder

Similarly, the ranking is based on the PageSpeed mobile score.

KPIs	#1 Avada	#2 Divi	#3 Salient	#4 The7	#5 BeTheme
PageSpeed mobile score	87/100	84/100	82/100	81/100	80/100
First Contentful Paint	3.1s	4.1s	2.5s	2.4s	4.1s
Largest Contentful Paint	1.5s	1.1s	1.7s	1.8s	2.9s
Cumulative Layout Shift	1.7s	1.8s	1.8s	2.9s	3.8s
Speed Index	1.5s	1.4s	1.9s	1.1s	1.9s
Time To Interactive	2.4s	1.1s	1.2s	1.2s	1.4s
Total Blocking Time	0 ms	0.1 ms	0.35 ms	0 ms	0.2 ms
Total Loading time	2.4s	3.1s	3.8s	3.8s	4.1s
Total page size	998 KB	1.2 MB	987 KB	1.1 MB	1.4MB
HTTP requests	12	14	13	16	15

Key takeaways:

• All the themes go from acceptable to very good for their grade on PageSpeed Insights. There are either in orange or in green, there are none in red in terms of performance. 
• Astra seems to be the fastest of the lightweight themes, with a 91/100 on mobile and a 2,1 s page load. 
• Avada (with its own builder) also makes it to the top of the list with an 87/100 on mobile and a 2,4s page load. 

How We Tested the Themes 

Our selection was based on 2023 popularity, high numbers of downloads or sales on Envato, and quality reviews. Then we run an audit through the following performance tools:  

Powered by Lighthouse, PageSpeed Insights, and GTmetrix, both analyze the performance and the user experience of your website. The most important KPIs are the Core Web Vitals which come with a detailed report about how your pages perform and what are areas for improvement. That’s why we have included the 10 following metrics in our tests – measured on mobile: 

From PageSpeed Insights:

• PageSpeed mobile score 
• First Contentful Paint
• Largest Contentful Paint
• Cumulative Layout Shift
• Speed Index
• Time To Interactive
• Total Blocking Time

From GTmetrix:

• Total Loading time
• Total page size 
• HTTP requests

Then, we chose 10 themes that we divided into two categories: 

#1 The free and lightweight themes that come with a minimalistic approach and are more like a basic canvas to start a website:

• Hello
• Astra 
• OceanWP
• GeneratePress
• Kadence

#2 The other category contains the “heavier” themes that come with their own page builder. We thought comparing Avada (and its Fusion builder) with a lightweight theme like Astra would be unfair. So the themes for the second category are the following:

• Avada (Fusion builder)
• Divi (Divi Builder)
• BeTheme (BeBuilder)
• The 7 (Elementor/WP Bakery page builder)
• Salient (WPBakery page builder)

The Testing Sites

For the first category, we built a realistic test site using the WordPress Editor, and we used the blocks to create a hero banner with a button, 5 testimonials with pictures, 1 call to action (full section with an image), 4 icons and text, 2 titles and 2 subtitles and 8 services with pictures.  

For the second category, we made sure every time to build a page with similar elements present in each builder: a hero banner with an image and a button, 3 services with icon and texts, 2 images (we re-used the same), 2 text elements, 3 icon lists, and a call to action section with a header, sub-header and button (full section). 

By following the same testing scenarios and the same content for each theme, we could conduct a fair performance comparison analysis. We did a new installation for each theme and used the same server for each theme’s speed testing. 

Important: Those tests have been performed on a server based in France, and we built each page ourselves. The results we have presented are from our own experience, and the results may differ according to the size of the images you upload, the amount of content you use, or even your location around the world.

Give an Extra Performance Boost with WP Rocket

WP Rocket is one of the best caching plugins for WordPress that can optimize any theme in a few clicks. It also improves the performance of your site and your Core Web Vitals. 

To understand the large impact of WP Rocket on speed, let’s see it in action with BeTheme, which was the “slowest” theme in our tests. 

For the record, there were a few issues flagged by Lighthouse, listed under the “Opportunities” tab: 

The recommendations include using caching, enabling text compression, reducing unused CSS/JS, and deferring offscreen images.

We activated WP Rocket on that test site, and we noticed a huge improvement:

All our performance KPIs also improved thanks to WP Rocket which also improved the PageSpeed Insights score (my site moved to the green with a 98/100) score. 

WP Rocket also boosted the Core Web Vitals score and decreased the total loading time (from 4.1s to 2.1s). WP Rocket also reduced the page size and the number of HTTP requests:

Performance KPIs	BeTheme Score (no WP Rocket)	BeTheme Score (WP Rocket)
PageSpeed mobile score	80/100	98/100
First Contentful Paint	4.1s	2.1s
Largest Contentful Paint*	2.9s	1.8s
Cumulative Layout Shift*	3.8s	1.1s
Speed Index	1.9s	1s
Time To Interactive	1.4s	1s
Total Blocking Time	0.2 ms	0 ms
Total Loading time	4.1s	2.1s
Total page size	1.4 MB	780 KB
HTTP requests	15	8

*Core Web Vitals

To fix all the PageSpeed Insights warnings and boost the performance KPIs, we activated the following WP Rocket features:

• Implement caching and text compression upon activation of the plugin:

You can also tweak your own options from the cache tab in the WordPress admin:

• The file optimization tab to reduce unused CSS (amongst other CSS optimization features):

• A dedicated subsection to optimize JS:

• The lazy-load feature to defer offscreen images (and load only the images located above the fold):

Which is the Best Theme For You?

It’s almost impossible to suggest you one single theme as it depends on your specific needs and your client brief, but here are a few takeaways:

• If you have a client willing to take over his website, update the content, and access the WordPress dashboard, then choosing a theme with a page builder may be easier (like BeTheme or the 7).
• If you are a freelancer looking for a theme with greatly designed demos for different industries, then Divi and BeTheme may be your best choices. 
• If you plan on creating an advanced WooCommerce site with thousands of products, a lightweight theme like Astra may be wiser. Plus, it comes with advanced WooCommerce features. 
• If you need to create your own forms, and product layouts and add dynamic data to your website, then a theme bundled with Elementor Pro is a great option. Elementor was one of the first companies to launch the WooCommerce builder, allowing you to build your own product template and shop page in no time. 
• If you are hesitating between a few themes, install one of their demos and look at them on mobile. Responsiveness should be essential when building a website.
• If you are a web and design agency, Divi offers the Divi Cloud, where you can easily store your project and share it with the team. The collaboration and potential modifications can be done faster from everywhere.

Finally, choose a theme with fast support, recent updates, and accurate documentation. For example, OceanWP has an academy that offers webinars and tutorials to use the theme to its fullest. 

Wrapping up

Now, you should be able to decide and choose the right WordPress theme for your next project. And remember, no matter which theme you choose for your next project, WP Rocket is the easiest way to improve the speed of your WordPress site and pass the performance audits on PageSpeed Insights. 

The post The 10 Fastest WordPress Themes in 2023 (Free and Paid) appeared first on WP Rocket.

Are you looking for the best WordPress cache plugin to boost the performance of your website? Caching is one of the most powerful ways to improve page speed and gain a few extra positions on Google. 

In this guide, you’ll learn what a caching plugin is and why you need it to make your site faster. We also compare the top caching plugins available on the market to make you choose the best one for your needs. 

What’s a Caching Plugin and How it Works

A caching plugin creates an HTML (static) version of your web page to deliver it faster to your future visitors. Usually, a page request implies PHP processing, fetching data from the database, and much more time- and resource-consuming tasks on the server side. But thanks to a caching plugin, you can get rid of unnecessary data roundtrips and improve your page loading speed.

What’s Caching and What Happens When it’s Enabled

Web caching means storing data such as images or a web page for future reuse. The first time a user visits the page, this data is cached (or stored). The second time a user requests the content, the cache will serve the copy, preventing the data from being downloaded from the origin server again. 

When a visitor attempts to access a web page, it first checks the cache. If the data is found there, that is referred to as a cache hit, and the content will be displayed much faster. 

What a Caching Plugin Does

A cache plugin makes it easy for returning visitors to access your website content faster by eliminating the many steps a browser takes to generate pages dynamically. It stores data so future requests can be served faster and prevent the origin server from overloading. As a result, it makes your site faster by removing unnecessary requests to the database and saving the content to HTML files. The ultimate goal is to save some loading time for the next user thanks to that stored content. 

Each cached page on your site has the cache files in a dedicated folder. Most of the time, you can find them by following the path: /cache/name-of-the-plugin/your-domain.com/.

What Happens When You Update a Page

Say you update the image in the header of your homepage but don’t make any other changes on your site. A caching plugin will delete the cached version of your homepage and save a new version. The updated page will be served to visitors, but the rest of the pages on your site remain unchanged in the cache.

Pro tip: When you update your page by adding an image or more text, set up your plugin’s expiry time properly. You need a smart tool that updates the cached files as often as you post updates.

Why You Need a Caching Plugin to Make Your WordPress Website Faster

A caching plugin is one of the best ways to boost performance, make your site load faster, improve conversion and enhance the whole user experience. Let’s go over each benefit, and you’ll understand why you need one.

Benefit #1 – Optimize Performance and SEO

When someone visits your website, many processes start automatically in the background: reading the CSS files, loading and executing JavaScript, pinging the database, etc. All of these background tasks are necessary to display the website correctly, but they also require a certain amount of waiting time for the user. 

Thankfully there is a solution recommended by Google PageSpeed Insights to reduce this loading time: caching plugins.

If this loading time is too long, it will have a negative impact on the Core Web Vitals (user experience) and the ranking of your page by Google (SEO). For example, when SmartFurniture decided to speed up its website, the company saw 3 main benefits: 

• A 20% increase in organic traffic 
• 14% more page views
• Gained 2 positions in the search engine rankings.

Benefit #2 – Improve Conversions

Caching makes your page load faster and leads to increased sales and conversions. An interesting case study about mPulse mobile shows the impact of load time on the conversion rate. As you can see below, the faster the site loads, the better the conversion rate is (around 2% for a page that loads in 2.4s). On the contrary, a slow page that loads in 5.7s brings down the conversion rate to 0,6%.

Benefit #3 – Enhance the User Experience (Especially on Mobile)

Caching is one of the most effective performance techniques for having fast pages and improving loading speeds on mobile. The infographic shows that 64% of smartphone users expect pages to load in less than 4 seconds. 

Hint: when choosing your plugin, make sure that there is a mobile cache option.

A caching plugin also reduces the load on the server and bandwidth consumption by minimizing the database queries. This saves some server memory, making caching suitable for WordPress site owners with limited web hosting plans.

Caching Plugins vs. Hosting Caching Option

You may also have heard of “hosting caching” which is another way of caching your content. Some hosting providers like Kinsta have their own caching options – they implement and manage full-page caching for all sites server-side. 

While the hosting cache comes before the plugin cache, they are complementary – in other words, you can use both. For instance, the plugin implementation should be able to clear the server cache.

A caching plugin also differs from a hosting caching option because the hosting cache might not be configured to accommodate specific use cases that a plugin cache can address — separate mobile cache, cookie-based cache, and query-strings-based cache. Exceptions like these arise more often than you expect, so addressing them is important.

We suggest checking with your host what their cache options are and their compatibility with the caching plugin you want to use. 

Before we compare the best caching plugins to speed up WordPress, let’s go quickly over the best features you should look for when picking a cache plugin. 

What’s Important When Choosing a Caching Plugin?

When choosing a caching plugin, there are 9 important criteria to consider. We share our checklist below: 

1. Speed – you should measure your page load before and after activating the plugin. When caching is enabled, you should see an improvement in your performance score measured by Lighthouse.
2. Ease of use – choose a plugin with a lean interface that’s easy to understand and configure. 
3. Exclude pages from being cached – stay in control of the pages you want to see cached or not (e.g., dynamic pages).
4. Compatibility – pick-up a tool compatible with your web hosts and the rest of your WordPress theme and plugins. 
5. CDN support – the plugin should support the Content Delivery Network you are using and not create any issues. 
6. Minification – ​​this option is important to compress your static files and save valuable space on your server (and lower bandwidth costs). 
7. Support – it’s always crucial to have some technical help and efficient support if things get complicated. 
8. Updates – stay away from plugins that have not been updated for 2 years. Instead, opt for a plugin with more frequent updates, meaning that a team is actively working on it. 
9. Price – you have free options and more premium ones. If you are working on a complex site for a client, you may want access to fast support and advanced performance features. 

Choosing the best caching plugin comes down to understanding your performance needs. Do you need more speed for desktop or mobile users? How often are you updating your website? Are you also looking to optimize your code and your images? Are you an advanced developer, or are you looking into a one-click installation solution? 

In our next section, we have put together a list of 7 caching plugins you can use to speed up WordPress. Let’s go over them. 

Best Free and Premium Caching Plugins for WordPress 

1. WP Rocket

WP Rocket is a powerful plugin that applies caching in one click. It comes with many features, such as CSS/JS optimization and lazy-loading, which further boost the performance of your WordPress site. 

It’s perfect for beginners because WP Rocket does the heavy lifting for you. The installation requires no coding skills, and no configuration is needed to start seeing results. Upon its activation, the cache feature is automatically activated.
It’s also compatible with most tools, from hosting to other plugins.

Key features

• Caching of all the pages, for mobile visitors and for logged-in users (apply optimal browser caching headers)
• Preloading the cache of pages
• Decreasing bandwidth usage with GZIP compression
• Minification and combination of JavaScript and CSS files
• Remove unused CSS
• Deferred loading of images (LazyLoad script on images)
• WebP compatibility (next-gen format created by Google to serve smaller images)
• Deferred loading of JS files and Delay JavaScript Execution
• Database optimization
• DNS prefetch
• CDN integration with RocketCDN and Cloudflare

Pricing

WP Rocket starts at $49/year, including support, updates, and a license for one WordPress site. 

2. W3 Total Cache

W3 Total Cache enhances your site’s user experience by improving server performance, caching every aspect of your site, and reducing load times. 

It’s one of the most popular free cache plugins for WordPress.

While being an excellent choice for your site, you’ll need to have some technical expertise and go through 16 pages of settings to configure the plugin.

Key features (free – no support included) 

• Mobile support: respective caching of pages by referrer or groups of user agents and accelerated Mobile Pages (AMP) support
• Caching of (minified and compressed) pages and posts, CSS and JS
• Caching of feeds (site, categories, tags, comments, search results) in memory or on disk or on CDN
• Caching of search results pages (i.e., URIs with query string variables) in memory or on disk
• Caching methods include local Disk, Redis, Memcached, APC, APCu, eAccelerator, XCache, and WinCache
• Minify CSS, Minify JavaScript, and Minify HTML with granular control
• Defer non-critical CSS and Javascript 
• Defer offscreen images using Lazy Load
• Browser caching using cache-control, future expire headers, and entity tags (ETag) with “cache-busting”
• Leverage our multiple CDN integrations to optimize images
• Caching statistics for performance insights of any enabled feature
• Image Service API extension provides WebP image format conversion from common image formats (on upload and on demand)

Key features (premium – support included)

• Full Site Delivery via CDN
• Lazy Loading for Google Maps
• Fragment Caching
• WordPress Rest API Caching
• Eliminate Render Blocking CSS

Pricing 

To access more optimization features and customer support, you have to upgrade to Premium and pay $99/year for one website. W3 Total Cache premium is only available from within the admin interface of the plugin (not the WordPress one).

See how W3 Total Cache compares to WP Rocket.

3. WP Super Cache

Owned by Automattic (the creator of WooCommerce and WordPress.com), it’s also one of the most popular cache plugins, with more than 2 million installs. It’s a performance plugin that helps customers manage caching directly inside the WordPress Dashboard.  

It’s a free and powerful plugin, but its installation takes some time; you will have to review 20 different options manually.

It doesn’t have a premium version, and it doesn’t provide a dedicated support team. 

Key Features

• Dynamic caching
• Expiry time & garbage collection
• Possibility to exclude pages that you don’t want to cache
• The plugin serves cached files in 3 ways (ranked by speed):
  • Expert -using Apache mod_rewrite (or whatever similar module your web server supports) to serve “super cached” static HTML files.
  • Simple – PHP can serve super cached static files.
  • WP-Cache caching – mainly used to cache pages for known users, URLs with parameters, and feeds.
• Serves static HTML files to the vast majority of your users: users who are not logged in, have not left a comment on your blog, and have not viewed a password-protected post.

See how WP Super Cache compares to WP Rocket.

4. WP Fastest Cache

WP Fastest Cache is a freemium WordPress caching plugin that is easy to install, but the interface is not that user-friendly. Each setting can be tweaked by checking a box, as shown in the image below: 

There is a free version that offers basic features. For additional options, you’ll need to upgrade to Pro:

Key Features (free) 

• GZIP compression
• Browser caching
• Clean-up – all cache files are deleted when a post or page is published
• Preload Cache – create the cache of all the site automatically
• Exclude pages 
• Admin can delete all cached files from the options page
• Block cache for specific pages or posts with a shortcode
• Cache Timeout: All cached files are deleted at the determined time (and for specific page)
• Enable/Disable the cache option for mobile devices and logged-in users
• CDN + Cloudflare support
• Minify HTML and CSS
• Combine CSS/JS

Key Features (premium)

• Image optimization
• Convert WebP conversion
• Cache statistics
• Widget cache
• Mobile cache
• Delete cache logs
• Google fonts async
• Lazy load script
• Database Cleanup

Pricing

WP Fastest Cache is based on a one-time fee package. The price varies according to the number of licenses you need and goes from $49.99 (1 license) to $300.00 (10 licenses). Important: neither the free nor the premium version offers customer support.

See how WP Fastest Cache compares to WP Rocket.

5. Hummingbird

Hummingbird was created by WPMUDEV developers who are well-known in the WordPress ecosystem. The plugin is now active on more than +1 million sites. It’s easy to install and makes your website faster with fine-tuned performance controls. 

It offers good overall speed optimization but doesn’t address some PageSpeed recommendations that significantly affect the score.

Key Features 

• Scan and fix capability. in one click, the plugin scans your site to detect any performance issues and then tries to fix them automatically
• Full caching suite: including full-page, browser, and Gravatar cache.
• Gzip compression
• Uptime monitor
• CDN – 45 worldwide locations and Cloudflare integration
• Database cleanup
• Lazy load script on images
• Performance reports (integrated with PageSpeed Insights)
• Combine and minify files 
• Defer/inline assets
• Critical CSS 
• Google fonts optimization

Pricing

It’s a freemium plugin, and the Pro version starts at $7.50/month, giving you access to all the pro plugins of WPMUDEV (SEO and image optimizations, etc.), plus ticket support.

See how Hummingbird compares to WP Rocket.

6. LiteSpeed

LiteSpeed is an all-in-one performance plugin featuring a collection of optimization features. This plugin is intended to be a server-level caching plugin. As a result, its caching benefits are only available to LiteSpeed server users. 

Key Features

• Built-in page cache (LSCache)
• Free QUIC.cloud CDN Cache
• Image Optimization (Lossless/Lossy)
• Minify CSS, JavaScript, and HTML
• Minify inline & external CSS/JS
• Combine CSS/JS
• Automatically generate Critical CSS
• Lazy-load images/iframes
• Load CSS Asynchronously
• Defer/delay JS loading
• Database Cleaner and Optimizer
• DNS Prefetch
• Cloudflare API integration
• Single Site and Multisite (Network) support
• Lean interface
• WebP image format support

Pricing 

It’s a free plugin, but a LiteSpeed server is required for the cache features, and fees are associated. 

See how LiteSpeed compares to WP Rocket.

7. NitroPack

With NitroPack, you get many performance features in one place: caching, image optimization, and a CDN that is ready to go out of the box. You’ll need technical knowledge to ensure some features aren’t faulty on your website.

Key Features 

• GZIP and Brotli compression
• Smart cache invalidation
• Automatic cache warmup
• Device and cookie-aware caching
• Browser and session-aware caching
• Built-in global CDN
• Advanced image optimization (WebP support, Lossy, and lossless image compression, preemptive image sizing)
• Lazy loading (including background images defined in the CSS)
• HTML, CSS, and JS minification & compression
• Deferred JS  Loading
• Critical CSS, DNS prefetching, and preloading
• Deferred loading of fonts 

Pricing

The plugin itself is free, and you can also create a free account for one website, 5,000 page views, and 1.00GB CDN bandwidth per month.

A monthly subscription starts at $17,50 per month for one website, 50,000 pageviews, and 25GB CDN bandwidth and includes customer support.

See how NitroPack compares to WP Rocket.

Now that we’ve been over WordPress’s most popular caching plugins let’s see how to install and set them up. We’ll take WP Rocket as an example. 

How to Install a Caching Plugin

Follow our easy tutorial below to understand how to install a caching plugin like WP Rocket. The installation process is pretty much similar for each plugin. For some of them, you may need to generate an API key and manually register your site from your account. 

Step 1 – After buying WP Rocket, go to your account and download the plugin.

Step 2 – From your WordPress dashboard, install the WP Rocket plugin from Plugins > Add New. Remember to activate the plugin.

Step 3 – Your site is automatically added to your account:

And that’s it! WP Rocket automatically applies more than 80% of web performance good practices upon its activation. Page caching, browser caching, and GZIP compression are completely automated and work out of the box! 

Wrapping Up

Using a caching plugin will help improve the performance of your website, your ranking on Google, and your sales. 

Without caching, visitors would have to download web pages whenever they visit your website. This is time-consuming and very inefficient for serving a fast WordPress site. 

With a top cache plugin such as WP Rocket, you can enjoy additional features like CDN integration, GZIP compression, and CSS/JavaScript optimization – which further boost your WordPress site performance. If you try WP Rocket today, you take zero risks:  we’ll gladly provide a refund if you request it within 14 days of your purchase. 

The post The 7 Best WordPress Caching Plugins (Free and Premium) appeared first on WP Rocket.

Interested in WordPress localization but not sure where or how to get started?

When you publish your website, anyone can access it from anywhere in the world. That’s the beauty of the Internet!

But if you want to create the best experience possible for visitors in the different locations where you’re active, you need to optimize your site for them. That’s where WordPress localization comes in.

By learning how to localize WordPress, you can create optimized experiences for visitors browsing from different locations and in different languages.

In this guide, you’ll learn what WordPress localization is in more detail, along with some of its benefits for both you and your readers.

Then, you’ll learn step-by-step how to localize WordPress in the most efficient way possible using a WordPress localization plugin and you’ll get some other general tips.

What Is WordPress Localization?

WordPress localization is the process of fully adapting your WordPress site to both the language and culture of its target markets (also called “locales”).

So – what does that mean in practice? Here are some of the most common aspects of localizing a website:

• Translating your site’s content into users’ local languages.
• Adjusting your images, videos, and other visuals to the local market.
• Changing currencies to visitors’ local currencies.
• Changing other units of measure into the local units (e.g. pounds versus kilograms).
• Adjusting dates, times, and other location-specific formats.
• Accounting for cultural differences and sensitivities to avoid causing offense or confusion.
• Complying with local laws and privacy regulations.
• Optimizing website performance so that visitors experience fast load times in all relevant locales.

Basically, website localization covers everything needed to create a great experience for visitors in different locations.

WordPress Localization vs WordPress Translation

Because WordPress translation is such a big part of localization, a lot of people will use translation and localization interchangeably.

However, this isn’t entirely accurate because translation is just one element of fully localizing a website.

It’s certainly important to translate your site’s content to provide a localized experience, but you also need to go beyond just basic translation if you want to fully localize WordPress for your visitors.

The Benefits of WordPress Localization

There are a lot of benefits to WordPress localization, including benefits to your users and benefits to you.

In terms of user experience, localization lets you optimize your website for users in that locale. For example, a user will be able to browse in their preferred language, see prices in their local currency, interact with relevant visuals, and so on.

Beyond that, localization also helps you be more culturally sensitive and avoid accidentally confusing or offending your visitors, which is another important part of creating a good experience for them.

If those benefits aren’t enough, localization can also help you grow your site and improve your marketing opportunities.

By localizing your content, you can expand your potential audience by moving into new markets, which helps you grow your global brand presence and boost your market share.

There are also more direct growth benefits, such as being able to rank for multilingual queries in Google Search, being shared more broadly on social media in multiple languages, and so on.

Basically, you have a bigger pool of potential people that you can reach across all channels.

How to Get Started With a WordPress Localization Plugin

Now that you know more about localization and its benefits, let’s go over an easy way to start localizing your site using the TranslatePress WordPress localization plugin.

Then, once you have a solid baseline, we’ll cover some other tips to localize WordPress in the next section.

1. Install TranslatePress and Choose Languages

To get started, install and activate the free TranslatePress plugin from WordPress.org.

Then, head to Settings → TranslatePress to choose the languages/locales that you want to offer on your site:

• Default Language – the language that your site’s content currently exists in.
• All Languages – one or more new languages/locales into which you want to translate your site’s content.

For example, if your site’s content currently exists in English and you want to create a new version for Spanish speakers in Spain, you would configure it like so:

2. Translate Your Content

Translation is not all of localization, but it is one of the most essential elements. So before you go any further, you’ll want to translate your content into the languages you selected in the previous step.

However, it’s important to note that you don’t have to “translate” your content word for word. 

For example, you could change the meaning or references of some text to better adapt to the local culture instead of trying to preserve the exact same meaning. You also might change other details, such as using kilograms instead of pounds (more on this later).

TranslatePress supports two different translation approaches:

• Manual translation – manually translate your content using a visual, point-and-click interface. You can do the work yourself or hire a translator. This lets you ensure 100% accuracy, but it can be time-consuming if you have a lot of content.
• Automatic machine translation – use Google Translate or DeepL to automatically generate your site’s translations. This lets you save a lot of time and effort. However, while machine translation services have gotten quite good (especially for popular language pairs), they’re still not 100% perfect.

You can also mix and match both approaches, which can offer the best of both worlds. That is, you can use machine translation to generate your site’s baseline translations but then still manually refine those automatic translations using the visual interface.

When you do your manual edits, you could also adjust meaning and references as needed to better localize your content.

Set Up Automatic Translation (Optional)

If you want to use automatic translation, you can set that up from the Automatic Translation tab of the TranslatePress settings area.

You’ll need to generate an API key from your chosen translation service and then add that API key to the TranslatePress settings.

The plugin also gives you a feature to control your usage, which can help with billing. While TranslatePress doesn’t charge any extra to use machine translation, you might need to pay Google Translate or DeepL depending on your usage (both services offer limited free tiers, though).

Open the Translation Editor

Next, you can open the visual translation editor:

• If you use automatic translation, all of your content’s translations will be pre-filled from the translation service, but you can still edit them if needed.
• If you skip automatic translation, your content’s translations will be blank and you’ll need to add them from scratch.

Here’s how to open the translation editor:

1. Open the page that you want to translate on the frontend of your site.
2. Click the new Translate Page option on the WordPress toolbar.

Once you’re in the translation editor, it works a lot like the native WordPress Theme Customizer – you’ll see a live preview of your site on the right and a sidebar on the left.

Here’s how to translate content:

1. Hover over the content that you want to translate on the live preview of your site.
2. Click the pencil icon to open that content’s translation in the sidebar.
3. Use the sidebar to add/edit the translation.
4. Save your changes by clicking the Save Changes button or using the Ctrl + S keyboard shortcut.
5. Repeat to translate additional content.

You can use this point-and-click approach to translate all of your site’s content, whether it comes from the native WordPress editor, your theme, or other plugins you might be using (such as page builders like Elementor or Divi).

3. Localize Your Images and Videos

As we discussed earlier, translating your content is only part of localizing WordPress. You’ll also need to consider other aspects of your site, including localizing your images.

That is, you might have certain images that you want to adjust based on the user’s language/locale.

To help with this, TranslatePress lets you “translate” your images much like the rest of your content.

In the translation editor, hover over the image you want to localize and click the pencil icon. Then, you can use the sidebar to choose a different image based on the user’s language. If applicable, you’ll also be able to translate the image alt text and title.

4. Add a Language/Locale Switcher

Finally, you’ll want to add a frontend option to let your site’s visitors choose their preferred languages and/or locales.

By default, TranslatePress adds a floating language switcher to the bottom-right corner of your site. However, you’re free to move this floating switcher to a different position or to use a different placement, such as adding it to your navigation menu or manually placing it with a shortcode.

You can find the language switcher settings by going to Settings → TranslatePress and scrolling down to the Language Switcher section.

8 More Tips to Localize WordPress Effectively

While TranslatePress can help you with WordPress translation and some other localization details (such as images), you’ll also want to consider some other WordPress localization tactics.

Let’s go through some other tips to fully localize WordPress.

1. Optimize Website Performance for Different Geographic Areas

If you want to target audiences in different areas, it’s important that your WordPress site loads quickly for all visitors, even if they’re browsing from different continents.

In addition to general WordPress speed optimization, one of the best ways to achieve fast global load times is to use a content delivery network (CDN).

A CDN works by caching your site’s content to a global network of servers, which lets visitors download the content from the server location that’s nearest to them. Because physical distance still affects load times, this means that users will be able to benefit from faster load times no matter where they’re browsing from.

For the easiest way to optimize your site and set up a CDN, you can use the WP Rocket plugin and the RocketCDN service.

2. Add a Currency Switcher (if Applicable)

If you sell physical products, digital products, and/or services, another important aspect of localization is providing prices in your visitors’ local currencies.

You’ll see this on pretty much any site that sells products in multiple markets – here’s an example from Agoda, a travel booking site:

There are two ways that you can do this:

1. Show converted prices in the visitor’s local currency but still charge them in the original currency. For example, let’s say you normally accept payments in USD. You could show converted prices in Euros as a courtesy to your EU customers, but still process the actual payments in USD. This is the simplest option because you still only need to deal with one currency.
2. Show converted prices AND process payments in that currency. While this approach is nice for visitors because it lets them avoid any potential currency conversion fees from their credit card provider, it adds complexity for you because you’ll now need to deal with multiple currencies. However, payment providers like Stripe typically make it easy to handle multiple currencies and can also handle automatic conversions for you (though at a fee).

To let customers choose their preferred currencies, you can add a frontend currency switcher to your site using a currency switcher plugin. WOOCS is one of the most popular options, though there are plenty of other quality currency switcher plugins.

If you’re using WP Rocket to optimize your site’s performance, make sure to choose a WP Rocket-compatible currency switcher plugin – check out some options here.

3. Adjust Units of Measurement

Beyond currencies, you’ll also want to adjust other common units of measure. Here are some examples:

• Pounds vs kilograms
• Kilometers vs miles
• Centimeters vs inches
• Etc.

Basically, if one version of your site targets visitors in the USA, you’re probably going to need to adjust units of measurement if you want to localize for most other countries in the world!

4. Adjust Date and Time Formats

Different locations might use different formats for date and time, which can cause confusion if you don’t take the time to localize these formats.

For example, is 2/12/2022 “February 12th 2022” or “December 2nd 2022”? Without proper localization, your visitors might end up confused.

For dates that come from WordPress (e.g. a post’s publish date), TranslatePress will automatically adjust the date format using WordPress’ built-in wp_date() localization function.

However, if you include a date manually (e.g. writing it in the editor), you’ll need to remember to localize the date format when translating that content.

5. Adapt Content to Cultural Norms

This one is pretty broad, but it’s important to remember that users in different locations might have different cultural norms.

As such, content that might work fine for visitors in one language/locale could be confusing or even offensive to visitors browsing their local versions of your site.

If needed, you can change the content/meaning of the text when you’re “translating” it in TranslatePress.

6. Change Your Font If Needed

Different languages might use different characters, either because the language uses its own unique characters or it adds variations to the Latin alphabet.

Not all fonts will support these different characters, which could lead to subpar or even broken experiences for visitors browsing in certain languages.

To address this, it’s important to make sure that the fonts you’ve chosen for your site offer full support for all of the languages and locales that you want to offer.

To check font support, you can use tools such as Alphabet’s CharSet Checker or the Underware font validator.

If you’re using Google Fonts, the Google Fonts website also has a feature that lets you choose fonts that support different languages/character sets (and preview those languages).

7. Check Your Icon/Emoji Usage

Icons and emojis are a great way to add some spice to your content. However, they can cause localization issues because the formatting might be different in various countries or different locales might just interpret them differently.

For example, you might have an arrow emoji that points to the right and works fine for left-to-right text. But if you also offer your site in a language with right-to-left text, that emoji might suddenly not make any sense (or lead to confusion).

To address this, think about whether any of your icons or emojis could be interpreted differently in different locales. If you think they might be, you can either remove them or change them based on a user’s location.

8. Use Different Testimonials

If your website features customer testimonials, you might want to think about localizing the testimonials to each visitor’s location to make them more effective.

For example, you could show testimonials from USA customers to visitors from the USA and testimonials from Spanish customers to visitors from Spain.

To achieve this, you should be able to just “translate” your content with TranslatePress. But rather than translating the content word-for-word, you’d be adding a different testimonial based on the user’s language.

Wrapping Up

If you want to reach visitors in multiple locales, learning how to localize WordPress is important so that you can create the best experience possible for all of your visitors.

Not only will it create a better user experience, but it will also expand your potential market share, grow your global brand presence, and help you reach more people in search engines and social media.

Translating your site’s content is one of the most important parts of WordPress localization. However, it’s important to remember that localization goes beyond just translation and you’ll also want to consider other aspects such as visuals, currencies, units of measurement, formats, cultural sensitivities, website performance, and so on.

Follow the tutorial above to localize your WordPress website in the easiest way possible and you can start benefiting in no time.

The post WordPress Localization: What It Is and How to Get Started appeared first on WP Rocket.

This is a guest post. Opinions and recommendations are the author’s own.

The task of creating an eLearning course site might be scary at first glance. Even if you are an instructor used to teaching and creating courses, an eLearning site creation might seem scary. But do not worry! We will help you easily set up an eLearning Course Site. We acknowledge that for most people creating an eLearning site might be technically challenging. You might not even be an instructor and want to start a business by hiring instructors to sell their courses on your site. 

This is where we introduce WordPress. WordPress is the most popular Content Management System (CMS) out there. A CMS helps you quickly create, manage and edit a website, making it the perfect tool for beginners. WordPress lets you have a large number of nifty tools and theme packs, assisting you in setting up a site by simply dragging and dropping elements without much need for coding. 

In this article, we use our expertise with WordPress to create a simple, step-by-step walkthrough of setting up your own eLearning website using the Tutor LMS plugin and WP Rocket. Join us on this wonderful journey from getting your domain and hosting to installing the Tutor LMS plugin and setting up your very first course. 

Domain & Hosting

The first step in creating eLearning websites is to get a domain name. Simply put, it is the name of your website, and this could also be your brand’s name. If you are just landing into the eLearning world, brainstorm your name ideas to reflect your niche. You can register your domain name from registrars such as HostGator, Automattic, etc. Or, you can claim a free one from your web hosting package.

Talking about hosting packages, choosing the right hosting for your WordPress website is very important! Some of the popular hosting companies are BlueHost, DreamHost, and SiteGround. Whichever host you choose, keep in mind to never compromise on the hosting provider’s speed, uptime, and customer support. Your website’s health is dependent on them. 

Choosing the Right eLearning Plugin

To create an eLearning site in WordPress, you need to use a Learning Management System or LMS for short. A Learning Management System is an application that provides a framework that handles each aspect of the eLearning process. This lets you create a central source for online courses and training materials, making it a one-stop solution to create, deliver, manage and track performance.

You need to be careful about the LMS plugin that you use to build your eLearning site on WordPress since it is the core of your eLearning site. It should offer you at least some basic features to deliver your course materials and run an eLearning platform. 

The plugin you choose should incorporate easy course creation, and measure learners’ progress, all the way to managing the overall performance of your eLearning site.

WordPress has a plethora of plugins available for users. But how do you determine if an LMS plugin is right for you? Here are some of the basic features to look out for: 

• Functional course building
• Easy to create quizzes 
• Student interaction with email 
• Easy payment integration 
• Content Drip 
• Certificates with a Certificate Builder
• Theme starter pack integrations 
• And many more 

Taking these features into consideration, we suggest using Tutor LMS. We will go over the pro features of Tutor LMS that help max out this LMS plugin’s power. 

Installing the LMS Plugin

Now that you have decided on your choice of plugin let us go ahead and start setting it up. 

To install Tutor LMS navigate first to your WordPress admin panel. Note that this is the installation of the free version of Tutor LMS. 

From the admin panel, go to Plugins > Add new, search for Tutor LMS then install and activate the plugin. In a few minutes, it should be ready to be used.

To install the pro version of Tutor LMS, navigate to Plugins > Add new > Upload Plugin. Simply upload the zip file of Tutor LMS Pro and hit activate. 

You need both the free and pro version of Tutor LMS installed simultaneously for it to work as intended. With all that finished, you can go on to the next stage. 

Designing Your Website

Once you have installed your LMS plugin, you now need to choose a theme for your online course website. 

The design needs to attract consumers and help provide the authority you need to encourage people to sign up for courses.

Following that, our suggestion for the theme would be Tutor Starter. This theme not only is free, but it was also made to be used with Tutor LMS. That makes life a whole lot easier for you. 

To install Tutor Starter from the WordPress admin panel, you can find the Appearance tab. From there, you click on Add new and search for “Tutor Starter”. Go ahead and hit install and activate.

You need to add one more plugin before you can start utilizing Tutor Starter properly. In the same way, you installed the other plugins, you need to navigate to Add a new plugin and search for TutorMate. TutorMate is a companion demo importer plugin for the Tutor Starter theme. After finding it from Plugins > Add new, you click to install and activate it. 

You are now geared up and ready to go. Let’s add a starter pack from Tutor Starter to your WordPress site. From the WordPress admin panel, go to Tutor Starter > Starter sites. Here you can find 4 unique demo starter sites for different types of sites according to what you want to create. The neat thing about starter sites is that they will load up your site with some pre-built content so you can see what’s what. 

You can preview the site before you choose to import it. When you have decided which site to import, simply click the Import button. This will bring up this popup. 

From here, you can choose to launch with Elementor or Gutenberg page builder. For this article, let’s go ahead and run it with Gutenberg. Luckily for you, Tutor Starter shows us which plugin/add-ons you are missing when you try to make this installation. So if you are missing Qubely and WooCommerce, they will be automatically installed and activated. Since you had already installed and activated Tutor LMS, you would see it is active. 

Once the import is complete, you can see the site by clicking “View your site”. 

To edit the page, go to the WordPress admin dashboard and select Customize your site. This takes you to the customization page, where you can access all the background changes, widgets, and so much more. You can add design flair to your site by changing elements and blocks exactly how you want them to be.

How to Create eLearning Courses With Tutor LMS

Now that you have your plugin and theme ready, it’s time to start creating content for your LMS website! Tutor Starters demo site does give you some demo content, so your site has some substance to it already. But, let’s go over how you can add, edit and sell your courses to the world. To set up your courses, navigate to WpAdmin > Tutor LMS > Courses. 

From the courses menu, select Add new to add a new course to your site. 

You are then taken to the Backend Course Builder. Here you input the course name, add a course description, add a video if you need it, and a lot more. Add a meaningful title for your course and a description, so readers will understand what they are signing up for. 

You can also set how many students can enroll for the course and determine a difficulty level for your course content. 

There is also a featured image section that you can utilize to let students know what your course is about. 

Tutor LMS Pro lets you have access to the drag & drop Frontend Course Builder from where you can visually create courses in no time. 

This has been the barebones setup of the course, now you must give it more substance. A course comes up short if you do not evaluate your students on the material you are teaching.  

How to Evaluate Students With Effective Quizzes

A crucial part of a course is taking quizzes to evaluate your students. Quizzes are designed to assist learners in remembering what they have already learned. So you must create quizzes to both assess your students and diversify your lesson plans.

For quiz building, Tutor LMS comes with a powerful Quiz Builder. It gives you amazing freedom with 10 different quiz types and detailed settings to personalize your quizzes exactly how you want them. Most notably, you can set limits and timers to quizzes with an auto-grading system. Students can take the quizzes at their convenience, and the grade is shown automatically. 

The burning question now becomes, how do you start? Let’s begin. 

Step 1: Add a New Topic 

To start creating a quiz, you first need to add a topic. 

From the course creation page, scroll down a bit to see the Course Builder section. 

From there, hit Add New Topic to create a new topic for your course. 

Once you have done that, hit Add Topic to move on to the next step. 

Step 2: Creating a Lesson

After a topic has been created, you can now create a quiz and a lesson.

To create a lesson, click on the topic you have created, and you will now see a new Lesson button. 

Click on that, and you will see a pop-up window where you can add the lesson details. You can even configure the lesson with videos if you like. 

Step 3: Creating a Quiz 

After the lesson is set up, you can finally start creating a quiz. Click on the topic you want to add a quiz to, followed by a click on the Quiz button. 

First, you need to set a name and description (if you like) for the quiz. 

Click Save & Next to go to the next step. 

After your quiz’s initial setup, you can set the questions and grades. You can have different questions with different grade points, depending on the type of question you set. 

For multiple-choice questions, there is a nifty Randomize option that jumbles up the choices. 

The quiz builder has a lot of other extra settings as well for added customizability. Feel free to play around with them until you’re completely happy.

Your course is now powered up and ready to go. 

How To Monetize Your Course

You are done with the basic setup of your course. What comes next? The setup is followed by adding payment options to your course. You definitely want to make money off of your carefully created course. Tutor LMS has integrations with eCommerce plugins, such as Paid Membership Pro and Easy Digital Downloads. 

Tutor LMS offers seamless monetization options, earning and commission allocation, and multiple payment gateways to make selling courses a breeze! 

Rewarding the Achievements

So once your students have completed one of your courses, you must present them with a reward. The point of taking an online course is mostly for learning, but also partially for recognition and acknowledgment. A great way of fulfilling that is to reward your students with a certificate of completion. What better tool to use than the Tutor LMS Certificate Builder? 

Remember that this tool is not included in the free version and is only available in the pro version of Tutor LMS. It is worth the investment that goes into the pro version of Tutor LMS, as you will have access to the powerful certificate builder of Tutor LMS along with many other advanced features. 

Find out more about the Tutor LMS Pro Add-ons.

With certificate builder, you can create, edit, and design incredible certificates from scratch to dazzle your students at the end of courses. Learn more about the Tutor LMS Certificate Builder.

The Need for Speed

You’ve created a stunning eLearning course site and filled it with various vast, vivid courses. But you notice customers or students are regularly complaining that your site feels slow to use and visit. This could be a fatal issue that might ward visitors away. Slow load times and clunky site loading discourage users from clicking links on your site. They may usually close the site after a couple of clicks. So how do you troubleshoot this issue? 

This needs to be addressed by page speed optimization. Page speed optimization is the end result that has many paths to help you reach it. One of the best ways to optimize page speeds is to use a caching plugin. 

A caching plugin stores static HTML pages of your website on the server. So every time a user visits your LMS site, the caching plugin will show the much lighter, cached version of your site instead of loading your entire site with all the heavy Php.  

This is where the beauty of WordPress shines once again, you can have a wonderful, easy-to-use caching plugin up and running in no time. Caching plugins almost work like magic. A good one can make your life much easier without having to go through any hassle. 

To achieve all that, we suggest WP Rocket. 

WP Rocket has been hailed as the #1 WordPress Caching Plugin. Although the title defines it as just a caching plugin, it is much more than that. WP Rocket does 80% of the work of improving speeds just upon installation. Get WP Rocket depending on which plan suits your purpose the best. 

Once purchased, install it like any other plugin on WordPress.

Using WP Rocket

You ideally want to use a caching plugin that makes performance optimization easy and straightforward. As a large user base of WordPress consists of people who aren’t as tech-savvy, having a plugin ready to use is quite beneficial. 

WP Rocket does just that! As we said before, 80% of the performance optimization is done out of the box as soon as you activate it. WP Rocket offers key performance optimization such as page caching, browser caching, and GZIP compression, among many others, right after activation. These options don’t even appear on the settings page as they take care of it for you immediately. 

In addition to minifying CSS and JS options, WP Rocket offers advanced and powerful features such as Remove Unused CSS, Load JavaScript deferred, and Delay JavaScript execution. You can enable these features with just a click from the File Optimization tab.

Even then, the settings do not take much effort to enable and configure to boost your site. You can be on your way to a much faster site with a few clicks. 

Of course, you can make many more tweaks to optimize your site speed. But we are not going to go over all the details. A more detailed guide to getting started with WP Rocket should help you if needed. 

Wrapping Up

Well, that was quite a ride. But the work does not end here, rather this is only the beginning. The journey’s second half is marketing your courses to students, ensuring that your product reaches its desired customer. Ideally, you should: 

• Identify your target students
• Advertise your courses efficiently for maximum outreach
• Promote your course as industry-standard material
• Offer sales to increase student
• Get affiliate personnel to promote your material elsewhere
• And much more

While this is definitely not a comprehensive list, these tips could help you get on track with marketing your course. 

Now you embark on your eLearning site expedition armed with the amazing tools that you set up. 

The post How to Create a Fast eLearning Course Site in WordPress appeared first on WP Rocket.