Improve website performance and optimize user experience! This article will explore in-depth how to use Lighthouse tools to analyze and improve web page performance, accessibility, SEO and other aspects to improve website ranking and user engagement.
Lighthouse is a powerful open source tool for Google, automatically analyzing web page quality and providing suggestions for improvement. By optimizing Lighthouse scores, you can attract more users and get higher rankings in search engines.
This article will focus on: the importance of website performance; why choose Lighthouse; how to use Lighthouse in Chrome and command line interface (CLI); various audit metrics of Lighthouse and their significance; and how to solve common performance and websites question. In addition, we will introduce another powerful website performance evaluation tool - WebPageTest.
Key points:
The importance of website performance
One of the common features of top global websites is: excellent user experience. Among them, performance is crucial. Users prefer fast-loading websites. If the loading time is too long, users are likely to leave and turn to find more convenient alternatives.
Improving website performance can improve SEO rankings (more on this article) and improve click-through and conversion rates. So if you want to get more sales, registered users, or traffic, you must first make sure that the website performs up to standard.
Why choose Lighthouse
Lighthouse is Google's open source tool. As a well-known and trusted company, Google's results are more reliable than other tools. Furthermore, as Google search engines have been leading the way for the past decade, ranking high in Google search engines is likely to bring more traffic. As a result, getting higher scores in Google's performance audit tools may improve your website's ranking in search results.
In addition to Google's endorsement, the excellence of Lighthouse is also the detailed results, always focusing on user interests. Lighthouse provides a large number of results, including page loading time, page (and ultimately website) security, page accessibility practices and implementations are inclusive, and more.
How to use Lighthouse
This section will first introduce the easiest way to analyze and check web scores using Lighthouse, i.e. operate directly through the Chrome browser. We will then explore other Lighthouse tools that may provide more detailed results or options.
Using Lighthouse with Chrome is the easiest way to measure website performance. First, open any web page you want to measure. For demonstration, I will use the audit results that run on my website and on GitHub so that we can view various sample results.
Next, open the developer tool by clicking shift control J or F12 on Windows/Linux, or Click option command J or fn
F12on macOS.
After, click on the Lighthouse tab. 
As you can see, you can choose to review the category to include. These categories include performance, progressive web applications, best practices, accessibility, and SEO. You can also choose whether the audit runs on a mobile or desktop device.
In this section, we will perform four audits, namely performance, best practices, accessibility, and SEO, which we will run on our desktop. However, for the best results, be sure to test your page under different conditions—for example on mobile devices and at different internet speeds.
So, on the page you want to measure, select the four categories and desktop mentioned above and click "Generate Report". 
This can take several minutes and you will see that the browser's window may become larger and smaller in the process. This is because the report contains different screen sizes and conditions for the web page. Once completed, the Lighthouse tab will contain the review results, including each score for performance, best practices, accessibility, and SEO. 
It is important to note that sometimes the results may vary depending on your internet connection. Additionally, sometimes Lighthouse may display notifications that some extensions may affect the results. If so, it is best to run the test in the invisible window.
When Lighthouse runs, you can click on any category to view a more detailed report.
(The following content is a simplification and rewriting of the Performance part in the original text, and other parts have also been treated similarly, and the space relationship is related. Only the rewriting of the Performance part is shown here) <script>标签添加defer或async属性。例如： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script src="myScript.js" defer></script><🎜><h4>Performance</h4> <p>Performance focuses on how to speed up website loading. We will cover six important performance metrics, what they each contain and how to get better scores in each metric. </p> <h5>First Content Drawing (FCP)</h5> <p>First Content Drawing (FCP) starts measuring from the moment the user navigates to the web page. It measures how long it takes to load the first DOM content. The DOM content may include an image, a non-white canvas element, and an SVG element. </p> <p>FCP is measured in seconds. To make your page have a "green" score—which means FCP is fast—the first DOM content should be loading time up to 1.8 seconds. Once this time is exceeded, it can become medium or slow. </p> <p>FCP is important because it helps us understand users. As mentioned earlier, users are not patient and if they load for too long, they will leave your website. Fast FCP can keep users engaged. This can be a simple loading screen, telling the user to wait because the web page is about to load. </p> <p>One factor affecting the FCP time of a website is font. Fonts can be loading for a long time, and sometimes the text is invisible before loading. A good way to solve this problem is to use the CSS property font-display: swap; when declaring fonts with @font-face. For example: </p> <pre class="brush:php;toolbar:false"><code>@font-face { font-family: 'MyFont'; font-style: normal; font-weight: 400; src: url(MyFont.woff); font-display: swap; }</pre><div class="contentsignin">Copy after login</div></div> <p> If you are using Google Fonts, this property is now enabled by default. This property allows text to be displayed using the user's system default font until the website's font is loaded. </p> <p> Another factor that affects FCP is rendering blocking resources. These are usually JavaScript or CSS files loaded in <code><head></code> synchronously and have a long loading time. These resources will force the rest of the page to wait for them to load before fully loading the page, affecting the FCP of the DOM content. Here are some solutions: </p><ul> <li> is <code></pre><ul> <li> Compress the JavaScript and CSS files being used, reducing their size so that it doesn't take too long to load these resources. It depends on the framework or programming language you are using, but almost all frameworks or programming languages have a way to do this. You can check out simple tips on compressing JavaScript using various popular frameworks on the web.dev website. <li> Delete unused CSS in the web page. As CSS size increases, reducing the size of CSS files by removing unused rules and properties on the page can speed up loading. Again, depending on the framework you are using, there are different ways to do this. However, you can use Chrome's developer tools to view unused CSS in the "Coverage" tab. Using frameworks like Tailwind CSS (which uses tree-shaking mechanism to reduce CSS styles, rather than bloating your website with many styles you may never use) can help speed up website loading. <li> Reduce the server's response time. This can be achieved by using asynchronous requests to perform the logic required for page loading, cache the number often used by the server, or optimize server code to get the desired results faster. <p> When you perform a performance audit, if your page has problems with fonts, content blocking resources, unused CSS, or other issues mentioned above, Lighthouse will highlight each file that causes the problem and provide suggestions for improvement. For example, if the font blocks the visibility of the text, Lighthouse will display the font file that causes the problem and how the fixing the problem will speed up the FCP time of the page. <p> The following is an example of the GitHub audit report that shows a CSS file as a "render blocking resource". <p> <img src="https://img.php.cn/upload/article/000/000/000/173917586115577.jpg" alt="A Beginner's Guide to Lighthouse " /><p> When you read the rest of the metrics, you realize that they depend on the results of this metric to some extent. Therefore, it is very important to obtain a good FCP score. <p> <strong> (The remaining indicators of Performance in the original text and other parts are omitted here) <p> <strong>Summary<p> Improving website performance is a crucial step in the development process. Never ignore or underestimate. Providing fast, accessible and well-performing websites in search engines can increase website traffic and increase registered users or sales. Lighthouse is an excellent open source tool that provides comprehensive insights and analysis to help you improve your website and attract more users. <p> <strong>(The FAQs part in the original text is omitted here)<script>标签添加defer或async属性。例如： <pre class="brush:php;toolbar:false"><code class="language-html"><script src="myScript.js" defer></script>The above is the detailed content of A Beginner's Guide to Lighthouse. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
