blog logo
thumbnail

Four Bulletproof Ways to Improve Your eCommerce Site Speed

Megan Majewski • April 18, 2016

Here’s a pop quiz for you: what percentage of viewers leave a website if it doesn’t load fast enough?

A) 15%
B) 25%
C) 40%

The answer is an astounding 40 percent of viewers leave a website if it doesn’t load fast enough. It doesn’t matter if your site is beautifully designed or if your site search works flawlessly. No one will stick around to enjoy those features unless your site loads fast.

As the focal point of good web design and user experience, site speed has a major impact on conversion rates and sales. Fast site speed also boosts SEO because search engines factor it into their ranking algorithms.

What Is Site Speed?

Site speed, page speed, page load, and site load all mean the same thing. These terms refer to how fast a web page, and all its content, downloads from hosting servers and displays on a screen. Anything slower than 400 milliseconds, approximately the blink of an eye, is considered slow. While it seems like the blink of an eye is pretty fast, when it comes to websites, 400 milliseconds, or 0.4 seconds, is definitely too slow.

If you have site speed problems, there are four things you should fix to improve your site’s page load times:

Use CSS Image Sprites

eCommerce sites have tons of images, each of which generates separate requests to the server. Too many server (HTTP) requests slow your page load times, so you need a technique to reduce the number of HTTP requests for images.

Using CSS image sprites does just that.

An image sprite is a single image that contains multiple images within it, sort of like a photo collage. Since it’s a single image, the page only sends one HTTP request but uses the image in many different places.

You can’t use sprites for product images, but you can use them for other graphics such as social media icons, brand logos, or call-to-action buttons. Instead of sending separate HTTP requests for each icon or logo, the page calls just the sprite, which contains all the icons in one place. Then using CSS, you only display on the screen the specific image you need.

To accomplish this you set the same background-image on multiple CSS classes. Then for each individual class, you set the background-position and dimensions to display a single portion of the sprite.

Use Page Caching

Another way to increase page speed is to use page caching. Page caching stores assets, such as images and logos, on your hard drive for quick retrieval. As we discovered earlier, every time a page loads it sends HTTP requests to the server for each asset. Page caching prevents repeated HTTP requests by making a copy of those assets and storing them locally on your hard drive. All your browser has to do is simply acquire the asset from the locally cached copy instead of the server.

You should use caching on web pages that customers visit most frequently, typically category pages, search results pages, product detail pages, and home pages. As a best practice, redirect pages should be fully cached.

Where shouldn’t you use page caching? Web pages specific to individual customers or ones that change often. For example, if you use a minicart, it should never be cached because it contains customer information that changes throughout the time they’re on your site.

In addition to caching full pages, you can also cache partial pages. Partial page cache works similarly to full page cache, except it only displays components of a web page dynamically as needed.

Separate HTML, JavaScript, and CSS

Using external files to store JavaScript and CSS reduces the size of the Document Object Model (DOM), which improves page load times. Including JavaScript inline can stall the browser when loading images or rendering pages because it forces the browser to stop, load, and interpret the scripts where they are. An added benefit is that it improves code readability. Your HTML markup will be plain and easier to understand without any embedded chunks of functionality or styles.

Concatenate and Minify CSS and JavaScript

If you separate JavaScript and CSS files you can apply another optimization technique, which is to concatenate and minify them. These techniques combine multiple CSS or JavaScript files into one, remove unnecessary white space and comments, and help speed resources caching using client-side cache headers.

Build Suite has tools for minifying code, but as a best practice this should be done during deployment. This is because it manipulates your code by inserting generated variable and function names and striping out unnecessary characters. When performed by a minifying tool, this can make your code much more difficult to update and debug.

Megan Majewski is an applications engineer intern in LYONSCG’s Ann Arbor office. She studies computer science at Wayne State University.


Megan Majewski

About the author

Megan Majewski

Subscribe to our blog

Let's discuss the next step in your commerce journey.

XSchedule a meeting