Did you know that for every second a customer waits for your website to load reduces your conversion rate by 7%? Apart from that, you’ll also get 11% fewer page views and a 16% decrease in customer satisfaction.
Those numbers are hardly anything to boast about, and they’re all not that surprising. It’s like waiting in a long, and slow queue to pay for your groceries – nobody enjoys that. You can imagine how impatient we can be online.
So what can you do to make your e-commerce website load faster? In this post you’ll learn a few tricks that will speed up your website so you don’t lose out on additional sales.
Optimise images
Images can take up a lot of bytes on your website, which takes browsers time to download and leads to a slow page loading time.
To optimise your images, you’ll first want to resize them to reduce the file size. Of course you could use the original size, but you may have images that are 10MB large, which would dramatically decrease the speed of your page loading time.
Another thing to look into is to make sure you’re using the right image format. For the web, you’ll want your images to be in JPEG, PNG or GIF.
Which image format to use?
- JPEG: Ideal for images with lots of colours and gradients
- PNG: Perfect for when transparency is a must and for images such as logos
- GIF: Best for images with solid and limited colours. You can save it with a transparent background and can be used for short animations
Minify HTML,CSS & JavaScript
Another simple trick to speed up your e-commerce website is to minify your HTML, CSS and JavaScript. Minification is essentially removing all unnecessary characters, such as spaces, comments and code lines from the source code without changing its functionality.
If you’re including Javascript or CSS Files from external sources, make sure to check if there is a minified version available.
To help make things easier, you can use a Preprocessor to automate tasks like minifying.
Here are some tools to minify your code:
- CodeKit ($32; HTML, CSS & JavaScript)
- Will Peavy minifier (Free; HTML, CSS and JavaScript)
- CSS Minifier (Free; CSS)
Use Browser Caching
Whenever somebody visits your website for the first time, their browser needs to download all the data. With caching, the browser will store previously downloaded resources locally which reduces the size of data transferred over the network.
To leverage browser caching for faster loading speeds, you can set an expiry date or a maximum age in the HTTP headers for resources to be loaded locally.
For instance, you can instruct browsers to store images and stylesheet in its cache to make your web pages load faster.
Enable compression
Most modern browsers support gzip compression which is good news for your e-commerce website, as it can reduce the size of transferred response by a massive 90%! What compression does is that it can reduce the time required to download the files from your website and data usage for the browser. All of which significantly improves the time to first render of your web pages.
You can find gzip support in some content management systems where you would only need to enable it in the settings. However, it can also be added through an extension or plugin depending on the CMS you’re using.
Alternatively, you can use the code below (courtesy of the folks from Moz) and insert it into your .htaccess file.
# Compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
You can also compress certain file types with this extension:
<files *.html>
SetOutputFilter DEFLATE
Remove render-blocking JavaScript and CSS
Probably the last thing you want is to have your above the fold content delayed from rendering due to waiting for resources to load.
To ensure your above the fold content loads immediately, identify which resources are blocking the render. If the external resources are small, you can insert them directly into your HTML file (a.k.a. inlining) to speed up your load times.
However, if they’re large, simply inline the necessary resources so that it loads first.
For analysing your e-commerce website’s performance and for additional tips, Google’s PageSpeed Insights tool comes in very handy.
Another great tool to try is Pingdom, which lists all the HTTP requests and how long they take to load so you can identify your website’s bottlenecks.
What about you – how fast is your website?
[cta-variant1]
