fbpx

Last Updated on

Speed is an important factor for 2 reasons. The main reason is a slow site will result in lost sales. Amazon conducted a test on this and a slowness of 1 second could cost them $1.6 Billion in sales each year.. yeh. The second reason is for SEO purposes. A faster site means it will serve the customer quicker and search engines like this.

An important tool for measuring speed is Google’s Lighthouse. It’s what most other speed-measurement tools are using for their performance engine and it’s built in to Chrome Dev Tools.

We recently conducted a performance audit on Shopify sites and third-party content was the number one culprit for slow load times on both sites amongst other friction points. Here’s what we did to bring render time down on 3G mobile by at least 1 sec:

1.) DNS Prefetch the Shopify CDN domains that serve static assets and fonts.

2.) Go through theme.liquid and header.liquid and replace “{{ ‘somefile.js’ | asset_url | script_tag }}” with <script async src=“{{ ‘somefile.js’ | asset_url }}”></script> where possible. jQuery and other critical files should *not* load asynchronously.

3.) Find where all your third-party apps are inserting scripts and conditionally load them, e.g. if you have a script that only needs to load on your Product pages, surround that script tag with {% if template.name == ‘product’ %} to ensure it doesn’t load on other pages. 

4.) Additionally, change those third-party scripts to load asynchronously so they don’t block rendering.

5.) Go through your CSS files and add “font-display: swap” to any font-face declarations.

6.) Add “loading=‘lazy’” to all images across the site, including hero images, product images, thumbnails, etc.

7.) Your theme probably already uses srcset to load product images at a size appropriate for your device, but for background images you can use JS to check the window.innerWidth property of the viewport and load a background image that’s the same width.

Some of these changes are high-level so we suggest hitting up the Shopify Experts Directory or Upwork if you need assistance. Remember to always backup your theme before making edits.

 

About LaunchTip

LaunchTip was born out of a necesity to extended functionality on the Shopify platform. Built by merchants for merchants.

Learn More

Leave a Reply

Fast-Track Your Shopify Store.Get our FREE Ignite Guide 🔥 on what you can do right now.
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google
Spotify
Consent to display content from Spotify
Sound Cloud
Consent to display content from Sound

Get the #1 Upsell App which has generated over $50m in Upsells!   Get App