top of page
  • Writer's pictureJMZ

The complete guide from zero to 100 Google Lighthouse

Nowadays, having visible, accessible and user-friendly content is more important than ever for internet business owners. But how do we know if the content of our pages is of the required quality? Google Lighthouse is one of the various tools developed to measure the quality of our website pages. Google Lighthouse examines and analyzes important and impactful aspects to provide us with the most efficient report possible. In this article, we try to go into the details of these reviews and explain how to use the Google Lighthouse tool.



What is Google Lighthouse?

Google Lighthouse is an open-source automated tool developed by Google to evaluate the quality of web pages. Although Google Lighthouse is specifically used to evaluate advanced web applications, it applies to all websites. Progressive Web Apps are websites that are designed to be similar to mobile applications and give users a sense of working with them.

Google Lighthouse is commonly used as a plugin for the Chrome browser. Google Lighthouse is a very useful tool that you can use to get a lot of valuable analytics and use them to optimize your website. This tool is suitable for use by all classes, both beginners and professionals.

What does Google Lighthouse or Google Lighthouse check?

Google Lighthouse assesses exactly the factors that have the greatest impact on the user experience. When Google Lighthouse completes the evaluation process of a web page, it submits a report that includes scores for each section reviewed. In addition to the scores, which are calculated from 100, a list of correctly observed cases, problems of that page and recommendations for solving them are also included in this report. A circle is drawn around each score, which may be red, orange, or green. These colors mean poor, average and good site status in the field, respectively.

What does Google Lighthouse or Google Lighthouse check?


Performance

In this category, Google Lighthouse analyzes the loading speed of the website; How fast users can access and view site content. For this purpose, Google Lighthouse examines 6 criteria:

First Concertful Paint

Indicates how long it takes for the first text or image to be fully visible to users. Note that this criterion indicates the rendering time. Not load time. For example, if the text of the page is loaded by the browser while the font is still not applied, this period has not yet expired.

Speed ​​Index

Indicates the loading speed of the page content.


Largest Concertful Paint

Indicates how long it takes for the largest image or text block on the page to be rendered or translated.

Time to Interactive

Indicates when the page is fully loaded, and users are able to fully interact with it.

Total Blocking Time

Indicates the total time the page has been blocked and the user cannot interact with it. Total Blocking Time is the total time after First Contentful Paint and before Time to Interactive and occurs when the page interaction for the user is blocked for more than 50 thousandths of a second. For example, if a JavaScript code interrupts the page load for 70,000ths of a second, the total Blocking Time increase visitors to web site by 20,000ths of a second.


Cumulative Layout Shift

Indicates the amount of content that is moving on that page after it is rendered. To better understand the meaning of this criterion, let us give an example of a situation that may have occurred to you. Sometimes we open a page and immediately start reading the text in it, but suddenly the text shifts and goes up or down. The reason for this is that at first the page was not fully rendered and for example the font or video in it was not yet loaded. After the contents are rendered, all elements of the page, including the text, are moved to free up space for the video that has just been uploaded.

The lower the value of this criterion, the better. Because changing the layout and layout of the page will greatly damage the user experience. For example, it causes accidental and unwanted clicks on the wrong part of the page or missing the line when reading an article.


In addition to analyzing the above factors, Google Lighthouse also offers improvements. These suggestions offer a wide range of optimizations to reduce the load time of the desired web pages. Image compression is an example of this. This section is displayed for you under the headings Opportunities and Diagnostics.

Check site speed.

Accessibility

In this section, Google Lighthouse evaluates the desirability of the website for the use of people with physical disabilities. Accessibility tests the function of important elements such as buttons or links. For example, it checks whether they are properly described and whether the user can easily identify them. Or, for example, a suitable tool tag has been used for the images so that it can describe the visual content to the combine users as well.

Best Practices

The Best Practices section evaluated by Google Lighthouse focuses primarily on the security aspects of the website to ensure that they are developed to the standards of the day. As the title suggests, this section assesses what website owners need to do to create the best website and experience possible for their audience. For example, in this section, Google Lighthouse evaluates the use of SSL and TLS security protocols or examines whether website resources come from secure sources.



Web page SEO

Google Lighthouse conducts a number of studies to evaluate how a website is crawled by search engines and reflected in search results pages. Of course, these studies, which Google refers to as " SEO ", are very limited. However, if a website does not get a perfect score in this section, optimization becomes necessary for it and its administrator must make the necessary recommended changes. Because Google Lighthouse is specifically designed to evaluate advanced web applications, much of the focus is on search engine optimization for mobile devices.

Progressive Web App

This section, which has existed since the release of this service, can be considered the core of Google Lighthouse. This section examines the performance of a website to evaluate its effectiveness as a progressive web application. For example, Google Lighthouse examines how all dynamic elements and content are displayed correctly, as well as the availability of offline features.

Where can I get Google Lighthouse?

In general, Google Lighthouse can be provided in several ways. But in the end, they all provide you with a common analytical report. One of the best features of Google Lighthouse is that it is easy to use. In total, there are four easy ways to use Google Lighthouse services:

In the embedded search bar, enter the URL of the page you want to check.

Page Speed ​​Insights

Page Speed ​​Insights (PSI) examines only the page performance section of the sections mentioned earlier and gives an overall score. Another difference that may surprise you is the ability to view pages separately on mobile devices and computers. PSI provides both Lab Data (Field Data) and Field Data (Field Information) a web page.

Laboratory information is used to troubleshoot website performance, and field information is used to gain the experience of a real user. You can enter the PSI here and view the results of its performance review by entering the URL of the page you want.

Chrome Developer Tools


Google Lighthouse is also available through Developer Tools in the Chrome browser. To take advantage of Google Lighthouse services in this way, first upload the site you want to analyze in the Chrome browser. Then right-click somewhere on the page and click on the last option (Inspect). (Of course, you can also use the shortcut keys Ctrl + Shift + I to enter the Inspect section.) In the page that opens, click on the main Lighthouse tab to display the analysis options. These options include 5 areas of performance, progressive web application, best practices, accessibility and SEO. In addition, you can specify on which device (mobile or computer) you want the analysis process to take place. Then, by clicking the Generate report button, the evaluation process will begin, and the results will be visible to you.

Google Chrome plugin

The easiest way to use Google Lighthouse is to download its plugin for your Chrome browser. After downloading and installing this plugin from here , you must first upload the website you want to evaluate. Then in your plugins, click on the desired plugin and click Generate report. After a bit of waiting, you can easily have a complete analysis of your website. You can also save your report in HTML, PDF and JSON files on your computer hard drive using the three dots at the top right of the screen.

Why use Google Lighthouse to evaluate your site performance?

Google Lighthouse evaluates the key performance indicators of a website in a very simple way in order to gain a maximum understanding of the experience of the users of that website. As we said before, Google Lighthouse is specifically designed to explore advanced web applications, this tool puts more focus on mobile devices. As you know, different mobile devices use different hardware components and different facilities and equipment. For example, a phone may not support fourth-generation Internet, or its CPU processing speed and power may not be optimal.

To make this assessment as accurate as possible, Google Lighthouse simulates the various real-world situations that users face on a daily basis, especially on mobile phones. For example, by limiting CPU speed and processing power and Internet bandwidth, it tries to take into account the worst possible situation that a user can be in. In this way, it can take into account all the different strata and spectrums of users of a website in its reviews and present its report much more realistically.

In addition, its user-friendly interface allows not only professionals but also the general public to take full advantage of this useful tool and receive valuable information that helps improve the status of their website.


The last word

You definitely want to be the best you can be in any field of online business. The expectations of users from your website are very high and you, as the best in your field, should be able to meet their expectations properly. In addition to making your website look attractive, it should be able to load quickly on a wide variety of devices. Google Lighthouse is one of the best tools to help you optimize each part of your website targetedwebtraffic.com, taking into account the different possible situations for your users. If you want to optimize your website but do not know how to properly assess its current state and what to improve, Google Lighthouse is a powerful tool that can show you the way in this turbulent sea.

29 views0 comments

Recent Posts

See All
bottom of page