How to Use Google Lighthouse and Boost Your WordPress Site

Getting your website to rank and convert into sales is no easy feat.

But before you can even generate sales from your site, you need to make sure it is optimised from head to toe.

And I’m not just talking about SEO. While search engine optimisation is a big part of it, you must also pay attention to other factors affecting your conversion rates.

For this purpose, you need the help of Google Lighthouse.

In this article, we’ll tackle Google Lighthouse, its specific features, and how you can use this unassuming tool to improve your websites’ performance.

What is Google Lighthouse?

Lighthouse runs tests on websites to see how well they work. These tests or “audits” give site owners an overview of their sites’ performance and quality.

Google Lighthouse conducts four basic audits to see whether a website is accessible and following best practices that enhance the user experience.

In a nutshell, it loads a webpage over a weak 3G connection on a slow device. It simulates stressful conditions like data loss and network throttling.

While it may seem like the odds are being stacked against the page’s favour, it’s an effective way to gain authentic insight on a specific website.

The report will give you a score and practical advice to tackle the issues found on a website as it doesn’t just load your side, it also checks how it responds to input.

So, is this something that the average site owner will be able to use?

You can use Google Lighthouse to audit your website so you can identify which specific areas you need to improve on.

If you want your website to be at its best, meaning it shows up on the SERPs and it loads fast, then you need this tool to provide you with the information you need.

While there are plenty of tips you can do to speed up your WordPress website, you can make your site load even faster with a little bit of help from Google Lighthouse.

Another SEO Tool by Google?

Google isn’t exactly reinventing the wheel with Lighthouse.

The search engine giant continues finding ways to improve the search experience for users. And Lighthouse is a step towards that direction.

However, and I’m sure most of you are aware, this tool isn’t Google’s first foray into providing users with resources to help maximise their sites’ worth.

If you’ve been doing website audits for years, you must have used tools like Google Page Insights and Test My Site before.

The great thing about these resources is that they offer a lot regarding improving your websites’ index-ability. But be prepared to receive lots of recommendations for improvement.

For the average website owner, the amount of information that these tools can provide can be overwhelming. The key is to take it one step at a time and before you know it, you’ll end up with a website that’s optimised for Google.

You’re probably thinking, will the extra 2-3 hours of optimising your website matter to your site visitors? After all, it’s not like they can see the changes you’ll be making.

However, if you’re looking to gain a competitive advantage over other websites, then what you do behind the scenes matters.

While Google PageSpeed Insights can provide you with a list of improvements you can work on and rate your site in terms of speed, it can be a bit of a challenge to work on. Many users think the recommendations that PageSpeed Insights give are difficult, if not impossible to do.

PageSpeed Insights focus on two important things:

• First Contentful Paint, or the time before a visitor sees any visual response from a webpage
• DOM Content Loaded, or the time that it takes to render the requested webpage completely.

At this point, the main advantage Google Lighthouse has over PageSpeed Insights and others is it puts user experience first.

The tool tests your website using a throttled 3G connection so it can simulate what a real-life visitor would experience. It doesn’t just load the website to see how fast it will load, but it checks how it responds to input.

Compared to PageSpeed Insights, Google Lighthouse offers a more practical approach to optimising your website, not just for desktop users, but also for mobile users.

What Metrics Do Google Lighthouse Measure?

Using Google Lighthouse, aim for a score between 90 and 100, which will rank you in the top 5% of best-performing websites.

An average score is anywhere between 50 and 89, and if you get a score of 0 to 49, then you know it’s time to overhaul your website.

So, apart from speed, what other factors does Google Lighthouse measure? And will Lighthouse test your websites for metrics that matter?

Here’s a short lowdown of what you can expect from this tool:

Performance

Site speed can seem relative to the average online user. To some people, a website can take forever to load, while to others, it won’t seem that long.

Therefore, Lighthouse strives for testing a website by looking at different factors related to delivering content to the screen in the fastest time possible. It also checks how well users will interact with the displayed content.

• First Contentful Paint – The time it takes for any kind of content to appear on the user’s screen.
• First Meaningful Paint – The time it takes for the first meaningful content to appear on the user’s screen. Getting a low score in this aspect means that the page appears fast
• Speed Index – The test that shows how long it takes for the webpage content to become viewable. The load time for this index is below 1.25 seconds
• First CPU Idle – The point of time when the device has stopped working on rendering a page.
• Time to Interactive – The time when the user interface elements are active and the screen is ready to respond to a user’s input. It tells you the time when a page is interactive.
• Estimated Input Latency – The time before a page responds to a user’s input. A low latency score means that a page feels fast. You want to aim for a latency score less than 50 milliseconds

Accessibility

Lighthouse conducts checks to determine just how accessible a page is to users.

Aside from checking a page’s heading, it will also check whether the colors of a page – both background and foreground – have enough contrast.

It will also see if documents have title tags, link names, and if the viewport can be scaled according to viewer preference.

You’ll notice that the accessibility section has a list of “additional items to manually check”. This is to make sure you have the option to check other relevant benchmarks that can’t be automatically checked.

Best Practices

This section speaks of how your website is performing based on what Google believes to be are the best ways to acquit your website to users.

Lighthouse checks for HTTPS, cross-origin links, and application cache. It also checks the requests for geolocation permission and whether the JavaScript libraries are secure. Deprecated APIs and if users can copy-paste into password fields are also taken into consideration.

It also tells you if your images display in the correct aspect ratio. Because the last thing you want is for distorted images to ruin the look and feel of your website.

SEO

The most glaring difference of Lighthouse from Page Insights is its SEO Check feature.

With this feature, you can conduct an SEO audit to check if your website has any basic SEO issues.

And the best part about this is Lighthouse gives you practical suggestions on how to fix these issues.

But is the Lighthouse SEO Check feature powerful enough to replace your other SEO tools? Unfortunately, the answer is no.

Since this feature is still a work in progress, it can only support the very basic SEO checks.

Here are a few things that the tool asks about your website:

• Does your page have the <meta name=”viewport”> tag with width or initial scale?
• Does your page have a meta description?
• Do your documents have the <title> element?
• Do your documents have the appropriate font sizes?
• Do all your links have descriptive text?
• Does your page have a positive HTTP status code?
• Do your documents have valid hreflang?
• Do your documents have valid rel=canonical?
• Are there elements blocking your page from being indexed?
• Are there any unwanted plugins that are slowing down your website?

There are also few checks that you can manually run like the Structured Data Testing Tool and the Google Mobile-Friendly Test.

Although users can run Lighthouse locally via their browsers, people can also run the SEO Check via your staging environment.

Progressive Web App

Results from this check may not apply if you’re running a Lighthouse audit on a regular website. But for this section, here are a few checks that might be helpful for you.

• Checking content when JavaScript is not available
• If a page is loading fast enough from mobile networks
• If the content is appropriately sized for the viewport

How to Access Google Lighthouse

The last thing people need at the moment are tools that are too complex for users, rendering the tools useless.

Because no matter how good a tool is, it means nothing if you have no access to it.

Below are different ways that users can access to Lighthouse.

Google Chrome

The simplest method is getting the extension for your Chrome browser.

With this extension, you can test your website using a desktop or mobile device. It’s available in Developer Tools so all you need to do is click on the “Add to Chrome” button. Once you see the Lighthouse button on your Chrome bar, then you’re good to go.

1. Open your Chrome browser
2. Go to your site that you want to test
3. Access Developer tools but pressing F12 if you’re using Windows. You can also right-click on a page and select inspect.
4. Click your audits tab
5. Select the device and the specific factors you want to check. Choose the type of throttling or stress you want your website to undergo for this specific audit.

The test you want to run is up to you. This way, you can focus on a goal and get your results faster.

Measure from web.dev

For those who want to test their websites without having to install anything, you can measure your website’s performance via web.dev.

Even though it’s only been a few months since Google released this feature, it has already gained quite a following because it’s easy.

Just go to https://web.dev/measure, enter your URL, and click run audit to get testing.

In just a few seconds, you will see a report on how well the website is performing based on performance, accessibility, best practices, and SEO.

Not hitting your desired score? Don’t worry. This just means that you have plenty of room for improvement.

If you’re not getting 100, don’t beat yourself up because not even Google sites are scoring that high. Go over the recommendations and start working on those that will produce the highest positive impact on your website.

One thing worth noting is that web.dev only emulates the audit using a mobile device. There isn’t an option to audit using desktop.

Taking Google Lighthouse for a Test Drive

Now for the exciting part. Testing Lighthouse to see if it’s everything it’s cut out to be. Let’s take a look at what happens if we run an audit on a popular website like https://www.nike.com/ae/.

I opted to use web.dev for this audit. One thing that impressed me is that it only took mere seconds to view the report. You also have the option to download it as a .html file if you want to access the report offline.

In terms of performance, the Nike site scores on the lower end of the scale at 24. Compared to other websites that load in mere milliseconds, it took the Nike website seconds to produce visible content. In a world where faster is better, the owner of this website needs to take advantage of the opportunities given to make it load faster.

The diagnostics section offers more information on different factors that are affecting the website’s performance.

Next, we go to accessibility. We can see here that Lighthouse has given the Nike site a fairly good score at 74. Again, opportunities for improvement are given like improving the legibility of content by increasing the contrast ratio of background and foreground colors.

In terms of best practices, Lighthouse gives the Nike site a score of 69. Here we can see the website’s unresolved problems by clicking on “browser errors were logged to the console” tab.

In terms of SEO, we see that the Nike site is optimised well for the SERPs. However, Lighthouse offers suggestions like formatting HTML to allow crawlers to better understand the content on the website.

From the scores, it’s quite obvious that the owner of the Nike site needs to prioritise performance.

Takeaways from Google Lighthouse Audit

If you’re still getting a hang of doing website audits, there will be aspects of Lighthouse that confuse you at this point.

Even though you might only be focused on improving website speed, Google designed Lighthouse in a way to offer solutions that will make your website better overall.

Here are just a few suggestions you can implement on your site today:

Optimise Critical Rendering Path

Optimising a website is all about improving the user experience. To do that well, you need to make sure you prioritise the display of content based on the user action.

In the messy jumble of CSS, HTML, and Javascript, you want your website to render the right elements that your users expect to see when they visit. This can mean rendering the page title or headline before the buttons, text, and images.

By optimising the critical rendering path, it doesn’t just improve site speed, it enhances the user experience as well.

And since desktop and mobile browsers render pages differently and at different speeds, optimising for both devices will help you create well-functioning websites for all types of users.

Reduce HTTP/S Requests

One thing that may slow your website that you may or may not know of is HTTP/S requests.

Before browsers load a website on your users’ screens, server requests need to be processed and files have to be transferred.

Can you imagine if your WordPress site has hundreds of these files? How do you think is it going to affect your load time?

Don’t wait around to find out!

Here are a few things you can do to reduce server requests and take your website out from the quicksand of time:

1. Get rid of unnecessary images – Images play a crucial role in websites so we’re not saying you should scrap them completely. Instead, you can focus on keeping your website’s media library free of unnecessary images. If there are tons you’re not using, just delete them. They’re just adding server requests that your website doesn’t need at this point
2. Merge JavaScript and CSS files – WordPress sites are notorious for having countless JavaScript and CSS files floating around. Instead of having each file send a separate server request, you can try merging them into a single file. Just bear in mind where each file type should go. CSS within the header and JavaScript in the footer.
3. Try lazy loading – Lazy loading is when plugins only send server requests once a user scrolls down to a certain part or image on the page. This prevents your website from sending out unnecessary HTTP/S requests

Improve SEO factors

While you’re at it, don’t forget to take note of SEO factors such as including a unique meta description to every page.

It may seem like extra work, but it can make a huge difference to your website’s visibility. And whatever you do, avoid making the rookie mistake of copying your meta descriptions from other websites. Doing so results in duplicate content.

Just a few more tips:

1. Your page title should describe the content presented on the page, preferably with the right keywords. This makes it easier for Google to crawl your website and show it in the relevant SERPs.
2. Add text to describe links. Again, it makes it easier for Google’s algorithm to pick out your website for the SERPs.
3. Get rid of index blockers. Search engines won’t be able to rank your content if you’ve set restrictions on your website.
4. To avoid content duplication issues, which can lead to serious penalties, start using rel=canonical URLs. this way, even if you have similar content, linking out to the source will help your website rank.
5. Make your website more accessible to mobile users. These days, most people prefer to go online via their mobile devices so optimising your interface and content for mobile use isn’t just going to improve your user experience, this will also make your site rank higher.

Conclusion

Your job as a site owner doesn’t end when your website goes live. It takes constant planning, creating, testing, and optimising to end up with a website that you can be proud of.

When you’re looking for ways to manage your WordPress sites and make them better, you’ve already won half the battle right there.

For the other half, you need a tool like Google Lighthouse to keep you abreast of how your site is performing.

It’s a very invaluable tool considering it’s Google themselves that is analysing your site and providing you with recommendations for making your site more efficient.

More importantly, Google Lighthouse is free and powerful. So you’re getting everything you need to push your WordPress site on organic search.

Granted, you receive on-page suggestions for your site which is part of website optimisation.

Nonetheless, it’s information coming straight from the horse’s mouth. And it would be foolish of you to ignore their advice and implement their recommendations. Applying them should help your site generate greater organic traffic and provide a much better user experience.