Speed Up Your Shopify Store Vancouver

Speed Up Your Shopify Store Vancouver

Speed Up Your Shopify Store Vancouver

If your Shopify store is fast enough, you will have a better chance of getting a better ranking on google

Website Speed ​​test tool

We need some tools to test the speed of your online store

Before you start optimizing your Shopify store, please make sure to back up the Shopify theme first.  Shopify backend> online store> theme> edit> download template file. 

Your backup Shopify will send it to your email.

1. Compress pictures – Shopify Expert Vancouver

One of the main key factors that slow down the speed of online stores and reduce the conversion rate is site images.

There are two ways to compress pictures

  1. Use compressed images Shopify App
  2. You can use an online compression tool.  Just simply type compressed images on the browser. There are many online images compress tools

2. Delete unnecessary Shopify Apps – Shopify Design Vancouver

Most Shopify online stores have Shopify Apps installed. The owner of some Shopify online stores does not know that some Shopify apps may affect the loading speed of your online store. You may have deleted all unnecessary apps, but you also need to delete Shopify The code left behind by apps in your template. Because some Shopify apps will automatically insert the code into the template when they are installed, they will not be automatically cleaned up when they are uninstalled.

3.  Load Visible Pictures – Shopify Developer Vancouver

In Shopify shop, the webpage may be relatively long and divided into several screens. When the user sees the first screen, then we only need to load the pictures needed for the first screen, and other invisible screens, when the user goes down When scrolling, we load again, which will greatly increase the loading speed. In order to solve this problem, we have a technology called “lazy loading”. The image will be loaded when the user scrolls down. Here is a demonstration of this technology, and you can also see this technology on some other media websites.

Note: This step requires the assistance of a technician to complete it. It involves Html5, CSS3, and liquid. If it is not handled well, it may cause a bug in your template.

4.  Preload Web Fonts

This technology will pre-load fonts. Don’t wait until the browser needs to download fonts, which will slow down the loading speed. Usually, the template uses Google fonts, we just need to do the following.

eg: https://fonts.googleapis.com/css?family=Lobster&display=swap Just add &display=swap at the end of the URL

5.  preload js and CSS

This has the same function as preloading web fonts. This is used for JavaScript and CSS files.

Preload CSS

<link rel="preload" href="{{'theme.scss.css' | asset_url }}" as="style" type="text/css" >

Preload JS

<link rel="preload" href="{{'app.js' | asset_url }}" as="script" type="text/javascript" >

Leave a Reply

Your email address will not be published. Required fields are marked *