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

i'm going to show you what it looks like to do a correct shopify side speed optimization. so this is what you should be doing. first of all, we're going to look at caden lane baby boutique. i don't know these guys. if this is you. you have a beautiful store. it looks absolutely fantastik. and why am i picking these out is because you guys have a very typical issue. if you go to testmystorespeedcom- you know it checks shopify stores- you're going to immediately see something very typical, which is these guys have yacht-po installed, but they also have product reviews installed. so one of the main things that eats up your shopify style speed is having residual app code that's just trying to load, but the app isn't there anymore and you never cleaned up the code. so this, to me, is already a complete giveaway that there is room for optimization. now, if we look, these guys have 203 requests. that's kind of more than usual. right here, you clearly see, the average number of requests is around 119 and that's the average. so that's not fast. 203 requests, that's a lot. on top of it, you can see the page size, which is 3.5 megabyte. that is a pretty big page that needs to be loaded every single time. now you might tell me, andrew, the load time isn't that bad. okay, but that's because google's on a good server and, yes, it does load in a pretty decent amount of time. but you know this, 203 request and 3.5 megabytes, that could be pretty heavy for, let's say, a mobile somewhere on the new york city subway or somewhere in the middle of our kansas, i don't know. i know nothing about our counts. so what do we actually do then? how can we improve this besides removing the residual code? well, the next thing we're going to do is we're going to look at the waterfall together. a website is nothing more than a collection of files that come from all over the place. some files come from facebook, some files come from the shopify, cdn network and your browser. when they want to visit a website, they just say, hey, give me the list of all the files i need, and then your browser is going across the internet going to get each of these files. in the case of cad and lane, they have 203 files that they need to go get every time the home page is loaded and we can see right here are those 203 files in a chronological order by the order in which they get loaded. so these are all the files that get loaded when a homepage is loaded. now where does it get? really interesting is that we at e-com experts are going to go over this manually and are going to see what makes sense, what doesn't. so, right here we can clearly see: the first thing is a request to the server. that makes sense. the very next thing is going to be a javascript file. okay, okay, that makes sense. and like that, we go down the list and we say, well, okay, that's a lot of javascript's file, but wait a minute, what is this bold upsell in the seventh place? if i see that the seventh file you are loading before tracking pixels before your banner image is the javascript of bold upsell app, i'm imagining that bold upsell is at the very top of your homepage. so let's go and see, and this is what happens with every store. i don't see bold upsell anywhere here. there is no reason bold upsell is loading here. there is just none. okay, you might be thinking, yeah, but the upsell probably happens lower, okay, um, still no bold upsell, maybe on a quick view. no upsell right here. why are we loading the bold upsell app on the home page if you're not using it on the home page. you see, you start start understanding the picture here. all right, let's, let's keep going down. so we, we had bold upsell around here and then here, bold upsell again, and then bold options. now we're loading both options. we didn't see both options on the home page. don't forget, these apps are super useful on the product page or wherever you decide to have upsells or options, but they don't have to load on every single page. that's not the goal, and if you let all of these apps load on every single page, then you just clutter up your page. but let's go to the big final thing we do beside, like well, not really optimizing images, but minifying javascript and yada, yada, yada. what is the other big thing that we do? all right, let's, you know, we keep taking kaden lane as an example and, by the way, if this is your store, reach out to me. we'll do a very good deal on site speed optimization, because i really used a random store. i found here um, and i owe you that one plus. you're a beautiful store. a very typical thing is: i think you have reviews here somewhere. yes, you do have reviews. so now the question is: you have yacht po reviews, i'm assuming. so we do a little control finds we do. yagpo, yatpo is being loaded on the home page. now the question is: why is it unload on the home page? you see, if i visit your store, i see this. if i do it in mobile, i see drumroll, please, i see this. that's how it would look on mobile notike that in no cases are there any reviews. i do not see any reviews. so why am i loading the review app if the review is all the way down on the page? i could very well tell yatpo: hey, don't load. when the user sees the page for the first time, wait a second. and when the user starts interacting with the page, then start loading yatpo, because by the time i scroll down and down and down and down and down, oh, now i'm gonna, now i'm gonna come to the reviews and now it makes sense. you know it got a lot of time to load the app and so, like that, we're really going to go to the entire waterfall of every single page that matters for the shopify speed optimization score. so that means all the products pages, all the collection pages and the home page, and we're really going to make sure that the things that get loaded, need to get loaded there and not just randomly push everything unload as soon as a user comes to your webpage. if we do it correctly, the result should look something like this: a mobile of 83, a desktop of 94. those are numbers that are start making sense, although headphonescom was a pretty complicated website to work on because they're so big, because their products are so amazing. so if you need headphones, go to headphonescom because it's, frankly, they're amazing. but you know, big sites get more complex. but 83 out of 100, that makes sense for mobile, and now it's optimized. the same for desktop. 95 to 100, that makes sense for a desktop version. and then some people ask: okay, andrew, but what do you prioritize? what is important that gets loaded on load? well, the things that are important to get loaded on load is, first of all, you're tracking pixels. you got to make sure you're tracking as soon as the web page starts loading, because then you can retarget, then you can you know you're not losing out on all that tracking data. and then the number two that you start loading is your main image, your menu, your logo, your main call to actions. all of those things are, of course, very important and they should be loaded. but things that shouldn't be loaded are your instagram app that's at your very footer. wait, hold on to that load. make sure that that only starts loading once the user starts interacting with your page, instead of immediately slapping that as soon as your visitor visits your page. hold on with the apps that are only on the project page. don't make them load on the home page. make them only load on the product page. and especially if you go to testmystorespeedcom and you realize, oh my god, wait a minute, i have yacht pro- that's a review app- and i got product reviews- that's a review app. that's no bueno. if all of this makes sense, you're like: oh all right, can you do this for me? absolutely, follow the link down below. we just do shopify side speed optimizations. that's the only thing we do, and we will gladly help you out making your store like this fast, like a 94, like an 83. we will gladly help you do that. thanks a lot.

More:Toronto: Too Black Guys

How to Increase Shopify Page Speed – 3 Easy Ways

[Music]. hello, I'm Chris Long with Go Fish digital, and today we're going to tok about improving site performance on the Shopify platform. by making your Shopify store faster, you can improve the user experience from your SEO, social end paid traffic. this can result in increased conversions and revenue from all of your digital channels. the performance improvements that we'll tok about today include reducing and compressing images, lazy loading and removing Shopify apps. now let's take a look at each one. first, reducing image sizes. larger images are one of the biggest contributors to slower load times on Shopify sites. oftentimes, image files will be uploaded at larger file sizes than their actual display size. this causes users to have to download larger image sizes than they actually need to. you can check for opportunities to resize images by using Chrome developer tools. to do this, simply right-click the image in chrome and then select inspect. next hover over the image URL. if the intrinsic size is bigger than the display size, then this image could be made smaller. once you've resize your images, you may want to consider compressing them as well. image compression tools will reduce the overall size of your image files with very little difference in quality. this will result in even smaller images for your users to download. to compress your images, simply upload them to a tool such as Optimas illa. common image formats such as PNG or jpg will automatikally be compressed. once complete, you can then re-upload your compressed image files to Shopify, speeding up your website. next up is lazy loading. on Shopify sites, we oftentimes see opportunities to lazy load images. lazy loading is a functionality that only loads an image once a user Scrolls to it in the viewport. this allows your above-the-fold content to be loaded faster, as all of your images won't be loaded at once. to implement lazy loading, we recommend using the lazy sizes library, which we've linked to in the video description. a developer can help you implement this. finally, removing third-party apps similar to WordPress plugins. Shopify stores can implement additional functionality by using Shopify apps. however, too many Shopify apps can slow down your Shopify store. this is because Shopify apps add additional JavaScript and CSS files that users need to download. a great way to speed up your Shopify store is to perform an audit of all the Shopify apps that you use. ask yourself which ones are a must-have first, which ones are a nice-to-have. consider removing any that aren't high priority for your store. additionally, we analyze a variety of Shopify sites to find the apps that are the biggest causes of slow load times. you can find this analysis in the video description. we hope this has been helpful and feel free to reach out to us if you have any questions on improving Shopify performance. thanks for watching.

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.