how to analyze shopify performance

hey it's alex kazai from render better,and in this video i'm going to show you,how you can monitor your web performance,better and use tools like page speed,insights google search consoles and,others to take a closer look at your web,performance and get a better,understanding of what's working for your,site what's not and how to actually dig,into the issues that these tools are,showing you now in order to walk you,through this i'm actually going to use,an example report that i put together,for one of our clients called vitamin a,and i'm going to walk you through that,as well as at the end of the video after,i go through that report i'm even going,to dive in and kind of show you how i,would debug it live before passing it on,to our developers to take a look at and,fix so i hope you enjoyed this video,let's dive in,so let's go ahead and dive in we'll,start with the google search console,first like i said i'll probably just,pull up the tools because it'll be,easier but i won't be able to show you,the previous uh necessarily because it,was in the past so this is a screenshot,of your core web vitals from google,search console,on january 20th so a little over a month,ago that was the most recent one i had,it doesn't necessarily mean there was a,big change on this date it's just when i,went in and took some screenshots uh,just to see where things were tracking,and then this is where it's currently at,and so let me just pull that up live,because it'll be easier to show,this live i would assume and also show,you how to get there yourself,um so again this is search console here,and the tab that i'm on after i selected,vitamin a is just down here called core,web vitals so you can see an overview,here and just close that you can see,mobile and desktop,and if you remember from that screenshot,basically what's happening here is good,news,previously there were a bunch of red,urls and now a majority of those red,urls have shifted to yellow,on desktop it's pretty much held steady,at yellow and green,what we're looking to accomplish here is,get the majority of urls into either a,yellow or green zone because within,yellow or green google provides some,ranking boost to those urls they've not,said how much of a boost and from what,we've seen it's kind of hard to tell so,it probably is minimal but they are,keeping an eye on this and they will now,provide a boost to both the mobile,version and desktop versions based on,how well they are performing so if it's,in the red it doesn't mean it's,penalized it just means those urls won't,receive a web performance ranking boost,benefit based on their latest update so,it's not necessarily a bad thing it just,means you're missing out on a little bit,of extra opportunity there for slightly,better rankings a little more traffic,but again google has not explicitly said,how much of a benefit it is,but,even though it looks a little dramatic,here with all the red yellow going on,what i could see is that and i'll talk,about it as we're going through the,other tools through my investigation i,found that really the only issue is cls,and that's one of the web performance,metrics that measures how much content,shifts around the page,however for your site in particular i,would say it's pretty much irrelevant at,least in terms of user experience,because your site loads so incredibly,fast that the shifting around is going,to be pretty much unnoticeable and not,really cause that much of an impact to,the user however google does factor it,in as one of the core web titles when,they're looking at whether or not the,url passes or fails so if the url simply,doesn't pass on one of the metrics,it holds it back even if it's great for,the others and you can see that by,opening the report and kind of checking,all the different statuses you can see,the only thing holding back your urls is,cls and if we're to dive in and for,example look at the poor ones you can,see that it's primarily collections and,product pages that are holding it back,collections being one of the biggest,ones in terms of the aggregate,you can kind of look at this number as,like a percentage so what this would be,is roughly 64 of the content on a,collection page is shifting around when,it's loading in or as a user scrolling,on it um and so a good way to think,about that is if you go to a news site,and you see like ads pop in or images,load in slowly and then all of a sudden,the text shifts that you were trying to,read or you accidentally click on the,wrong button because it shifted to,somewhere else on the page,that's cls so again it can be,frustrating from a user experience,standpoint but your site is remarkably,fast so it's probably not going to be,that,noticeable however,for example even if this collection page,here is extremely fast for fcp lcp and,fid so it loads fast it's fast to,interact with even if all that's,fantastic and this is still high google,is going to market as a red url,kind of dumb in my opinion but i get why,they do that they want you to meet the,good thresholds on all the metrics so,again there's two benefits we're really,aiming here for web performance is a,better user experience and then the,slight ranking benefit from google in,that order,cls being kind of one of the least,important metrics but unfortunately,still can sometimes hold us back and be,tricky,there is a balancing act here though,because you know you could change up the,design of the site to just you know,try to tweak these pages into the green,for cls but changing the design might,not necessarily be a better user,experience it might be better for the,robots because they don't see as much,content shifting around,but changing up the design could,potentially lower conversions so it is a,balancing act and could be a trade-off,that's not really worth it which is why,we're careful to play around with cls,too much if everything else is,performing really well,if we go back to desktop you'll see it's,a similar issue,the majority of the urls are either,yellow and green which means they're,already receiving some ranking benefit,and then of course cls is continuing to,hold things back to back a bit on,products and collections from my,understanding and talking with james the,vitamin a site you know has a lot of,intricacies in its design it's very,beautifully designed,and so you know from my perspective even,though this is holding back some of the,urls,uh i wouldn't necessarily say it's an,issue but maybe like there's a little,bit of room for improvement that we,could try tweaking the designs without,altering them too much to not only,appease um you know the the robots but,make sure that we're still providing a,solid user experience so that's what's,going on inside a search console in case,you were to take a look and you wondered,what was going on there if you have any,questions please let me know,and then page speed insights is another,tool we look at because it kind of gives,us an idea of like an overall average of,where things were where they are now,so if you were to throw in the site to,page speed insights which i did here for,example earlier today what most people,do is they leave it on the mobile tab,and they leave it on this url and that's,as far as they go but there's actually,four different settings you can look at,mobile for home and origin as well as,desktop for home and origin and you,could even throw in an individual url,but depending on how much traffic the,url receives it might not have the real,user data up here but given that it's a,large site and it's the home page it's,guaranteed to have enough data up here,so these metrics just like search,console they're kind of averaged up over,28 day period which is why it's a much,better measure of success than the lab,data which is what's shown below because,this is just what a google server says,the performance is at the moment i,tested,so,this number is like a simulated,experience and it's also a simulated,worst case scenario it's in no way,indicative of what the real user is,experiencing however because it can be,run instantly,it can help predict what might happen to,performance for real users but you'll,notice that for example like fcp and lcp,of 1.3 and 3.9 it's far different than,what it's showing here of 1.4 7.9 for,the simulated experience so your users,are not it's not taking them nearly,eight seconds to see large images for,example,it's closer to the 1.92 second threshold,and the good threshold for these metrics,by the way is 1.8 2.5,i think this one's,100 milliseconds i believe forgive me if,i'm wrong there but i believe it's 100,milliseconds the graph is kind of,deceiving,but i believe it's 100 milliseconds,um and then the cls is 0.1 so again even,though it looks kind of far like you're,far away from it the scale is from zero,to one and you're at 0.16 here on,average or sorry on the home page on,average or higher you're at the point,three,and that's because the collections and,products are pulling up that average,because the home page is a lot less,but you can see that your site on,average like i mean blazing fast right,like the home page is a little bit,slower but on average 1.2 1.7 i mean,that's well within the green threshold,and blazing fast speeds,um so,but i mean also we've done a lot of work,on this site so i would hope so,um and again if i change it to the,mobile origin it doesn't matter up here,or sorry this url or origin because all,this is looking at is the home page in,the instant i ran the test,we tell people to just kind of avoid,looking at this number honestly because,it really only helps if you're looking,at it as an overall trend which we'll,show you here in a little bit that we do,in our dashboards but just,measuring it one moment in time isn't,super helpful and also this number can,be manipulated very easily with some,tweaking when you're running the test,and some tweaking in the code so,uh it's it's not super helpful,in terms of measuring success but it can,help predicting sometimes or debug,things when we're testing,likewise on desktop kind of similar,story right you know we,even though the score is better over,here it's kind of irrelevant that it's,better than the other lighthouse uh,speed score and by the way the shopify,speed score is based on this similar,data here this lighthouse data it's just,that it's looking at your home,collections and products combined and,then factored into their own,formula that spits out a number so again,it's lab data not real user data,but looking at your real user data here,i mean your homepage is blazingly fast,passing on all metrics and then your,site wide is,super fast i mean one second one point,six and eight is incredible uh it's just,that the cls is again holding them back,so i know it's kind of scary because it,says failed up here,but it's it doesn't matter if just one,of these metrics is slightly in the,yellow um it's going to give you a,failed so kind of dumb because it's it's,almost like three greens and a yellow,average out to red but,you know that's not really what it's,indicating it's just that,based on how google looks at it it's,saying that on average you're not,passing for every metric but again this,is like a site-wide average versus what,we're looking at here,which is an individual url basis,so this kind of gives you a summary but,this is really what google's looking at,when they're determining that slight,ranking benefit for each url and so now,we'll kind of look at what's going on,like before and after so if we look at,previous uh you can kind of see it was 1,and 1.5 on mobile site wide and now it's,1.2 1.7,as well as the interactivity went up a,little bit so the cls went down by about,0.1 but the uh it's taking a little bit,longer for things to load so again that,could have been due to some design,changes maybe some code changes or,additional third parties,it's still well within the green and by,the way getting it further into the,green makes no difference to google but,it does make a difference to real users,of course but for how google sees it,green is green it doesn't matter how,green or how little green,uh desktop kind of similar story of what,happened one 1.5 for the loading speeds,and you can see it's now 1 and 1.6 so,fcp and lcv basically are measuring how,fast or how long it takes to see the,first piece of content which would,usually be like the menu or the logo and,lcp is looking at the largest piece of,content which would be generally a,product image banner image featured,image or a big block of text and then,fid looks at how fast the site responds,when you click so at eight milliseconds,if i click on the site and the site does,something that's you know instant to the,human brain so this is blazing fast and,great it's just that cls shifting that,again it's holding some things back so,yes it does appear that over the past,you know a little bit over a month here,i would say a month and a half,the site's gotten a little bit slower in,terms of fcp and lcp but it's still,really great but it also means it's,something we want to keep an eye on,because we don't want to keep getting,slower than that and you know pop out to,the yellow zone,so this is where i was talking about we,look at our own dashboards as well so,these are our internal dashboards that,we have that i have pulled up here,this one's however looking at last six,months whereas the screenshots are,looking at the last 90 days,but it does give us kind of an idea of,what's been happening and so this is,where the lab data can be helpful,because we can kind of look at it as a,trend again if you just measured at one,point in time you can kind of see how,wildly scattered these data points are,so it's hard to say for sure unless,you're looking at a trend that something,is going on and what i can see here over,the last six months is that performance,is really stable in terms of that,lighthouse lab data score across all,your page types which you can see over,here on the side,but recently towards the beginning of,february there was a little bit of a,drop for,uh it looks like the blue here which is,homepage which kind of pulled down the,site-wide average um and i would say,roughly all of them dropped a little bit,um but yeah there has been a little bit,of a drop and a new baseline established,it seems,so this is something that we'll want to,look into but before i worry about it,too much i like to see okay well how did,that impact the real user data so these,are the individual metrics you can see,it looks like it's primarily due to lcp,was damaging the score but some other,things are kind of spiking and having,some issues so again,something that's crept up here in the,past few weeks and that will want to,look into but wasn't,mostly because it wasn't previously an,issue so i'm curious what's going on you,know it was a third party a change we,made to the designer code um,should maybe an update shop if i did i'm,not 100 certain so definitely something,we will keep an eye on,uh now real user data these are the same,four metrics we were just looking at on,page speed insights so we're looking at,mobile here basically what you're seeing,here this fcp lcp so these numbers right,here,we've been gathering this data on a,daily basis and that's what's being spit,out over here into this real user data,now what's interesting is that the site,wide and home page look really good in,fact it looks like you know they were,getting better,but then in february not necessarily,that they were you know getting really,bad but they were starting to crew back,up but you can see compared to prior,months in the past six months it's still,better um so that's uh really good in my,opinion but what's interesting is we,have a couple data points here now for,collections,now it won't necessarily show this data,unless there's enough traffic to those,individual pages,um and so that's why usually we're only,able to see home pages site-wide here,but it looks like the collections are,now starting to get enough traffic on,some days to show data points,however there's not a whole lot of data,points so it's kind of hard to tell,but you can see that the collections has,definitely shot up and fairly,dramatically honestly in the past couple,of weeks so that's really interesting to,me because,you know the collection pages weren't,really dipping here that much on lab,data,but i do know the collections for sure,have cls issues which is very apparent,because it's way outside the red poor,threshold here and it's definitely,what's pulling well a big factor of,what's pulling up the cls or sorry the,site wide average for cls which is,exactly what we saw when we were looking,in search console so our dashboards are,telling us the same story that search,console is,and i would say if there was any room,for improvement to really pull back down,site-wide averages its collection pages,collections are what,are in the most recent you know weeks,here have really pulled up the site-wide,average and what caused these numbers to,go up a little bit,across the board interestingly though,the cls average went down,but from what i can see here i think cls,or sorry collections is what we want to,focus on moving forward,all right so in the previous section i,was showing you that collection pages,were a fairly big issue recently,for this site vitamin a swim.com so i'm,just going to go ahead and walk you,through how i would actually look at it,live before passing it to our developers,and so we identified that collection,seem to be the primary issue so usually,what i try to do,is find a collection that's most likely,you know one of the highly visited,collection pages and so for example if i,just go to shop here and let's just go,ahead and click on this i would probably,pick best sellers or one of the ones,they have mentioned here so i'm just,going to go with bestsellers because,most definitely this is probably a page,that gets a lot of traffic so this is,one that we would want to look at be a,pretty good example,and so typically what i like to do is i,like to look at the mobile first to,debug mainly because our dashboards that,you saw those internal dashboards those,are looking at mobile data typically as,well if we can fix the load time issues,on mobile that will fix it on desktop,now for cls the cumulative layout shifts,sometimes that can differ between,mobile and desktop but sometimes it's,the same depending on what's causing the,shifting issues so one thing that you,can do that's pretty simple is if you're,on this page you can right click on a,blank spot,and pick inspect you can also go to view,up here and you can go to developer and,then you can go to developer tools,that's another way to get to it,so let's just go ahead and pop open the,developer tools here,um and what i've got it on right now is,a pixel 5 but i could change this let's,just go ahead and do an iphone 12 pro,that's probably a pretty common phone,that people are using,if you were to inspect by default it'd,be on the elements tab,and what i'm on over here is the network,tab right now,and so normally you won't have this but,there's two settings that i do is i will,do this disable cache so normally it's,unchecked and i check it and then,normally this is set to no throttling,under the network so typically this is,what it would look like,unchecked and then no throttling i like,to disable the cache that way it's,basically testing a first load because,sometimes the issues are first load only,and then oftentimes i'll slow it down so,i can get a better understanding of,what's going on but before i do that,we'll we'll do a test run without,throttling just to see what it looks,like at a normal connection speed now,additionally down here you'll probably,not have these tabs,in order to pull this up you can press,escape and that's kind of a shortcut to,pull up this panel,also the rendering usually isn't there,typically it's just on console that's,what most people are familiar with but,if you click this little menu and you,open up rendering this is super helpful,because then you can go in and start,kind of getting a visual representation,of what's going on a bit easier so one,of the things that you can do is you can,check core web vitals here and it'll,actually display the core wide vitals as,the page is loading now it kind of sucks,because it overlays the top so it's not,really the best it'd be nicer if they,put it off to the side,but it does kind of cover up the top of,the page,and then the other thing you can do,is you can look at the layout shift,regions here and that's going to,highlight stuff in kind of a bluish,purple color as things are loading in to,show you what part of the page is,shifting around so again without,throttling i'm just going to go ahead,and refresh this page,okay and you can kind of see the blue,shifting so there's definitely a lot of,shifting going on down here and that,caused a pretty big spike we got like,the 0.50 but again it was kind of hard,to tell what was going on because things,were going quite a bit faster,so let's go ahead and go up here to the,throttling like i was talking about and,make it a fast 3g so it's a little bit,easier to see what's happening as the,page is loading,so you can kind of see that there was a,a blank spot for this image to be able,to load into and typically this type of,image would be the largest contentful,paint but it is kind of odd that it's,showing took a while to show that time,even though it showed up before that so,that's probably something i would,investigate and i'll show you how we can,also identify that this image was the,largest contentful paint,normally on an ecommerce site it is,going to be an image but sometimes if,it's on a blog post without a featured,image for example it'll be a big block,of text or like a big headline,but typically if it's collection home,page product page it's going to be an,image,that is the lcp and so you want that to,load as early as possible before the,other stuff generally because that gives,the user a good idea that the page is,loading and they're going to be less,likely to get impatient and leave so the,sooner you can show that big important,piece of content the sooner it gives the,user something to look at and also be,reassured that the page is loading,now what you might have noticed is you,could see the footer up here and then it,got pushed down so because we were able,to see the footer and then all of it got,pushed down that's a pretty big shift uh,almost about half the page and so that's,why we're kind of at this like .56 which,roughly indicates like a fifty percent,you know portion of this uh page was,shifting is kind of a way to think about,it it's not completely accurate but that,does give you an idea so see how you can,see the keep and touch that's generally,at the bottom and then it's all shifting,down so all that shifting down as these,collections are loading in here these,collection items is causing a big shift,and depending on where i scroll it might,cause an even bigger shift and i'll show,you why that is here in a second so yeah,you can see down here is the footer so,now check this out if i go back up to,the top,and we do a stop and we refresh and,let's say for example instead when i,refresh the page here,that i scroll down a bit further now,look how much higher that cumulative,layout shift is,the reason why is because pretty much,the entire page now is dedicated to that,collection stuff loading in because i,chose to scroll down,um so that's where the real user cls,might differ from the lab data cls,because the lab data when you plug it,into these tools it's not going to,emulate scrolling or user clicking,around before things have fully loaded,in so that's why sometimes it's helpful,when you're debugging things especially,like cls to scroll around and not just,leave it loaded up at the top because,remember a real user won't necessarily,just wait they're going to start trying,to click and move things around on the,page even if it hasn't fully loaded yet,and so the reason why i wanted to,mention that is because we also like,using a tool that's a bit more,detailed than something like patreon,insights called webpagetest.org,and so i ran this before starting this,video just to kind of give you an idea,but i went ahead and threw in that,collection page,and as you can see it identified the,largest contentful paint as that image,so it'll even point that out for you but,it'll also show things like cumulative,layout shift but you can see here it's,showing a much lower cumulative layout,shift score and my guess would be what's,happening is the collection stuff isn't,fully loading on this test and you can,also see kind of the viewport of this,test doesn't even show the collection,area right so it's not even looking at,the part that has the worst cls because,it's kind of looking at what's happening,up above here,and so that's why we're not seeing as,much of a cls issue and then again here,yeah it's showing that this is the lcp,and it kind of gives you an idea of,what's happening here with the shift so,yeah here you can see that it's talking,about the shift as what's happening here,but as we just identified in this other,tool the cls is primarily happening,below that image and so that's why it's,helpful to use more than one tool when,you're looking at these situations you,know you want to use search console to,see which urls are having the biggest,issue for your real users based on that,rolling 28 day window then you want to,use a mix of these other tools to kind,of debug it and emulate it for yourself,so you can figure out what might be,going on and how you could fix it now i,do know that recently with vitamin a we,had a pretty big launch where we changed,the way their collection pages were,loading but previously on our graphs,collection pages weren't you know,showing up however in search console,it's now kind of pulling up the average,so what could be happening is in general,there just might be more traffic to,these pages and now it's starting to,collect more data and that's bringing up,the numbers that's one part of it but i,would say another piece of it too here,is that the way the collections is,loading in it's a pretty common issue,for most shopify stores because,typically shopify stores especially,larger ones are going to use a third,party to load in their collections with,more features,than just a native option so typically,they're using some sort of third party,and so what's happening is that we're,prioritizing the way the page loads and,and then generally some of the,javascript or things that power you know,like these third parties for the,collection pages is going to get,deferred because it's not an immediate,priority again we're trying to get the,majority of the stuff up here above the,fold the load so they don't bounce,that's priority number one the shifting,is a much lower priority because you,know it,most people are going to have a faster,connection than this and it's not really,going to be that noticeable,so really there's only a couple of,options,because again this is a pretty common,issue that we've encountered for cls on,collection pages you could do a google,anti-flicker which would basically hide,the entire page in like white until,everything is loaded and then you would,reveal the page so then there would be,no shifting but the big downside to,doing that and why we almost never do,that is then all the content is hidden,and so it makes it seem like the page,isn't loading or it's stuck and that,might cause the user to hit refresh get,frustrated hit the back button or just,leave the site entirely,so again typically we're going to,prioritize things like lcp and fcp and,fid things that measure speed and,interactivity over the visual shifting,because if the connection's fast enough,the visual shifting really doesn't,matter that much unfortunately to google,it doesn't matter how fast or how slow,the shifting is happening they just look,at how much the shifting is happening in,order to measure uh cls,so it's kind of like we're trying to,play a balancing act between the benefit,of making the best possible user,experience but also appeasing the google,bots that way you get the best possible,ranking benefit but i would definitely,say that the user experience outweighs,the ranking benefit because we have no,idea how much the ranking benefit is,you know and it's really not worth,trying to optimize for a bot necessarily,that definitely isn't going to make it,purchase on your site it's much more,important to optimize for the user who's,actually going to make a purchase on,your site and so a lot of times these,collections you know you're you're using,third parties because you want a,feature-rich collection option that,makes it much easier for consumers to,shop and that's really what we should be,optimizing for so i'm not certain that,we'll necessarily do anything to fix,this because again it is a balancing act,but that is what's going on here on the,collection page and that is something,that um you know i'll pass along to our,development team and see if maybe,there's a way we can kind of balance it,a bit better,but i hope this was helpful and you can,see how that if you were to have lcp or,fid issues you would be able to play,around with the page two now what's,interesting that you'll probably notice,is fid didn't show up at all and that's,because i haven't clicked on the page,yet and so in order to emulate that you,have to start clicking around on the,page and then it'll give you an idea of,how long it takes the page to respond to,that,and so that's how you can get a better,understanding of how interactive your,site is for most shopify sites unless,you have a ton of apps that aren't,playing nice together uh the fid is kind,of like um,i would say like a participation,participation trophy that everybody gets,because it's usually pretty easy to be,under 100 milliseconds again unless you,got something really weird going on with,your website so in order i would always,prioritize lcp you want to make sure,they're seeing something not going to,balance then fid you want to make sure,they can click around and interact on,the page and then cls last if it is an,issue because again that it's really a,balancing act we're going after the,users,um versus you know what the robots are,seeing as visual stability,so i hope this video is helpful,and it kind of gave you an idea of some,other additional tools that we use here,between you know kind of using the,developer tools in chrome as well as,webpagetest.org so between that pageview,insights and google search console you,should be more than prepared to dive,into your web performance issues fix,them and make a super optimized,site for your customers,alright so i hope that example,walkthrough that i just did with one of,our clients helps you better understand,your own web performance and be able to,diagnose the issues but if you'd like us,to do it for you just go ahead and,contact me at renterbetter.com and i'd,be happy to help

Congratulation! You bave finally finished reading how to analyze shopify performance and believe you bave enougb understending how to analyze shopify performance

Come on and read the rest of the article!