Developer's Guide to E-Commerce Sites Speed OptimizationNovember 09, 2017
Killing it at e-commerce nowadays is... hard. Super hard.
Great offers, seamless checkout experiences, and visually appealing website designs aren’t enough anymore.
What's missing then?
It's a key factor that directly impacts e-commerce conversions and the revenue of online stores.
You need to optimize your e-commerce website for speed at a time when search engines themselves rank faster websites above slower ones. At that same time, audience's attention span is getting shorter by the day.
Just put yourself in customers' shoes for a second. Would you shop on a website, let alone go through its whole checkout process, if it takes forever to load?
I don't think so.
According to Google’s Matt Cutts, “Speeding up your website is a great thing to do in general. Visitors to your site will be happier (and might convert more or use your site more), and a faster web will be better for all.”
Interestingly, while there are several plugins and easy-to-setup CDNs allowing quick improvements to site load speeds, some meddling with code can also help you design super fast websites.
Being a developer myself, I felt like sharing a few tips for e-commerce website optimization. I'll cover:
- Testing & optimizing your e-commerce site with Google PageSpeed Insights
- Tools for image optimization
- Tips on CSS, page redirects & plugins for faster e-commerce
- SEO & mobile considerations
Editor's note: even if it's not discussed here, maybe you'll find the solution to your performance problems in using a modern static web platform. Here's Netlify co-founder Chris on the subject.
Analyze for speed optimization
The first question you might ask yourself is: "How do I know if I need to improve my website's performance?"
Different testing tools are available online to check your site’s speed, such as the well-known Google PageSpeed Insights, or the Pingdom Website Speed Test. Using these needs to be done periodically to proactively resolve potential issues.
If a page is taking more than 3 seconds to load, it very likely needs some love.
Google PageSpeed Insights analyzes the content of a web page and then generates suggestions to make that page faster.
Let’s take a look at how Ecommerce-Platforms.com fares:
Hmm.. looks like I need to optimize some stuff on my homepage! Let’s now take a look at what PageSpeed Insights asks me to do.
Notice how the tool tells you exactly what to do (see bolded text below ‘Leverage Browser Caching’)
This is why this tool is helpful for developers. I know that I just need to set the expiry date in the HTTP header to leverage browser caching.
Let’s take a look at the next issue:
I already use Cloudfront, but the tool tells me that I can do better with images. This means that I should be looking for an API to automate image compression or set up an image compression plugin. I'll present you some of them later.
And even better—it allows you to download the minified and compressed versions of images, JS, and any CSS resources!
And for the newbies out there, don’t use minification tools. Most minification tools won’t understand liquid tags used in themes of popular e-commerce platforms, and this could cause serious issues with the theme.
You can also make a list of the slow loading pages and optimize them individually.
Optimize your product page images
Images often account for most of the downloaded bytes on a page.
According to Google, “the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render content on the screen.”
Based on a report published in Kissmetrics, users on desktop computers are willing to wait up to five seconds for websites to display text and images, while mobile users wait only three seconds until they get fed up and leave.
Resizing and compressing images can vastly improve the page load times. You might have already heard about Mozilla MozJPEG that helps with lossless image compression.
Reducing image size also helps lowering the overall amount of data served to the customer, thus consuming less digital storage space on your hosting server.
While the PageSpeed Insights tool will point out huge sized images and provide recommendations to fix optimization issues, it’s always good to go with a more automated API option like Kraken, Optimus or ShortPixel.
And don't focus solely on product images—if you use static or dynamic banners on your online store, make sure they’re optimized.
Avoid page redirects
Now, I’d love to claim page redirects can be avoided altogether, but to be frank (and since I meddle in some e-commerce SEO), I can tell you that there will always be some redirects.
But here’s the thing:
Page redirects can increase HTTP requests and delay page loading. It may also result in multiple additional roundtrips to perform the DNS lookup, TCP handshake, and TLS negotiation. So minimize redirects on your site if you have to use them.
The Google Pagespeed Insights Tool can also point out nasty redirects for you.
If your site requires redirects, then
- Use HTTP redirection to keep the redirection consistent with the alternate URL specified in the page’s link rel="alternate" tag or in the Sitemap.
CSS delivery optimization
CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself.
For an enhanced CSS delivery to visitors, minimize the code size, as fewer lines of code can speed up the delivery of the site’s files to the requesting browsers.
Other recommended CSS delivery best practices include using only one external CSS style sheet, removing unused CSS and not using CSS in HTML such as H1 and DIV tags.
And here’s a pro tip on fonts: don’t use Google fonts.
While these are much better looking than our usual ones like Arial or Times New Roman, they’re almost always externally called, and this can result in speed drops because the browser now has to go call them from elsewhere.
Remove those unnecessary plugins & apps
If you use an e-commerce platform and have set up all those cool pop-ups and stuff, you’re likely guilty of this one.
And this is true for WordPress sites too. Installing too many plugins will slow down the loading time, as web browsers now have to load the plugin code. They can also increase the backup size and put an overwhelming amount of load on your server resources while backup files are being generated.
And what’s the best way to optimize for this?
Well, we can always selectively disable plugins, and then measure server performance to identify any plugins that harm your site speed. I usually just remove stuff that causes the speed to drop drastically and code something more lightweight to mimic the function.
Editor's note: you could also consider a full JAMstack set up to avoid traditional CMS pains. :)
I already touched on this a little, but I think it's worth repeating and emphasizing: speed is an important factor for search engine results.
Your website's performance is important at every level of client acquisition, from raising awareness to e-commerce conversions. Of course, you want to offer the best shopping experience and easy checkout, but customers first need to get to your store. You can't neglect these Google rankings in order to reach them.
In the same vein, Google is shifting to a mobile-first index, meaning that mobile performant websites are going to consistently get more SEO love.
The tools and tricks shown earlier will surely help with your mobile site speed as much as your desktop one, but you should always keep in mind to measure both regularly and improve accordingly.
So, here's your checklist for e-commerce speed optimization:
- Analyze your online store's speed.
- Identify different issues and fix them.
- Optimize your images (ideally with an automation API)
- Avoid page redirects (or do it correctly if required).
- Minimize your CSS code.
- Remove all unnecessary plugins & apps.
- Think mobile, always.
If you follow these simple steps, you and your client's customers will see a significant improvement in the overall experience on the site. Ultimately it will end up in more e-commerce conversions.
Psst: want to optimize your own development productivity? Check this guide out.
I guess the takeaway here is simply to not take your website's performance for granted. It will need your attention and your care to make sure it's always working efficiently. It should be an important part of your e-commerce conversion tactics.
Something I missed? I couldn't possibly have covered it all in here so feel free to jump in and to share your thoughts and experiences on the matter! If you've enjoyed this post, please take a second to share it on Twitter.