How to audit your website for performance, best practices and SEO using free Google Lighthouse [VIDEO]
By
20 June 2018 (Edited 04 July 2018)



Subscribe to my blog

Share This Article


Source: David|20 June 2018

Do you want to find out everything that's good and bad about the functionality of your website? If so, check out Google Lighthouse - a free, open-source tool that you can run on any website to do audits of performance, search engine optimization, accessibility and more.

There are different ways of accessing Google Lighthouse, but the simplest way is to open your website in Google Chrome and access DevTools from the Chrome menu.

However, important: For this to work on a Windows PC, your Google Chrome browser must be running on a Windows 7 or later operating system. Chrome DevTools won't run correctly on Windows XP.

To begin, open Chrome and go to the website you want to audit. In the example below, we'll use our ACRO Global site ACROGlobal.com. The upper part of that homepage looks like this on my desktop PC:

Next, click on the three-stacked-dots icon at top right of the Chrome window to open the Chrome menu, and once there, click on More tools to open the flyout submenu:

On the submenu, click Developer tools, which should take you to a screen like this:

Note that this view of the Lighthouse logo is on the Audits tab (at top) - if what you're seeing is different, just go to the Audits tab. Click Perform an audit and you'll be given some choices:

Check the types of audits you want to run. For my purposes, I figured Performance, Best practices and SEO would be most useful to start. Click Run audit, and you should next see this:

That horizontal blue line is a progress bar. It takes a few minutes for Lighthouse to run the audit. But it's worth the wait, as you'll see. Below the progress bar, the system displays a series of amusing facts to keep you from getting bored.

Once the audit is complete, you should see two things on your screen: to the left, your web page viewed in a mobile simulator, like this:

And on the right, the main audit output, the upper part of which looks like this:

At the top of that screen are the overall scores (out of 100) Lighthouse gave your page for the types of audits requested: in the example Performance (71), Best practices (63) and SEO (89).

Below that is the Metrics section with a report on the loading performance of the page, with screencaps of what a user would see at various points in time. In the example, you can see from the screencaps that the user's browser screen first began showing parts of the page 1.9 seconds after the user landed on it; but it took 9.3 seconds to load the entire page.

There's more detail on that below the screencaps, labeled First meaningful paint (page recognizable); First interactive (the time at which some of the stuff on the page - navigation, etc. - begins to be usable; and Consistently interactive (when everything first works).

Next, the report shows Perceptual speed index which measures how fast the page is fully visible (not necessarily fully working), with time in seconds (2,448 milliseconds, or 2.48 seconds), with a score (0-100) of 88 - so page loads pretty fast, at least visually.

And after that, Estimated Input Latency - how long the pages takes to respond to user input (like a click). Lighthouse has measured this time for our page to be 21 milliseconds vs. a rule of thumb that a delay of 50 milliseconds looks to the user like a lag; so page is good on that metric: perfect 100.

By the way: anytime you want more detail on anything in these reports, just click the little gray arrow beside the item of interest, to open up yet more explanation.

Moving on: anyone who wants to see the report above in excruciating graphical detail can click the View Trace button and get a screen like the following. But really, what's here is more than you ever need to know. So don't bother to click View Trace.

Carrying on from where we left off with Latency: Next up are Opportunities identified by Lighthouse - specific actions we can take to improve page loading speed:

Note that the various Opportunities include estimated loading time and page-weight savings to be gained - like 1.85 seconds and 331 KB for improving Offscreen images. The Opportunities graphics are color-coded also: big potential improvements in red, lesser ones in orange, nice-to-have in green.

Like everything else in the Lighthouse audit report, each of the Opportunities can be expanded by clicking the little arrow beside it. Here's Offscreen images expanded:

That's a complete list of the offending images, with thumbnails, locations (URLs), sizes and potential savings. (As it happens in the example, all these images are coming from Google Maps - so opportunity probably isn't actionable except by removing the Google Maps link from the page.)

Next come Diagnostics:

Fix to "cache policy on static assets" requires coding that's beyond my ability. So for now I'll live with the 85 score.

The "invisible text" problem is coming from one remotely-hosted font that's used in the page. We can fix that easily by hosting this font locally and changing the path.

Next comes a list of tests our page did not fail:

Not every auditing tool tells you what you've done right. That's a useful feature - it gives us a baseline from which to re-audit after making changes to the page.

Next comes the Best Practices section, with lists of Failed and Passed audits:

The big one here fromn Google's perspective is Does not use HTTPS. Google wants every website to encrypt communications between server and browsers. At this time, our site does not. Big reason for that is: site pre-existed Google's decision to penalize unencrypted connections, and code changes required now make it a Big Production to go to HTTPS. Will work on that. Other failed items are too technical to get into here.

Again, for future reference, it's nice to see the other tests that were completed successfully.

Last but not least: results of the SEO audit:

The one failed SEO audit is an easy one to fix. For usability in mobile devices, Google wants all text to be sized at 16 px or larger. Passing score is 75% or more of text at least 16px. 67% of our text is on this page is 16px or larger. Here you can see the part that is not - the links in the bottom text NAV:

In the detail behind that failed audit item, Lighthouse helpfully shows us why this text is small, making the fix easier:

That screen is showing the classes and location (line numbers) of the CSS code producing small text, along with inline styles in the HTML of the page, along with % of text affected and actual (too small) size.

Was this audit useful? You bet! Lighthouse found all the potential improvements above in one simple HTML page with only 375 lines of code.

To get this much information that took Lighthouse a matter of minutes to produce would take hours or days to get using something like the W3C online code validator. And that output would lack Google's spin on mobile friendliness, loading speed and security.

Good on Google for giving us this free product.


If you found this article helpful and would like to see more like it, please share it via the Share This Article link at the top of the page.

And if you have questions or comments, you can easily send them to me with the Quick Reply form, below.


David Boggs    - David
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
Subscribe to my blog

YouTube
Website
Visit Website
Rating
5/5 based on 1 votes.
Show Individual Votes
Tags , , , , , , , ,
Related Listings
External Article: 


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article