11 Ways to Optimize Your eCommerce Site for Speed
As an eCommerce business, optimizing your site performance should be one of your top priorities.
That’s because your conversions are directly affected by how quickly your pages load. Today’s consumers expect blazingly fast sites. If your online store is slow for any reason, you run the risk of losing customers and, ultimately, revenue.
In fact, you’ll lose 20% of your visitors if they experience a 3-second delay in page load time, says a 2016 study by the Aberdeen Group.
How fast is fast? On average, global retail websites operating in 2017 between Black Friday and January 3rd were visually complete and ready to use within 2.5 seconds, according to digital performance management firm Dynatrace.
Here are some key ways to ensure that your site is optimized for speed:
1. Limit Number of DNS Lookups
Every time your eCommerce site loads up, the browser needs to find the IP address that corresponds to your domain name. This is called a DNS (domain name system) lookup.
The browser needs to look up your main domain as well as any domains on your page that comes from an external source, such as a Twitter feed or an embedded YouTube video. Therefore, reducing the number of queries to external sources on your site will minimize different DNS lookups that the client needs to make, which could delay the initial loading of the page. Instead of hyperlinking to images, for example, you could host them on your server instead.
You could also look for a faster DNS provider, change the TTL (time-to-live) values to take advantage of DNS caching, or move as many resources as possible to a content delivery network (more on this later).
2. Invest In Better Web Hosting Lookups
Reliable, fast web hosting is a critical factor in your site’s speed. And not all web hosts are created equal. You’ll want to find a service that can handle large spikes in web traffic and transactions (such as during a big product launch or the Black Friday-to-CyberMonday period).
There’s no worse fate for an eCommerce site than to be inaccessible to visitors. A good hosting service will guarantee uptime of 99.5% or higher. A premium host will promise uptime as high as 99.99%.
Without question, you’ll want SSL certification and a dedicated IP address.
3. Compress Your Photos
Images make up 50-75% of your total website weight, yet surprisingly, about 45% of the top 100 eCommerce sites don’t bother to compress their images. They should and you should. You can opt for lossless compression that reduces your file size without cutting quality.
You should always set image dimensions in your code so the browser doesn’t need to wait for your image to fully render before moving onto other elements on the page. It will simply leave a box with the preset dimensions and keep working on loading the site.
Compress your images within Photoshop or use an image compressor such as TinyPNG or Kraken.io.
4. Prioritize Above-the-fold Loading
Since the top of your site will be the first thing that your visitors see, it makes sense to have anything “above the fold” load faster than the rest of the website. Another term for this process is lazing loading. It’s particularly helpful at speeding up single-page, image-heavy websites, which have become a popular design choice for many brands.
For instructions on how to enable lazy loading, go here.
5. Cache Your Page
Instead of forcing a user to download every component of every page on every visit, caching allows global elements to be cached by the browser so only new elements will be require a browser request.
Caching speeds up your loading time because page elements such as site-search indexes, catalogue information, user information, sidebar blocks, layout instructions, and translation files are stored by the browser. These elements typically stay the same on every page, so there’s no need for the browser to request these resources every time the visitor clicks to a new page.
To enable browser caching you need to edit your HTTP headers to set longer expiration times for certain types of files. Here are some recommendations from Google’s developers.
6. Reduce HTTP Requests
About 80% of website response time is devoted to downloading elements for the front end such as images, stylesheets, scripts, Flash elements, etc. Cutting down on the number of elements reduces the number of HTTP requests that are needed to fully render the page.
The easiest way to do this is just make your website simpler in design. But that’s not a viable option in many cases. You could use CSS sprites and image maps to combine multiple images into a single image and, hence, reduce the number of image requests. You could also combine all stylesheets into a single file, and combine all CSS into a single stylesheet as well.
7. Use Gzip Compression
When a visitor hits your site, a request is made to your server to deliver the files. It makes sense that the bigger the files, the longer it’s going to take to arrive at your browser.
Gzip compression allows your server to compress site files before returning them to the browser, drastically reducing the transfer time. In fact, gzip can cut the size of pages and stylesheets by 90%!
Compression is enabled via web server configuration. Each web server will have different instructions. Follow this Google tutorial for more details.
8. Leverage a Content Delivery Network
If you’re a global eCommerce business with visitors from all over the world, you definitely should be using a content delivery network to optimize your site’s performance. A CDN works by spreading server nodes around the globe so your site visitors can download cached resources at the nearest node to them, improving efficiency and cutting loading latency.
CDN providers boast larger network pipes, more servers located around the world, and network peering capabilities than you’re likely to have. Plus, they have dedicated teams who are constantly monitoring and optimizing their infrastructure.
Selecting the right CDN can be tricky. Start with this guide.
9. Minify Your Code
Follow these resources to clean your code and make it easier for browsers to render your page.
10. Use Asynchronous Loading
Follow this guide for a basic understanding of how to enable asynchronous loading.
11. Continually Monitor Your Site Speed
Lastly, we’ll end where we started: You need to make site performance a priority every single day. That means you need to be constantly monitoring your site for problems and looking for ways to optimize for speed and efficiency.
Google’s PageSpeed Insights offers a good tool to analyze your site speed on mobile and desktop.
Another excellent tool for examining site speed is available from Pingdom.
Remember that rule of thumb: For every second longer that it takes your site to load, you’ll lose 10% of your visitors. Ouch.