WPO for WooCommerce + WordPress Online Stores

In this article, I am going to detail some things that I have explained in the presentation entitled "WPO in WordPress + WooCommerce online stores" at DMD Galicia 2016 held this October 15, 2016, in Santiago de Compostela, organized by Windup Strategies and by us.

Even though my presentation was quite short because I was tired by all the organization of the event (what a week…), I talked about improving the loading speed and consumption of resources in WooCommerce + WordPress.

In this article, I will try to capture certain concepts that were discussed in the presentation, point by point.

You can see the table of contents below:

This is not the first article where we talk about how to optimize WooCommerce, also our Woocommerce hosting plans are fully compatible and functional with WooCommerce.

Before starting, I leave here the presentation published on Slideshare, it is the one used in the presentation of the Digital Marketing Day Galicia 2016 about WPO for WooCommerce.

1 - Speaking of WordPress ...

We started talking about WordPress, especially statistical data since WordPress is currently used by 26.8% of all the websites in the world, and among the websites created with a CMS, it is not far behind, with a 58.8% share market over other CMS.

Being a CMS so widely used, it makes many developers dedicate themselves to creating plugins and themes with which to increase the functionality of the CMS and achieve much easier and faster customization without the need for too much technical knowledge, adapting what was initially a system to create blogs in a system adaptable to any type of web project that we want to develop.

WooCommerce is one of the most important and great plugins for WordPress, it turns WordPress into an online store for any product or service you want to sell

2 - Speaking of WooCommerce ...

In 2015 29% of Internet online stores were made with WooCommerce, a year has passed, and in 2016 39% of online stores are created with WooCommerce.

I would dare to say that WooCommerce is one of the most used plugins for WordPress, but I also have to say that it is one of the most complex and extensible that I have come across so far.

Although WooCommerce turns WordPress into a completely different system, it is still WordPress, but with more functionalities, which can make WordPress installation very slow, and even more, if we load plugins to increase WooCommerce functionalities even more.

3 - And now we are going to talk about WPO and eCommerce ...

Now is where we begin to enter in terms of optimization and loading speed, the theoretical data is very useful, but in practice we must bear in mind that an online store has to load as quickly as possible to offer users an excellent experience when buying, browsing, consuming content, etc ...

We do not say this above, since in 2008 Amazon published its study based on its customers where it indicated that a delay of 0.1 seconds (100 ms) in the loading of its website could reduce sales by 1%.

We are talking about Amazon, an online store with a very large critical mass for tests, in smaller online stores it is very difficult to apply the same rule of thumb.

What we must bear in mind is that the client is not understanding, he will not wait, moreover, even if he is accessing from a bad connection, he will blame your store for slow loading even though he is not really to blame . and it will go to the next search result.

3.1 - We continue with WPO and WooCommerce ...

Before continuing to delve into WooCommerce optimization, let's clarify some interesting concepts about WordPress :

• The basic WordPress installation (without plugins) is very light and consumes almost no resources, so the loading speed should be very fast.

• The complex themes and complex plugins add many features and as in the case of WooCommerce, convert the CMS into something completely different, but we must bear in mind that the resource consumption platform also increases and also the load times are slowed to the have to process and load many more elements and functions.

• WooCommerce is a very complex plugin and normally the themes prepared for WooCommerce are also very complex, radically increasing resource consumption when using features such as the WordPress Heartbeat API, which allows the use of AJAX in WordPress.

• Installation of WordPress + WooCommerce with 20 plugins where 10 of those plugins are specific to improve and increase WooCommerce functionalities translates into a slow, heavy WordPress installation with consumption of resources that in most cases can reach stop being profitable for the owner of the online store.

• The architecture of the online store, the number of products per “list” or category, and the organization of the categories can contribute to improving or damaging the performance of the online store (resource consumption and loading speed ).

• When creating an online store it is important to put the blog in a subdirectory such as / blog, but we must also consider the possibility of using a separate WordPress installation to save many of the PHP functions that WooCommerce brings to WordPress and that in most of the cases are not necessary on the blog.

4 - And what can we do to speed up WooCommerce?

To speed up a WordPress + WooCommerce online store we are going to take into account these 4 important points.

One could go a lot in depth in the optimization of WooCommerce, and even if we are somewhat more skilled with the code we can filter which functions are loaded depending on the area of the web, but in a 30-minute presentation on WPO for WooCommerce, there was not given time to more.

The points detailed in the presentation were these:

• Implement a page cache system (taking into account the necessary exclusions for a WooCommerce online store ).

• Implement a database cache (taking into account the necessary exclusions for a WooCommerce online store ).

• Control the operation of the WordPress Heartbeat API ( admin-ajax.php ) since it is usually the biggest problem for 99% of online stores created with WooCommerce...

Next, we are going to detail these points previously commented.

4.1 - Page cache? 

The page cache system is always the main method to optimize WordPress and achieve a faster loading speed at the same time that we radically reduce the consumption of resources.

Although the page cache system is the most widely used method, in most cases it is not configured well or the appropriate option is not chosen, so the page cache system may not be effective.

A page caching system is effective when it always maintains a cached version of the web, but at the same time, the cache purge is done at the exact time to have the minimum impact on the overall performance of the website and the server.

4.2 - Cache of queries to the DB? 

WordPress, like WooCommerce, saves all the data related to the website in the MySQL database (except images and static files).

In normal conditions, when a visitor accesses the website, if there is no type of cache, the queries are made directly to the database and that generates a high consumption of resources and a time necessary for the query where the request is waiting.

If we cache the queries made to the database we will obtain INSTANT results and without the high consumption of resources, but we must also bear in mind that not all queries can be cached.

A cache of queries to the database is noticeable when a page cache is not applied, that is, in the pages where there is no cache ahead.

In WooCommerce, for the query cache to be effective and not be a problem for users' buying sessions, we must add some queries to the list of exclusions, specifically those related to the "_wc_session_" class.

In WordPress we can implement the query cache to the database with the following plugins:

• W3 Total Cache: As we have said before, W3 Total Cache is an optimization suite for WordPress, its cache of queries to the database is very effective on the front-end and also allows to save the cache in systems.

• NextLevel Cache: It is a plugin that has been in BETA for a long time, it is quite rudimentary, but it more or less works.

• DB Cache Reloaded Fix: It has not been updated for a while, but it has a good exclusion system and is quite effective.

4.3 - The WordPress Heartbeat API and its p…

We have already talked on this blog about the WordPress Heartbeat API or the admin-ajax.php.

The Heartbeat API is one of the parts of WordPress that consumes the most resources and slows down the load the most.

The Heartbeat API through the admin-ajax.php file (to which calls are made) allows the WordPress installation to communicate in real-time with the browser without having to reload the page.

In pages or parts of the web where the Heartbeat API is used, by default requests are made continuously every 15 seconds to admin-ajax.php.

WooCommerce is one of the WordPress plugins that use the Heartbeat API the most, but it is also that when we use complex plugins or themes for WooCommerce, the use of the Heartbeat API is even more intense.

In the image above you can see how Pingdom Tools can be used to detect if admin-ajax.php takes a long time to load and causes delays.

How can we troubleshoot the admin-ajax.php?

• The overload problems caused by the Heartbeat API can come from the theme or the plugins, if the problem is important it is advisable to check all the plugins and the theme using the discard or debug technique to detect the problem.

• We can increase the time between Heartbeat pulses or directly deactivate the Heartbeat pulses, but if we do the latter we must bear in mind that we can damage important functionalities of the website.

• There are plugins like Heartbeat Control that help us configure the operation of the WordPress Heartbeat API according to the needs of our website, but it is we who must have an idea of which plugins and themes use Heartbeat and to what extent. 

4.4 - What else can we do to optimize WooCommerce?

There are more things we can do to optimize WooCommerce and WordPress, they are generally things that we can do to optimize any type of website regardless of the platform with which it has been created.

• Optimize images: This is something we have already talked about several times in this blog, in this article, and in this other, I think it is one of the best and simplest things we can do to improve the loading speed and at the same time save bandwidth used.

• Implement a good CDN: We have also talked about this several times on this blog we have written a complete guide to choosing a good CDN for your website. We normally recommend CDN77, KeyCDN, or Cloudflare.

• Minify and combine CSS and Javascript: This is quite a swampy terrain since the level of implementation of these techniques varies a lot depending on the theme and plugins used, but it is possible to do it with plugins from WordPress, we normally use W3 Total Cache, WP Rocket o Autoptimize to apply this technique.

• Deactivate query strings: This can be done with a function from the functions.php of the active theme, it is a simple procedure and what it does is that it allows the active cache system or the active CDN to cache elements that in other conditions are not cached when loaded with query strings.

• Asynchronous loading of javascript: This is a very battered issue, it is given too much importance, it does not improve the loading speed much, but to the eye of the visitor it seems that the web loads earlier by waiting for the end of the loading process to load the javascript.

• Object cache: Sometimes an object cache can complement the page cache and the query cache to the MySQL database, in WordPress we can cache objects with EM Object Cache or with W3 Total Cache.