Episode Overview: Google Lighthouse is a powerful, robust SEO auditing tool that can significantly help improve your digital marketing strategies. Join host Ben as he speaks with Searchmetrics’ Director of Digital Strategies Group Björn Darko as they explore Google Lighthouse in depth and share useful tips and tricks to best leverage its powerful capabilities in your digital strategies.
Summary
- Google Lighthouse is a free browser extension that emulates a mobile device and user agents awarding a score in five categories.
- The five categories are performance, accessibility, best practices, SEO and a score around progressive web apps.
- Performance is one of the most important Lighthouse categories as it measures time from navigation to when the browser actually renders the first bit of content on a page.
- Scores vary by category, where a high score in one category and a low score in another can both be positive.
GUESTS & RESOURCES
- Björn Darko: Website // LinkedIn
- The Voices of Search Podcast: Email // LinkedIn // Twitter
- Benjamin Shapiro: Website // LinkedIn // Twitter
Ben: Welcome to the Voices of Search podcast. I’m your host, Benjamin Shapiro. And today we’ll be looking under the hood to provide you with the technical tips you need to make the most out of your SEO strategies. Joining us today is Björn Darko. Björn leads the European arm of Searchmetrics’ Digital Strategies Group, which offers SEO consulting, content marketing services and strategic consulting to software companies all around Europe, the Middle East and Africa. He’s also the creator of the popular IGTV show, SEOPresso. And today, Björn and I are going to talk about what actions you can take from Google Lighthouse. Okay. On with the show. Here is my conversation with Björn Darko, director of the digital strategies Group at Searchmetrics. Björn, welcome back to the Voices of Search podcast.
Björn: Hi Ben, thanks for having me again, even though it’s late in Germany.
Ben: Well, it’s mid-afternoon here in the suburbs of San Francisco in Silicon Valley and it’s raining here unfortunately. How’s the weather in the middle of the night where you are?
Björn: It was actually pretty clear sky today, but it was cold. So I guess, 10 degrees around 10-12 degrees.
Ben: The truth is, it’s always sunny in podcast land, so for everybody who’s listening to this that wants to know, it’s beautiful, it’s sunny, everything’s going to be wonderful. We’re going to have a great day talking about some SEO tactics and Björn, you’re my go-to tech SEO. Let’s follow up on our last conversation. When we last got together, we talked about how to do an SEO audit and some of the places where you can get data. We’re going to turn the table now and talk a little bit about some of the other data providers and sources where you can figure out how your website is performing. Specifically, we’re going to focus in on Google Lighthouse. Let’s start at the top. What the heck is Google Lighthouse?
Björn: Google Lighthouse, actually, it’s a free tool from Google which is amazing. So, you can think about it, it’s actually a browser extension, which you can add on Chrome into your Chrome browser. What the tool does is it measures performance. What it does is actually emulates a mobile device, 4G for example, and then emulates user agents and actually gives you out five scores; performance, accessibility, best practices, SEO and a score around progressive web apps. And the score goes from zero to a hundred. Zero is bad and a hundred is good, so there are differences of course in the score, but some of the same wordings and everything is actually based on one URL.
Ben: So essentially, Google Lighthouse is for you to take a webpage, your URL, not at a domain level, but a specific page, and understand how Google views its performance, not just for SEO, but just broadly, how Google thinks about the acumen of that page.
Björn: Exactly.
Ben: Now you mentioned that there’s five different steps, performance, accessibility, best practices, SEO, and progressive web apps. Let’s go through each one of those one at a time and talk a little bit about what that means, what your expectation should be for the score. And maybe even some of the ways that you can improve those scores. Let’s start over all for performance. What does Google mean with their performance scoring?
Björn: So I think the performance score is actually the most important one here in the Google Lighthouse report. So what it actually measures is for example, the first paint, it measures in seconds. So, in the first paint actually measures the time from navigation to the time when the browser actually renders the first bit of content from the document object model. And this is very important. It’s a very important milestone actually for users because we provide the feedback that the page is actually loading. So when the first paint is happening, the user sees, “Oh, something is loading.”
Ben: So I think that’s an important distinction, and look, I’m not the world’s most technical SEO. Don’t tell anybody I’m not really an SEO to begin with. I’m a digital marketer, like a lot of people that are going to be listening to this podcast, and I speak SEO. First paint, right? One of the things that matters the most to Google is site speed, site speed, site speed. And so really this is the metric that you’re looking at that’s probably the most important one to understand what your site speed is. It’s not how much content you’re able to get to the page. It’s when can the user start interacting with it? Am I thinking about first paint the right way?
Björn: No, not…
Ben: Not exactly?
Björn: It builds up. So first paint is actually something that users sees, “Oh, something is loading.” But then there’s the first meaningful paint. It will be measured in seconds again. And this all actually identifies the time at which the user sees that the primary content of the page is visible. So the first meaningful paint is essentially the paint after which the biggest above the full layout change has happened and have loaded, for example. So that’s actually the first time a user really sees content, right? And then there’s time to see this. For me, this is the most important one. If this is measured in seconds, again and actually measures how long it takes a patient become user, so as soon as the user can actually scroll or press on a button or do something actually with the page, that’s the time to interact. So time to interactive is actually, it’s the cherry on the cake. Do you say that in English?
Ben: It’s not on a cake. We would just say cherry on the sundae. We eat apparently more ice cream than baked goods.
Björn: Oh, okay. So it’s actually the essential thing for a user to interact with the site. So that’s a very important metric to measure, right? And then there’s an overall speed index actually, which is the overall partial performance metrics that shows you how quickly the contents of the page are visible. So, and the lower the score, the better, of course.
Ben: So the lower the score, the better. I think that’s an important thing to understand. When you’re looking at your Google Lighthouse, you run it for a domain, do you get a score for your performance separate from the rest of the other variables?
Björn: Yeah. So the score is from zero to a hundred.
Ben: That’s the overall score?
Björn: That’s the overall score and the higher the score, the better. But for speed index is, of course, the lower the score, the better because the lower the time a page needs to load, the better.
Ben: Okay. So talk to me about what the expectations are for an enterprise grade site. When you’re looking at your performance score, are we talking a couple of seconds to get to first paint? What’s the score? What’s the average?
Björn: So it’s different from various industries, I’d say. But I’ve seen sites who have a score of 90, but the average one I would say is between 60 and 70, then that’s the average one I see. If you are 90 or even at 100, I mean, 100 is mainly impossible, but if you are around 90, 80, then you’re already very, very good.
Ben: So let me make sure I understand. The performance, when you’re talking about time to load, the lower time, the better, but the actual performance score you’re getting is still out of a hundred point scale and you do want to be a hundred, not a zero.
Björn: Yeah, exactly.
Ben: So the average is 60 to 70. That’s when you’re in the range of normal. Anything below that, you’re really struggling with performance. And that means it’s something that you should focus your time on. If you’re in the 90s or 100, you’re doing a great job.
Björn: Yeah.
Ben: When you’re in that lower class and you’re struggling with your performance score, what are some of the main things that you should look at to understand how to optimize your performance?
Björn: I mean, the good thing with Google Lighthouse is it gives you already opportunities, which actually directly impacts the performance of your website. So it’s really looking at parts of the page and parts on the background of your page, which are blocking your website from loading very fast. There’s one thing it’s called render blocking resources. And those are resources which are blocking the first paint of your page. So the fast page load resides at a higher user engagement, more page views and improve conversions, of course. You can improve your page load speed by, for example, inlining links that are required for the first paint. So that actually means that sometimes you have scripts and you have links, which the browser actually needs to [inaudible] in order to see what’s in the link. What you can also do is everything you already need for the first paint, you put an inline of your source code so that it gets rendered immediately rather than needs to be taken from a file and then try to send render and a second step.
Ben: So really the important thing to take away here is that you can basically go through a prioritization exercise to put all the things that are required for first paint to start boosting that scores so Google gives you more credit for performance.
Björn: Exactly.
Ben: As we move on to some of the other factors within your Lighthouse score, accessibility is the next one. I assumed accessibility was how quickly the page loads and giving people access to it. It is not a site speed metrics specifically. Talk to me about what accessibility means.
Björn: So accessibility actually highlights opportunities to improve the accessibility of your web application. It’s actually, it’s only a subset of issues, which can be automatically detected because the Lighthouse report is actually something where they automatically detect some issues based on a given checklist for them, you can say. So the important thing here, when it comes to accessibility, is that you do manual testing also. But these guidelines are actually based on the so-called web content accessibility guidelines, the WCAG 2.0, it’s a very complicated name.
Ben: WCAG 2.0, what’s the WCAG 2.0?
Björn: Yeah, and these accessibility guidelines actually say that a website needs to be perceivable so that the user can actually perceive the content, needs to be operational so that the user can actually use the components or navigate the content needs to be understandable that the user can actually understand the content and not only the user, but also the interfaces the user are using. There are some interfaces, which are, for example, a screen reader. So the content needs to be understandable for screen readers, but it needs to be robust so that the content can actually be consumed by a variety of user agents and browsers so that they work with assistive technology, for example, as I said, the screen reader.
Ben: So it seems like this is getting into things like mobile responsiveness. Does your content actually show up? Is it consumable to the end consumer no matter what device they’re on? Am I thinking about it the right way? Is this about compatibility across multiple browsers and multiple devices? That’s really what we’re getting at here with accessibility?
Björn: Yeah. So it needs to be easily accessible, right? So we speak about it later. If you have a lot of JavaScript on a website, a screen reader can’t handle JavaScript and there are those other browsers who can’t actually handle JavaScript. So this is something you should definitely reduce when you want to have your website very accessible. It’s very important when it comes to accessibility that your site’s content is available for every actually browser or technology you’re providing the experience of the user who might be having secure that therefore they expect a way different experience than a normal user, for example, or they normally use different interfaces and content, which should be made available for those interfaces. You should reduce popups, text should be very accessible and not very complicated for those people with disabilities, as well as fonts should be large enough and should be readable, stuff like that. So there are different accessibility metrics which are taking into place here.
Ben: So talk to me about what are some of the most common problems that people have with accessibility and how do you solve them?
Björn: Yeah. So here again, the Lighthouse report gives you some amazing insights as well. Let’s take buttons for example. So buttons need to have an accessible name, right? So buttons without names are actually unusable for users who rely on screen readers. When a button doesn’t have a name, for example, a screen will just announce a button, but it doesn’t give the user any insight into what the button does. There’s also color contrast, like low contrast text is difficult or impossible for many users to read. So it shows all that text elements have sufficient color contrast between the text in the foreground and background color behind it, or every form has a label. So that labels clarify the purpose of form elements. Although the purpose of each element may be obvious for site builders. This is often not the case for users who rely on screen readers, for example.
Ben: The next field in the Google Lighthouse has best practices. And this one’s actually a little confusing to me because it seems like everything that we’ve been talking about or here’s the ways to follow best practices, we’re giving you scores. Specifically, what best practices is Google telling you about what their Lighthouse?
Björn: Well, it’s actually all the best practices score, essentially just based on security stuff. So Google actually gives out 16 best practices. All of those are especially in security aspects of the website, if they are running on HTTPS, for example, if the resources included are from secured sources, if JavaScript libraries are secure, if connection to database is secure, all that stuff. So everything which is actually based on security is taken into account here. And again, there are 16 best practices, which you can read up. I don’t have all of them in my mind, but basically everything based on security.
Ben: So basically best practices are not just best practices, but making sure that the page that you’re serving is actually secure. Do you see that being a big problem for when you’re doing audits? Are most people struggling with security or is it more about page load site speed accessibility?
Björn: No. I mean, I’ve seen some sites. I can tell you, Ben. There was one site, they do photo books, but you can actually upload your photos and make a book out of it to give it as a gift for Christmas, stuff like that. What I’ve seen is that this page was opening up those user accounts pages, where all those photos with their private photos were actually accessible for every user through a search engine. So they could actually just search for a name of a person, if that was the account name, that would pop up in a search engine. And then people like you and me could actually browse through their private photo gallery. And, that’s really tricky.
Ben: Hopefully that company was checking their Google Lighthouse score and realized they had some severe security problems. Finally, we get down to the SEO advice from Google in Lighthouse. What does Google telling you about your SEO performance and how they view it in a Lighthouse study?
Björn: Well, yes, your part is really weak, right? It gives you a very rudimentary view on SEO and stuff, which needs to be in place. For example, they check if the page is optimized for search engines reside rankings, like if it’s indexable or not, if the text is blocking the whole domain from being indexed, for example. There are also some content best practices, if it’s mobile friendly, if buttons are intact and are large enough and has enough space around them, stuff like that, but very, very rudimentary and very, not really sophisticated when I or we would do an SEO audit.
Ben: So basically, Google is putting together a score for SEO based on whether your pages are actually SEO accessible. It is not evaluating the content of the page. It’s not giving an individual ranking for SEO factors or any ranking factors. It’s just a binary, can we evaluate your page for SEO or not
Björn: Exactly. It’s really high level and nothing really sophisticated.
Ben: Okay. And then lastly, we get into the progressive web app score. Talk to me about what a progressive web app is and how is it different from a regular world website?
Björn: Well, I think the main difference is actually that you can run a PWA, a progressive web app, for example, because it’s cached. So you can use it if your train drives through a tunnel, for example. And the thing is that you don’t need to go to an app store and download the app. But what you do is actually you access a website and then you just load it on your home screen, on your mobile phone so that you can access a website that’s actually a mobile website.
Ben: So the concept here is that you can basically have a browser based web app. So for the end user, they’re going through the same experience to load a web page, but the functionality is the same as a separate web application. Give me an example of a progressive web app that people might’ve used and not realized it was a web app.
Björn: Well, I think in the US it’s the Washington Post. They use a progress web app. That’s the only one who pops into my mind right now.
Ben: I think that Google actually uses a progressive web app for their browser based maps, right? Where you go to Google Maps and you’re for directions. I believe that that’s a progressive web app as well. Not just a browser experience, not just a traditional application. But the Washington Post has a progressive web app, and apparently that can be a game changer in terms of your SEO performance as well.
Björn: Yeah. Yeah, definitely. And the Washington Post, especially, they were one of the first ones who actually tested with the progressive web app as well. Financial Times as well. So a lot of publishers, I know they tested with it and they’re running on a PWA. If they are still running on a PWA, I don’t know, but I know for certain that they tested with it and I actually experienced it. And the thing with PWA is that it’s very, very fast. So you click on a link and instantly it opens up a new page on the site. This is actually very, very good. And on the Lighthouse tests, the PWA audits are actually based on a checklist, which Google again, compiled, which lists 14 requirements. So the lighthouse has actually automated audits for 11 out of those 14 requirements. And those are the following. So the Google Lighthouse report actually … if the PWA starts fast and stays fast.
Björn: If it works on any browser, if it’s responsive to any screen size, if it provides a custom offline page, if it’s installable on the home screen, if it provides an offline experience. So as soon as the network is gone, can you still browse through it? Is it fully accessible? Can it be discovered through search? Does it have an input type? Provides context for permission requests and follows best practices for healthy codes? And, you can actually double check if the page loads fast enough on mobile networks or if it uses HTTPS, if the content is sized correctly for viewpoints, stuff like that.
Ben: So it seems like the progressive web app being included in Lighthouse is really just Google suggesting that this is the best way to have a website perform because, at the end of the day, Google wants the highest performance, best possible pages, because that ends up helping their user experience. When you are looking broadly across the Lighthouse score, you mentioned before that the scores can range from zero to a hundred. What’s an average score? What should you expect? And then what are some of the key takeaways for how you could use this data?
Björn: Actually, it’s an audit like as we spoke in the previous episode about how to do an audit, for us, the Lighthouse report is just a part of an audit. It is just one element of an audit where you get really nice insights, how you can actually increase the performance of your web application, how you can make it faster. It checks if you have static resources, for example, and this is a thing which can automatically make your website faster. For example, you’ll have the JavaScript, you have images, you have fonts on the page, which a browser all the time needs to get and needs to load it again and again and again, and those assets, you can actually cache in the browser on the local store. So that your browser doesn’t need to take it all the time. Again, this is one insight that the Lighthouse report can give you, and you wouldn’t know it if you are not trying to do caching, for example.
Ben: So I think that the important thing to think about is this is just one of the tools that Google has provided, that you can use to understand the performance of your website. The first thing we talked about when Björn and I got together was how to conduct an audit, how to evaluate what the resources you have and what your overall performance is, looking internally. This is a secondary view that you can do when you’re trying to figure out what your SEO strategy should be to understand how Google views the domain information that you’re sending it. Okay. Björn, thank you so much for coming on The Voices of Search podcast and walking us through how to use Google Lighthouse.
Ben: And that wraps up this episode of The Voices of Search podcast. Thanks for listening to my conversation with Björn Darko, director of the digital strategies group at Searchmetrics. We’d love to continue the conversation with you. So if you’re interested in contacting Björn, you can find the link to his LinkedIn profile in our show notes, you can contact him on Twitter. His handle is Björn_Darko, that’s B-J-O-R-N_D-A-R-K-O. You could watch his famous IGETV show, It’s SEOPresso. Or you can visit his company’s website, which is searchmetrics.com. Just one more link in our show notes I’d like to tell you about. If you didn’t have a chance to take notes while you were listening to this podcast, head over to voicesofsearch.com, where we have summaries of all of our episodes, contact information for our guests.
Ben: You can send us your topic suggestions, your SEO questions. You can even apply to be a guest speaker on the Voices of Search podcast. Of course, you can always reach out on social media. Our handle is voicesofsearch on Twitter. And my personal handle is BenJShap, B-E-N-J-S-H-A-P. And if you haven’t subscribed yet, and you want a daily stream of SEO and content marketing insights in your podcast feed, we’re going to publish episodes every day during the work week. So hit that subscribe button in your podcast app, and we’ll be back in your feed tomorrow morning. All right. That’s it for today. But until next time, remember the answers are always in the data.