How to use to Chrome Lighthouse

by Janeth Kent Date: 14-06-2019 seo Lighthouse Chrome


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.
 

SEO Score

 

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. 

 

Conclusions

 

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.

 
by Janeth Kent Date: 14-06-2019 seo Lighthouse Chrome hits : 4242  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

SEO: How to choose the best Anchor Text

Anchor Text are the words used to insert a link within a piece of content. This text can be anything from "click here" to the name of a brand or…

Cumulative Layout Shift, what is and How to optimize CLS

Cumulative Layout Shift, one of the new Core Web Vitals metrics,  is the first metric that focuses on user experience beyond performance. Unexpected movement of web page content is a major…

Understanding LCP, CLS, FID. All about Core Web Vitals in Google Search Console

A few months ago we talked about certain Google metrics that were displayed in Search Console. The reason for writing another post on this topic is that Google has changed…

The best free tools for linkbuilding

Linkbuilding is one of the main factors in improving the SEO positioning of a page. Having a profile of inbound links from pages with great authority can mean the difference…

SEO: How to find and remove artificial links

At Ma-no we are aware of the importance of a good linkbuilding strategy in order to achieve success with a website. Links are key to placing a website among the top…

5 Tips to Bring More Traffic to Your Blog

Publishing a blog on your business website is an effective marketing tool for several reasons. Blog posts are the ideal place to share information about your company, products, services, and showcase…

How to Deal with Unnatural Inbound Links

A website that has a good rank on search engines, especially Google is a big task. Backlinks or Inbound links are one of the best ways to achieve this ranking.…

SEO in Google News: How to appear in Google News

Google News is a tool, from Google, that spreads current, reliable and truthful content from different websites or portals dedicated exclusively to news. The sites that appear in Google News…

How to comply with Google's quality guidelines in 2020

Google provides a set of guidelines on what your website's content should look like in order to appear in search results. There are several categories within the Google guidelines: Webmaster Guidelines. General guidelines. Content-specific…

5 Remote Careers You Can Start Online in 2020

In 2020, life has moved indoors. School, shopping, entertainment, and work have all moved online to keep up with the fight against COVID-19. And with it came an enormous demand…

Get ready for the future: What Does The Future Of SEO Look Like?

How will SEO change in 2030? There are various positions and assumptions that we can make about this so that you can think about the strategies to take when the…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration