Speeding Up Your Store

When you’re running any sort of website, speed is important. But this is even more important with e-commerce where users are browsing pages, adding items to their cart, filling out checkout fields, and, most importantly, paying you.

To illustrate just how important this is, take a look at this statistic: 63% of shoppers bounce when page load times exceed 4 seconds (source: https://www.ecommercespeedhub.com/site-speed-standard-2022).

That’s over half of your audience! And if you’re not careful, your site can take much longer than 4 seconds to load.

Another statistic: a site that loads in 1 second has a conversion rate 3x higher than a site that loads in 5 seconds (source: https://packt.link/bPo2w).

Here’s a little math to illustrate this point: let’s say 10,000 people visit your website to buy a $50 product:

• A 1-second page load time at a 3.05% conversion rate results in $15,250
• A 2-second page load time...

Technical requirements

To use GTmetrix later in this chapter, you should sign up for a free account. You can do so here: https://gtmetrix.com.

Optimizing a website for performance can be a little technical so some website hosting companies will do some of the work. They might do the following:

• Automatically install plugins
• Use server-level technology to cache information
• Offer their own content delivery networks (CDNs) to make it faster to serve static assets such as JavaScript, CSS, and images

Because a website host could entirely change how you optimize your site you should wait to optimize your site until you’ve chosen a host and launched your site.

Furthermore, some website hosts will prevent some plugins that conflict with their own technology. As an example, my host, Pressable, prevents me from installing WP Fastest Cache because it already has technology that automatically caches my website.

You can typically find a list of disallowed plugins...

Monitoring speed and performance

Before we can start improving the performance of our site, we need to understand how fast our site is loading and where there might be opportunities for improvement. Without these tools, you’re just guessing what will speed up your store, and you’ll waste a lot of your time. You should also use these tools to track each change you make to ensure it actually speeds up your store.

In this book, we’re going to use GTmetrix. GTmetrix is a free tool that shows you exactly how fast your page loads and it also shows where any speed issues might come from. We’re going to create a baseline, test changes, look into waterfall data, and finally, set up periodic reports.

Since the first version of this book was published, PageSpeed Insights (https://pagespeed.web.dev/) has released a minimalistic yet powerful, and free, tool to monitor your page speed. You’re welcome to use this tool instead of GTmetrix, although later in...

Minifying CSS and JavaScript resources

One of the easiest ways to get a faster site is to minify your files. You can think of minification as similar to reducing the margins on a Word document. You can literally get more words on the page so it takes fewer pages to print. We do that with files such as CSS, JavaScript, and HTML.

There are a few tools that can do that for us:

• WP Rocket (https://wp-rocket.me) (paid)
• W3 Total Cache (https://wordpress.org/plugins/w3-total-cache/) (free)
• Autoptimize (https://wordpress.org/plugins/autoptimize/) (free)

And there are even more than this. There are loads of options to help speed up your site. We’re going to use Autoptimize because it’s straightforward to set up and there’s lots of room to customize advanced settings once you know what you’re doing.

Setting up Autoptimize

Let’s set up Autoptimize. Perform the following steps:

1. Log in to your site and navigate to Add Plugins...

Optimizing images

In the e-commerce world, it’s common to hear that you need high-quality photography to highlight your products. And that’s definitely true – you do need good imagery. However, you shouldn’t simply upload a 2 MB photo to your website. You need to optimize it so it’s as small as can be while still being high quality.

This reduces the total size of a page when someone views your product page. This will make your product page load much faster.

We’re going to look into two tools to help us do that: Jetpack and Imagify. First up, we’re going to optimize images with Jetpack.

Optimizing images with Jetpack

One of the more well-known tools, and also one that happens to be free, is Jetpack. We already installed Jetpack earlier in this book so it will be pretty easy for us to configure it. Perform the following steps:

1. In WordPress admin, click on Jetpack | Settings in the main menu.
2. Scroll down that page...

Caching and e-commerce

Browser caching allows you to speed up your website by storing files locally in the user’s browser. Essentially, browser caching stores files that don’t change very often. So the next time a visitor visits your home page, they’ll already have certain files, such as a logo, your style sheet, and simple elements such as the credit card icons in the footer of your site.

This doesn’t help the very first page someone visits, but it will help with each future page they visit on the site. We’re going to configure a caching plugin and discuss page caching and when you’d want to use it.

Configuring caching plugins

Let’s take advantage of some browser caching. To configure browser caching plugins, perform the following steps:

1. In your admin, under Add Plugins, search for WP Fastest Cache and click on Install Now:

Figure 9.23: WP Fastest Cache on WordPress.org

2. Install...

Optimizing content above the fold

On a typical product page, there are a half dozen images. And many of them are “below the fold.” The fold is a term from the newspaper industry where there was a literal fold. You wanted your best headlines and photos to be above the fold so everyone would see them.

In the following screenshot, you can see where my fold is on my laptop and what is considered above and below the fold:

Figure 9.25: Above the fold on my laptop

In the web world, we still use the fold terminology but we talk about it in different ways. And when it comes to optimization, we can “lazy load” our images. Lazy loading means we only download the image once the viewer starts scrolling down.

Prior to 2020, you had to use a plugin to lazy load images. However, as is always happening in the technology space, browsers have developed a standard to lazy load images (https://web.dev/articles/browser-level-image-lazy-loading...

Summary

Optimizing a site can be a full-time job. There are plenty of WordPress developers who do this for 40 hours a week, and if you really want to optimize your site, you can get a 100% score on GTmetrix.

But if you only want to spend an hour or two optimizing your site, you can still make huge gains and improvements. If you followed all of the advice in this chapter, you should have seen a pretty big speed improvement through GTmetrix.

In this chapter, you have learned how to monitor performance with GTmetrix, minify static files such as CSS and JavaScript, optimize images, and cache files on your site.

In the next chapter, we’re going to configure our theme.