WooCommerce-powered websites have advantages over Shopify and other e-commerce platforms because you can tweak and fine-tune your site to your needs.
Out of the box, your site can run fine. But your website visitors have a high bar for shopping. We know customers expect free, fast shipping and fast page load times, and detailed product photos and videos. We know this because you and everyone else expect the same.
There are seven steps you can do to make your WooCommerce website faster and increase WooCommerce speed:
Measure your site with GTMetrix and Google PageSpeed for more information
Before we get started, head over to GTMetrix.com and Google PageSpeed. Put your domain name in the box and get a free report of how your site performs. Both will give you a letter or number grade. This will tell you a lot of why your pages or WooCommerce are slow to load.
This score is your starting point and can be a great way to find images, scripts, styles, and more that are taking up the most time to load.
Write these scores, their load times, and page size down to compare against later.
Clean up your WooCommerce database, fragments, styles, and scripts
Most WordPress sites use WooCommerce in addition to all the other pages, blog posts, contact forms, return policies, and information your site needs to host. WooCommerce’s cart fragments are a small snippet of code that activates site-wide to keep the cart updated. This is handy because it does it through AJAX, meaning it doesn’t need to refresh the whole page. The downside is it loads on every single page. A person reading a blog post or your homepage probably doesn’t have anything to add to their cart. The cart fragments can add up to about 500KB or 1MB per page of bandwidth.
You can safely disable cart fragments by adding this function to your functions.php file:
/** Disable Ajax Call from WooCommerce */
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }
You should consider doing this if:
- Most of your website is informational pages or posts
- Customers are unlikely to add more than a few items to their cart on any product page
- You’re looking for every byte of performance
You can go further by adding this script to your functions.php file to prevent WooCommerce’s 3 default stylesheets from loading on non-WooCommerce pages:
if ( function_exists( ‘is_woocommerce’ ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
remove_action(‘wp_enqueue_scripts’, [WC_Frontend_Scripts::class, ‘load_scripts’]);
remove_action(‘wp_print_scripts’, [WC_Frontend_Scripts::class, ‘localize_printed_scripts’], 5);
remove_action(‘wp_print_footer_scripts’, [WC_Frontend_Scripts::class, ‘localize_printed_scripts’], 5);
}
}
add_action(‘wp_enqueue_scripts’,’wpb_load_woocommerce’);
function wpb_load_woocommerce() {
if( is_page(array( ‘shop’, ‘cart’, ‘checkout’ ) ) or ‘product’ == get_post_type() ) {
wp_enqueue_style( ‘wpb-woo’, get_stylesheet_directory_uri() . ‘/css/woocommerce.css’, ”, ‘3′, ‘all’);
}
}add_action( ‘wp_enqueue_scripts’, ‘wp_enqueue_woocommerce_style’ );
function wp_enqueue_woocommerce_style(){
wp_register_style( ‘mytheme-woocommerce’, get_stylesheet_directory_uri() . ‘/css/woocommerce.css’ );
if ( class_exists( ‘woocommerce’ ) ) {
wp_enqueue_style( ‘mytheme-woocommerce’ );
}
}
// Remove each style one by one
add_filter( ‘woocommerce_enqueue_styles’, ‘jk_dequeue_styles’ );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles[‘woocommerce-general’] ); // Remove the gloss
unset( $enqueue_styles[‘woocommerce-layout’] ); // Remove the layout
unset( $enqueue_styles[‘woocommerce-smallscreen’] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( ‘woocommerce_enqueue_styles’, ‘__return_false’ );
You can also disable WooCommerce scripts, which includes a lot of jQuery elements, by using this script:
/**
* Optimize WooCommerce Scripts
* Remove WooCommerce Generator tag, styles, and scripts from non WooCommerce pages.
*/
add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );
function child_manage_woocommerce_styles() {
//remove generator meta tag
remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
//first check that woo exists to prevent fatal errors
if ( function_exists( 'is_woocommerce' ) ) {
//dequeue scripts and styles
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}
Optimize your product images
This is widely known to every website manager who runs an online store. You can’t just upload photos straight off your phone or DSLR camera. The images are too big. For a WooCommerce store, images will always be among the most bandwidth-gobbling parts of the page.
WooCommerce preview images are almost always square. 1200x1200px is perfectly adequate for most stores. Taking an image straight off your phone is likely 3x larger than they need to be. This doesn’t improve anything for the customer. It just slows them down. And mobile users will eat through their data plans loading images that are 3-4MB when they could be under 1MB. That’s not just bad for customers, it’s also rude and costs you and customers money!
You can automatically optimize your images using a service like ShortPixel. It’s not free, but it’s worth the price. For most stores, $10 will get you enough credits to fix all of your images.
As a bonus, it’ll optimize every image in your WordPress media library, not just store photos. Enable the “make .webp” (pronounced like “weppy”) and all of your JPGs will become this new format. As of 2020, every major desktop and mobile browser supports .webp. They’re indiscernible from JPGs, have a smaller file size, and a single checkbox in ShortPixel’s settings will convert almost all of your images automatically.
Increase or improve your website’s server resources
If you’re using a shared hosting provider with legacy technology, like GoDaddy or Hostgator, you should move. The prices are cheap for a reason. The single best money you can spend is on solid WordPress hosting. Better hosting and hosting plans mean everything loads faster.
Modern next-generation hosting providers like Convesio can improve a website’s performance by doing almost no other work by 150%. Hosting with Convesio also opens up our new Pro Services. Meaning we can migrate your site, measure the results before and after, and help you optimize your site using the items shared in this guide, all automatically.
Convesio’s platform scales automatically, so you don’t need to mess with memory limits, storage, or other arbitrary technical measures. Hosting with Convesio is as straightforward as publishing a blog post or new product to your WooCommerce site.
Short of that, if you want to free up some database resources head into Your WooCommerce Settings > Tools > and “Clear customer sessions”. Do this before the holiday rush. Likewise, clear the WooCommerce Transients and Expired Transients cache, too. This will flush out old carts that have expired and customer sessions that never converted into paying customers.
Take a hard look at your website’s third-party scripts
We see this a lot when clients ask about improving website speed. A glance at GTMetrix or Google PageSpeed shows dismal scores. Often the top suggestion is “Remove third-party scripts”.
Those third-party scripts include Google Analytics, the Facebook Pixel, ad networks, and ad trackers, Twitter widgets, Facebook widgets, and other social media add-ons.
The truth is almost no one clicks on those “Share this page” widgets. You can verify this yourself using services like HotJar (temporarily, since it’s also a third-party script) to record users anonymously. Twitter streams, Facebook “Like this page” boxes, and other widgets add a lot of bloats. If you want to encourage users to Follow or Like you, consider a simple widget or block that uses an image, some CSS, and a little text with a link to your profile.
If you’re not using the Facebook Pixel, maybe because you tried it once and haven’t come back to it since, consider removing it. You can always add it back later.
Google Analytics is likely still important to your business, but if you’re not using Google Tag Manager to install the script, you should. The new method promises reduced script usage and improved load times.
Your internal plugins may also be running heavy scripts that do nothing but slow sites down. Some common ones include:
- Broken link checkers that run automatically every few hours or days
- Event calendar plugins
- Site builders like Divi, Elementor, and Beaver Builder (handy, but they have tradeoffs!)
- AdSense and other ad network plugins
Use a solid site and platform caching plugin
Your website host may already have built-in caching. Convesio does and the performance gains can be as much as 2-3x faster. But you can also run a local caching plugin like WP Fastest Cache or WP Rocket. WP Rocket is $49, but it’s well worth it and we often include it as part of our Pro Services optimizations (free of charge).
Configuring WP Rocket is almost automatic during setup. Just be sure to test your site before, during, and after setting up in a private window so you see your site how users are likely to see it. Things like “defer Javascript” and “Minify scripts” can cause your site to break.
