How would you like to perform a fast SEO audit with a Chrome browser-based instrument? With the Lighthouse extension, you can do that.
If you're not acquainted with Lighthouse, it's an open-source tool used by experts to verify their website's health. It analyzes everything from best practices to performance to accessibility.
As written in Wikipedia, A lighthouse is a tower, building, or other types of structure designed to emit light from a system of lamps and lenses and to serve as a navigational aid for maritime pilots at sea or on inland waterways.
Okay, let's transform it into tech words: Lighthouse is a tower, structure or other building designed to emit light from a device under the "Audits" panel of Chrome Developer Tools and works as a developer guide.
The instrument serves its purpose: it prevents you from "crashing on the rocks." You had to operate Lighthouse on an operating system's command line or as a node module in the past, however. Now, in your browser, you can start it.
Well, in poor words, Lighthouse is a Google-designed instrument that analyzes web applications and web pages, gathers performance metrics and information on best practices for developers.
According to Google Developers Docs:
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
We're going to go over the Chrome Lighthouse extension in this article, clarify how to install it, and illustrate you how to use it.
Installing the Lighthouse Chrome Extension
You must install it in your browser before you can use the Lighthouse Chrome extension.
Luckily, this is simple to do. First, check the extension page. If it looks like a pop-up in a distinct window. You should see a button in the bottom right corner that states "Add to Chrome" or similar expressions.
Click the button.
You will see a pop-up confirmation asking if you want the Lighthouse extension to be installed.
Click on the button "Add extension."
You should see a notification in the top right corner after some processing time that the extension was added to your Chrome browser. Close the pop-up.
You should see the Lighthouse icon in the browser's upper right corner next to the bar where you type in a URL.
That indicates you installed the extension effectively.
Running Your First Lighthouse Report
Once the Lighthouse Chrome extension has been installed, it's time to run your first report. You need to go over to the website you want to audit before you can do that.
Let's audit your web site.
Open your tab in a new tab.
Next, in the upper right corner of the screen, press on the Lighthouse icon. A pop-up is going to appear.
You will see the name of the extension (Lighthouse) in the center of the pop-up. You'll see the URL of the page you're about to test just below that: "https:/www.mysite.com.
You will see two buttons at the edge of the pop-up: "Options" and "Generate Report." To view some of your settings, click the "Options" button.
As you can notice, you can choose from five different audit types:
- Performance – checks how quickly the page loads
- Progressive Web App – checks PWA qualities such as responsiveness and 3G speed
- Accessibility – checks website friendliness for non-typical users (such as those who are color-blind)
- Best Practices – checks for web application development best practices
- SEO – checks that the page is optimized to perform well in the search engine results pages (SERPs)
Click "OK" on the popup "Audit categories to include." Then press "Generate Report." The report appears in a distinct browser window after a couple of minutes.
If you look at the top, for each audit category you have just chosen, you will see numerical results.
Your statistics may be slightly different.
These results are from 0 to 100, with the 100 being the best 100. As you can see, low scores are red colored, medium scores are yellow, and high scores are green. That's the pattern you're going to see on other instruments like PageSpeed Insights.
Performance Reports on Lighthouse Chrome
You will see a timeline at the top in the Performance section. This timeline demonstrates you how it takes the page to load.
As you can see, the extension "draws" a thumbnail version of the site.
You will see some important metrics below the timeline. The First Meaningful Paint status indicates how long it takes to load the page. The Perceptual Speed Index indicates how fast the page content is clearly populated. The Estimated Latency indicates how long the website will take to react to user input.
Lighthouse shows some improvement opportunities below the stats. For instance, it looks like the stylesheets for render-blocking add about 700ms–800ms in page load time.
Lighthouse also checks images, legacy image formats, and CSS rules that have not been used.
So right off the bat, you can see that if SEMRush took care of those issues, the site could cut off its loading time by more than a second. Users would be happy about that.
The Diagnostics section is below the Opportunities section. This provides you information of the Critical Request Chains. Use this information to locate bottlenecks in the load of the website.
Progressive Web App Reports and Accessibility
A progressive web app utilizes state-of-the-art technology to provide a wealthy browser experience: Ma-No has it ;-).
Finally, Lighthouse shows you a list of things you need to check manually:
- Cross-browser compliance
- Smooth transitions from page to page
- Unique URLs for all
The category of Accessibility audit checks the website to guarantee that it can be used by people with special needs.
And yet again, Lighthouse will tell you stuff you need to manually verify, such as the page's tab order, adequate labeling of custom controls, and the page's visual order.
Best Practices Section
If you run the audit of best practices toward your site and see some errors, contact your development team is crucial. Most of these issues are too difficult for someone who is not an expert in developing web applications.
Finally, from a SEO perspective, the SEO category displays the website's health.
If you run your website's SEO report and see failures in the audit, you may be able to take care of them on your own. Nevertheless, contact your development team is probably a good idea.
The lighthouse has just been released. This means that Google will most likely add to its feature set over time.
So, although the extension seems rather light (especially if compared to more sophisticated tools like Screaming Frog), at this point it is only in its child-like phase. Look for it to conduct a more solid analysis of your website at some point in the future.
Until then, it's a great extension to have in your browser so you can control any site with few clicks.
Finally, the SEO category shows the health of the website from an SEO perspective.
The lighthouse has just been released.
This means that Google will most likely add to its feature set over time.
So, although the extension seems rather light (especially if compared to more sophisticated tools like Screaming Frog), at this point it is only in its child-like phase.
Look for it to conduct a more solid analysis of your website at some point in the future. Until then, it's a great extension to have in your browser so you can control any site with few clicks.