Optimize the speed of your online store

This help article is about how you can work to optimize speed in an online store that uses the Rio or Santiago design templates.

Increased speed in your online store can have a positive effect on both the user experience and your store's digital visibility (SEO). In this article you will learn more about what you can do to optimize your online store based on your prerequisites so that you get the best online store possible.

PageSpeed

When we talk about pagespeed, or website speed if you like, it is important to remember that a good and effective online store is also about more than just pagespeed.

The number of content elements (images, scripts, customisations, banners, etc.), and whether these are optimized or not, will affect the speed and can thus give you a low pagespeed score. Please refer to Google's PageSpeed Insights to learn more about website speed.

Having a large online store with high turnover does not always mean having a fast online store. Several large online stores in Norway do not score particularly well on pagespeed. The reason for this may be that they simply prioritise other adaptations and measures that they believe are important to provide a good customer experience. Speed is therefore not something you should look at solely to give your customers a good experience. Then it is perhaps more important that you focus on how fast you can make the online store based on the functions you yourself think it is important to be good at.

Faster America template

Mystore.no has had a goal in the fall of 2020 to make the America template one of the fastest templates on the market. In this work, we have looked at how the various content elements in the template are presented and work together.

Among other things, we have identified redundant code that has been removed or changed. We have also worked on optimizing what content the template displays first, what is displayed in the first screen and quality assured that browsers are able to build this content in a correct and structured way.

Then we've also made a whole bunch of other slightly more technical adjustments. The principles we have worked by can be read more about on web.dev/vitals.

The preliminary results from the work we have put in are very positive. We have done tests, which for some of the online stores on the America template, show great progression towards a very good pagespeed score.

How You Can Make Your Online Store Faster

In order for you as a store to get the most out of the work we have done, we encourage everyone who uses the America template to take action. This includes, for example, images and other settings added under the template's design settings. 

Optimize images

Here's how you can optimize your images: 

1. Re size banner images as indicated in the design settings. If a banner allows you to add a separate size for mobile, use this. 

Example: 

2. Use jpeg or jpg instead of PNG. This applies above all to product images where there is no need for the use of PNG. 

3. Use compressor of photos to make them optimized. For example, you can use https://imagecompressor.com/ or https://tinypng.com

4. Use no more than 3 images for banner A slider. Keep in mind that some customers don't see more than the first one anyway. If you only have a banner, the page will load faster. 

5. If you have the "free shipping counter" set up in your store, this can help increase your site's loading speed. 

What settings should I enable in design preferences? 

There are several things and settings that can be used to make the online store faster. You can find some of these under Design settings > Advanced Settings > Speed Optimization. Here you will find different settings that can be activated. 

1. Enable "Enable theme optimization" under Design Settings > Advanced Settings > Speed Optimization. This setting restructures the code and gives you the new update. 

2. Enable "Use Native Lazy Load" and "Use lazy load on product box images" under Design Settings > Advanced Settings > Speed Optimization.