Your Cart is Empty

by Michael P. Hill April 20, 2016

One of the most popular tools for webmasters, including those using Shopify themes, is Google’s PageSpeed Insights service, which seeks out and identifies ways to improve your website’s page loading speed and related factors — but how much weight should you give to the advice this (or a similar) tool gives you?

Google is on record as being “obsessed” with speed on the Web and also has indicated that speed does play a role in Web rankings — so speed is obviously something that should be considered when developing any website.

That translates into the idea that sites that load faster will rank higher in search engine results.

However, it’s easy to take Google’s PageSpeed Insights advice on your Shopify theme a bit too much to heart while also ignoring some easier ways to improve your site performance.

When running PageSpeed Insights, one of the first (and scariest) recommendations Google may give you is to “Eliminate render-blocking JavaScript and CSS in above-the-fold content.”

Without getting overly technical, this is referring to utilizing some advanced Web development techniques within the structure of the code to help improve speeds.

However, even for someone with intermediate CSS and JavaScript skills, meeting this suggestion can be tricky to implement since it can require some pretty extensive modifications to your Liquid files and CSS. Not only is this time-consuming and error-prone, but it also, like all customizations, makes it more difficult to update your theme down the road.

The same goes for Google’s recommendation to “minify” HTML, CSS and JavaScript.

While these techniques certainly reduce load time, they also are something that only more advanced users should tackle. Further, many “minification” tools don’t recognize the unique Liquid tags used in many Shopify theme files, which can cause the entire theme to stop working.

Another important factor to keep in mind is that every feature or design element that’s added is likely to trigger issues with any page speed testing tool. Adding cool designs or highly interactive features can be great for user experience — but it’s important to keep in mind that it’s likely a trade-off with your site speed.

A great example of this is the “quick shop” popup windows that many Shopify themes include. These typically provide a way for a user to click a button and get a quick overview of a product from the homepage or collection page without having to load a completely new page. It often even allows users to add the item to the cart without a page reload.

Pretty slick, right? Sure, but this type of feature is also one of the biggest culprits of bogging down page load times on Shopify Themes since it often has to load the content, including, most significantly, the image files for every variant or every product featured on the collection page or homepage.

One way to mediate this issue is to reduce the number of products shown per page or cut down on the number of images you add to each product.

However, the broader point is that while this feature does look nifty and can be helpful in boosting conversions, it also, inherently, adds to your page loading time. So, at the end of the day, it’s often a fine balance between features and speed — and typically it’s difficult to have the best of both

All that said, there are some solid, easy and fast ways that you can improve your site speed:

  • Compress your images: There are literally hundreds (if not thousands) of image compression tools out there, but two of our favorites are ImageOptim and Compress JPEG. These tools make minute changes to your JPEG images that can result in some significant speed improvements. However, keep in mind that if very high quality photography is a must for your site, this can be one of those areas that you’ll need to decided if speed or image quality is more important.
  • Cut down on the number of banner images: Rotating banner image slideshows on your homepage or other locations can look great, but these are also big time contributors to page load time. A good compromise is to restrict the number of slides to one or two — since many users will likely only be on the page long enough to see that many anyway.
  • Number of images: Every image you add will make your page loading time slower. However, product images are also one of the most important aspects in selling most online goods. To help cut down on the number of images, carefully plan out how to maximize the view in each photo. In some cases a single shot can effectively do the job of two or more separate images. Another option is to create a standalone page for additional product photos that shoppers can click on if they need to see more visuals.
  • Reduce and monitor apps: Most third party apps also add to page loading time, so it’s always good to avoid app overload. You may also want to compare speed tests before and after you add a particular app to see the true weight it adds to page load time and then re-evaluate if it’s worth that. If not, remove the app completely.
  • Eliminate sections: Removing sections of information from the home page can be an effective way to improve load times as well. Instead, give shoppers a brief peek at the content and then link to a separate page that houses the actual content. Also consider removing social media feeds and widgets as these can add significant load time.
  • Fonts: Standard, ubiquitous Web-safe fonts such as Arial and Times New Roman will work pretty much everywhere and with no page speed consequences at all; however they can be a little boring, so you may want to use a more interesting third party Web font from Google Fonts, for example. But because these fonts “live elsewhere,” using them can affect page speed because the browser often has to go and fetch these fonts before it can display them. The impact may only be slight, but it’s still a good idea to limit these third party font styles to one or two max on your site.

The Shopify platform itself also has some key advantages in regard to page speed. Your entire store is hosted on scalable, high tech servers that are optimized to handle the demands of ecommerce stores.

These servers are much more efficient and typically provide much better load times than other services you could find on your own.

Shopify also uses a CDN (or “content delivery network” comprised of high quality servers) to store all your shop’s image, CSS and JavaScript files. When a user visits your site, the images and other resources are downloaded from the server closest to him or her geographically — which reduces download time. In addition, CDNs also utilize caching — or storing copies of files that don’t change frequently, to help improve speed.

Finally, keep in mind that Google's PageSpeed Insights is a great tool and can give you lots of great ideas, but often the recommendations can be very difficult to implement for an unknown return on investment. 

It's a common misconception that fixing everything Google PageSpeed recommends will suddenly rocket you to the top of the search engine rankings — the reality is that page speed is just one of the many, many factors used to rank results.

Also keep in mind that many Shopify stores (take "handmade jewelry" for example) are in extremely competitive industries in terms of search engine rankings and it's unlikely that a small, independent merchant could outrank the larger players in the space no matter how fast the site is.

If you're truly concerned about search engine optimization, a great first place to start is by reviewing and rewriting your product descriptions.

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

3 Responses

Michael P. Hill
Michael P. Hill

August 31, 2016

@McFly: You’re definitely not alone. Google PageSpeed Insights certainly have value, it’s something that store owners really need to weigh carefully.


August 31, 2016

Thanks for this. I just found the Google pagespeed test, ran it, panicked, then found this article … now I feel less worried :-)


August 18, 2016

Thank you, Michael P. Hill for sharing with us such kind of informative and important article. Your tips are really working and extra ordinary.

Leave a comment

Comments will be approved before showing up.

Also in Shopify Theme Blog

Secrets to creating exciting page layouts with Turbo Shopify theme
Secrets to creating exciting page layouts with Turbo Shopify theme

by Michael P. Hill October 25, 2016

Turbo, the latest premium Shopify theme to join the Out of the Sandbox family, already lays the groundwork for a great store design — but the theme’s plethora of options makes it easier than ever to create an almost limitless number of unique looks.

Read More
Easy ways to break out of the mold with your Shopify theme
Easy ways to break out of the mold with your Shopify theme

by Michael P. Hill October 18, 2016

Using a pre-designed premium Shopify theme is a great way to get your online store and up running fast and affordably. But since there are likely many other shops using the same theme as you, how can you make your store look unique and stand out from the crowd?

Read More
Tips on adding and managing product reviews on your Shopify theme
Tips on adding and managing product reviews on your Shopify theme

by Michael P. Hill October 12, 2016

Adding product reviews to your Shopify theme is one the best ways to add a level of interactivity to your store that can also boost conversions and increase sales — but it’s a feature that’s not without challenges.
Read More
Stay on top of OOTS news!

Subscribe to our mailing list to be notified of theme updates, new releases and more.