Let’s improve your eCommerce site speed.

The style of your website shouldn’t steal from its speed. You can have a beautiful and fast-loading eCommerce store.

In this article, we’ll cover some of the techniques we use every week at Anatta to develop beautiful eCommerce websites — that happen to be some of the fastest-loading websites on the internet.

On This Page: show

7 techniques to improve your eCommerce site speed

1. Server response time

This is also called TTFB (or Time to First Byte). When we open any webpage, the first request goes to the server. If the server is very slow — meaning it takes 1 to 2 seconds to respond — that’s costly for the browser. The minimum response time should be under 300 milliseconds.

How do you improve that? There are three things to consider:

Write optimized code with no loops or extra things happening on the server
Upgrade server hardware to have more memory or CPU
Optimize database queries and implement efficient caching strategies

2. Use a more performance optimized Javascript framework

For eCommerce websites, speed has a huge impact on the revenue and SEO. You must be mindful when you are choosing a frontend framework or libraries.

At Anatta, we use VueJS over reactJS or angularJS because it is lightweight, optimized, pleasant to write, and easy to learn.

3. Code splitting

Sending large JavaScript and CSS payloads significantly impacts the speed of your site. Instead of loading all the JavaScript and CSS as soon as the first page of your application is loaded, split your code into multiple pieces and pages and only load what’s necessary for the loaded page.

4. Responsive image

With responsive images, you let the browser choose the images based on the viewpoint of the person using the website (as opposed to using the same images for all the viewpoints).

If you’re opening a webpage on a larger screen, you need larger images. But you can get away with loading much smaller images when someone uses a smaller screen. So let the browser decide what images the browser needs based on the users screen size. This significantly reduces image network payload.

5. Lazy loading

When we open any page, lazy loading ensures all the images aren’t loading at once. Images are heavy in size and can have a big impact on site speed.

Lazy loading defers the loading of the images that are not immediately needed on the page. An image that isn’t visible to the user when the page loads is loaded later when the user scrolls and the image actually becomes visible. If the user never scrolls, an image that is not visible to the user never gets loaded.

6. Preload fonts and above-the-fold images

You can also improve your website’s load speed by preloading fonts and above-the-fold images. In this case, the browser prioritises certain elements of the page first, ensuring that the most important (or first) things on your website show up quickly.

7. Mobile-first approach

In eCommerce, more traffic is coming from mobile than ever before. It’s efficient to write code for mobile-first over desktop first.

Hope these techniques help you create a faster, more beautiful website. Good luck!