Video Transcript
Hey, Scott Austin here from JadePuma. In this video I wanna give you an overview of how you can easily evaluate the page speed or page load of your page in Shopify. Now, I'm a big fan of not worrying about page speed on your website. If you pick the right theme and, and follow up best practices, you don't have to think about this too much. That said, there are times where you do want to go in and look at some details on what's going on in your website to understand the cause and effect behind your page speed. So here I am on Mulberry Park Silks store that sells silk bedding, right? And I'm gonna just quickly look at the homepage and then a product page and show you how that works. So I'm in Chrome and in built into Chrome. If I right click, one of the options down at the bottom here is inspect.
So I'm gonna click on that inspect and it's gonna open up this window where I get all these, you know, tools and developers use this all the time, but if, if you're not a developer, you can use this tool to figure some things out. So I'm gonna click on the network tab up here at the top. And what this is gonna allow me to do is look at how the page loads up all the different elements that loads. And, you know, any web page has a lot of different pieces of content that it's gonna load up, but we're gonna look at it in aggregate. So what I'm gonna do is I'm gonna go back to my website and I'm gonna hit shift and then refresh right here to reload the page, what's called a hard reload, where it's gonna reload most of the elements of the page.
So now on that same inspect screen that I had open, that had to be open the whole time, I just did that, you can see up top of this little timeline up here. It shows all the different elements that it loads and under the all. So there's a lot of tabs here. There's tabs, you know, layered to bun tabs right now. I've got all selected. So this shows all the files that it loaded to load this page. And, you know, there's 232 requests made. So there's lots of little files that are being loaded up, and there's a total of 4.8 megabytes transferred. And it, you know, loaded this, this site in 3.9 seconds, 3.19 and took 7.76 seconds to finish the loading. So that 3.19 is the, the key number there. And the dom is loaded in 1.8. So this bottom gives you some stats that are, you know, relevant for a page.
Now what you can do is you can look at the size column here. I'm gonna click on that to filter by size. So you can see the largest element on the page is this one. And then going down, you know, in smaller size. But what I'm gonna do at the top is click on images. Cause most people think it's it's images that's slowing down their website and usually it's not. So I click on that images, it's gonna filter that list of 232 requests down to the 55 that are images, which I can see down on the bottom footer there. Now on this I can see my largest image is 146 K and only one is is higher than a hundred k. Everything else is below that. So that's pretty good. All right it's loading up images and optimizing them. You can see their web p which is the latest format that Shopify is using to deliver images.
And those are the, you know, the most optimized that you're gonna get are gonna be the web P ones these days. And there's other types of images that are brought in by different elements, but you can also click on it, you can see which image is the one that's the 140 K, and then you know each one down from there. But if we look back on our all section here, you'll see that the thing that takes the, the most file size, the largest file is a script, a JavaScript file, customer portal. I'm gonna guess that's something for their chat bot. Alright there's another one here. This is the gorgeous, so that's, that's the chat bot right there. But you can see that it's the JavaScript files that are taking the most time to load. And usually right, you can see the initiator here.
What's happening on that is it's coming from a third party website usually. So if it's on a Shopify service, it might be easier to load up, but then if it's pulling it from a third party website, it might take a little bit longer to do that. And then the other thing we can look at, so that was the size column. We can also look at the time column. And you can see in this waterfall image, it's kind of small here. But you can see that some files, you know, load up really quickly and others take a longer period of time. You don't need to go to the de through the details of the waterfall, but you can sort the, the time. Now let's do that by descending. And all of a sudden you'll see here that this one element at the top took, you know, 992 milliseconds, which you know, is basically a second to load.
And that is a JavaScript file. And that's from Hulk code. So that's Hulk apps. Some app we're using from Hulk, probably that is, you know, the, the issue there. And you can see the ones that take the longest amount of time are usually JavaScript files. So here's the one from Hot Jar now there's a png and that png file was only 9.7 seconds, but it took ha half a second to load that. Now that png file is the Judge Me reviews badge. And that's probably coming from the Judge Me website. The, the Uber point I'm making here is most of the speed issues that are happening in a Shopify store are not from the images and they're not from the Shopify servers. They're usually from apps that we add in and layer on to the site that add extra functionality. And we like that functionality, but the trade off is the performance hit that we get from them. So that's, you know, the homepage. Let's look at another page just to show you another example here. So I'm gonna go into a product page. We're gonna pick on silk sheets, go to the 22 Mae bedding and then pick the sheet set.
And I'm just gonna do a hard refresh like I did before, gonna let the page fully load. And now you'll also notice that their product pages are full of contents. There's a lot of, you know, content on this page. So I'm gonna do a shift refresh on that page, load it up again that whole time I had it on another screen. But that whole time I had this inspect panel open inside of Chrome. Now what I'm gonna do is I'm gonna sort by size and we'll go to the top of the list and we'll see what the largest file. So there's the JavaScript customer portal at the top. Again, there's a file MPS map new. So that, that's an image. And this is an interesting one. This comes from within Shopify, which highlights an issue that does happen. So let's go back to that page and show it to you.
We have tabs near the top of this page right here and what we did for shipping and delivery, we've got this file right here, expedited shipping. And this comes straight out of our shipping policy. So we have liquid code that says, you know, look for the shipping policy at the store level and drop that in on this product page. And you know, they show that to you. If we go down to our shipping policy right here, we'll see the same thing where it's got this content. So this content is embedded in HTML so it's not being delivered by the theme as a theme element, which, you know, I use the flex theme for all my stores. And the way Flex does it, it actually requests the right file size for where it's gonna be displaying that image on the page. Well that theme optimization for file, the file size being pulled.
And by file size mean the dimensions. Yeah, gimme the 600 pixel wide image or the thousand pixel wide image that's not being used cuz this is in pure html. So this is an example where we could get a slight improvement in performance of let's bring that panel back over again. We could get a slight, you know, improvement in performance on file size just by taking this image, which is a jpeg, right? Because it's a heavily graphical image, it would be better off as a p and g get better compression. But I could put that up as a p and g and probably have a, a smaller file size. And I don't know the dimensions of this one. I'm sure we could figure it out here. We don't need to right now go to that level of detail, but I'm sure we could make that a more optimized image. But that's the only image that's up in that, you know, top level of things right in, in file size. The other things that are up there are other JavaScript files, gorgeous again, vendors a a halt code, one Affirm JS. So you can see it, it's all this Java script that's taking the most time on this page. Now this page actually loaded up pretty well. It took 2.6 seconds, you know, 3.7 megs of content, but it did take
35.53 seconds to fully load up cuz that's all the different JavaScripts and it's also probably cause I was scrolling and it took a while for the all the scrolled content to pop in. So this page isn't that slow at 2.6 seconds, but you can see even Google saying, you know, we're gonna give you a red for that. But the way you're gonna fix most of that is you're gonna look at your JavaScript and ask yourself, do you really need that functionality on this website for example a lot of the apps that we add, you know, we don't need them on every single page, but the, the code that we put usually into theme dot liquid, you add a line of code that says load up this JavaScript. If you wanted to get more elegant in that, you could actually have some if then statements.
Like if the template, you know, contains product for content, you know, or an app you're gonna use on the product page, then load up that JavaScript not on every single page. Those are some of the things you you can do. So let's look at the time on this one and see the things that take the most time. And what I'm quickly scanning down is, you know, the first image, let's actually go to images and that tab up there for images and on the time, right? The one that took the most time was the judge me image again. And then after that was the logo and then the map was third on that list. So the map which had the highest file size of 300 K for images, you know, did take a bit about a quarter of a second to load, but much more quickly than two other elements.
So just cuz it's the biggest file doesn't mean it takes the most time to load it, right? You can see once again, judge me this little, you know, 9.7 kilobyte, you know, microscopically small file takes a half a second to load and that's one of those things where we may actually make the decision. Let's go back to here and show you where that, that element is that that's this image right here. We might just say that isn't worth it, right? And we're not gonna have that element on the page anymore, making that call to judge me cuz it's a half a second hit on every single page. Now another thing to note as I say that, let me open up this waterfall again. Right now we can't see it here cause the waterfall's gotten so small. Let me just do a quick refresh of the page and show you the waterfall here.
And the important thing to show you is not, so all these elements don't get loaded up in cereal. Like it doesn't do one at a time. It can do them in parallel. So just cuz something takes a half a second doesn't mean by fixing it, you're gonna gain a half a second in time. You may gain no time in in page B, but that's the kind of thing you can look at and play with and use this tool to measure it. So the Uber point I'm making here is when you do have a serious issue in your Shopify store from a paid speed and performance aspect, you can use the Chrome tools just right click code to inspect and use those tools under the network tab to get a high level understanding of what the content is that in, you know, the size of the content and then also which pieces of content are taking the longest to load and figuring out why it's taking so long and seeing if there are things that you can do to fix it. And if there aren't, then it's a business decision of do you keep that element on the page or not. So for that helps, thanks for watching.