Increasing Shopify Store Page Load
One of the ways to improve your Shopify store performance is to optimize your page loading speed.
First you are going to want to get an idea of your current loading speed. There are a few resources you can use to get the information you need.
Google Page Speed Insights - https://developers.google.com/speed/pagespeed/insights/
Google Lighthouse - Built in to Chrome
Web.dev - https://web.dev
GT Metrix https://gtmetrix.com/
Pingdom https://tools.pingdom.com
Don’t focus too much on trying to get a score of 100. It is impossible to get 100 on a Shopify store due to the necessary programs needed to run your store.
There is a misconception that page speed is more important to converting sales than is true. Below are a few examples of Shopify stores that are some of the top Shopify stores in sales but have very low page loading speed scores.
You may wonder what a Shopify store with close to a 100 score would look like. This store below is what a store with a score of 94 looks like. It is just text without any images. Not exactly a store that would cause people to want to purchase anything.
Optimizing Images
One of the main things that cause pages to load slowly are images. You can optimize your images so that they are smaller size files which will load quicker. In a side by side comparison you cannot tell the difference between the optimized image and the non-optimized image. However, when loading your page will load that image faster which helps with page loading speed.
Here are 2 websites that will optimize your images for you.
https://tinypng.com/
https://kraken.io/
Another way to increase page loading speed is to lazy load your images. Lazy loading images is when the images don’t load until you scroll to that part of the page. You may have 50 items on a specific page but if you load all 50 images it slows the page down. You don’t need to see the images at the bottom until you scroll down to them. To load them all when someone comes to the page unnecessarily slows down the page. Your customers will not experience anything different when they visit your store other than the page loading faster.
Lazy Load Images:
There are three relevant pieces of this markup we should focus on:
- The class attribute, which is what we'll select the element with in JavaScript.
- The src attribute, which references a placeholder image that will appear when the page first loads.
- The data-src and data-srcset attributes, which are placeholder attributes containing the URL for the image we'll load once the element is in the viewport.
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});