How to accelerate your Woocommerce website (2022 ending polar guide)

Have you encountered a slow Woocommerce website? Many factors will slow down the speed of your WOOCOMMERCE website, but fortunately, we share the best technology to speed up.

The first fact: Your WooCommerce website requires speed to generate profits. Fast loading time can not only improve the user experience, but also bring better SEO and sales to your company. You need a fast website, or you may find that you have lost your attention from customers. They need to choose the content available now without waiting for too long.

It is very simple: If you log in to a super slow e -commerce website, what would you do as a visitor? Are you willing to stay or try another website with a better shopping experience? We all know the answer.

This guide will show you how to easily increase the speed of the Woocommerce website by optimizing some aspects. We will introduce the many reasons you should optimize the website, as well as the main technologies and tools you can use to achieve fast websites on all devices.

As a little reward, you will also get our performance list to avoid any errors, make full use of you The Woocommerce website and get green scores on Google PageSpeed \u200b\u200bInsights.

We have calculated for you: If your Woocommerce website earns $ 1,000 a day, then the one -second page delay may spend you $ 250,000 per year! Think about all investment of $ 250,000 … More importantly, look at the content we found on Google Blog. If the loading time exceeds three seconds, one -half of the visitors (potential buyers) will leave your store.

When facing a slower website, the user’s behavior on mobile devices. Source: Think with Google

It is not new to optimize the speed of e -commerce websites. As early as 2010, Google had added a new signal to their search ranking algorithms:

website speed.

This new KPI reflects the speed of website response to Web requests.

Where are we in 2022? Google continues to make the network better (faster) through recently launched Core Web Vitals, which has also become a ranking factor. These new network signals measure how users think of your webpage interaction experience, which will affect your WoOOCOMERCE website on Google. If your performance score is very low, Google will not like it. If your KPI is green, then your store will have more opportunities to appear on the homepage.

5 KPIs that measure the user experience. Source: Google Search Center

By optimizing your Core Web Vitals, you will increase the opportunity to climb the Google search engine ranking, so as Your online store attracts more traffic!

Fast speed \u003d better conversion \u003d more sales

123]

Now that we have already understood how to increase the conversion rate, reduce the jump rate, let you get a good ranking in the SERP, and let your visitors satisfy, let us see how to ensure that it is ensured

Your \u0026 nbsp;

How to speed up the speed of the Woocommerce website: 11 effective techniques

Increasing the speed of the website is an important aspect of any Woocommerce website. The following prompts are classified according to the high impact of performance. Some have a greater impact on your final performance scoring, but they all have one thing in common: you will accelerate your Woocommerce website by solving each problem. Let’s see some of the simple technologies you can follow to optimize performance and make your Woocommerce faster:

Select a good custody service provider

[123 ] Use http2 Use the cache plug -in Select a FAST WOOOCOMMERCE theme Reduce js execution time

Optimize your product picture

CSS optimization (CSS delivery optimization and deletion of unused CSS)

Deduction of pictures and videos Code optimization

Use content to deliver the network delivery to static resources

[[

[[[[

123] Database optimization

Reward: Don’t forget the core web vitals optimization!

Let us start with the technologies that have the greatest influence on the woocommerce page speed optimization.

1. Select a good custody service provider

9. Preferred: High

It contains image, text, photo library, video and onlinePayment content. All these functions need to be quickly presented on your website in a safe environment. Will you put your credit card details on a slow website that cannot stimulate confidence? I won’t.

First, you need to consider the speed of network hosting services. Secondly, what kind of customer support does the provider provide? The third is the last point. Are they safe?

Some of the strategies you need to look for are:

Check the normal running time score of the hosting (imagine that if your hosting makes you disappointed, you may lose sales). For example, the WP Engine e -commerce custody platform can help you increase the website speed by 40%and increase the average sales by 18%.

Server -level cache (configuration for WOOCOMMERCE).

Content delivery network (CDN), especially if you have international customers. Multiple data centers so that you can choose the location according to the location of the main client. They provide bandwidth and storage space for your products.

SSL certificate (you hope your online store is safe).

Automatic backup (for example, if an error is updated, you may want to roll back to the old version of the WordPress site.

Simple on -stage site, you can test your new product or new features before launching. . Automatically install woocommerce to make you start faster (some hosts, such as SiteGround pre -installed woocommerce).

Check the types of hosting they provided. For products with high traffic, you may need a special server. We have written an article to show the advantages and disadvantages of each type of hosting: sharing, dedicated, clouds, etc. This will help you make a choice. For more information for the correct hosting service for selection, please check our special guide on the best WordPress hosting of small enterprises.

Make sure your hosting service provider provides HTTP/2. Why?

]

This takes us to the next point: the extreme importance of http/2.

2. Use http/2

Priority: High

• http/2 may be possible This request to improve the page speed of your website. This can save bandwidth and speed upPage loading time.
• In the past, your browser must return to the server to get every resource. It is now picking up all resources and transferring them at the same time.
• CSS skills explain the difference between the two:

http/1 and http/ 2

3. Use the cache plug -in Priority: High

Caches It is a good way to accelerate the Woocommerce store. Loading time from the checkout page to the product detailed information page, this is something you need to run quickly and quickly. The cache improves performance by reducing time consumption, such as retrieving all storage information or generating a new copy for visitors of each request content. The best feature you should look for in the cache plug -in is mainly cache load, CSS and JS file optimization, delay loading of images and videos, GZIP compression, delayed possibilities of JavaScript loading, and optimized fonts. If you want to know what the best cache plug -in of Woocommerce is, you should look at WP Rocket. It has all necessary functions and cooperates well with Wooocommerce. WP Rocket 也在WooCommerce 的官方网站上：

[ 123] The compatibility of woocommerce and WP Rocket. Source: WOOCOMMERCE official website

Big car car

My account View

WP Rocket is easy to set and apply 80% of the best practice of Web performance. Don’t just believe in our words and roll to our speed test results, and look at the positive impact of WP Rocket on the WooCommerce website.

4. Select a fast woocommerce theme

Priority: High WoocoMmerce speed is the key to increasing the conversion rate and bringing more income to your website. The top WookMmerce theme can achieve or destroy the success of the store, and some of them have an incredible impact on the loading time. In order to help you find the topic that is most suitable for your needs, we used Lighthouse to view 10 fastest Woocommerce themes; the following are four winners who perform quickly:

123]

Block

Page Construction Framework

Neva

Astra

5. Reduce js execution time

Preferred: High If your JavaScript takes a long time to execute it for a long time to execute Then it will reduce your page performance. Google LightHouse will consider JS execution time when measuring your performance level. If your JavaScript executes more than two seconds, it will warn you. If you exceed 3.5 s, then you will get a dangerous signal:

JS diagnosis performed by Lighthouse. Source: webdeb

Tip : If you want to learn the four methods of the execution time of JS, we recommend reading this guide.

In order to reduce the execution time of JS, webdev shared three important techniques:

Reduce and compress your code.

Delete the unused JS code.

Reduce online travel through cache code.

These suggestions are part of the WP Rocket function. WP Rocket helps optimize your JS file in two ways: delayed JS resources (means that only when user interaction will load the JS file) and JS is loaded when only need.

File Optimization Tab – Js -WP Rocket instrument panel

Priority: High Always take your product photography carefully. The picture is an important part of establishing a successful e -commerce website because you want to persuade visitors to buy your product. However, you need to find proper balance between quality and size. 2 MB’s image looks good, but you will find that the speed score has been greatly affected.

The best solution is to optimize the image of each product, especially when you have galleries, promotion banners and various media in your online store. This means that they reduce their size, compress and convert them into the best format without affecting quality.

There are two ways to optimize your product pictures to accelerate your Woocommerce website:

Manual, use Adob \u200b\u200bE Photoshop, GIMP, PAINT.NET, Affinity Photo, etc. tool. However, some design software may be expensive or steep learning curves.

Automatically use online tools or plugins, such as Imagify, EWWW optimizer, Tinyjpg | Tinypng, etc. Take a look at our WordPress best image optimization plug -in list.

IMAGIFY was produced by the same team behind WP Rocket.我们制作了一个非常直观的插件，它使用三个级别自动压缩图像：

正常、 Radent and super strong. The plug -in provides 25 MB of images for free each month and converts all your photos into WebP, which is a new format that can speed up your website speed!

Use imagify to convert the image to a webp format

If you already put all the products all the products What should I do if the picture is uploaded to wordpress? Don’t worry -IMAGIFY can also optimize your existing WooCommerce product picture.

Now that we have already understood the factors that best affect your Woocommerce website speed, let’s take a look at the next suggestion (

will still affect medium level performance)

.

7. CSS optimization (CSS Delivery Optimization and Remov and Remove unusEd CSS)

Priority: Middle

Optimizing CSS can increase the speed of the Woocommerce website. This can be completed in two ways:

Delete the unused CSS (to reduce the page size and HTTP request to obtain better performance)

Optimize the delivery of CSS (eliminate The rendering blocking CSS on the website to speed up the loading time) as a solution, the WP Rocket plug -in provides these two options -you should choose one of them. We recommend optimizing CSS delivery (asynchronous loading CSS) to prevent you from deleting unused CSS functions. 无论哪种方式，您都可以通过单击下面的复选框来激活它们中的每一个：

[123 ] File optimization tab -CSS -WP Rocket instrument board

8. Delay loading of image and video

Priority: Medium

Another way to speed up the woocommerce website is to activate the delay of the image and video. Delay loading is a strategy of identifying non -blocking (non -critical) resources and loading these resources when needed.

The content of the first screen is preferred, but the presentation of the content below the first screen will be delayed. This optimization technology allows the image that the user is viewing first.

Google itself is recommended to use delay loading to \”delayed image outside the screen\”, as shown below:

Operating performance Opportunities after the audit (recommended delay loading). Source PSI

• To apply a delayed loading script on images and videos, you can manually complete the loading attribute:

\u0026 lt; img src \u003d \”image.jpg\” alt \”alt\” alt \”alt \u003d \”…\” Loading \u003d \”lazy\” \u0026 gt;

\u0026 lt; iframe src \u003d \”video-player.html\” title \u003d \”…\” loading \u003d \”lazy\” \u0026 gt; \u0026 lt;/iframe \u0026 gt;

If you don’t like to add labels manually on each picture, why not use a plug -in to complete? We planThere are 7 best delay loading WordPress plug -ins, you can use them to accelerate your Woocommerce website. If you want to avoid using other plug -ins, you can insist on using WP Rocket -it does provide a delay loading option:

Delay loading Options-WP Rocket instrument panel

Priority: Middle

Optimization of code optimization such as JavaScript and CSS reduction and file compression will accelerate your Woocommerce website. One of the biggest problems facing developers when creating HTML, CSS, and JS files is to maintain the readability of the code. They tend to use spacing, annotation and naming variables to maintain easy understanding. However, this does cause some problems because it takes up more space, which may be harmful in the loading time every millisecond.

As a solution, we listed the best CSS and JS reduction tools in the market.

If we summarize the guide, we will find two methods of compressed files and reduced code:

Manual (but be careful of this, if you use text editors to reduce the code, you can reduce the code, you use text editors to narrow the code, and you can reduce the code, and you use text editors to narrow the code, and you can reduce the code, and you can reduce the code, and you use text editors to reduce the code, and you should reduce the code, and you can reduce the code. Deleting a useful character may destroy your website).

WordPress plug -in automatically uses WP Rocket and other WordPress plug -ins. You only need to click a few times to reduce your CSS and JS code:

CSS and JS narrowing tab -wp rocket instrument board

10. Use content to deliver network delivery to static resources

Priority: Medium

CDN can be used to quickly deliver your content through the world’s server network. It will accelerate your Woocommerce website by presenting the content of your products and stores almost immediately. For example, if you have tourists in Bangkok in Miami, this is very important.

A solution for opening the box is to use RocketCDN because it is completely integrated with WP Rocket. If you have your own CDN, don’t worry, you can add your own:

[12]3]

11. Database optimization Priority: Low

Database optimization will not have much impact on your speed, but it is still recommended to keep it clean and optimized. In order to increase the speed of your Woocommerce website, you want to use all advantages: you may need to delete the old table left by some old plug -ins, or just reduce the database system response time.

Generally, you can run it manually or from your PHPMYADMIN panel. But similar, if you prefer to stay in the WordPress dashboard and use only one performance plug -in, we recommend that you use the WP Rocket database optimization option:

]

• Posts and comment cleaning parts (1/2-WP Rocket instrument board

]

Database cleaning part (2/2) – WP Rocket instrument board

If you want to speed up the website speed, those suitable for you are suitable for you The technology of the Woocommerce website is very important. Since June 2021, some KPIs have entered a performance game: Core Web Vitals. These indicators to measure Google’s page experience scores and will affect your SEO performance. Let us take a look in the next part What is the connection between performance and Core Web Vitals.

Reward: Don’t forget to optimize your core web vitals optimization If not improved Core Web Vitals indicator cannot really optimize performance.

The more user experience you provided, the higher your score. Your store will also have more opportunities to rank on the homepage of Google search results!

If you want to get a 90+ score on Pagespeed Insights, you should optimize the first input delay, maximum content drawing and cumulative layout shift.

You imagineDo Google PageSpeed \u200b\u200bInsights get green scores (90+)? Start using our WP Rocket plug -in immediately! It will automatically apply 80% of the best practice of Web performance.

In this section You will learn how to use WP Rocket to improve the Lighthouse performance score. We will conduct case research based on the real Woocommerce website (including products and payment gateways). The theme used is Storefront, WooCommerce official free theme, we have created a total of 16 products:

My product page excerpt — WooCommerce dashboard [[ 123]

You may want to read our guide, which explains how to test the performance and speed of WordPress first.

场景#1：测量我的WooCommerce 网站的速度——没有WP Rocket

[ 123] Let’s conduct speed test!

The level of lighthouse is 52/100 without any optimization.

The lighthouse grade of my Woocommerce website (mobile). Source: PSI

Most of my KPIs are orange and red. When you roll down the report page, we see that Lighthouse has marked some problems:

The diagnosis part after the operation review- Red and orange logos

In order to speed up your Woocommerce website speed, LightHouse recommends that we eliminate rendering obstacles, reduce unused CSS andJS, use GZIP compression on text and use cache. Will this sound the alarm? These are the WP Rocket features mentioned in this guide before.

See how WP Rocket affects scores and audit parts: This is exactly Scene 2. scene#2: Use WP Rocket to measure the speed of my Woocommerce website

Now let us activate WP Rocket and check the impact on performance on performance Essence I adjusted some options in the WP Rocket instrument board:

I optimized my JS and CSS

I have activated the delay of the image

the rest of the rest Technology (such as GZIP compression) is automatically applied by WP Rocket

The following is the result of the mobile device-

I almost want to rename the article \”How to use WP Rocket on PSI 100 points on PSI ! \”

My score from 52 to 99!

I use the new green score provided by WP Rocket for mobile devices. Source: PSI

Let’s take a look at the audit part of our adopted. Due to WP Rocket, all the problems marked before have disappeared:

The review part of WP Rocket is installed

Conclusion: Thanks to WP Rocket, I accelerated my Woocommerce website in less than 2 minutes to 99/100Wait a minute! You might think: \”The results on the desktop?\”. Well, the result is the same. Take a brief look at the table:

Scores without WP Rocket (on the desktop)

Use WP Rocket score (on the desktop) [123) [123) [123) ]

If your woocommerce What should I do if the website is slow?

(Our list)

If your woocommerce speed is very slow, you should first use tools such as PageSpeed \u200b\u200bInsights to test your website to determine the main problems And solve them accordingly, as we did in the scene#1.

There are still some things you should check immediately. Check out our performance list and easily repair your WooCommerce loading slowly: Use cache plugins like WP Rocket and CDN to load and deliver your content faster.

View heavy plug -in and WooCommerce scripts and styles. In addition, remember to use light -colored themes.

Install an image optimization plug -in like imagify, you will get a lighter image file without affecting the quality.

Delayed loading on your images and videos to show the content that only display the user viewed.

Upgrade your host to a fast host. Are you using the latest PHP version? Check your host panel.Take care of your core network vitality.

Most performance prompts are applicable immediately, especially if you decide to use plug -in to improve performance. Start as soon as possible!

Packing up

Your Woocommerce website does need speed to generate profits. No matter which type of product or service you sell online, if the customer sees the slow page of loading, they will leave without returning. In 2022, the user experience is everything.

Fortunately, some great technologies can help recover from the slow Woocommerce website. Most of them takes time to implement manually. This is why you should use performance plug -ins to achieve your goals.

For example, WP Rocket optimizes your code, cache your content, delay loading on your media, and optimize your database in several clicks. We also found that the plug -in can help you get green scores on Google PageSpeed \u200b\u200bInsights:

Use WP Rocket to score on mobile devices 99/100

123]

NoScore on the mobile device with WP Rocket 52/100

Do not risk losing potential customers, immediately start using it immediatelyWP Rocket to accelerate your WOOCOMMERCE store!

This article first appeared on the blog of

WP Rocket

, which was published here.

Author: