Caching, Indexing, and Optimization
Everyday millions of people browse the web, and as you work on your online store you’ll often see many ways that people talk about speeding up their websites.
But why does speed matter?
You should care about speed on your site for many reasons, but the main concerns of stores are abandonment & conversion rates.
Customers who see pages take too long to load will leave your website, without completing their purchase. Every second counts, even milliseconds can matter.
In a major study by Walmart, they found that every 1 second improvement increased conversion rate by up to 2%.
If your pages take 5 seconds longer than needed to load, that’s a potential 10% conversion rate (and all the revenue that comes with it) that you’re throwing down the drain.
If most businesses could work through a few changes to get an extra 10% of sales, most would love to do that. Customers are expecting sites to load in 5 seconds or less, and the lower you can get the better your results will be. If most of your clients are browsing on mobile, you may find that they’re even less forgiving. Major cloud server company Akamai found that for every second delay on mobile, conversions can fall by up to 20%.
Customers want to shop, and they want to shop now. Failing to meet their expectations will bring you abandoned carts, lower conversion rate, and lost revenue. So why run a slow site when you can have one that works?
The Basics
To get started, you’ll want to check the basics of how your site is setup.
- Identify your Weak Points
The main way to determine your site’s speed weak points is to focus on this: “What are the load times and sizes of the pages our customers visit?”
To determine that, ask yourself “What is the path that your customer takes?”
Do they visit the homepage before visiting categories, then go to a product to add it to the cart, then go to the cart, and then checkout? Okay, now how long does each one of those pages take? Identify the longest load times in that customer journey, or any other paths that are common for customers to take on your site.
Do you have a slow homepage? If so, you may find that customers get impatient trying to load massive slideshows, an endless page of fullscreen banners, slow YouTube embeds, and many more parts of the page that make your customer say “You know what? I’ll go somewhere else, I can buy the same stuff on that one other site that’s faster, easier to use, and nicer”.
Do you have custom features on the site that take too long to load? At that point, you may need to review the modules you have installed in Adobe Commerce, and if they’re having a significant speed impact by using inefficient methods to get the job done.
- Image Sizes & Formats
How are your images saved?
In web development, there’s a general rule that your pictures should only be as large as the space they occupy. That means if the biggest size they’ll ever be shown at is 1000 pixels wide, you should have the image be 1000 pixels wide. If you use an image straight from the camera, it may not be unusual for it to be 4000 or more pixels wide. While those are great for photography and image editing, they’re not great for web. Images need to be sized appropriately for the web, otherwise they’ll take much longer to load. An oversized image can easily add 1-3 seconds on your page’s load time, or more for the mobile data users.
Next, we come to image format. When saving your images, the ones that need transparency should be saved as PNGs, while the ones that don’t should be saved as JPGs. When we cover advanced topics we can talk about web optimized images more, but at this point you need to make sure that your images for use on the web are JPGs, unless they need to be transparent. JPGs are much smaller, and will be served faster than PNGs will, helping to save those seconds and milliseconds again.
- Use Videos Sparingly
Videos from YouTube, Vimeo, other sites, or self-hosted solutions can be great for a lot of reasons. But ask your developer to trace the load times of different parts of the page, and you’ll see that these add up. Adding several videos to the same page can ruin your speed scores, and they should be used wisely where they are the most important to show. If you add videos to pages where people never press the play button, they’re just spending extra time loading the page for no reason. Only use videos that are highly relevant to them.
- Indexing Behavior
Adobe Commerce has 2 settings for indexing behavior. You can take a look at these in Settings > Tools > Index Management.
Each index can update on save, or on schedule. Indexes are collections of data that are prepared in advance, so that customers can load that data faster. There’s a few ways to manage indexes, and that can help site speed.
Let’s take an example, the inventory index. If it’s set to “Update on Save”, then every time there’s a change to inventory, Adobe Commerce will rebuild that index. If you have 3 admins all making changes to product inventory, and a customer checking out with a product, you can potentially have 4 changes to inventory all happening at once. That means that the inventory index is triggered to update multiple times in quick succession.
That’s not ideal, “Update on Save” can waste your server resources on a reindex that is about to become invalid seconds later anyway, when the server keeps throwing out its work for the next change. On websites with more data, or frequent changes, this can add up to slow down the backend and frontend of the website.
Now let’s say the inventory index is set to “Update by Schedule”, that means it’ll update on a set routine. By default, Adobe Commerce checks every minute, but you can customize this in your server’s cron settings. When left on default, that means every minute the server will check its indexes, and start a reindex if there’s changes needed.
In our earlier case where 3 admins and a 1 customer all affected inventory at the same time, our system using “Update by Schedule” will wait. At the end of 1 minute, it’ll check, see all 4 changes, and reindex once to address all of them, saving your server resources, and having less impact on the customer’s browsing.
The Advanced
There are many advanced ways to speed up a website, and here’s a few common ones that help get the biggest gains.
- Lazy Loading
Lazy loading is a term used for when images, videos, or other content only load when they’re needed. Normally, when a webpage loads, the entire page loads all at once. However, when you lazy load some of the parts of the page, the images and videos lower in the page don’t load immediately. Those parts wait for the user to scroll down, then they load right before they’re needed. They can load when they’re still below the bottom of the user’s screen, so that they get a seamless experience.
Lazy loading lets your page look like it’s loading faster, because it’s made lower parts of the page load later when needed.
To implement this, you’ll need to adjust how Adobe Commerce loads assets on the site, and will need an extension to do this.
- Use a CDN
A CDN is a Content Delivery Network, that is made of a group of servers that all keep a copy of your images, site styles, scripts, and other files. These cache your assets so they can load faster.
Let’s say, for example, you have a site with servers based in Washington. Normally without a CDN, everyone in the world has to reach out to your servers in Washington to get all the contents of your page. This works for many sites, but we can make that faster.
Now let’s say you’re using a CDN. This CDN has servers all over the world. Now someone on the other side of the US in New York tries to view your site. The CDN has a server there, so the images, styles, and other frontend details are served by that closer CDN server. This speeds up the load time for them, and makes for a happier customer. The transactional data like the products being added to the cart still go through your servers, but the majority of web traffic is sped up by the CDN giving significant gains to your site speed and conversion rate.
If you have international customers, this can help even more. Now your customers on the other side of the world can have the same fast load times as everyone else, thanks to the CDN being close by.
- Optimize Your Images
Now, earlier we talked about having JPGs most of the time, and PNGs if you really need the transparency. With a CDN, you can go one step further, and automatically optimize them even further.
The original images of yours can be converted to another file type called “WEBP” by the CDN, and served to customers. These WEBPs are even faster to load, and look entirely the same.
What’s Next?
With these steps you should be able to speed up your website, save seconds of precious load time, increase conversion rate, and get more sales on your site.
If you’re looking for help with your store website, or even help to go through the steps in this article, we’d be happy to lend a hand. Reach out to us at https://www.binaryanvil.com/contact to let us know your project needs, and we’ll be able to help you build it right.
For Further Reading
Walmart Presentation:
Statistics compiled by Google:
Akamai’s state of online retail performance 2017:
More details on conversion rate:
Retina Displays, an exception to the image sizing rule:
JPG vs PNG sizing:
- https://mailchimp.com/resources/png-vs-jpg/
- https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html
Comments
Add new comment