Skip to content
Preloading Images and Other Assets for Shopify
By Bhavesha | 1 Aug, 2022 | 5 min reads
What is Preload?
A preload request tells the browser to fetch a critical resource at the earliest possible time. Resources that are critical may include stylesheets, JavaScript, images, and fonts.
A Guide to Using Preloading to Speed Up Your Shopify Page Loading
The following points are included in the preloading process:
Image Using Preload
Preloading images using the HTML tag. These two value options of the rel attribute (relationship between the current document and the linked document) are most relevant to the issue: prefetch: load the given resource while the page is being rendered.
Example
<link rel="preload"as="image"href="important.png">
Preload Product Image Using Liquid Code(Shopify)
Example
{ %- for media in product.media -% }{ %- case media.media_type -% }{ %- when 'image' -% }{ % assign image_url = media | img_url: '1x1' % }{ % break % }{ %- endcase -% }{ %- endfor -% }{ % if image_url % }{ % assign sizes = '200,400,600,700,800,900,1000,1200' | split: ',' % }{ %- for size in sizes -% }{ % capture preloadSrcset % }{ % assign sizeX = size | append: 'x' % }{ { image_url | replace: '1x1', sizeX }} {{size}}w , {{preloadSrcset} }{ % endcapture % }{ %- endfor -% }{ {image_url} }<link rel="preload"as="image"href="{{image_url | replace: '_1x1', '' }}"imagesrcset="{{preloadSrcset}}"/>
{ % endif % }Preload for Webfont
As a result of the attribute as=” font” type=” font/woff2″, the browser will download this resource as a font and prioritize it accordingly.
Example
<link rel="stylesheet"href="/assets/Pacifico.woff2"/>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Poppins&display=swap"/>
After Applying “Preload”
<link rel="preload"href="/assets/Pacifico.woff2"as="font"type="font/woff2"crossorigin/>
<link rel="preload"as="style"onload="this.rel'stylesheet'"href="https://fonts.googleapis.com css?family=Poppins&display=swap"/>
Preload for CSS
In CSS files, fonts defined with @font-face rules and background images defined in CSS files are not discovered until the browser downloads and parses the CSS files. By using preloading, the resources are fetched before the CSS files are downloaded.
For CSS, all we need to do is add the onload=” this.rel=’’stylesheet’” attribute to the link tag.
CSS can be split into two parts using the critical CSS approach. This is the process of reducing unused CSS. This is the technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.
The following code can be used to solve this problem: adding link rel=” preload” can speed up the download process.
Preload for Javascript
The browser has a built-in Preloader which helps get scripts downloaded sooner. Using link rel=preload in the markup might accelerate that even more, depending on the structure of your HTML document.
<link rel="preload"href="{{'app.js' | asset\_url }}"as="script"type="text/javascript">
