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
- Use compressed images Shopify App
- 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" >