What Is Site Speed? & Is it Different from Page Speed?
Page speed is the time it takes to load a webpage completely. Site speed is the average of several webpages of a website.
Why Site Speed Is Important For An eCommerce Store?
I think you know the answer to this already but still, I will point out a few reasons to justify our quest to speeding our e-commerce website designed in WooCommerce
As per Google in 2018
Speed is now a leading page factor for Google Search and Ads
- Google introduced AMP (Accelerated Mobile Pages)
- Google switched to mobile-first indexing & prefers websites that are mobile-friendly
- They provided Page speed insights & Lighthouse tools to test & improve our site speed
- Statistics about Impact of Page Speed on User experience
- Website loading time affect your conversions & here is a nice infographic about it by Kissmetrics
- Google has announced that Page Experience Signals (that include Core Web Vitals) will be becoming a part of the Google ranking algorithm
Note: Page experience & site speed has already been one of the ranking factors of Google ranking algo & it is one of the many ranking factors. So, consult an SEO guy before obsessing over optimizing site speed.
Factors Used To Calculate Site Speed by Google
| Factors | Weightage |
|---|---|
| First Contentful Paint | 15% |
| Speed Index | 15% |
| Largest Contentful Paint | 25% |
| Time to Interactive | 15% |
| Total Blocking Time | 25% |
| Cumulative Layout Shift | 5% |
Tools To Measure Site Speed Of Your WooCommerce Website
There are many tools available online and each of them will give you different results. However, for us we need to care about Google Core Web Vitals, Mobile friendliness & User experience. Don’t ever try to score good scores on all the speed testing tools.
A gentle request: When designing or optimizing your site please seriously listen to the advice provided by the SEO expert.
So, let’s take a look at some of the tools you can use to measure the speed of your e-commerce site created with the help of WooCommerce & WordPress
Other tools for Speed Testing & Optimization
How To Speed up WooCommerce Website?
1. Use Good Web Hosting With Speed & Quality Support
A good web hosting provider is one of the most essential and one of the most basic things that you can ensure to have a good site speed. If you think that implementing other speed optimization tactics & using a low-quality web host will work then I must say you don’t exactly know how it all works. Have you ever heard of the term Time to first byte (TTFB) well this metric is used to check the overall responsiveness of your web server or network resources. So, let’s take a look at different types of hosting to ensure we get a minimum score of TTFb on our WooCommerce website.
Shared Hosting
The most basic and most affordable. Lots of websites crammed into a single server and low network resources. Good for beginners and websites which don’t get too much traffic. Although they can still handle a lot of traffic but when it comes to Real-time traffic the server response will let you down. if you have an e-commerce website then my suggestion is to not use shared web hosting. If you are still interested you can purchase shared hosting plans from Siteground, Bluehost, Hostinger, Hostgator, etc.
VPS Hosting (Unmanaged Hosting)
Virtual Private Server hosting gives you more power and control than shared hosting but fewer resources than dedicated hosting. Here you are your own boss and a VPS is like a small CPU dedicated to your site. So, it’s a small section of the server that you can use however you please. You will get good speed if you know how to optimize, manage and secure a server by yourselves. If you don’t have technical know-how then you will need to hire a server management guy. A VPS is costly than shared hosting but still affordable in comparison to managed hosting. You can get a VPS from companies like Digital Ocean, Vultr, Linode, etc.
Managed WordPress Hosting
This is an expensive yet reliable solution for e-commerce websites that may get a lot of traffic and want to maintain good site speed. They provide superb speed, good customer support & many other functionalities that makes managing your site very simple. They manage all the technical aspects of your server, website migration, caching, scaling, backups, CDN, etc. You can get managed web hosting from Kinsta, WPX hosting, etc.
Dedicated Server Hosting
This kind of hosting means that a whole server is dedicated to a single client and not shared with anyone in any manner. This specific hosting is required when your e-commerce website is very popular and gets a huge amount of traffic.
For starters, if you have an e-commerce website built with WooCommerce then you can get a managed VPS like Cloudways which is not so costly and easy to operate by a non-technical person.
2. Use CDN for Web Pages, Static Resources & Images
Good web hosting plays an important part in improving speed but it still can’t provide good speed in every geographic location. Suppose your e-commerce website is hosted on a server in the USA and you get traffic from different regions of the world. So, when a person from India or Africa tries to open your e-commerce store then your website server response will be prolonged due to network latency and time to first byte (TTFB).
To overcome this issue we CDN’s (Content Delivery Network) which are basically servers placed in different locations to cache static assets like images, HTML/CSS, javascript, etc. So, instead of requesting everything from your root server, the customer gets data fetched from the server nearest to his/her location. Some CDN’s can also cache dynamic assets of a website as well.
Some popular CDN’s that you can use
- Cloudflare
- Stackpath
- KeyCDn
- BunnyCDn
- Fastly
- Shortpixel (A WordPress plugin for images & Image CDN provider)
3. Compress & Optimize Images
Videos and images also impact the speed of a webpage. However, most webpages load videos on-demand and use lots of images to make the webpage look attractive. So, to improve steps optimize the images by
- Using properly scaled images
- Using image CDN like Shortpixel
- Use lazy load to load images only when necessary
- Compress and optimize using tools & plugins
- Use proper image formats like JPEG, PNG, SVG, WebP
Some image compression tools
Use Image Optimization plugins
4. Use a Speed Optimized WordPress WooCommerce Theme
Buying a premium fast WooCommerce compatible theme is one of the best things you can do for your e-commerce website speed.
- Choose a theme that is built for e-commerce
- Doesn’t rely on too many plugins
- Use Gutenberg blocks instead of Elementor, Beaver Builder, or any other page builder as they might increase bloat
- The theme must have good support
Some Popular WordPress Themes
Get a Custom Theme designed by a WordPress Developer: This one is my favorite but requires a very good WordPress theme developer and you also must have a good idea of what features you need to include and what to leave.
5. Optimize WooCommerce WordPress Settings for Less Bloat
- Use a plugin like WPS Hide Login to change the default login URL to something else: this prevents hackers and bots to try login and increase server load without any reason
- Disable Pingbacks & trackbacks: These aren’t relevant anymore and disabling them will reduce server overhead
- Break a long list of user comments in small chunks or disable them if not needed
- Disable product reviews if not useful to your e-commerce store
- Remove any theme or plugin that you are not going to use in the near future
6. Use Well Coded & Minimum Plugins for WooCommerce
- Use plugins that are essential
- Keep them updated & before updating take backup
- Use plugins that are compatible with your theme, other plugins, and hosting environment
- Use only those plugins which are well coded, have a good number of reviews, and are updated quite regularly
7. Increase Memory Limit in WordPress
The default memory limit set in WordPress is 32MB and that can cause errors. So, you can increase the PHP memory limit of your WordPress site by adding a code to your wp-config.php file.
a. Locate the wp-config.php in the WordPress root directory and add the below given code just before the line
/* That’s all, stop editing! Happy blogging. */
define( 'WP_MEMORY_LIMIT', '256M' );
b. Another option is to edit the PHP.ini file which is created by default and you can find it in the root directory of your web host provider.
Open the PHP.ini file change the line showing 64M to 256M: memory_limit = 256M
c. If you have access to the .htaccess file then you can increase the memory limit by adding
php_value memory_limit 256M
Or you can increase this limit via Cpanel as well. A lower memory limit often results in errors when using WooCommerce for an e-commerce website.
8. Remove Unnecessary Scripts and StyleSheets
Use Chrome developer tools to assess which scripts are loading unnecessarily on a webpage and how you can stop them from loading on each page. There are some plugins to do this but I suggest that a person who has experience in optimizing WordPress should be assigned this task. It requires trial and error but when optimized properly leads to improvement in site speed.
9. Use Caching for Server and Browser
Caching is a very basic yet effective tactic that reduces the need of reaching out to the server whenever a browser asks for a resource. Caching is simply storing resources temporarily so that when a subsequent request is made by the user we don’t have to ask the server for that specific resource.
Different Server-Side Caching
- Memcached
- Object Caching
- Varnish Cache
- Redis Cache
Plugins for Handling Caching
Note: When you implement caching always test your site’s design and functionality after flushing the cache.
10. Use Properly Configured NGINX or LiteSpeed Server
An NGINX or LiteSpeed Server is fare better in performance than an Apache server. This is why the NGINX server is often used as a load balancer for websites with a high amount of traffic. So, apart from a managed WordPress hosting you also need to carefully pick your server type as well.
11. Disable AJAX Cart Fragments
AJAX Cart Fragments is a feature in WooCommerce which lets it update the contents of shopping cart dynamically. For example, it updates the total amount in the cart instantly when a new product is added.
However, this script causes webpages to load a bit slower and increases overhead on the server. You can stop this particular script from running and here is a nice guide by Webnots for Ajax Cart Fragments or you can use a plugin to disable Ajax Cart Fragments.
12. Clean & Optimize WordPress & WooCommerce Database
The database of your WordPress website is what holds all the stuff. It holds all the data like posts, p0ages, categories, tags, themes, plugins, order details, inventory, etc. Over time a lot of data from uninstalled plugins, deleted users, and other tasks leave data that is not of any use and just increases the overall size of the database. This creates an issue because now WordPress takes a lot of time to execute simple queries. So, we need to clean up and optimize our site database from time to time. Here are few ways to clean up your WordPress DB.
Clean up Expired Transients
Transients are cached data with an expiry date and these accumulate over time and can be easily removed using a plugin.
Delete or Disable Old Revisions
WordPress has a feature that stores a copy of every post whenever you make any changes. These copies are called revisions. These post revisions are unnecessary and so you can do these three things about them.
- Delete old revisions with a plugin
- Limit the no of revisions stores to 2 or 3: This can be done by adding the below code to your wp-config.php file before the line where ABSPATH is defined.
define('WP_POST_REVISIONS', 3); - Or if not needed disable post revisions altogether
Clean Up Your Database Tables & Disable Features that Increases Load on the Database
Apart from removing redundant tables and data sometimes plugins like “Popular Products” and “Related Products” queries the database for each page and thus increasing the page load. So, you can turn these auto features of Woocommerce off and instead implement them manually via a plugin.
Here are the plugins that can help you clean up your WordPress database
Note: When making any changes to your database or updating PHP version or database ALWAYS TAKE BACKUP.. and my suggestion take daily backups if resources allow you to do so.
13. Update to The Latest Version of PHP & Database Software
This is one of the basics but keeping the core of your server software updated also leads to better speed and performance of your Woocomerce website. So, if possible update to the latest version of PHP and underlying database software. Here are the latest versions used by WordPress sites.
- PHP 7.4
- Maria DB 10
14. Minify & Use Gzip Compression
Minify HTML files, JavaScripts and use Gzip compression. Although, these are covered by most of the cache plugins. If not then implement them via .htaccess file. You can use Chrome dev tools to understand what needs to optimized for a blazing fast Woocommerce website.
15. Switch To HTTP/2 Protocol
The implementation of HTTP/2 protocol for your WooCommerce website will also play a part in improving the overall speed. And soon we will be seeing the implementation of the HTTP/3 protocol in the future.
16. Configure WordPress Heartbeat API Properly
The WordPress Heartbeat API maintains a connection between your browser and server by pinging every 15 to 60 seconds. This step is not necessary but you can use a plugin to increase the time interval between pings or disable the API.
Conclusion
I hope these tips may have helped you improve the speed of your WooCommerce website. Apart from these, a lot can be done but it requires the assistance of an experienced person. If I left something or maybe you want to add something to this post please let me know in the comments section.
