Shopify Speed Optimization: Learn to Look at Your Website Like Google

July 1, 2022

Transcription of Shopify Speed Optimization Webinar: Learn to Look at Your Website Like Google. In this webinar, we'll cover how to assess your website for speed optimization the same way Google looks are your website. This is normally information I use in parts of Speed Optimization audits on Shopify and I'm giving it away for free.

I've done a couple of short video explainers on PageSpeed, as I found myself answering the same questions over and over again and wanted something quick and easy to send to folks. This information has been very helpful for merchants and doing a deep-dive is something I believe can be even more meaningful/helpful for folks.

Introduction

Hey, how's it going? So I am Taylor Page. I am a freelance web developer and a Shopify expert based out of the Springfield Missouri area. I'm just going to go over some real quick housekeeping substance. This is a live stream. Want to make sure everybody has a chance to potentially chime in with questions or anything like that they might have. Now you'll see me occasionally look over here. I'm looking at another monitor just to make sure that everything's looking great for the stream, but for the most part, I'm going to try to obviously keep my focus over this way. There's also a little bit of a delay. So if you do have questions or things like that I'm definitely going to try to make sure that I do get to them, but if it seems I'm not responding, it might just be because I haven't seen the question yet, or it's taken a little bit of time for the stream to catch up for you in real time.

So I can see chat in real time, but I can't necessarily obviously answer you in real time if the stream is running a little bit behind. So also real quick Lindsay, my sister, is in the chat. She does a lot of help for me. I call her the professional chaos organizer over here with my little company, The Pages Media. So I'm a freelancer, but that's the company that I do business under. So Lindsay, if you can say hi in the chat too, that would be great. Lindsay's going to also be including some links and stuff throughout when applicable for some of these things. So that way there's actually maybe something you can click out and read yourself, because I'm going to just really try to hit high level overview of a lot of different things rather than go real in depth into some of these things.

And so want to provide some information for you really about speed optimization on your Shopify website, not just from the sense of it's about how fast your PageSpeed loads. It has more to do with a couple of other metrics. It's focused on mobile usability and then UX or user experience and a couple of other metrics that are associated with that. And so we're going to take a look at all of those metrics other than just one single PageSpeed score. Also tell you how Google comes up with that PageSpeed score because when we do see that, that is actually a culmination of a couple of different scores that just gets condensed down to one single score. So that's why I typically tell folks it's not good for us just to focus on that initially.

We really want to focus on the key metrics that make that up. So that's Core Web Vitals, and I'm going to get into that here in a minute. But I do think it's important to give you some background information about basically why this is important and then to give you the power to go back and potentially make some of these changes yourself. A lot of folks think that they have to get a Shopify developer involved, they have to get rid of all of their apps and all of their images and all this other stuff, just to make sure that they're getting a really fast page score. And my suggestion is going to be that's not necessarily something you want to do because you'll also see conversions plummet.

You're getting rid of your really nice imagery that you paid for. You're getting rid of a lot of apps that help functionality of your website for folks. Those are not necessarily things that I would say you should just do without a strategy involved. And so we'll talk about how you can audit your website yourself and then move into basically a strategy moving forward that promotes good Core Web Vitals. And then after that, we start using more of that PageSpeed score as a baseline test, more so than an actual letter grade, which is what I think a lot of people get into. And so I'm going to start off by just jumping in here and sharing my screen.

Why Core Web Vitals Are Important

And so this all kicked off way back in 2018, Google decides that, hey, speed is now a factor for this. And so this progressed over time here, where we started moving away from this idea of just content being the only factor. There were a lot of negative tactics that were used in that. So everything from keyword stuffing to a couple of other not so great black hat tricks. And so basically that's moved away from that concept now to where we consider a more holistic view of metrics in order to promote some ranking factors there. So this is just an example, but most of what you all are familiar with is probably going to look something like this, and I'm going to show off my PageSpeed score here so that way you can see. It's a 64.

So I think a lot of people, when you first start talking to people about PageSpeed, or at least when I hear from a lot of people about PageSpeed, people are really focused on trying to get as close to a 100 as possible. And that's just not something you necessarily need to worry about. Not that my site is perfect, there's definitely some things we'll cover even today that I need to hit. I recently moved away from a Next.js based website to a Shopify website. Makes sense for a guy that works on Shopify to move his website to Shopify. But in doing so, I obviously haven't had time to properly assess a lot of different things because I've been more focused on trying to make sure necessary content is available.

But typically this is what happens. Folks reach out to me because this score, this is a bad letter grade. Most of us will convert this. We'll go back to grade school. A 64 is what? A D. And so obviously that's not great. If you grew up in a home like mine and stuff parents probably cared about your grades and a D wasn't great. And so we want something like in the nineties or something along those lines. And we'll talk about where this PageSpeed score comes from, because I think that's important to understand as well when we're talking about PageSpeed because this is the number usually people are most worried about from my perspective as a web developer. Most people didn't care about performance. They didn't care about your PageSpeed until Shopify stuck that right there in the dashboard.

And then obviously Google really started harping on the whole, hey, we really need to make sure that this is performant and doing well. So just a couple of little bits of insight there into what that looks like. So if you have wondered where that comes from, this is how your score is calculated. And this is a Shopify link on their help docs. So this is the online store speed report. You'll see that it links out to the speed report and a couple of other things as well. Talks about the importance of speed and where that score comes from. But I do want you to take a look at this because you'll see a lot of fluctuation in your PageSpeed score and that'll happen for a couple of different reasons.

One of those reasons being that it can change a little bit from product to product. So if we're using a different product template, Google or Shopify, I'm sorry. Shopify basically looks at specific collections and product traffic over the past seven days. So the ones that have the most traffic over the past seven days. And so instances where we're serving different templates, you could actually see different results based on those templates. So there's a little bit of variance there. We can also see a little bit of variance when it comes to Shopify apps and those sorts of things that we're loading as well. So apps have to rely on a server somewhere else. It's managed by that company or they're probably hosting through another company. And so sometimes there's just really slow load times for those things and different things that contribute to that there. And I'll show you where to focus on when it comes to that, when we're looking at these PageSpeed reports, trying to figure out how to assess and prioritize what we're trying to do here.

Okay. So another component to this, and I wanted to talk about this real quick as well. Going back to why a lot of us care about PageSpeed optimization and those sorts of things. So Google not only talked about 2018, they started off saying, hey, speed's going to start becoming a factor. Then in 2020, we came out with the announcement of, hey, there's mobile first indexing for the whole web. So what does that really mean? You can read a lot of information about this, but basically what it sounds like Google is expecting your website to be responsive and to perform well on mobile. And because of that websites that don't perform well on mobile are not going to be prioritized over traffic necessarily. So you obviously want that to be performing well.

You can go over here, this mobile first indexing best practices. I'd really recommend that you take a look at this link as well. This is really helpful information that's linked out from here. And thank you Lindsay for throwing that in the comments there. But that's a really good bit of information here, because this is talking about the biggest thing here. Most sites have shown search results are good to go from first indexing. 70% of those shown in search results have already shifted over. So people have been moving towards responsive design. Google first designed all those sorts of things for a while. And that's just something that Google is trying to obviously account for because if most anybody else's over 80% of your traffic is going to be mobile. So it makes sense that we want to serve really good mobile traffic.

So again, this is more just backstory into this. Because when we're talking about speed optimization, those scores that we see too, I should have mentioned this when we were looking at this, in your Shopify dashboard and even in the PageSpeed reports when we take a look at that, it's going to show you your mobile scores first. And the reason for that being is everything should be mobile first. We want to make sure it looks good on your phone, it performs well on your phone, the same way it's going to perform well on users' phones.

Okay. This is just some additional information about evaluating page experience for a better web. Basically, this introduced that initial push. So we talked about mobile first, but then this continued to push into now Google announces here that we're going to be looking at Core Web Vitals. So again, this is way back in May of 2020. So Google has been promoting core vitals this shift. This move away from something as simple as just a PageSpeed score itself to something more comprehensive like web vitals. And so this talks a little bit about this, and this is a really good example of a cumulative layoff shift. If you take a look at this video here where you can see something loads in late, it pushes it down and instead of hitting, no, go back, it actually places an order.

So this is a great example of one of the Core Web Vitals, the key Core Web Vitals is cumulatively layout shift to CLS. And we'll take a look at some of these things and breakdowns. But again, I thought that was a really good visual that I need to show you as well. And that is linked as well over here in the chat. And so just something to take a look at, but this talks a little bit about some of those things. So the biggest Core Web Vitals that contribute to search signals, rank signals, those sorts of things. That's what they're talking about here with these search signals for page experience. Largest Contentful Paint. That's this guy here. It makes up one of your biggest metrics when it comes to the speed there. First input delay. So it has to deal with as things are loading, when are they actually able to interact with the page itself? And then that visual stability that we saw and that quick example there had to deal with that cumulative layout shift.

So we want to make sure that information is not moving around the page. I often refer to it as page jank for that movement. We just don't want things to be moving around a lot as it's loading. That doesn't create a good experience for your users and in some instances, obviously it creates undesirable click events, like in that instance where someone was trying to go back and they instead purchased something and started moving through that process. Obviously a huge conversion killer. So that's definitely something that we don't want to include. And so it talks about this basically having to deal with it being part of ranking signals. Now I really want to clarify because Google has done a very good job, clarifying being super clear on this in that.

So just because you score a hundred, across the board, let's say we did that. It does not mean that your page or your website, or your products are going to be served first no matter what. And so content is always going to be king when it comes to search. So if someone punches something in the keyboard, it's not going to just serve a website that's hitting hundreds over another website that has good content but it's really slow. So first and foremost, Google is going to consider that content piece. What I typically see it described as, although John Mueller over at Google has said specifically it's not a tiebreaker, so we won't call it a tiebreaker necessarily. But as far as a website that has really good content as far as quality, like your website, and then a competitor's website who has close to and/or similar quality for a search query result, Google's going to take a look at which one of those may or may not be passing Core Web Vitals.

And that's definitely something that can give you an edge over competition to be served higher in search results, if your website is passing for Core Web Vitals. Notice that I didn't say if your website is scoring a 60 and theirs is only scoring a 55 or a 50, that's not how it works. It is possible for you to have a higher score, but not be passing Core Web Vitals. Google cares about your Core Web Vitals and not your PageSpeed score. So that's something that I'd really encourage you to take a look at with this documentation, stuff like that. Moving away from this mindset of your PageSpeed score is everything. Real high level, once we get to the point where we're passing for Core Web Vitals, then we start paying attention to PageSpeed as a baseline. So you're going to hear me say that over and over again, because it's an effective strategy that works.

Okay. So this is basically when Google actually decided to go ahead and launch and push the page experience, I'm sorry, over into Google search. They announced in November, this was going to be done sometime and really we thought we had until May. Didn't happen until, it's going to happen in June. And then it didn't happen actually until August of 2021. And so that's something just to be aware of more so, as far as the timeline thing. They didn't change any of the real information here as far as what signals we were looking for. It's just something that finally got finalized more so in November it was, hey, this is what's going to happen. You all need to prepare for it.

What Are Core Web Vitals?

All right. So what are Core Web Vitals? We talked about why Core Web Vitals are important. Google did a really good job starting all the way back in 2018, talking about how they were starting to move considerations for PageSpeed, how they were starting to move considerations for mobile first. And then after that, they further clarified by creating a series of metrics called Core Web Vitals that they're going to actually use as an assessment. And so that's where we got Core Web Vitals. And so scrolling down here, you can read a little bit more. This gets a little bit nerdy, so if you're not super interested in that, I wouldn't really spend too much time on this. This would be something your developer team should just be made aware of or have them take a look at it type thing, so that way they can be cognizant of some of those metrics and how to test and move through those things.

Because not all web developers do focus on that and it's not because they're not excellent at their job or anything like that, it might just not be part of the scope of work they've been provided. So I work on lots of websites where my job is not necessarily to improve the PageSpeed. And so we might have a score in the single digits and I can see some low hanging fruit and I'll bring that up. But it's something that obviously the team has to sign off on. Every website that I'm working on is not passing for Core Web Vitals because it might not be part of the scope of our work. So that's just something that's taken into consideration. So if you can give folks these resources, point them to this webinar, I think that's great. So again, sorry, this is just these big key metrics.

None of that's changed really since they first announced that back in 2020 here, that these were going to be the metrics that we need to focus on. And these are the metrics that we're focusing on today though. They are starting to implement some additional metrics, I won't get super deep into that but it's just something to be made aware of. This is an ever evolving series of metrics and it's going to continue to just change how we approach these things in the future. And some of this has to deal with just over time ways to promote usability, accessibility and a couple of other things on websites. And so I think it's just something that's going to continue to be mindful of or be on the lookout for.

So if you scroll down more, it'll talk about some additional reports. So the user experience report PageSpeed insights, which is the one that we're going to use quite a bit and the one that I'm going to recommend. And then obviously search console. You might actually see something in search console that has to deal with Core Web Vitals reports. And so that's something that really encourage you to use. It's very helpful, really good stuff, as far as what it can do because it'll actually send you automated reports. So from a technical SEO side of things, you need to be set up in Google search console. Especially if we're talking about concern for indexing and ranking and all these different things or what have you, you need to make sure you're set up in that and then Google will actually do that work for you.

It'll send you an automated report of, hey, we detected a cumulative layout shift that wasn't previously there before on this page, you might want to take a look at this. Then you'll have the opportunity then to verify when it's resolved and then Google will let basically that they've confirmed it has or has not been resolved. It's really handy. I think I'm going to cover a bit of that today, but if you're not on search console make sure that you are because it's super helpful and that's not the key piece here. So if you want to get real intense, like I said, this gets really developery. So I think further down you're probably not super worried about some of these other items, but again, it's just a good thing I want to make sure to go ahead and reference in here.

Here's some additional recommendations for workflows with the specific Google tools. So the nice thing is you can use these to audit, improve and monitor your website effectively. This is a really good way to do this. Something I really appreciate about Google is access to all these free tools. And so they're the ones that are ruling in on what this looks. They're giving us this series of metrics and they're the ones that are saying whether we did or did not pass this series of metrics. And so it's a good way for us to take a look at this information from the perspective of Google. And that's the one that we're in most instances pretty concerned about. We're concerned first about customers and then about Google. And sometimes we have to switch those because you can't sometimes get customers without that piece. And so it just should all be part of your strategy here.

So really good information in here as well. I know we're linking this information in the chat because Lindsay's doing an awesome job. So make sure you check these out. Add this to your read later or whatever. Some of it you won't really have to worry about, but it is something that I do recommend you at least take a look at to try to be aware of some of these tools. So if you're working with someone like me, or even as yourself, this is something you can develop internally with your team. I need to scroll down a little bit so that's not in the view there. But this is just a simple workflow to really ensure your score vitals stay healthy. So it seems really simple, but I think it's a really good suggestion as to how to work through some of these pieces in here. So it's definitely something for you to consider implementing, like I said, into your own internal processes or something along those lines.

Okay. So we're going to start getting into a little bit more specifics here. So I'm 20 minutes in of explaining why this is super important, why we need to focus on Core Web Vitals instead of PageSpeed. Because you can see there, after looking through all of that information from Google, we didn't see anything referenced as far as your PageSpeed score itself. Google consistently talks about the page experience and your Core Web Vitals as part of that page experience. And so nowhere are you going to see that, hey, just based on your PageSpeed score, this is how we're serving content. But for the sake of simplicity, I know when we're talking about this a lot, that's really what we're looking for. So this is a really simple article that I did last year. And so a lot of the information still works really well.

It's just real high level overview of how you maybe should approach taking a look at some of these things. Images and apps being the biggest thing, trying to get rid of some JavaScript stuff were possible. I talk about some things that you probably need a developer. If you're already working with a developer, you can have them breeze over this because they can look at options for you to conditionally load apps, make sure you're preloading, preconnecting, DNS-prefetching resources, loading on interactions in some instances too. These are all just things that are a way for you to take a look at this from both a non-developer and a developer standpoint. So hopefully that's helpful. And again, just really want to harp on this and we'll cover this here as well. PageSpeed isn't a grade. And so show you what that looks like here in a moment.

Explaining The PageSpeed Insights Tool

Okay. So I did want to cover this real quick because this is the PageSpeed insights report. So this is using what's called Lighthouse in the background. This is a developer tool that Google developed at a certain point in time. So you're going to see here based on this tool. And I want to walk through certain parts of this because this is what you can use to audit your own website. You can determine then where to focus things on. So I do PageSpeed audits with folks. And so speed optimization, PageSpeed audits, Core Web Vitals audits, you can call it whatever you'd like, but this is typically the tool that I'm working with first and foremost, and then what I will train folks on. So this is usually something that I get paid to do that I thought would be helpful from everyone's experience to try to see what they can do themselves.

So you'll see here, we'll scroll down. I'm sorry. Right here, you can see that there's a little section that says there's no data. Discover what your real users are experiencing. That's because my website doesn't have enough traffic yet to promote a Core Web Vitals assessment. So you'll see this here right now with the way the tool is currently set up if there's not enough traffic. So I've never seen a hard number on what this looks like because I've worked with some people who have in the thousands of views a month and I really might get a thousand of views a month. And some of those folks won't even have one. And then I've seen folks with only a thousand views have core vitals assessment. So there's a couple of other factors that have to deal with that, but basically that's real user data.

So Google is not able to compile a Core Web Vitals assessment, unless it has enough of that traffic. So in a lot of instances when I'm working with folks, and if you don't see a core mobiles assessment I'll show you real fast what that does look like. You should see something like this guy up here, Core Web Vitals assessment is passed, so you'll have information for that. If you don't see something like that on there, your primary focus should probably be focusing on traffic first. Then after you get to that point where you get traffic and those sorts of things then you can really start focusing on that, because we'll have some best guesswork available that I'll talk to you about here in a little bit here when it comes to being able to pass that when you do have enough traffic. But really without that traffic, we're shooting in the dark a little bit.

All right. So back to this guy here, because I don't want to necessarily spend too much time focusing on other websites. Like I said, we'll cover some of this information, but I really want to work through the tool here at the moment. So this is typically, even with that stuff, what people will focus on. There's one single metric that says 68. And so everybody's thinking 68 out of a hundred is not great. So first of all, I want to point out a couple of things. So this bar at the top here. This is the bar that we're looking at as far as individual pages. So that's something to note as well. This tool only looks for one URL at a time. So it'll give us a report or score based on mobile. You can click on this tab and it'll give you the desktop score.

Look at that, it's 95. Everyone really likes to see that 95. However, I'm very disappointed in this 95 because of this metric right here, cumulatively layout shift. If you recall from us looking at Core Web Vitals reports, that cumulative layout shift, excuse me, is one of the key metrics. So at the moment, even though all of this other stuff looks really great on desktop, I actually would not pass Core Web Vitals for desktop views because I'm failing on that cumulative layout shift. So couple of reasons for why that's happening and there's some good strategies there involved. So bear with me a moment here while this loads up so I can get back to jabbering on here. But basically this score. Someone scoring only maybe a 40 or something like that, but not hitting all these other metrics would actually pass core web vials assessment potentially instead of my 93. So this is why it's really important, not just to focus on that.

The reason that score is so high is the cumulative layout shift only makes up a part of your score. So when it's looking at like the weighted score here. I have that over here. So here's a Lighthouse calculator. So this takes a look at and tells you here's the waiting for all of the scores off on this right hand side. So you can see here, the cumulative layout shift only it counts for 15% of my score. So I had a 93 because the total blocking time and the Largest Contentful Paint were very low. They loaded very, very fast. The biggest reason for that where I had such a good score was, because if you take a look at this Largest Contentful Paint, 25%, total blocking time, 30%. Those two metrics constitute 55% of the overall score. And so I'll talk a little bit about this and I'll show you a real quick improvement that's simple to make.

You'll probably need a developer if you don't already have these skills or something like that, or have maybe one on the team, but I'll show you where an easy one for you to focus on is going to come from, excuse me. So I'm going to jump back to mobile. Oh man. Look at that. Had a nice jump there in the score. So you'll see this is an 82 for performance on mobile and that feels very high, higher than it should be. So it's struggling today folks. I have a different computer typically to use for streaming. And so I'm on the mobile setup here, and we are getting the spinning wheel of death here. So if I do lose the stream, I will try to key it back up here. So hopefully that doesn't happen, but we're going to try to at least talk about this stuff here. So it seems it caught up, but I was going to run this again. So I'm probably asking for this to crash.

So it's pretty consistently in the sixties at the current outset. So I'm surprised that it hit an 80 even there at all. But I wanted to show you real quick once this does key up. So 73. All right, we did a little bit worse. Biggest reason, again, this Largest Contentful Paint and total blocking time makes up 55% of the score. And obviously the Largest Contentful Paint's not looking great here at this 5.1 second load, but total blocking time, which is 30% of the score, looks great. So I want to basically just cover the real reason that this looks like this is Google sends a bot to your page and it kind tests the page out, see how fast it loads. It gathers all this data based on these specific metrics that are tied back to your Core Web Vitals, and then it reports back.

And so people always ask well, why is my mobile always so much worse than my desktop? There's a couple of reasons for that but the biggest reason is you can see on here. There's some other really good information. That's really easy to pass over here that talks about how this test was run. And you'll see here, it'll even tell you what processor was used or what device was used. So in this instance, it says it's emulated Moto G4 with Lighthouse 9.6 0.2. So basically the phone that's pretending to be emulating here when it crawls the website, gathers information about how it's loading, is a Moto G4. I don't even know what a Moto G4 is. I always tell people all the time, it's a really old phone. But I thought for the purpose of this webinar, I actually look it up. And so this is a Moto G4 and I just went ahead and compared it to current iPhone just so that way you have an idea on what that looks like. So this goes over information about the processor and all this other stuff, but basically this phone was released back in 2016. And so this is what you're getting here. I thought it had the release date on here.

Sorry. I thought I had the release date on there. There we go. Released in 2016. So just to compare and contrast here. I actually couldn't pull one up with how old the processor was, it was Snapdragon six something. So the farthest back I could go is an 801. But comparing the two, you can take a look at what this looks like. And these are just general websites. You can just Google comparisons and stuff like that. And that's something that you can see here, huge differences in how they perform. So it's one of those things. I'm going to try closing some of these extra windows. Because my computer is performing so slow at the moment. But it's one of those things where the reason that it's showing up so slow and why we might have such a huge disparity between scores is because the emulated device that it's using to give us that report is a very old, very slow device.

And so that's something to where comparing those things to today, it's kind of apple's to oranges. So we really wanted to just showcase some simple changes there as far as what has been made over time with this reporting. I think it's really helpful to take a look at that. So if we scroll down here a little bit, you can even see this nice little picture of these screenshots of asset loads. And then something that's really easy for folks to skip over but I really encourage you to do, is take a look at how to show audits relevant to and right now it has all,. So it's got all stuff. You probably have no idea what it is. That's okay, that's your developer's job. But it's something that I would suggest you really only filter this out to try to see if there's something you can gather and understand from here.

So for instance, LCP, Largest Contentful Paint, that's probably one of the things that we want to take a look at. We want to take a look at this specifically just because between total blocking time and the Largest Contentful Paint that constitutes 55% of your score. So if you can focus on those two big metrics, that's something where maybe you can make the most impact. So it talks about eliminating render, render blocking resources. And then it also tells you what the Largest Contentful Paint element is. So that Largest Contentful Paint again, is that first element that pops up in the view port or what we would call above the fold. So it picks basically the biggest image or sometimes the biggest text, which that's actually a good way to improve your LCP is to serve a large header first on mobile.

I would not recommend changing up content between mobile and desktop when possible, just because Google prefers that you serve content for both the same, but in some instances it makes more sense to do that. We can actually see a little bit of a bump there. So here it says, hey, this image is the first one. That's helpful for us to know as well, but you can take a look as well at some of this other stuff to layout shift, all that fun stuff. Sorry, I'm going to start moving through some of this because I don't want to spend too much time. But I do want to point out here as well, this is helpful. So as we scroll through this I selected all, and so you'll see here a note or a comment was, "The Largest Contentful Paint image was lazily loaded."

So this is a strategy that a lot of developers will use to help with a performance that will basically say, hey, don't show the image, don't load this in until we've got it loaded. And so there's some actually helpful things that developers can do now, but it helps with essentially the rendering of the page or making sure that other stuff loads in as it needs to and the other stuff down below, below the fold can wait to be loaded. The problem is when there's just a blanket, we're going to lazy load every single image. Well, that's not a good strategy because essentially what's going to happen is if it is above the fold, remember our Largest Contentful Paint is 25% of that Core Web Vitals assessment that ends up being part of a PageSpeed score. So if it's above the fold and it loads slowly, like last, that's not helpful.

So one thing you can do, and I'm just going to pop in here real quick. So this is something that I do as just enhancement on some pages. And again, I just popped into my own page here or my own website. Again, that's on there. I have some specific things set up, so that way we can take a look at that update to see how it impacts here and see if we can change it toward that first image is not lazily loaded. Thanks for bearing with me a little bit on the time here. So if I stop getting the spinning wheel of death here. So you can see here, at least in the initial outset, that performance jumped up to an 83 on this new test, because I basically have something set up to where it's going to ignore that lazy loading attribute.

So you can see here, the Largest Contentful Paint, we cut that time in half. And that's something that Google's a real big fan of. You can even see some of our rendering block resources is not as significantly impacted. And again, that's because it's not having to wait for other stuff before it's going out and keying that up. And you can see here that metric is gone. So that's something that I would make sure you talk to your developer about. It's an easy implementation that you can do as far as making that improvement there as well. So we've still got this a good score here. So I did want to go over this. So this is another project that I worked on where PageSpeed was part of the scope. And you'll notice here, I want to scroll down and show this real quick because it's really easy to get focused on this 40. Shows up as red, doesn't look great. But the really good thing in this instance is that the Core Web Vitals assessment is passing. That's what we want to see.

So in the instance of just trying to make sure we're focusing on the right series of metrics, Core Web Vitals is significantly more important than what we have down there for the PageSpeed score. And that's why Google has even over time. This used to be where, I don't know if you all have used this in the past, but the PageSpeed insights tool used to be. You'd load it up and it'd show the score at the very, very top. And so it has since evolved over time to where now they serve the core webinar assessment first, because that's the thing that they want to continue to showcase as being the most important thing. Not so much so your PageSpeed score itself.

So to show you what this looks like in some other instances as well. Again, in the forties, it's possible. Eighties for desktop and we're passing. This is another site that I've worked with. So just so that way you can see what that looks like. Now I do, again, want to reiterate the whole content is king thing because that is pretty important to point out. So obviously something like Allbirds. Everybody knows who Allbirds is. If you've done Shopify for any period of time, they're often referred to a great deal. They went public, they're doing amazing things in the space, but obviously they're failing their Core Web Vitals. And their PageSpeed score is five. And so it's something though that clearly, like Allbirds, this really big company, doing super well, they have some really good developers working on their teams. They're not super focused on this.

Part of that is because they're nailing content. And so if they're nailing content, it's something that they're not having to worry about as much. Typically what I argue or what I suggest is that, it's probably making your ads a little bit more expensive and a couple of other things. So improving ROI and focusing on PageSpeed optimization, and those sorts of things is helpful there because you're just going to perform better organically then we also have Core Web Vitals on our side. But a company the size of Allbirds, excuse me, and those sorts of things, clearly they're doing very, very well, they're nailing content, and they're at the top of the top of the charts here, so to speak, for all this stuff. So it's not something that you should necessarily lose sleep over if you're already doing fairly well. It's something that you can do as an improvement.

So, like I said, usually when I talk to a lot of folks about PageSpeed optimization, Core Web Vitals, things of this nature, it's something that comes up because people might have heard something about, Amazon shaved off a second on their load time or half a second on their load time and they made X million dollars more here. Well, you have to look at traffic and revenue in the grand scheme of things there. So the improvements that they can make there is something to where it's so significant. They've got millions and millions of views a day and they're doing millions and millions of dollars a minute or something like that. And so it's not something where you're necessarily going to see that. So you might see a bump or an increase, but it's not something that you're going to see millions of dollars from. So again, it should be part of your strategy, it should be part of that.

Okay. And so had a question in the chat here from Brian. "Is core vitals pass fail an individual metrics that are delivered based on that single page or the website?" Thank you Brian. That was a really great question because I didn't do a good job covering that. And so let's take a look here. Allbirds is a great example here because this is differentiated here based on the tool. So that's Core Web Vitals assessment, discover what you're experiencing. It's really easy to miss, but there's this URL and then there's the origin as a whole. So there are actually two sets of scores here. So when we run this right now, allbirds.com here, and it lands on this, if we do have a sufficient amount of traffic, this is initially what it scores it or shows us. For this specific page, there's the sCore Web Vitals assessment and it's failed.

But then also we can look at how does Google view the website as a whole. So this is the culmination of the accumulation of the website in general. So this arguably is a much more important stat. And I have seen somewhere we're failing on a certain page, but we are passing overall as a site. So Google does look at that as cumulative data where the information is really specific providing all that information and getting that score is part of that. Sorry, I stumbled quite a bit there. Basically if you're looking at smaller individual pages, we might have a couple outliers where cumulative layout shift is an issue. But Google will take, well, we don't have an issue at all on all these other pages. And so the cumulative look or overall site is still performing well where cumulative layout shift is not an issue. So I think maybe that's a little bit more specific.

Brian, so as far as examples of how Allbirds is nailing content, no, I cannot give good examples on that. So I do technical SEO, I don't do content based SEO. So what that typically means is I'm much more focused on making sure the structure and the tools and everything else is communicating well to be indexed properly with Google. But as far as folks that are nailing it in content world for SEO, that's not something that I'm probably an expert on necessarily. It's just something that I've seen when I've read about other sites and those sorts of things on Google, on Shopify, on other big commerce platforms and those sorts of things. That's something where they're frequently references people who are just really killing it in the space. They're also a very niche audience in the sense that they focus specifically on sustainability.

And so obviously in the instances where you can be more specific, you could be more niche and speak specifically to that audience, Allbirds is practically a household name at this point. And so that's something to where their content is all linked in really well for that. They'll have a lot of really good back links and those sorts of things from other websites. Again, I'm not a content guy, so I probably can't really give you good examples or speak in a very educated format on that since my focus is more on the technical. I think folks that do the content based usually you have to find somebody that that's their wheelhouse. So otherwise I'd probably just really not be able to provide a good suggestion there. It's just more so one of those things where we can tell that they're nailing content and those sorts of things because of how consistently you can find them, if you're looking for anything that's sustainability apparel related. Great questions though Brian. Thank you. Sorry. I can't be more specific on that. I wish I was more educated on that topic.

Okay. So same thing here. You want to make sure you check both for desktop. We cover that you can view this. Then there are some instances where you're not going to have this URL and an origin response. So that might be something to taking consideration as well. Sometimes an individual page actually won't have something. You see this a lot on collections pages or maybe new blog pages and stuff like that. But it's not necessarily a bad thing. It means overall the site has sufficient traffic to give a Core Web Vitals assessment, but that individual page may not. Another reason why I really like the whole idea on focusing on... Let's go ahead and get off this guy. Why I really like focusing on the Core Web Vitals assessment as opposed to PageSpeed. It's actually not too hard as a developer to trick PageSpeed.

So PageSpeed score itself basically is we're just trying to trick a Google bot in that instance. And so there are actually ways for developers just to write some JavaScript that basically says, hey, if it's the Google bot, lighthouse trying to scrape the website get all these metrics or whatever. Go ahead and don't load all this other stuff to make sure that it loads super fast and we get really high score. And so that's when you'll see these conflated scores of 80 and 90 on mobile and those sorts of things or whatever, but your users might still be experiencing a lot of issues. So the Core Web Vitals assessment, you actually cannot trick Google on that because it's based on a culmination of actual users experiencing the web. So that goes from the person with a older, slower phone will actually experience your website differently than someone on a new iPhone. So just something to take into consideration.

Most folks really only have one or two generations back of an iPhone, iPhone still owns a majority of the market. But for Android users like myself it's usually typically common for folks that they only have a phone several years old versus the one that they're using in testing is six years old.

Other Free Tools To Run Your Own PageSpeed Audits

And then I wanted to cover some additional tools and resources here as well before I jump off here. And so this is another really good tool to use since we talked about how it's really important to have a mobile friendly website. You can just drop in any URL here. Let me grab Allbirds again. I'm picking on Allbirds today. I'm wearing some Allbirds. Not to say that I'm trying to dog on them or anything. They're just a good example because usually everybody knows who they are. Gymshark is another one, Chubbies Shorts they're another one, Polypop's another one. There's a lot of really big names here, but Allbirds starts with an A and I'm wearing all birds, so we'll just go ahead and run a couple of tests here.

And again, this is something that you'll get in the Google search console itself. It'll actually run reports when you have a mobile friendly. I can't remember the name of the report itself necessarily, but it will actually use this tool. So you can verify if it says you have a problem with your mobile view on a certain page or those sorts of things, it'll actually tell you if there is an issue. And then if you want to test it yourself, it'll link out to this guy. So you can see here, at least the page is mobile friendly, so good job Allbirds. Can view the tested page, screenshot, all this fun stuff. There's a bunch of handy stuff here that you can take a look at.

Now, as far as understanding some of the cumulative layout shift. And I use my website here as an example on this one. But this is just a really good developer tool if you want to call it that, but other folks can use this, anyone can use this tool. But for that cumulative layout shift, I think that's one of the harder metrics for a lot of folks to understand unless you visually see it. And so this does a really good job of doing that. I think it's really handy to be able to just punch in a URL, you click generate here and then it just shows you where all that travel is occurring on your page. And so that's when the page is loading, basically there's the initial load and then as things load, if things move around a little bit and it pushes content down below it, that's when we start to get that cumulative layoff shift metric.

And I'm showing you on my website just to show you not everyone's perfect. And I haven't had time to take any focus into this here. So don't feel bad if it's occurring on your website, just understand that it will impact your Core Web Vitals assessment. Okay, I'm going to kill some of these other pages here. This just has to deal with the scoring. I really touched base on this already. So just wanted to make folks aware of how the performance scores weighted, all this stuff, kicked out to the calculator. There are different versions of it as well. So there could be instances where you haven't touched anything and Lighthouse actually has, or PageSpeed insights, has updated to a different version of Lighthouse that might use a different series of metrics, so that's something to take into consideration as well. Over time these metrics, like I said, they're ever evolving, they're ever changing. So just something to be aware of when it comes to how your website is performing there. And that's the calculator.

Another really great tool that I like a lot is going to be this guy here. I guess I didn't have it in there. This is going to be the GTmetrix website. So this also uses the Google Lighthouse tool in the background, but rather than PageSpeed insights report that it gives, it actually pops out with a letter grade. Couple of really helpful views as well that I really do like that. I'd really recommend you taking a look. And this is a free tool, you can do it paid. They have a couple of cool things with the paid tool as well where you can change to the mobile layout, couple of other things as well. So these are really good options for you to use these items if you're trying to run speed tests on your own store, just to give you some insights as to things that you can change and fix yourself.

So it gives you a general grade and again, this is per page, but you can also do some comparing where you can run different pages. So this would be a really good way to do your home collections and product pages or something like that or even a pre-empt post test as well. You can do that using the preview URLs and Shopify, but just understand that your metrics basically won't look identical because Shopify loads some extra stuff when it comes to those preview URLs basically for that admin bar and a couple of other things. So your metrics will play around a little bit, but it's a good way to do some quick testing. This shows you what that looks like.

And you can play around with some of these other metrics. I take some time to come in here and look at this. I think this is a lot more friendly than the PageSpeed insights tool. However, the PageSpeed insights tool I would argue is the end all, be all just because it is the one that gives you a Core Web Vitals assessment and that's the thing that we really, really care about, because that's what impacts search. So the thing I really like, if you look at these tabs, if you take a look at the waterfall, this is one of my favorite things to take a look at. Particularly when you're looking at things like images, slowing websites down, and those sorts of things, really heavy JavaScript. So third party scripts, a lot of times from apps and things of that nature that we're getting. But if you click on this guy from size, you can actually sort these based on the size that they are, which I think is super helpful. So I really like to do this.

So if we're trying to scroll through here and find some really big images, because that does happen wherever possible. Want to try to serve an image that's under this a hundred kilobyte range when possible. Sometimes it doesn't happen and that's okay. Realistically only having one that's over that and the rest of these in the seventies, that's looking really, really good when it comes to that. The same thing with JavaScript and stuff if you look through here, see there's anything really heavy third party scripts or something like that, that are getting interjected here, that's just something to be aware of or take consideration of.

Closing Questions/Thoughts

Okay. So I've got a little bit, right around five minutes left here for the hour. And so I want to take a look at that and see what's going on here. Brian, you had another question. "So are developers able to trick GTmetrix? I see developers who help with Core Web Vitals and speed tests mention that they can improve the GTmetrix score." So yeah. So basically because I mentioned GTmetrix is using the Lighthouse tool in the background. So Lighthouse is an open source tool. Open source tools are used all throughout the web.

So I'll take a look here. So here's Chrome Lighthouse here. This is the actual tool itself. It's promoted by Google, it's an open source tool so anybody can like download and use this. But a lot of different companies use it for stuff like this. They build a tool on this open source software and then they put their own spin on it, which is what GTmetrix has done. I think they do a good job and it's nice that they do it this way. Maybe it tells right here what version of Lighthouse they're running. But yes, it's possible. Especially because the GTmetrix doesn't pull a Core Web Vitals assessment, so that's possible to do. But because they don't and they're just relying on Lighthouse, yes. They could technically trick that.

Now that is not to say that all developers are doing this, I'm just saying from the perspective of it is possible and why the focus should move away from that PageSpeed score itself only, more so to a discussion on improving those Core Web Vitals. If we're not focusing on Core Web Vitals, we could be improving the score but that's not going to necessarily mean much. It's not the best return on your investment for focusing on speed optimization. Because if we're only focused on that PageSpeed score itself, we're really missing the force for the trees in the sense that that Core Web Vitals assessment is the most important piece there. I hope that answers your question. Like I said, I don't need a dog on that for there's some developers out there doing good work. You should see a natural lift with the PageSpeed score when you improve Core Web Vitals, and that should happen.

But my discussion, or expectation, or suggestion to folks is always not to expect in the nineties. The nineties isn't what we need to shoot for. We could hit nineties if you want to, it's just something that's not really necessary. It's more about passing the Core Web Vitals. Okay. All right. So hope that helps answer your question there, Brian. I don't know if we have any other questions or anybody has anything specific on Core Web Vitals to take a look at specifically, like a website or something like that, or a tool.

Okay. All right. I think might have got everything here. Like I said, there's a little bit of a delay in the stream, so hopefully I don't miss anything here and cut anybody off. But if you do need to definitely feel free to send me an email through my website or taylor@thepagesmedia.com is my email. And then also if you would, I'm going to put up a link here for a post webinar survey. I'd really be grateful for folks to give me some suggestions or insights as to what I can do better, how I can be a little bit more focused on these or maybe provide some more specific examples. I'm also kicking around the idea of just doing these as a pre recorded instead of a live thing, to avoid, like today, being a little bit mobile and not having access to some of my other equipment and stuff and having to do this setup or whatever. But I hope this was helpful, I hope this brought you value today and hope you have a great day.