How To Build A Fast Loading WooCommerce Site (Beginner’s Guide)

3 Important Reasons Why Your WooCommerce Website Must Be Fast

Before discussing our tips on how to create an online store website using WooCommerce to load fast, we need to know why an eCommerce website “has to be fast”.

The following are some important factors:

1. Mobile Shopping. 54.4% of products purchased online using mobile. (Source: Dataportal)
2. Increase the conversion of sales. Speed of the website in seconds hits big famous online stores. (Source: Website Builder Expert)
3. Good for the SEO. Website loading (Largest Contenful Paint / LCP) is one of Google’s search signals for the page experience. (Source: Google)

For now, we are sure you understand and accept that the online shop you will create using WordPress and WooCommerce should load fast. 

Here are 7 proven tips you can apply to create an online store with optimal speed performance based on the experience we have made for our customers’ websites.

1. Use the right ‘lightweight’ WordPress theme

There are thousands of WordPress themes that support WooCommerce functionality. Choose a “lightweight” and well-coded theme. One of our favorite themes is the Blocksy theme developed by the Creative Themes team.

This WordPress theme is free and must activate the plugin companion to be able to optimize the WooCommerce functionality of this theme. The Blocksy companion plugin is freemium and comes in a package when the theme is installed. This free plugin already supports the basic WooCommerce functions. However, if you need more comprehensive online store features such as Quick View, Floating Cart, and others, you should upgrade to the premium Blocksy plugin.

2. Limit Your Fonts

To make the site design more attractive and professional, choosing a font is very important. But if you use too many font assets, it can slow down the website load.

Why do fonts affect site performance?

We must first understand the demand for assets on a website. To display a web page, your browser will call various elements from a server. In general, these elements such as HTML, CSS, JavaScript (JS), Fonts, Images, and others. These are the demand for assets.

Thus, a font-type file represents one asset request. Each file has a file size in kilobytes. And every file called by the browser takes time per millisecond depending on the size of the file and how fast the user’s internet connection is. An explanation of the asset demand can be found here.

Therefore, more font types are used on a site will affect the site’s loading time.

Font family vs font weight

People in general, including website designers, do not necessarily understand font optimization. It is not only the type of font name that affects the site’s performance, but also the thickness of the font. For example, Roboto font on Google Fonts. There are types of thin, light, regular, medium, bold and black thickness (weight). And there is also an italic version. Each font weight corresponds to 1 font file. This means that the Roboto font family has a total of 12 font files for normal and italic types. And that’s just one type of font. Do you need to use all of these files?

Important! To make your e-commerce site fast, limit the use of fonts.

– ThinkWeb

Our recommendation is to use 2 or a maximum of 3 types of fonts. This means only 3 font files.

Example of using 2 font files for a website:

• Playfair Display (Bold) font for headings (1 font file)
• Roboto (Regular) for body text (1 font file)

To learn more about optimizing fonts, visit this article.

Some tips to choose and use fonts for site performance:

1. Use text editor features in WordPress to achieve Italic or Bold effect. So, don’t upload or use the Italic & Bold version of the font file.
2. Just use WOFF2 files. This file type is supported by various modern browsers.
3. Better to upload the font files to your local hosting server. It is therefore not dependent on third-party connections. If you are using Google Fonts, to display the font, the browser will call Google’s servers. This will increase the load time of your website. Some modern WordPress themes, such as Blocksy, already have an ‘offloading Google font on your server’ feature. However, this feature is available only in the premium version.

3. Do not use slider/carousel in the hero section

Many of the e-commerce websites that we saw used the ‘Slider’ or ‘Carousel’ in the Hero section area (above the fold). Is it wrong? Certainly not. However, if you care about website speed, don’t do it.

Some reasons why don’t use the slider/carousel in the hero section:

1. JavaScript (JS) of a slider/carousel slows down the initial loading of the website. JS can’t delay if it is installed in the area above the fold. This will make the browser call a larger file so that initial loading takes longer on the user’s device
2. Poor for conversions. Instapage has written 6 things why image sliders are bad for conversions. Read the article here.
3. Doesn’t make you money. The article from CXL explains that the use of an image slider / carousel has a bad impact on the user experience.

If so, what elements should be in the hero section if we do not use a slider/carousel?

Best tips for optimizing the hero’s area to increase conversions:

1. Use killer copywriting headlines.
2. Use an image that can affect visitors’ emotions.
3. Use a CTA ‘killer’ button to persuade website visitors to act.

By applying these 3 components in the hero’s area, the demand for assets is less, which speeds up the initial load time faster. And in terms of converting the site becomes even more optimal.

Discover Talia Wolf‘s case study of how the GetUpLift team with Emotion Marketing was able to increase sales by 95%, including by optimizing the header area with the right image, a powerful headline, and a persuasive button text that moved the emotions of website visitors.

Disclaimer: I have no affiliation with Talia Wolf & GetUpLift. I know Talia when I watched the live webinar on an Elementor event. Her talk inspired me as I love any topic about conversion. And I found this article and could support the above tips.

4. Plan your ecommerce features (use selective plugins)

WordPress and WooCommerce have enormous ecosystems. You may have (almost) all the features to support your online store using plugins that you can find in the WordPress plugin repository.

There are many WordPress plugins that can enhance your WooCommerce features such as Wishlist features, Multi-Currency, Shipping Cost Calculator, Custom Payment, and much more.

But you need to remember that more and more plugins have the potential to weigh down your website. This may negatively impact website performance. Because not all plugins are built with clean and lightweight code. And even conflicts can occur between plugins or with the WordPress theme used.

Tips to choose a WordPress plugin for site performance:

1. List eCommerce features that can increase conversions.
2. Optimize the existing features provided by WordPress theme developers. Generally, you need to use the pro version to use the advanced features. However, its use becomes more secure because it is created by the same developer. For example, Blocksy Premium has provided WooCommerce extras such as Quick View, Floating Cart, Product Wishlist, and much more.
3. Choose a plugin created by a trusted developer that has good reviews and has been installed by many people. Usually, these plugins are more stable than newer plugins.

5. Use & optimize SVG icons

If you use icons, you can use icons with SVG file type. In addition to being lighter, the icon’s color is also sharper. Generally, icons containing 1 or 2 solid colors can use SVG.

Before uploading to the website, first, optimize it using an online tool such as SVGOMG. That’s very easy. Upload SVG file and then click the arrow icon down to download the optimized SVG file. There is no need to change any settings, just use the default settings.

6. Optimize image assets

If the products of your online store continue to grow, automatically images on the website will also continue to grow. If you or your team are not used to optimizing images before they’re uploaded to your website, then it is not surprising that your website’s performance will decline in the future.

All image assets for products, articles, hero banners, and others should be optimized in the first place.

3 Steps to optimize images:

1. Resize images according to the container requirements of the website. Find the required width and height of the image container by inspecting the element.
2. Compress images with online tools or design software. Our favorite online tool is Tiny JPG. This tool can compress both JPG and PNG file.
3. Rename image file names as planned (for SEO benefits).

7. Set up your caching plugin the right way

One of our favorite caching plugins is WP Rocket (WPR). WPR features also support WooCommerce sites. 

Check out the best settings to optimize your site with WP Rocket by watching this video:

Conclussion

By doing these 7 basics, your e-commerce site will be lighter and faster. In other words, you care about your website visitors. When visitors access your website using Internet data, your website can be viewed quickly and visitors can be more efficient in the use of Internet data.

The way to optimize each website may be different depending on the functionality that the website has. If you would like to consult us, please contact us through the contact page. We will immediately answer your questions.