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.

What is Shopify App Optimization?

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 features.

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, that's 10 scripts loading their code, making the page heavier and slower

App optimization will defer apps that with scripts that we've found are generally safe to defer. These scripts will only start loading when user action is detected, preventing them from slowing down the initial page load.

Within your app optimization settings, you'll also be able to choose which pages these scripts load on, making sure they only load where they're needed.

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.

Smart JavaScript Deferral

Smart JavaScript Deferral defers some third party and Shopify scripts to load when user action begins. These are scripts that we’ve found are safe to defer and are used across many stores.

If the aggressive setting is enabled, analytics scripts will also be deferred. This includes tracking pixels, Google Tag Manager and Shopify’s tracking on the site. Please note you may see a change in recorded traffic as only visits from real users will be recorded. Visits from bots will no longer impact the analytics.

Preload Largest Contentful Paint Images

Preload Largest Contentful Paint (LCP) Images will find the LCP element on the home and product pages. Then it will preload the element if it’s an image. This tells the browser to download the image sooner, improving the LCP metric.

The LCP element is the largest element “above the fold”. This is the area of the webpage that the user first sees when they load the page. LCP is a Core Web Vital metric so optimizing for it can be helpful for search rankings.

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.

Loading Bar

The Loading Bar does not improve speed directly, but provides a visual indicator that the site is loading. Loading indicators help provide visual feedback while the site is loading, reducing uncertainty.

Page Stabilizer

The Page Stabilizer helps reduce Cumulative Layout Shift (CLS) by hiding the main content of the page during the initial loading phase. This prevents the user from seeing any shifting that may be occurring as the page renders.

There are 3 levels of optimization. The higher the level, the longer the main content will be hidden. As a result, we recommend using the lowest possible level that brings CLS down. Start with conservative and only move on to standard or aggressive if required.