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 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 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, 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.
Why do I have to disable app optimization before uninstallation?
If you uninstall Hyperspeed without first disabling this feature, we won’t be able to continue updating your cache.
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.
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 adds a subtle loading indicator to the top of the screen. As the page loads, the bar will stretch out over the top edge of the page.
This will not help with metrics, but can help with user experience as they receive visual feedback sooner. The loading bar can help with conversions on slow pages as it shows users that the page is loading.
The loading bar can be customized to be any solid colour.
Page Stabilizer
The page stabilizer hides shifting in the page as the site loads. This makes sure that the user doesn’t experience any cumulative layout shift as the page renders.
This feature may not help every store. There are many causes of cumulative layout shift and some stores may not have an issue with layout shift. Please disable this feature if you notice your overall speed metrics decreasing.
There are 3 levels of stabilization:
Please note: Using the most conservative option that works for your site is recommended.
- Conservative – This will hide the main content of the page until the browser is able to build the initial structure. This will not wait for images or styles to load.
- Standard – This will hide the main content of the page until the browser is able to load all resources including images and styles.
- Aggressive – This will intelligently hide the main content of the page until all elements above the fold are done loading. This includes elements added or altered through JavaScript.