WooCommerce slow page loading

If you are experiencing slow page loading on your WooCommerce website, there are several steps you can take to improve the performance. One common cause of slow loading is the excessive number of database queries made by WooCommerce. By optimizing these queries, you can significantly speed up your website.

To optimize WooCommerce database queries, you can use the pre_get_posts action hook to modify the query parameters before they are executed. By limiting the number of posts retrieved and specifying only the necessary fields, you can reduce the load on your database and improve page loading speed.

Here’s an example code snippet that demonstrates how to optimize WooCommerce database queries using the pre_get_posts action hook:

function wpsnippets_optimize_woocommerce_queries( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_post_type_archive( 'product' ) ) {
        $query->set( 'posts_per_page', 12 ); // Limit the number of products per page to 12
        $query->set( 'fields', 'ids' ); // Retrieve only the product IDs instead of full post objects
    }
}
add_action( 'pre_get_posts', 'wpsnippets_optimize_woocommerce_queries' );

In this code snippet, we check if the current query is the main query for a WooCommerce product archive page (is_post_type_archive( 'product' )). If it is, we modify the query parameters using the $query->set() method. We set the posts_per_page parameter to limit the number of products retrieved to 12, and the fields parameter to retrieve only the product IDs instead of full post objects. This reduces the amount of data fetched from the database, resulting in faster page loading.

You can place this code snippet in your theme’s functions.php file or in a custom plugin file. Remember to prefix the function name with wpsnippets_ to follow the WordPress coding standards.

By optimizing WooCommerce database queries, you can improve the performance of your website and reduce page loading times, providing a better user experience for your customers.

Examples

Example 1: Optimize image sizes in WooCommerce

This use case focuses on optimizing image sizes in WooCommerce to improve page loading speed. The code example demonstrates how to use the add_image_size() function to define custom image sizes and then regenerate the thumbnails using the Regenerate Thumbnails plugin.

// Define custom image sizes
function wpsnippets_custom_image_sizes() {
    add_image_size( 'woocommerce_thumbnail', 300, 300, true );
    add_image_size( 'woocommerce_single', 600, 600, true );
    add_image_size( 'woocommerce_gallery_thumbnail', 100, 100, true );
}
add_action( 'after_setup_theme', 'wpsnippets_custom_image_sizes' );

// Regenerate thumbnails
function wpsnippets_regenerate_thumbnails() {
    if ( class_exists( 'Regenerate_Thumbnails' ) ) {
        $regenerate = new Regenerate_Thumbnails();
        $regenerate->regenerate_all();
    }
}
add_action( 'init', 'wpsnippets_regenerate_thumbnails' );

Explanation: The code defines three custom image sizes for WooCommerce product thumbnails, single product images, and gallery thumbnails. The add_image_size() function is used to register these sizes. Then, the wpsnippets_regenerate_thumbnails() function is hooked to the init action to regenerate all the thumbnails using the Regenerate Thumbnails plugin.

Example 2: Enable lazy loading for product images

This use case demonstrates how to enable lazy loading for product images in WooCommerce, which can significantly improve page loading speed. The code example shows how to use the wp_lazy_loading_enabled filter to enable lazy loading for product images.

function wpsnippets_enable_lazy_loading( $default ) {
    if ( is_product() ) {
        return true;
    }
    return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'wpsnippets_enable_lazy_loading' );

Explanation: The code uses the wp_lazy_loading_enabled filter to conditionally enable lazy loading for product images. The wpsnippets_enable_lazy_loading() function checks if the current page is a product page using the is_product() function from WooCommerce. If it is, the function returns true to enable lazy loading; otherwise, it returns the default value.

Example 3: Minify and combine CSS and JS files

This use case focuses on optimizing CSS and JS files in WooCommerce by minifying and combining them. The code example demonstrates how to use the wp_enqueue_scripts action to enqueue minified and combined CSS and JS files.

function wpsnippets_enqueue_scripts() {
    wp_enqueue_style( 'woocommerce-style', get_stylesheet_directory_uri() . '/woocommerce.min.css' );
    wp_enqueue_script( 'woocommerce-script', get_stylesheet_directory_uri() . '/woocommerce.min.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_scripts' );

Explanation: The code uses the wp_enqueue_style() and wp_enqueue_script() functions to enqueue the minified and combined CSS and JS files for WooCommerce. The file paths are specified using the get_stylesheet_directory_uri() function, and the dependencies and version parameters are set accordingly. The true parameter in wp_enqueue_script() ensures the script is loaded in the footer for better performance.