0

Your Cart is Empty

by Michael P. Hill October 05, 2016

Turbo, the newest premium Shopify theme from Out of the Sandbox, comes packed with features that make it one of the fastest Shopify themes around — but many of the features that give Turbo its vim and vigor are actually behind the scenes.

Intelligent page preloading

Page preloading

What if you could predict the future? Well, Turbo has that at least partially mastered.

Because most users tend to hover over a link or button before they click it, Turbo uses that knowledge to advantage.

How does it work?

The moment a user hovers the cursor over a page link, Turbo gets to work in the background by downloading that page’s content — text, images, code — before the user even clicks on it. If the user does end up clicking the button, which more often or not is the case, the page loads blazingly fast because most — or all — of the loading has already been done.

Even though the time between hovering and clicking is often just a fraction of a second, that’s often enough time to preload enough content to make the transition to the next page nearly seamless and, in many cases, there’s virtually no delay after clicking a link.

If the user doesn’t end up clicking the hovered link, no harm is done — the page remains preloaded so it will still load quickly if the user decides to visit it later.

If, on the other hand, the user moves on and hovers over another link, that page starts preloading instead.

Even mobile devices benefit from page preloading — but in a slightly different way.

Since mobile devices don’t have a cursor, Turbo instead preloads content based on when a user first places his or her finger on a link. By design, mobile devices implement a delay of a fraction of a second between when pressure from a finger is detected and when it registers as a click to allow for differentiating between a single and double tap.

Turbo uses this fact to its full advantage to begin preloading content in the background in that fraction of time.

Smart image loading

Smart image loading

Having clear, crisp images but fast load times is always a fine line to walk. Turbo makes it at least a little easier to come out ahead with a zippy site by using advanced code to determine the optimal image file to use for every unique situation.

Let’s say a shopper is accessing Turbo from home on a giant, 27-inch screen — that means they are going to need the largest size images you can provide to see all the gorgeous detail of your product.

Also, since the user is accessing from a home computer, it’s likely they are connecting to your store over high speed cable or DSL Internet.

Enter Turbo’s smart image loading. Turbo sizes up the home user’s screen size and automatically serves up the highest quality images possible, giving your home-based shopper the largest (and therefore highest quality) images possible — all the way up to Shopify’s maximum size of 2048 by 2048 pixels.

Now, consider a user on a mobile device. Not only is his or her device only about 320 pixels wide, but it’s likely that the device is connecting over wireless data, which is inherently slower than a home-based connection.

Plus, many users are conscious about data usage and might not like it if your site eats away at their data plan!

Here again, Turbo to the rescue. Mobile users are served up smaller image sizes that still look great but avoid loading unnecessary bytes.

So, from huge screens to small screens and anywhere in between, Turbo has you covered so that you can deliver impressive images without the delay.

And, for users on high resolution devices such as those using Apple’s Retina technology, the Turbo Shopify theme knows that too and sends the image that’s best suited.

Infinite scroll and 'load more'

Load more

Two other key features added to Turbo are the option to have either infinite scrolling or a “load more” button on collection pages.

Infinite scrolling is a Web development technique that detects when a shopper has reached the end of the current collection page and automatically loads the next chunk of products.

Similarly, a “load more” button will serve up the next batch of products but only once the user clicks a button.

Not only do both of these approaches result in a smooth user experience since no page reload is required to view more products, it also helps cut download times by only loading products farther down the page if the user actually reaches that point and still wants to see more.

In other words, if the user finds what he or she is looking for near the top of a collection page, the products farther down the page are never loaded, saving time and bandwidth.

This approach to collections can be especially key for stores that have a large array of products that require shoppers to browse more to find what they are looking for.

Refined quick shop

Turbo also takes a completely revamped approach to the popular “quick shop” feature in Out of the Sandbox themes, using some new code tricks and a fresh modal plugin to ensure lightning fast load times.

“Quick shop” lets users view basic product information and even add an item to the cart from a stylish modal popup window on the collection page.

This is a great tool for shoppers who are browsing for just the right product since it enables them to get at-a-glance details about a product without having to leave the collection page.

Plus, if shoppers decide the product is right for them, they can add it to the cart right from the modal window — which is a great way to boost conversions.

That said, Turbo’s slick new quick shop hover state styling and reimagined code won’t weigh down your collection page, since each product’s details and photos are only loaded when someone clicks a quick view button.

Other quick shop implementations typically load all of the details and images for all of the products on a collection page, which does result in a page that takes a bit longer to load.

For most stores, this isn’t an issue — but for stores that demand the absolute fastest load times, including stores with large inventories or high volumes, the advanced quick shop code is key.

‘Minified’ CSS and JavaScript

Minified CSS

Turbo’s CSS and JavaScript libraries code is “minified” by default, meaning all extraneous formatting is removed to make the file as small as possible and therefore a bit faster to load.

However, the theme’s primary JavaScript file is not minified at this time. Special attention has been paid, however, to making this code as efficient and compact as possible.

Turbo and PageSpeed Insights

Although Turbo still manages to turn in darn good scores on Google’s PageSpeed Insights, you might be left wondering why it’s not a higher or perfect score.

The truth is, many of Turbo’s speed-enhancing features actually don’t register on PageSpeed Insights, including both page preloading and smart image serving.

There are also some inherent limitations to the Shopify theme platform that mean some PageSpeed Insights flags just won’t go away, such as the infamous “render blocking” CSS and JavaScript one.

However, as mentioned in a previous post on this subject, this warning can be quite tricky and costly to fix.

Constantly getting faster

Turbo was fast the day it was born.

However, it keeps on getting faster. Our developers have pushed out hundreds of small updates that tweak Turbo in a variety of ways to make it even faster — and will continue to do so.

And remember, theme updates are always free and made especially easy with the new Out of the Sandbox Shopify Theme Updater App, so keeping your Turbo-based store blazingly fast is easier than ever.

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.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Using your Shopify theme's password page as a marketing tool
Using your Shopify theme's password page as a marketing tool

by Michael P. Hill November 30, 2016 0 Comments

Building and setting up your Shopify theme and store can often be a long, strategic process, but there are some ways you can put your Shopify theme to work before you even launch by using the built in password page feature that comes with the Shopify platform.
Read More
One page wonders: Building smaller stores with full featured Shopify themes
One page wonders: Building smaller stores with full featured Shopify themes

by Michael P. Hill November 25, 2016 0 Comments

While most Shopify stores offer a wide selection of products, sometimes your store might only offer a handful of items — or even just one — and the most flexible Shopify themes on the market include the features needed to “shrink down” to a store that has a smaller inventory count.
Read More
How to use your Shopify theme to showcase products on the homepage
How to use your Shopify theme to showcase products on the homepage

by Michael P. Hill November 16, 2016 0 Comments

Your Shopify theme’s homepage is a great place to showcase your best selling products, new items and other products you’re promoting — and the latest premium Shopify theme from Out of the Sandbox is packed with ways to present collections and products in new and exciting ways.
Read More
Stay on top of OOTS news!

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