##Shopify Store Performance Improvement
This post is about finding different ways to improve the loading speed of my client shopify site.
Preloading resources
For my client Shopify stores, its using different fonts which is loaded in the theme.liquid
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,400italic,500italic,300italic"> </head>
Before preloading this assets, the fonts wouldnt download until the DOM and CSSOM were generated. By changing the code to
<head> <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,400italic,500italic,300italic" as="style"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,400italic,500italic,300italic"> </head>
the browser will download the fonts for the page and it loads faster. Since the fonts is preloaded, the rendering time of the site will also be reduce.
Comparing the before and after results of the preload change, the site loading speed had reduced from 4.9s to 4.1s
If you find my tips are useful, please support my work :)
Prefetching Javascript using webpack.
Note: This only apply to your Shopify site if your site is custom build using React/Vue with Webpack.
Prefetching will instruct webpack to prefetch On-Demand-Loaded chunk when the parent chunk finish loading.
For example prefetching a component in Homepage When user visits the HomePage, once homepage finished loading the browser enters idle state and starts fetching the prefetch javascript in background.
import("./component/homepage");
import(/* webpackPrefetch: true */ "./component/searchPage");
simplily add
/* webpackPrefetch: true */
in the component you want to prefetch.
If you find my tips are useful, please support my work :)
Site Performance Test
GTmetrix How fast does your website load?
Google Page speed Insight Gift of Speed
Tags
Related Posts
Quick Links