Theme Optimization Options

To access the theme optimization options, head over to the Theme Optimization section in the Hyperspeed dashboard and click Edit Settings.

Or if you haven’t yet completed the initial onboarding, the theme settings are in step 3!

Once you see your theme optimization settings, you’ll see some options on which features you want to enable.

All of these options have some potential to cause bugs in your preview theme. However, some are safer than others – the options with more potential to cause bugs are disabled by default.

For maximum speed gains, we recommend enabling all of these options. However, if you encounter bugs, you may need to disable them one at a time until the bug disappears.

Here’s a list of options and what each one does:

LazyLoad Images and Responsive Image Sizes

What is LazyLoading?

LazyLoading is a technique where we only load images as they’re about to be seen. As a result, your shop’s pages will load faster since it doesn’t have to load unneeded images.

This won’t change your visitors’ experience on your site since images will be loaded before they’re seen.

What are Responsive Image Sizes?

Responsive Image Sizes are a image loading technique that loads the most appropriately sized image for each image on your site.

For example, if an image is only 300 pixels wide on your site, it doesn’t make sense to load an image that is 1000 pixels wide only to have the browser resize it.

Instead, we’ll load a 300 pixel wide image to fit in the 300 pixel wide space. This saves a ton of bandwidth for your visitors thus speeding up each page.

Shopify App Caching

What is Shopify App Caching?

Many Shopify merchants take advantage of third party apps from the Shopify App Store to do things like collect emails, upsell items, show reviews and a ton of other stuff.

These apps will often place a script on your online Shopify storefront to provide the features that they promise.

However, this comes with a disadvantage. If you have 10 different apps placing their scripts on your site, your shop will be asking 10 different servers for that script every time your site loads.

These servers may not be as fast as Shopify’s servers and each additional script location slows down your store.

Also, some of these apps may not be vigilant about site speed. They may not minify their scripts or have gzip compression enabled.

To solve this, we download all of these third party scripts to a cache in your site. We compress these scripts and serve them from a single file stored in Shopify.

As a result, your site only has to make a single request to Shopify’s fast servers in order to load these apps.

Why is it potentially dangerous?

Since we’re caching these app’s scripts, these apps can’t update their scripts in real time. Most apps don’t update their scripts very often, but it does happen.

We monitor you site’s third party app scripts every 10 minutes. If we detect a change, we’ll update your cache.

However, this means it can take up to 10 minutes to see changes if an app decides to update its script or a new app script is added.

To refresh the app immediately, you can visit the Hyperspeed dashboard at any time and select Refresh App Cache from the top bar. This will immediately grab any changes and update your cache.

Why do I have to disable app caching before uninstallation?

If you uninstall Hyperspeed without first disabling this feature, we won’t be able to continue updating your cache.

6 hours after uninstalling Hyperspeed, your caching script will automatically disable itself. However, during those 6 hours, your app scripts won’t be able to update.

To prevent this from happening, please revert your theme changes or disable this option and publish the resulting preview theme before uninstalling.

Video LazyLoading

LazyLoading is a technique where we only load things as they’re about to be seen. With this optimization, we don’t load your videos until users are about to see them.

This speeds up your website since it prevents unnecessary code from being loaded until it’s needed.

Please note, this only applies to videos embedded through iframes and not HTML5 videos.

Font Optimization

Font Optimization is where we make sure Google fonts are served from Google’s server instead of Shopify’s server. Since most websites use Google’s version, visitors already have these fonts cached in their browsers.

By using Google’s version, your visitors don’t have to load the same font files again into their browsers. Google also serves the best version of the font for your visitor, ensuring smaller files are used when possible.

Critical CSS Extraction

Critical CSS extraction and inlining is a technique where we only load the necessary CSS first. CSS, or Cascading Style Sheets, is the code that makes up your site’s styling.

We’ll analyze your home, product and collection pages and collect the CSS that is needed for the initial load. That CSS is loaded first, while the rest is deferred until later. As a result, visitors will feel like your site is loading very quickly.

HyperScripts - JS Deferral

HyperScripts defers all of your JS so that it only loads after everything else in your store does, preventing it from blocking your essential elements from loading. 

This feature is still experimental, and may not work on every theme. Please get in touch at support@rvere.com if it doesn't work for you so that we can fix it in a future release!

Minification – JS and CSS

Minification is a technique where we make your JS and CSS scripts as small as possible.

We do this by removing everything unneeded from these files such as white space and superfluous characters.

> JS, or Javascript, is code that gets loaded in your website that provides extra functionality. > >
> CSS, or Cascading Style Sheets, gets loaded in your website to tell the browser how the website should look.

Your actual JS and CSS files will still be editable as usual and won’t be touched. However, the files that get loaded on your site will be minified.

Predictive Page Preloading

Predictive page loading is where pages that might be visited are loaded before they’re actually seen.

We’ll only preload pages that visitors will probably go to next in order to prevent excessive use of your visitors’ bandwidth.

For example, if a visitor lands on your homepage, they have a couple options. They can click on a link in your menu, or on the page itself.

Let’s say you have a link to a product on your homepage. We’ll preload that product in advance so that if they click on it, it’ll feel like the page was loaded instantly.

This has a very low chance of damaging your theme and is a pretty safe process.