Using Google Lighthouse To Improve Your Page Speed Performance – 179

Jesse: Lighthouse is something, like I said, that is free. It's a powerful tool for monitoring the performance, specifically here we're talking about the performance of your webpage, and performance matters for SEO. We know that. Google has come out with only a few different things that it has said is a page-ranking factor, and we know that speed and performance is one of them. And this is just a great tool, great free tool, for all of us to leverage, to learn more about our pages, where they're weak and what we can do to improve the score. So, hopefully this helps you guys out.

Welcome back to Local SEO Tactics, where we bring you tips and tricks to get found online. I'm your host, Jesse Dolan, here to talk to you today about Lighthouse. If you're not using Lighthouse, if you've never used Lighthouse, it's actually a free performance and SEO testing tool that's embedded in the Google Chrome browser. And today we're going to go over a quick kind of nickel tour of that, how to use it, why to use it, and just show you some of the things that we use it for and the insights it can provide.

So, Lighthouse is a performance tool that's embedded within Google Chrome, and it has kind of a suite of testing tools in this report here that it's going to give you. And we're going to focus on today, the main chunks, which kind of make up the core web vitals. Core web vitals is something that Google pays attention to, for lack of a better word, lack of a better phrase I should say, and all of this data is in Lighthouse. The same stuff, plus more. So, we're going to go through it, show you how to use it, a lot of the important bits, and kind of give you a primer on it.

So, out of the box, Lighthouse, you should know it tests a single page on your website, just like our free audit tool on localseotactics.com. You'd have to enter in your webpage or start with a webpage, right? That's important to note, because one of the things that's usually kind of a core thing on every website is you have different pages for different reasons, different intent, different content on those pages. Running this on your homepage isn't going to be the same as one of your inner pages, like your products or your service pages, or a blog post.

So, one of the things here, a little asterisk on this entire episode here, the stuff that we're going to talk about, is that this is on a page-by-page analysis of your website. There are going to be some features and functions of your website that are applied to all pages, right? So, in a sense, some of these things that you're going to learn through using Lighthouse are going to impact your website overall, but we run this page by page.

So, you're going to want to run your homepage, some of your inner pages. Kind of take an inventory of the types of pages you have on your website. If you have some pages with a lot of graphics, some pages with a lot of video, whatever, things like that, you're going to want to run a sampling of various types of pages here because this is a page-by-page analysis.

There also are some variables here to be aware of. This tool that you run is based off your web browser, it's included in it, so any extensions that you have in Google Chrome, maybe a bunch of tabs that are open, your internet connection, different things like that, can impact how it's running. It's not going to drastically impact the score, but when we start running these kinds of tools, and chasing scores, and trying to optimize things, moving from a score of a 70 to a 75 might require some effort. And then when you rerun it, maybe it's a 72, and you get kind of frustrated for the diminishing returns you're getting. So, just be aware of that.

If you run this report on the same page multiple times throughout the day, you may get some varied scores. So, that's not going to be, I would say, from a 70 to a 50. Nothing that drastic, but you may have a little bit of flux. So just be aware of that and don't chase goats there, if that's your case.

Hey, everyone. Just a quick message about our free SEO audit tool on localseotactics.com, and we'll get right back to the show.

If you haven't taken advantage of it yet, go on out to localseotactics.com/freeseoaudit, or look for the yellow button up in the top right corner. Click that, and it's going to take just a couple seconds. You enter in the page that you want to optimize, what you're looking for the audit to score against. Enter in that page, entering the keyword you're looking to get optimized for, and enter in your email address. Click the button, and it's going to take a few seconds, and then it's going to send you off a PDF report via email.

It's a great report. It's going to kind of give you an overall score of some vital SEO areas for that page, and for your website at large, even though it's auditing this page. That's going to tell you some of the good things that are happening, some of the bad things that are happening, too. It can give you basically a checklist of some things that you need to shore up, and what you can do to improve your SEO for that page for that keyword that you're auditing.

Now, you can use this as many times as you want. You can do multiple keywords, multiple pages, multiple keywords on the same page. You can even use this to check against your competitors if you want to do a little reverse engineering, see how they're scoring for a certain keyword, what they may be doing good that you're not, and some things to improve there. So, lots of different ways to use it. Completely free. Again, go onto localseotactics.com/freeseoaudit, or look for the yellow button in the top right corner of the website.

All right. So, let's dive into it. So, first we've mentioned Lighthouse real quick a couple times in two past episodes. One of them was episode 113, which we talked about starting to design your website for mobile viewing experience. We touched on the Lighthouse real quick in there.

We also mentioned it again in episode 94, talking about breaking down the nude page experience update that Google sent out quite some time ago. So, check those out if you want a little bit more context on Lighthouse and some of the usages behind it as well.

All right. So, like I said, we're going to dive into Lighthouse here, and there's really, in my mind at least, I'm going to present to you kind of two chunks of Lighthouse. There is the data that's presented that is part of the core web vitals, and then there's the other information that is important, but we're not going to focus on that as much. Keep this a little bit short.

So, first you're going to open up your webpage. Again, when I run this. I like to close all my other tabs, make sure I don't have a ton of other stuff open, to keep the test pure and keep my resources going towards this test.

Pull open the webpage that you're going to test. Right click somewhere in your browser, and click on inspect. Or the page, or you can do F12 on your browser, and pop open the same screen. And then at the top, you're going to see some settings and some options. You're going to look for Lighthouse. Depends on the size of your screen and your browser. You might have to click the little arrow to kind of expand more options there, but you're going to click on the one that says Lighthouse.

So, you can see here, for example, if you're watching on video, I've got the Local SEO Tactics web page pulled up. So, I would just right click anywhere here on the page, click inspect, and then here's what I'm talking right at the top. You've got elements, console sources, network performance, and click here in Lighthouse.

So, from here on, we're going to talk about the report. If I click this button, analyze page load, that's what we're talking about running, and that's going to give you some different metrics, some different acronyms, things like that. And that's what we're going to talk about here.

There's going to be three main areas we're going to focus on here for the performance of your website within Lighthouse, so click on the area that says performance. I'm going to give you the start with the three areas that are not part of the core web vitals. These are important areas within Lighthouse. And within Lighthouse, there's going to be plenty of links and more information that you can look at to fix anything that you're seeing as wrong, or make improvements to your website. So, I'm going to go over these pretty quick, but it doesn't mean that you have to minimize them as well.

So, one of the areas is going to be the first contentful paint. Contentful paint, I should say. That is also called FCP. And think of that as in, when your page loads, the first text or image that's visible, that's what we're scoring here. So, you click on your website, it's loading, and as soon as the first stuff shows on the page, that lets you know it's loading, that's the time that we're scoring here.

And that's important just for that initial user experience load. You can see the page is loading. You're not going to click the back button. You're not waiting to see if it loads or not. That's the FCP.

And then there's the time to interact, or TTI, and that is the gap between when the page starts to load and when it's able to respond and be fully interactive. Buttons are clickable, not just visible. Things like that. If there's something to scroll, you don't just see it, you actually interact with it.

And we're talking either milliseconds or in half-seconds and things like that with this, right? So, we're talking about optimizing our pages for response time. Just think about a hundred-yard dash, or a race. We are definitely talking about micro-improvements to make that just a little bit better. There's no major 30-second deals here, but this is still extremely important because, us as users, we all know we all do this. We don't have a lot of patience when a website isn't loading or not working, things like that.

So, this sounds like a very small amount of time, this time to interactive, from when a page loads to when it's actually interactive and you can't... not just seeing the elements or the images of the buttons, but actually interacting with them. But this is important.

The last one here that are not part of the core web vitals is the speed index, and that is how much is visible while you are loading and scrolling the page. How is it loading, and things like that. Right now, let's get into the three areas that are, for us at least, a little bit more important.

This is the core web vitals. Not the exact same stuff that you're going to get running this through core web vitals. Search console may be a little bit different, some of these things. But still a great report. This is still something that's very worthwhile to do, and it's completely free if you're using Google Chrome. Google Chrome is free. Lighthouse is free, built right in, and this is a great piece of insight here for you.

So, the first area that's part of core web vitals is your LCP. These all have acronyms, of course. We're in SEO, so everything is acronyms. LCP, largest contentful paint. We talked just a second ago about the first contentful paint that you see. This is the largest, right? And this is going to be scoring the largest chunk of text or image on the screen, when it's visible, and when it loads. You want this to be loading as fast as possible. It's really the biggest chunk of your page that's going to load. Your weakest link from a loading standpoint.

This is something that usually isn't super hard to diagnose and figure out what's causing you a problem. You want to optimize for speed on any of your images, videos, things like that. Usually just start with the larger the file size, and kind of work backwards from there. This is also going to trigger if there's any bloat in your code, your CSS, JavaScript, any rendering, blocking issues, things like that.

Where we want this to fall is... This is within the lighthouse scoring system here. You want it to be green, right? These areas in these metrics in Lighthouse, all of them are going to score you with a number in a color code system to help you know where you need to put your attention. Green is good, orange is needs some attention, and red, of course, would be bad, then.

For this, the LCP, your green, is going to be 2.5 seconds or less. Orange is going to be between 2.5 and four seconds, and anything over four seconds, it's going to be red. So, the more images, the more content on your page, right? Larger images especially. And this can be background images, this can be foreground images, videos, videos that autoplay, thumbnails, and just even if you have a massive amount of text. Maybe there's a lot of fonts that are being manipulated, elements, animations, things like that. Anything that's loading on the page, this is going to look for the largest areas and score you accordingly. So, take a look at that.

Also in the show notes here, we're going to be linking out to some of the developer tool documents that are going to dive even deeper into some of the technical causes with this and some of the technical fixes. So, check out the show notes on this as well. I'm not going to dive super deep on each one of these, just kind of highlighting each one and why it's important.

The second area that's important is your total blocking time, or TBT. And for here we're, same thing, green, orange, and red. Green is going to be 200 milliseconds or less. Orange, 200 to 600, and then over 600 is going to be red, needs some attention. The space checks for your bloat in your JavaScript, errors in your JavaScript, or JavaScript that takes too long to load for one reason or the other.

If you're scoring bad in this area, some of the things you're going to want to do is maybe split that code up into chunks, split your script up into chunks. If you have third-party scripts they're loading in, if they're being served up and slow, that can be an issue, and just how all that is coded, manipulated and injected into your site, and where.

Think about this as it's like a single-file line. You've got these different chunks of JavaScript, these different codes that are being embedded. Some of it, maybe it's tracking, like a Google tracking code. There's just a lot of stuff that it could be, but it's all single-file line when it's loading. And if there is one line, or one piece of code, or one script that's loading that's taking a long time, everything else is held up.

So, this is definitely an area that you want to look at and see, is it being efficient? Is it elegant? Do you have anything that's outdated? This is an area that is always easy to remove any unnecessary JavaScript. Maybe there's something that was useful in the past that's no longer necessary. Definitely an area that can be cleaned up pretty good.

Why is this important, I guess, is what I'm trying to frame up? If the page isn't loading right, if you can't interact with it, you can't scroll, you can't click, you can't do things like that until this loading is done, that becomes a problem. So, even though your page may look like it's loading and things like that, it's just not going to be functional, a lot of things that can come with this. And again, we're talking 200, 600 milliseconds here. Not a lot of time, fractions of a second. But these all add up and are very important for users.

Third, final one here that we're going to talk about is your CLS, your cumulative layout shift. And that measures the shifting of a page as you scroll from top to bottom. Maybe we've all been on a page where maybe it's an article that you're reading, or maybe you're trying to buy something. Whatever it is, this is usually more noticeable on mobile, at least in my experience. Maybe you're going to click on a button or read something, and something else is loading in on the top of the page or above the content that you're accessing. And a lot of times this is like an ad that's injected in or whatever, and it'll shift the page. So, you're going to click on a button, then it moves, and something else gets put in there. Or you're reading the page, and it just all shifts down and moves.

That's what we're talking about here for cumulative layout shift. And this happens when other elements are added above whatever it is that you're reading or viewing in the view port on the screen. So, this can be, like I said, maybe an ad that's injected. We've seen this sometimes with, let's say, sliders or images that are different sizes, things like that.

And at the end of the day, where this problem originates from, if you're having issues with layout shift, is that you have something that's loading in the page, A, above the content that's being accessed, and B, it doesn't have dimensions called out. That could be an image. Again, ads, embeds, i-frames, videos, anything that's on the page that you're adding that has some kind of dimension or aspect ratio to it is where you're going to want to pay attention here, because you don't want it shifting.

This is also true for maybe how you have some of your elements or some of your themes and a layout stuff loaded in. An example here is like if your footer is loading early on the page, early in the code, and then everything else, like your hero images, and maybe you have a slider at the top of the screen. If your coding in your page... If your footer is loading first and that stuff is loading after, that's going to keep pushing that footer down the page as stuff is loading, and as content is being accessed on the page. And that's going to change your score on this, too. So, it's something you can really distill down into. If, as you're navigating a page and viewing a page, does it shift and move as you're scrolling through the page because things are being added and manipulated? You don't want it to. As a web developer and as an SEO, you want it to be static, and load, and be a good experience for the user.

So, those are kind of the three main areas. That's pretty basic, kind of a high-level overview. Like I said, we're going to link in the show notes to some of the developer tool documentation in these to take a deeper dive, and in future episodes we'll probably parse these out a little bit more in depth. But Lighthouse is something, like I said, that is free. It's a powerful tool for monitoring the performance. Specifically, here, we're talking about the performance of your webpage. And performance matters for SEO. We know that.

Google has come out with only a few different things that it has said is a page-ranking factor, and we know that speed and performance is one of them, and this is just a great free tool for all of us to leverage to learn more about our pages, where they're weak, and what we can do to improve the score.

Hopefully this helps you guys out. If it does, we'd love to get a review from you about the podcast, about the show. Go on out to localseotactics.com, scroll down to the bottom, click the button for reviews. And then we're going to give you all your portals: Google, Facebook, Apple Podcast, Google Podcast, whatever it is, whatever your platform of choice is, we would love to get a review from you to let us know that we're doing a good job for the show. This helps you out. You're getting some value. And if you are, we ask to trade that value with you. Help us out and give us a review. If you do, we're going to read it on the show.

We got one here from Brian Hein. Brian actually... It's been a while since Brian left this review, but Brian is now a client of ours. And actually, at the time of recording here, I think in about another month or so, we've got an interview scheduled with Brian about his business and some of the success that they've been having since jumping on board with us at Intrycks, to help them out.

But Brian left this a while back before all that was really engaged, and he was just checking out our show. Brian says, "Love all the help you provide from your YouTube channel and podcast. We use and implement all we can. You've educated us and helped us along with our journey. Thank you very much, and continue all the helpful info with SEO and GBP knowledge."

No problem, Brian. We're going to keep doing this show. I think we're getting real close to 200 episodes here. It's been a number of years, and feedback like that, and from all of you out there listening and watching, this is what keeps us going to lets us know we're doing a good job, and that this show is helpful for all of you out there in the local SEO world.

Thanks for tuning in. Hopefully this episode helps you. If it does, great. Pass it on, share with others, and we'll do more. Catch you on the next one. Take care, everybody.