lazy load shopify
Published on: February 1 2023 by pipiads
Table of Contents About lazy load shopify
- How To Defer Offscreen Images | Lazy Loading on Shopify
- How To Optimize Your Shopify Speed
- How to Increase Shopify Page Speed – 3 Easy Ways
- Increase Shopify Store Speed without coding Easily (For Non Developers)
- How To Speed Up and Clean Up Your Shopify Store
- Fix Lazy Load Issue on Above the Fold Images Using Bricks Builder & Disable Lazy Load for Any Image
How To Defer Offscreen Images | Lazy Loading on Shopify
hello, hi folks. this is sakshana. i am the shopify team developer here in w3 speed up. so, uh, today i'm, i'm, i'll be telling you that- how to lazy load, uh, an image in the shopify theme. so let's get, let's head directly to the theme section. i have a debut theme. uh, um, i installed it in january 2020 and if i'll go here and if i'll just open any product template like, uh, you know, a cargo, you'll see an image tag here. okay, so, by default, uh, the lazy load of uh shopify is working, but, like, right now, i will actually put my lazy load, which is, like you know, you have to change the class. you have to change this class to lazy load, to lazy loaded, and you have to add one class. it's lazy lazy too, and if you'll just see here that image url, image url is actually being created from here, so it's a product feature image like this. i mostly use a 720 pixel image, which is, like, more than sufficient for the desktop and for mobile. i will use that mob src and i'll be using a 480 pixel and, apart from that, i'll be. so i'll be using uh for src tag. i'll be using a one by one pixel image, so, like, if i'll just click here, uh, it will give me a transparent one by one pixel image and i'll put it here like, uh this, so that you know we don't uh send any request to the server. we'll just, you know, put a base64 of an image of one by one pixel and uh, so here, as- let me explain this again- uh, any mistake, a class with lazy two, and uh, the src tag, which is actually blank, or like one by one personal image, which is not sending any request to the server. and in data, src, uh, i mostly put 720 pixel. you can put anything whatever, whatever you have in your mind, because it's going to load a load, uh, a little late. so i mostly put 720 pixel, and for mobile, i put for 480 pixels, and we don't actually need these. but i would request you- or i would like prefer not deleting these and, if fell, just save it. and also, apart from that, you have to add a file in your theme, css, which is: so you have to add a ww optimizationjs. i have actually copied with me, so i'll just paste it here. so there you go, and i have a www optimizationjs file which i'll be adding. so i just added wwwjs, i uploaded it and let's wait for getting it uploaded on the server. uh, it's uploading almost done. yeah, so we have wwwautomationjs file. this is the optimizationjs file. um, what actually will happen is, like you know, whenever you, whenever a user will interact with the like with the dome or like you know, it will effectively click or like a scroll or mouse move event. uh, it will uh actually open the wnw. uh init function and in www unit function, we have lazy load images file. so early images image function. uh, in this function, you know, all the mobile src will be uh converted to the src tag if the window width is less than 600 pixel, or else it will take the data src or, like you know, the yeah data src tag if it is like a desktop. so that's it. that's it, folks. thank you.
How To Optimize Your Shopify Speed
How to Increase Shopify Page Speed – 3 Easy Ways
More:BOUGHT MY FIRST CAR AT 20 YEARS OLD (SHOPIFY DROPSHIPPING)
Increase Shopify Store Speed without coding Easily (For Non Developers)
in this video, i'm gonna show you how to increase the loading speed of your shopify store without hiring any developer and without coding, just by following simple basic stuff. i have been in shopify for over four years and over the years, i have run multiple drop shipping stores, help many people start their online business, and right now, i'm using shopify to sell my own products. for all the shopify stores i had, i have managed to have the best possible loading speed, thereby reducing bounce rate and increasing conversion rate. i have done this without hiring anybody and without coding. the thing is that shopify itself is built for anyone to start their online store without coding, so, in reality, you don't need to do any coding or hire a developer to increase the speed of your shopify store. if you do some simple basic things in the right way, your shopify store will have an amazing loading speed. so i'm gonna be sharing you four simple things which i follow when i run a shopify store in order to have a fast loading speed, thereby increasing conversion rate. alright, guys, the first thing is not actually a tip, but it is the main concern for most people. it is gt matrix. gt matrix is a website that measures how fast your website is loading. so if you have been using zt matrix to measure the loading speed of your website, you have been measuring it in the wrong way. the results of zd matrix are not consistent and it bearish from day to day. okay, just to give you an insight, i did a test on gt metrics for billion dollar company like zim sock and kylie cosmetik and i'm gonna be sharing the result with you on the screen right now. and, as you see, the results are really really horrible. so if a billion dollar company gets a really bad metrics on gd matrix, you can decide. so if your website scores b, it doesn't mean it's bad. the real way to measure the loading speed of your website is through your browser. so in whatever browser you are using, there should be a mod, whether it is incognito or private mod. so what you want to do is go into that mod and type in the domain of your website and see how it loads. the way it loads in the incognito or the private mode is how your actual website is loading. you can try it in different devices- in your pc, in your laptop or in your phone, in your tablet- and see how it responds. if you are happy with it, you are good to go. what i'm trying to say is that even if you have a website that loads really fast and you use gt matrix to major, it may solve really bad data and you may feel bad and feel like you need to do something for your website, while in fact your website is perfectly fine. so that's the first thing i want to tell you: don't use zd matrix to measure the loading speed of your website. instead, use incognito mode or private mod in your browser. the second thing is really simple. it is to uninstall all the apps which you are not using. so literally uninstall every single app in your shopify store which you are not using. in fact, the way to avoid using a lot of apps is to use the team which come with inbuilt apps. the real problem with shopify app is that when you install an app, it install a piece of code into your shopify team pile and this line of code often ends up conflicting with your team pile, thereby reducing the loading speed of your shopify store. the problem is that for some app, even after you uninstall the app, it leaves a line of code in your shopify store conflicting with your team pile and it keeps reducing the loading speed of your shopify store. so, as a precaution, whatever team you are using, before customizing and adding any kind of app, make sure you make a copy of the original theme file so, in case anything goes wrong with the theme, you can always come back to the original file and do the same thing from scratch. the way i have managed to solve this app problem is by using the beautify. so, regarding using less apps, the game changer for me was using the team the beautify. my first year in shopify, i was experimenting with a lot of free and bad team, but then i switched to the beautify and i have never looked back. the beautify, in my opinion, is the best shopify team ever. right out of the bed, the team lots extremely, extremely fast and the beautify offers more customization than any other shopify team. it is much more flexible in designing your shopify store, whether it is a home page, product page or any kind of pages. and the thing which i love about db25 are the inbuilt apps, which they call add-ons. at this moment, they have more than 50 plus add-ons, so these add-ons are basically apps which are built inside of the theme, meaning using these inbuilt apps will not slow down the loading speed of your shopify store. it has a wide range of add-ons to enhance the look of your shopify store, to increase your conversion rate and to also increase your average order value. it has things like trust seals and badges, which looks really clean and professional, stiky add to cart. add to cart animation to increase conversion rate. it has things like card countdown timer, product bullet points. it also has add-ons to increase the conversion rate by offering a lot of upsells in the product page and the card paste. so with these add-ons, you can customize your product page and your card page to have a much better conversion rate and to stand out in the competition, which is really important in 2022. the beautify is 100 percent free to install, so make sure you check it out. i guarantee you you will not like it. you will love it. at the time of recording this video, the beautify has 54 add-ons: best speed booster. it even has an add-on called best boot booster, which will increase the speed of your shopify store. alright, guys, point number three is actually an opposite to point number two, that is, to install an app. the app goes by the name best speed optimizer and i use this app in all my shopify store. there are some apps in shopify app store which promise you to increase the loading speed of your shopify store but ends up doing the opposite. but this partikular app, which is free from my experience, this app is doing a really great job. to be honest, this app doesn't actually increase the loading speed of your shopify store, but it creates the illusion that your store is loading really fast. so let me try to explain it in a simple way. when someone comes to a landing page of a shopify store, this app actually starts loading the other pages that is linked to the landing page. so when the visitor clicks to another base from the landing page, it loads immediately. actually, the loading started even before the visitor clicks on anything, but when they click on the button, it gives the illusion that the base loads almost instantly. you may not understand what i just said, but this app just improves the visitor experience by creating the illusion that your shopify store is loading faster. alright, so the last tip i have for you is to resize your images. so when you click a photo with your phone or your camera or you download a stok image to be used on your website, it tends to have a really big file size. these photos will range anywhere between 2 mb and some even more than 5 mb. this greatly reduce the loading speed of your landing page. the way to solve this is to resize the images without minimizing quality. to do this you can go to app store or play store. just type in emails compression. before you upload the image in your shopify store, make sure you compress the image. if the app gives you an option of how many pixels you want, you can go for 1000 pixels max. don't go beyond that because it is really unnecessary. so normally a photo or an image which is clicked with your phone camera or a stok image will have pixels of around 4000 and some even six or seven thousand pixels. so when you resize it down just to 1000 pixels, the size of the image will be reduced to around 100 kb and some even at the maximum 300 kv, which is much lower than what the original file was, and just by doing this it will greatly increase the loading speed of your
How To Speed Up and Clean Up Your Shopify Store
so you've been running your shopify store for a while now and you've been installing shopify apps here and there and as time goes by, you decided to clean up your store and remove the apps that you don't really need anymore, because you know that these apps can slow down your shopify store and you don't want that. but when you deleted the app, you notike that it didn't really improve your store performance or speed. so why is that? well, in this video, we'll take a look at how to improve your shopify store speed and performance. stay tuned for that. [Music]. this video is sponsored by hostinger. if you're looking for a domain that you can use for your shopify store, hostinger is one of the cheapest domain provider you can try, and connecting your hosting or domain to shopify is as easy as getting past the no nut nope. check the link in the description below to get started. so there are a few reasons why your shopify store speed is still the same. number one reason is the app don't really slow down your store in the first place, or it doesn't really make any changes to your front end. the second reason is that the apps that you deleted left a bunch of snippet codes that weren't removed by the app. in other words, the app gave you a bunch of trash that you need to clean up yourself. what a bunch of ass, right? so i'll be showing you some tips and tricks: how you can clean up your shopify store and ensure that you can remove the junk created by the apps you deleted. before all that, make sure that you actually know your way around of your shopify store, especially with the theme files, and also always make a backup of your theme, especially when you start making a shopify store. a lot of beginners make this mistake where they just create a shopify store and they don't make a backup of their theme and when they check their assets file, they have no idea which one originally came with a theme and which one is the file that were added by the apps. so always make a backup of your theme so you can also retrieve a file, especially if you accidentally deleted a file. all right, so let's go through the steps of how to remove the unused codes or files from your shopify store. so first let's go to our themes- so it must be in our online store and themes- and then we'll select actions and edit code. this will open the following page where we can access all of the files in our theme. so let's open the themesliquid. so the first thing that we need to do is to scan through our theme that liquid file. so what i do usually is to use search and then type in here open angle, bracket, percentage sign, and then space and type the word include, and that will give us the following line. so we have here include judgement core and there must be another one, all right, so we have here include sumo. so we have two files being referenced in our theme- that liquid. now the next step is to check if this file is actually being used by shopify app or not. so let's open our apps page and then remember that this is called judge me core. and if we open our apps page, let's look for judgement and, as you can see here, there is a judge me product reviews app. so there's a possibility that this file, this file being referenced in our theme that liquid file- is being used by judgeme product reviews. so we don't want to remove that. and then the other one is sumo. so let's check if there is sumo in here and there is no sumo, and that means there's a possibility that this line is actually unused, though i highly recommend double checking, because there are cases that the file is being used by a different app but developed by the same company and then the file being referenced as the name of the company. so if you want to delete this code, you can do it and then just try. if it costs an error or if not, then that means it's deletable or you can delete it. so let's just remove this and if i save this and i'll open my store, if i refresh this and i'll try to open the inspect window and then console and see if i get any errors, as you can see, i have an error in here, but i'm not sure if it's related to sumo or not. so let's try to undo our changes. so i'll put the include sumo back, i'll save it once again and let me refresh my store once again and see if this errors. if this error still remains, so let me refresh that and then, as you can see, the error is still there, then that means sumo is not the reason why there's an error. so let's just remove this. we don't need it anymore and i'll save this and let's check that error. so, as you can see, it says uncut reference error. jquery is not defined and, as you can see in here, it is cost. it is from the crossjs, so we can hover that. and, as you can see, there's a url that says cdn- eggflowcom. so that means this file is coming from eggflow. so let's actually check if we have an app that was created by eggflowcom. so let me open my apps page and i have in here a bunch of apps, so let me just check about. or, if you want, you can open your browser and um type in here: shopify, um app, eggflow, ag, flow. as you can see, i have here apps by eggflow, so let me just open that and these are the apps that were created by eggflow. so i think i have instant traffic and ads. so let me open my app and there you go. yeah, i have instant traffic. so maybe there's something going on in this app that we can try to fix. if not, then you can contact their, their developer, or you can contact um support and tell them that there's an error related to jquery. actually, with sumo, we can delete this. now we don't need us anymore. so we can just delete the file and delete that, and that is how you remove the unused files from your shopify store. now there are other factors that can affect your shopify store speed and performance. one of them is the images in your store. that's why i highly recommend using website tools like gt metrics or google speed insights. these tools can help you determine what are the things that can slow down your shopify store, or what are things that slow down your shopify store for image related issues. for example, your images are very heavy, then i highly recommend tinyjpgcom. it is one that i used and it's really effective for making your images lighter and this can really speed up your website. so that's pretty much it for this video. if you have any questions, let me know in the comments below and let's have a conversation down there. thank you for watching and i'll see you in the next one. bye, [Music] you.
Fix Lazy Load Issue on Above the Fold Images Using Bricks Builder & Disable Lazy Load for Any Image
in a previous video i was doing a comparison for my new uh blueprint website from bricks, comparing it to oxygen, and this was really the only error. that you're not even an error. but the only concern or the top issue that came up for the brix site was this: don't laser load largest content, contentful paint images. and in that, in that video, if you watch it, it was pretty obvious pretty quickly what it was. it's the hero image, the background image on the hero, and the problem is that it's not um, or the problem is that it is being lazy loaded and bricks does have an option: just turn that off altogether. but i do like lazy loading. so i wanted to figure out how to just not lazy load partikular images, did some searching and found the solution to that. so, first off, if we just go over here and let's just refresh, here's that website and uh wordpress by default. my understanding is that this is a wordpress thing, not even a brix uh thing, but we can fix it with bricks. so i have my, my, i'm in my heroes section here. here's my background image and there is a attribute called loading equals lazy. so we need to change that to loading equals eager, and then our issue is going to be resolved. so let's go into the builder here. i have it open right now. i have my background image selected and over on um attributes we can go and add a new uh attribute and then the name is loading and the value is eager. so if we close that, if we save, go over here and refresh. now we see that loading is eager. so now let's go ahead and just rerun this test and see if we still get that warning. there we go, our scores are a lot higher, i'm pretty sure. yeah, we don't have any medium ranking top issue anymore, so that's a pretty easy fix um to do. you can do that with any image. i'm kind of surprised with the logo in the header up here. you know that should probably also be loading, so that's also loading lazy. that should also be changed to be loading eager. so let's go ahead and update that as well. it's probably a splinter file that it just didn't register as an issue, but i still want that to. i don't want that to be lazy loaded. so that's a template. so i have to edit the header template and if i go click on the logo and scroll down here to attribute, i don't see attribute. oh, okay, not under content. under style attribute, click the plus and again loading. and for the value eager, that's all you do. hit save. and now, if we go over here and refresh our logo up, here is now loading eager. okay, that's it for this video. thanks for watching.