One of the most common support requests we receive from our customers is how to improve the speed and shorten loading times on their sites.  They will typically run their site through a speed testing tool, such as  Google Page Speed Insights, which is designed to give webmasters insight into how to improve the speed at which their pages load.  The results will come back with lots of warnings and suggestions to improve, and the bewildered customer will contact us for help.  This article is designed to explain how our themes (and Shopify in general) work in relation to these tools, and how you can optimize the speed of your Shopify site.

A little background

First and foremost, we at Mile High Themes have gone to great lengths to make our themes as lean and fast-loading as possible. Doing so is actually a requirement of being listed in Shopify's extremely stringent theme store. We know that long loading times can hurt conversions and turn away customers. We take this very seriously.

While it's true that there will always be ways to squeeze out a few milliseconds from a page load, a lot of the suggestions made by tools like the aforementioned Google Page Speed Insights are not feasible (or indeed helpful) with the way Shopify operates and how the code is organized. Below you fill find some frequent suggestions that these tools make and our responses to them.

Suggestion 1: Minify CSS/JS files

One of the first suggestions that Google Page Speed Insights makes to improve load times is to "minify" CSS/JS files in the theme. Essentially, what this means is that you open any of the theme's files and remove any extra spaces or formatting in the code. The end result will essentially be one huge paragraph of jumbled code all smashed together. While this will indeed save you a few bytes of data in each file, it will also make the files nearly impossible to edit (if you find the need to do so), and also very difficult to upgrade to a new version later.

If you've ever looked at the code in our themes, they will be properly nested and easy to read. We feel that this is important to maintain as many of our customers need to make small modifications or install apps to their stores that require code changes. The small file savings achieved by "minifying" this is negligible and not worth the problems it can cause later if not done properly. Imagine if you minify the code in all your files and realize that your site is suddenly completely broken because you accidentally deleted a single character from the code. This is a very real possibility when performing a task such as this. In our eyes, this is not worth the risk and inconvenience later.

Suggestion 2: Eliminate render-blocking JavaScript and CSS in above-the-fold content

This one is also quite tricky to tackle with Shopify themes. Without getting too technical, this is referring to having bits of JavaScript or CSS code that are loaded outside the main stylesheet or JS file of the theme. In an ideal world, all the site's CSS and JavaScript code would be located in a single file -- one each for CSS and JS. This works great for static websites that consist of simple HTML pages, images, and other code files, but it does not work with more dynamic sites, such as a Shopify theme.

A Shopify theme consists of multiple files working together. There is a master file, called theme.liquid that controls the outer "skin" of every page within a Shopify site. Then, there are templates, which control the layout and main content of the different types of pages (Collections, Products, Pages, Blog Posts, etc.). Within these templates are snippets, which are reusable bits of code that might be used in multiple areas of the site, or are just created to serve a simple purpose.

To give you an example, let's say you had a shipping calculator on your shopping cart page. This type of functionality doesn't just work on its own -- there is a lot of JavaScript code behind it to make it work. If we followed the suggestions of the Google Insights tool, we would place all this heavy JavaScript code in our main JS file for the entire site. The problem is, this shipping calculator is only needed on the cart page, and if we have it loaded into our main JS file, our home page and other pages of our site will suffer because of the extra time needed to load this script that is only needed on our cart page. Therefore, in Shopify themes, we utilize snippets of code to piece together pages and load content only when it's necessary. So in essence, we are actually saving load times by only loading assets that are needed on the individual pages that need them. This occasionally requires us to add bits of JS and CSS code in the middle of pages that would be considered "above the fold." As I've explained, this "suggestion" does not take into account the full picture.

In our themes, we go to great lengths to avoid having the CSS and JS code loaded above-the-fold, but this simply isn't always possible (or even the best idea) with Shopify themes. It is better to load the content above-the-fold only when it's needed vs. loading it all the time on other pages when it's not needed.

Suggestion 3: Leverage browser caching

Browser caching stores data on a user's computer when they visit your site. By "leveraging" browser caching, you can set timeframes at which these files that are stored should be updated on the user's computer. By utilizing this, sites can load faster because some of the files are already stored on the user's computer and do not need to be reloaded.

This functionality is not something Shopify supports, so we are unable to do anything with this request. Here is a link to a forum post where a Shopify employee explains that it is not possible to leverage browser caching with Shopify.

Suggestion 4: Optimize images

Now this is where you can really make a difference in how fast your page loads! Optimizing images is the process of using software or online tools to compress your images. Popular software such as Adobe PhotoShop allows you to crop and optimize your images. Let's say you have an image you have taken with your smartphone or digital camera and you want to use that as one of the slideshow images on your home page. If you uploaded this raw image, it might have a resolution upwards of 4500x3000px, be fully uncompressed, and will likely have a file size of at least several megabytes. This one image itself might look great on your site, but it could take 5-10 seconds to load depending on how fast the user's internet connection is!

If instead you opened this image in an image editor, resized it to roughly 1400px wide (our suggested width for full-screen-width images), cropped out some unnecessary portions of the photo, and reduced the quality slightly, you could end up with a photo that takes around 100kb and will load in a fraction of a second. When you carry over this principal to all images on your site, you can see how this would make a huge difference in your page load times.

There are countless tools you can use to optimize your images on your Shopify site. Rather than rehash them all, here are a few links that you will find useful:

• 10 Must Know Image Optimization Tips - Shopify Blog
• 20 Image Optimization Tips that will Drive You More Sales - ShopifyNation

If you don't have the time or expertise needed to optimize your images, there are several app in Shopify's App Store that claim to optimize images for you. Please note that these links are provided for information only. We haven't used these apps ourselves and cannot vouch for their functionality:

• Crush.pics
• Image Optimizer

The bottom line is: optimizing your images in Shopify is the single most important and beneficial thing you can do to improve your page load times.

Shopify and Theme-Specific Suggestions

Here are a few tips and tricks you can use to optimize your page load times with our themes. Though these were written specifically for our themes, they can be useful with just about any Shopify themes

Disable quick view functionality

Many themes (including ours) come with "quick view" functionality on collection pages. This is a button that appears in your product grid when you hover over a product that you can click to view a short description of a product and even add it to your cart without going to a separate product page. While this can be a really handy feature for your customers, the tradeoff is it adds a great deal of overhead to your site. The reason is because all the product information and photos must be loaded as your collection page is loaded so these windows pop up and populate right away.

So if you have 40 products on a page in your collection page, quick view requires 40 products and descriptions to be loaded in the background, including all the product photos. This is a lot of content. If you feel that this feature is not worth the overhead, you can disable it in theme settings. In ShowTime and Galleria, this feature must be disabled individually in the Featured collection section on the home page and in the Collection page settings.

Please note that ShowTime 5.0x and Galleria use context-sensitive theme options, so you will have to click on a resource, such as a collection, product or page to view the theme options.

Reduce the number of featured products on the homepage

The purpose of featured products is to highlight key products on your site. For example, some products may be highlighted on a seasonal basis or to aid in a new marketing effort. Some stores choose to show 20+ products in a section like this. In fact, in one real-life case that we resolved, a client was dismayed at their slow page load times when we realized they were showing 20 different instances of featured products on the homepage, for a total of 80 products on that one page. This combined with their unoptimized images forced site visitors to wait util 21MB of images were loaded.

If you have a large inventory and want to aid your clients in making quick purchasing decisions, we recommend that you use some sort of filtering mechanism, such as the Group Filtering function that is included with our ShowTime and Galleria themes.

Reduce the number of products showing on each collection page

Nearly all themes will have a setting in the Collection page settings that allows you to specify how many products should be shown on a collection page. For example, let's say you have 100 products in your store. One might be tempted to simply show all 100 products on a single page so the user can see all your products without having to scroll through multiple pages. This sounds great in theory, but can have a serious detrimental effect to your loading times (especially if you have quick view enabled). We suggest showing no more than about 24 products per page on your collection pages. This number can be controlled in our themes in the Collection page settings.

Limit the number of slides used in your slideshow or remove it altogether

Large slideshows are very common across the web these days. It seems like one of those features that everyone wants, which is why nearly all Shopify themes include the feature in one way, shape or form. But the truth is, these slideshows have a lot of drawbacks and will likely be phased out before too long.

For one, images in slideshows need to be very large to look good, and these large images can take a while to load -- especially over cellular connections.

Recent web user behavior studies have also shown that these types of slideshows really aren't all that effective. People don't usually sit around looking at the top of your home page to see all the slides. They might see the first one and continue scrolling down the page, or click somewhere else in your navigation to get where they're going. That means that if you have four or five slides, very few people are likely to even see anything beyond the first or second slide, so that very important content goes completely unnoticed.

If you must use a slideshow, our suggestion is to use just a single slide (which is often called a hero image) with some text on it. If you would prefer to rotate a few slides, we suggest limiting it to two or three slides. Not only are your visitors more likely to see your content this way, but they won't have to wait an eternity for it to load either.

If you'd like a little more information about this topic, I encourage you to read the article  Sliders suck and should be banned from your website, which is written by Michiel Heijmans, a popular blogger, developer and SEO expert.

Only run essential applications

Since each third-party application contributes to your load speed, it is good to periodically review your site to see which applications are essential for your business goals. A good rule of thumb is to always ask yourself if a third-party application enhances the experience for a visitor to your site. There are many apps that add some really cool features to your store, but each one will add precious seconds to your site's load times and increases the likelihood of conflicts arising in the future.

In conclusion...

We hope that this post has given you new insight into how Shopify themes work and what steps you can take to optimize your site for speed. If you have any questions or concerns about this, please don't hesitate to reach out to our support team.