Optimize Theme
Last updated
Last updated
Even if you own a WooCommerce theme that is optimized in terms of code and page load speed, improper management can still result in slow performance and a site that doesn’t meet your expectations. Focusing on your website's speed is well worth the effort, but it doesn’t have to be time-consuming or complicated. Let’s take a look at some ways you can speed up your store:
Our themes offer a wide range of homepages, which can be imported with just one click. The homepages you import are fetched from our cloud to prevent excess code in the installation files. While you can import all the homepages to explore, we recommend carefully selecting the homepage you prefer when building your website. Importing multiple homepages at once can lead to unnecessary data buildup, which will undoubtedly affect your page loading speed.
Optimizing your images is a crucial step. Before uploading images (including banners, product photos, and other visuals used on your site), it's essential to compress them rather than uploading the original files. Compressing images slightly reduces their quality but significantly improves your website's load speed.
Please note that it’s unrealistic to expect both high-resolution images and fast loading times simultaneously. Unfortunately, you can’t have both. We recommend a few online services that you can use to compress your images:
If you use Photoshop as your export software, please use the "Save for Web" option, which helps adjust the image's file size.
Your software will usually allow you to toggle an image quality bar in order to find a happy medium between file size and image quality.
In Photoshop, you can view your image on a side-by-side screen where the original image is on the left, and the new saved image preview is on the right.
In the screenshot below, I’ve highlighted the image quality toggle bar. You’ll want to adjust the image to the lowest file size possible while keeping an eye out for image quality.
For more details, check out this step-by-step guide to image optimization from WooCommerce.
Video files are even heavier than images. By hosting them with a third party — like YouTube or Vimeo — you can take the weight of those files off of your website. If your homepage requires a video and you plan to host this video yourself, achieving optimal page load speed may be challenging. However, please make sure to crop your video to the appropriate size and shorten its duration for the best optimization. We recommend using Camtasia for video optimization.
Here are some online video compression services you can use. However, please be aware that the output quality after compression by these websites may not be optimal, so consider this when choosing your method.
A content delivery network (CDN) is a network of servers strategically distributed around the world. It takes the strain off of your host by downloading images, videos, and other assets from your site and serving them through its own network.
This is particularly useful for international stores. Let’s say that your website server is located in Seattle, Washington, but you have customers in England, China, and South Africa. Typically, your host would load your site from Seattle, no matter where shoppers are located. But a CDN loads your store from the server that’s closest to each individual customer. This means that everything loads quickly for all visitors, no matter where they’re located.
We highly recommend using KeyCDN service https://www.keycdn.com/
If your hosting service provides a CDN (Content Delivery Network) as part of its offering, you should consider using it if needed. Utilizing the CDN provided by your hosting service will be easier and better supported.
1) Used lightweight image format Webp:
By using WebP format images, you can save over half of the page weight without losing quality. To convert images to WebP format, you can use the Converter for Media plugin (Free)
2) Add Caching
Each time a visitor loads your online store, their browser has to download all the data from your site, which can be time-consuming. However, by enabling caching, their browser will store a copy of your content. This means that on subsequent visits, your site will load significantly faster.
We recommended combining these plugins:
Redis Cache: https://wordpress.org/plugins/wp-redis/
Nginx Helper: https://wordpress.org/plugins/nginx-helper/
Autoptimize: https://wordpress.org/plugins/autoptimize/
