Improve Store Performance

Speeding up your store is important for a good shopping experience as well as search engine optimization (SEO), and this can be accomplished in a number of ways. Some may be more applicable than others depending on your store.

For example, when a user opens your website, every HTTP request made will require a round trip to the server. The objects on the page (e.g., images or scripts) will delay the response time of your site, and if you are loading dozens of objects this delay can add up to several seconds. Reducing the number of requests your site is making is one (big) part of speeding up your site. Other things like image optimization and library hosting can also contribute.

You can improve the performance of your LemonStand store with the optimization methods outlined below.

Reduce CSS/JS Files

There are 2 main steps involved in reducing your CSS/JS files:

  1. Combine all CSS/JS files into a single file (concatenating)
  2. Minify

This can be done manually or with an integrated tool:

Manually

  • Open, combine all CSS files into one, and save.
  • Open, combine all JS files into one, and save.
  • Minify your combined file using an online tool such as: Gift of Speed CSS Compressor, Cleancss.com, JS Compress, Javascript Minifier
  • Reference the new combined/minified files in your header (for most themes, this is normally done in the layout-head partial).

With a Tool

Image Improvements

There are 3 parts to this section that we will go over.

1. Part of reducing image load time concerns your image sizes. Oversized images take longer to load than correctly sized ones. This means if you want a 500px wide image, resize your large, high-res 1600px wide image down to 500px to save your site some time.

2. The second part of image improvements has to do with server requests. As mentioned, every HTTP request your site makes takes time. A good way to reduce the load time for images is to use CSS Sprites. An image sprite is a collection of images put into a single image. CSS Sprites are often used for small graphics that persist throughout the site. Using CSS we can choose what part of the image to show. The easiest way to do this is with the background property:

background: url('../img/sprite-icons.png') no-repeat;
width: 50px;
height: 50px;

Here, we take a 50x50 px slice of the sprite-icons.png combined image. We then use the position to say where we want to take the image slice from:

background-position: 0px 50px;

This process can become tedious when done manually. Luckily if you use Node (Grunt or Gulp), Sprity is a very useful and efficient way of automating this process.

If you use Compass for your workflow, Spriting with Compass may better fit your needs.

3. A data URI is an encoded string that represents a file. Most often data URIs are used for small graphics that persist throughout the site, similar to CSS sprites, though they can be used for javascript and other resources. For this reason these methods are used in place of each other.
For example, you can use a data URI to specify a background image using CSS:

{ 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...) no-repeat;
}

Using a data URI removes the HTTP request out of your stores equation - the data is embedded in the store code. The drawback to this is that data URIs are not cached in user browsers, and will need to be downloaded each visit to your site.

Mobile users can really feel this drawback as they tend to be slow to decode data URIs. Be sure to test your speed in different browsers to check that this isn't having an overall negative impact.

Reduce Number of Plugins

Evaluate the plugins your site has. Plugins can bring a lot of functionality quickly and easily to your site. Just as easily, they can bring a lot of load time. Check out the delay these plugins are having on your page and make sure you really need them - you may find some small functionality can have a larger impact than expected.

Move Standard Libraries to Google's CDN

Google Hosted Libraries offers many of the standard libraries for everyone to use freely. If you're hosting jQuery or another standard library locally, your users must download it at least once when they first visit your site. When you use Google's CDN to serve the file, it's very possible they won't even need to download it. This is an easy optimization that most sites should use.

SSL Certification

Use a SSL Checker to make sure your store's SSL certificate was installed correctly. Bad certification can cause delays in your site's load time.