Optimizing the speed of your storefront is simplified through Superstore’s Performance features found in the Theme settings tab of your theme editor.
Use these Theme settings to load links more quickly with InstantPage, style before rendering, activate lazy loading to load what is in view first, select a font loading behavior, preconnect to Facebook Pixel, and preconnect to Google Analytics.
Load links more quickly with InstantPage
Enable Use InstantPage to increase the speed of page speed when links are accessed. This feature uses AJAX to preload links in the backend, so when customers select any link, most of the heavy lifting is already finished.
Style before rendering
Use the Style page before rendering dropdown to select the desired approach for loading content.
- Fast (load all styles before showing content)
- Faster (load some styles before showing content)
- Fastest (show content before styles have loaded)
Displaying content before styles have loaded (Fastest) can improve first paint time, but will cause visual flash as components appear, then get styled later. If InstantPage is enabled, this setting will be ignored.
Activate lazy loading
By default, the theme will delay the loading of out-of-view areas of the theme. This serves to optimize the page speed for the above-the-fold content. This can be disabled by deselecting Enable lazy loading.
Select a font loading behavior
Use the Font loading behavior dropdown to select the desired font display strategy. This setting determines whether the text is visible during custom font loading. There are four options to choose from:
- Auto
- Swap
- Fallback
- Optional
For more details on font loading behavior, refer to this guide from Mozilla:
Mozilla: The font display timeline
To override the fonts configured in the Typography settings for improved page speed, enable Use system font.
Preconnect to Facebook Pixel
Enable Preconnect to the Facebook Pixel tracking server to increase page speed.
Having this setting enabled can cause a small performance penalty if you do not use Facebook Pixel.
Preconnect to Google Analytics
Enable Preconnect to Google Analytics tracking server to increase page speed.
Having this setting enabled can cause a small performance penalty if you do not use Google analytics.
For more information on Google Analytics theme integrations, refer to this guide:
Shopify: Setting up Google Analytics