Performance optimization indicators and tools for front-end performance optimization (chrome devtools, lighthouse, webpagetest)

introduction

In modern web development environments, front-end performance optimization has become increasingly important. In order to provide a smooth and engaging user experience, developers need to exhaustively optimize the parts they are responsible for. However, how do you measure this performance? How do you know which parts need to be optimized and how effective the optimization is? This requires relying on some key front-end performance optimization indicators and tools. In this article, we will discuss these indicators and tools in detail to help you better understand and implement front-end performance optimization.

1. Why web performance optimization

1. User experience : WebPerformance optimization can improve website loading speed, user satisfaction and user experience. The study found that the loading speed of the website is directly related to consumer satisfaction, conversion rate and user churn rate. If a website loads slowly, users may choose to leave.

2. Search engine ranking : GoogleSearch engines such as Google will consider the loading speed of the website in their ranking algorithm. The faster the web page loads, the easier it is for search engines to retrieve the information on the website and improve the search ranking of the website.

3. Save resources : Optimizing website performance can reduce unnecessary data transmission and save resources such as bandwidth and hardware.

4. Increased conversion rates : According to Amazon and Walmart, for every 100ms increase in loading time, sales decrease 1%.

5. Network environment factors : Especially in places where the network environment is not ideal, Webit is more necessary to optimize performance, because this can shorten the loading time and provide a smoother access experience.

Web performance optimization can not only provide better user experience, increase user retention and conversion, enhance brand image, but also improve search engine ranking and save network and hardware resources .

2. RAIL measurement model

1. What is RAIL

RAIL（Response, Animation, Idle, Load）The measurement model is a user experience evaluation framework developed by Google to help developers better understand and improve performance issues. It breaks user interaction into four phases: Response, Animation, Idle, and Load , with performance goals for each phase.

• Response : The goal of handling user interactions is to complete within 100 milliseconds.
• Animation : The rendering target for each frame is 16 milliseconds, corresponding to a frame rate of 60 frames per second.
• Idle : Use idle time to perform background work and respond to user interaction within 50 milliseconds.
• Load (Load) : Try to complete the loading of the content within 1000 milliseconds.

Through this framework, developers can optimize and improve user experience in a targeted manner.

2. Performance measurement tools

• Chrome DevTools development debugging, performance evaluation
• Lighthouse website overall quality assessment
• WebPageTest multi-site test, comprehensive performance report

3. The use of performance measurement tools and performance indicators and optimization goals

1. Chrome DevTools

1. Open the debugging tool mode and configuration

Open Google Chrome, right click, check,

set, and check everything except group by frame

2. Several performance indicators under the network

1. The total number of requests

This indicator indicates how many requests the browser will send to the server to obtain the required resources , such as HTML, CSS, JS files, images, etc., when loading the page . If the number of requests is high, it may cause additional network latency, reflecting a performance problem on the website.

2. transferred is the amount of data actually downloaded from the server

This indicator represents the amount of data actually downloaded from the server during the interface loading process . It 可能小于资源总量, the reason may be that some resources are cached. If the amount of data transferred is too large, it may cause the page to load too slowly.

3. The total size of resources resources

This metric represents the total size of all resources required to load the page . Similarly, if the resource is too large, it will also affect the loading speed of the page.

4. Finish The point in time when all resources are loaded

This indicator indicates the point in time when all resources of the page have been loaded . This metric reflects the overall loading speed of the page

5. DOMContentLoaded The point in time when the browser's initial HTML is fully parsed and loaded (excluding CSS stylesheets, images, and subframes)

This metric represents the point in time when the browser's initial HTML is completely parsed and loaded (excluding CSS stylesheets, images and subframes) . If this time is longer, it may indicate that the HTML structure of the web page is too complex.

6. Load The point in time when all resources (such as style sheets and images) have been loaded

This metric represents the point in time when all resources (such as style sheets and images) have finished loading . This can also reflect the overall loading speed of the page

7. waterFall visually shows the loading of various resources during the webpage loading process

Waterfall (waterfall chart) is a function under the Network (network) panel in Chrome DevTools, which visualizes the loading of various resources during the loading process of web pages in a chronological form.

Each horizontal line represents a request, the direction from left to right represents the passage of time, and the length of a line represents the time from the beginning to the end of the request . Through such a view, developers can observe which resources take a long time to load and optimize. For example, if you find that the loading time of a certain image resource is particularly long, you may need to consider compressing the image, or consider using a CDN for loading optimization, etc.

In addition, each line also contains many colors, and different colors represent different stages of the request, such as DNS query, TCP connection, request response, content download and other stages .

Hover the mouse over the waterFall of a request, and you can see the information shown in the figure below:


The meanings of the three parts are as follows:

1. Resource Scheduling :
   This section mainly describes the scheduling process performed by the browser when acquiring resources. When the browser resolves that a resource needs to be loaded, it will first put it into a request queue, and then dispatch it to a connection according to certain rules (such as priority, whether it can be parallelized, etc.). Timing factors in this section include whether to look in the browser cache, time to parse the resource, waiting for an idle connection in the queue, etc.

2. Connection Start :
   This part usually includes the following steps: DNS Lookup, Initial Connection(TCP handshake), SSL(if it is https).

   • DNS Lookup: This is the process by which the browser resolves the domain name of the website into an IP address.
   • Initial Connection: This step is the process of establishing a TCP connection, that is, the process of the TCP three-way handshake.
   • SSL: If the resource is obtained through https, after the TCP connection is established, an SSL handshake is required to establish a secure connection.

3. Request/Response :
   This part mainly includes: Request sent, Waiting(TTFB), Content Download.

   • Request sent: This step represents the process in which the browser sends an HTTP request to the server.
   • Waiting(TTFB): This step indicates the process of the server processing the request and returning data, which is also what we often call the server response time or the time to the first byte.
   • Content Download: This step represents the process in which the browser downloads the data returned by the server.

尤其是Request/Response中的Waiting,能最直观的反应出一个请求的新能问题

Waiting represents the time from when the network request is sent to when the server returns the first byte of the response.

Specifically, Waitingthe time includes the total time for the DNS query, the TCP handshake, the request sending, the server processing the request, and the server sending the first byte of the response. The longer the time in the view, the Request/Responselonger Waterfallit takes to get feedback from the server, and the slower the loading speed of the page .Waiting

By observing Waitingthe time, the user can gain some insight into the following situations:

1. If Waitingthe time is long, it may indicate that the server takes a long time to process the request, and there may be a performance bottleneck on the server.

2. If the network connection is normal, but Waitingthe time is still very long, it may be caused by network delay, slow server response or blocked resources.

3. WaitingFor cross-regional requests, the time may be longer due to the impact of physical distance .

When optimizing website performance, you can use this indicator to judge whether you need to optimize the server side, or adjust the resource loading sequence, etc., to improve the page loading speed .

Through the above indicators, we can know whether a web page has the followingperformance problem：

• Too many page resource requests cause network delays .
• Page resources are too large, resulting in slow page loading .
• The HTML structure of the page is too complex, resulting in slow DOM parsing and loading .
• There are large-volume resources that are not cached on the page, which affects the loading speed .

3. save all as HAR with content

HAR(HTTP Archive) is a file format primarily used for tracking and measuring browser performance. The next Chrome DevToolsfunction is to save all network request and response information in the form of HAR files, including HTTP header information, sent data, returned content, and so on . When "with content" is selected, it will also contain the specific content of the request and response.networksave all as HAR with content

This feature is mainly used for performance optimization, troubleshooting and website optimization . For example, developers can analyze the HAR file to find the reason why the webpage loads slowly, or the problem that the server is not responding correctly. Security researchers or hackers also use HAR files to analyze and crack network protocols.

2. lighthouse

Lighthouseis an open source automated tool for improving the quality of web pages. You can Chrome DevToolsrun it as a tab in , on the command line, or as a Node module. It performs a series of audits on your webpage, from which it generates a report evaluating how your webpage is doing in terms of performance, accessibility, Web degree of progressive app, SEO, and more.

Using it Lighthouse, developers and web designers can check various performance indicators of web pages, identify and fix possible problems . For example, it can help discover why a page is taking too long to load, or identify places on a page that are not screen reader friendly. In addition, Lighthouse can also provide some suggestions for optimizing web pages, such as deleting unused ones CSS, optimizing images, etc.

Overall, Lighthouse is a very useful tool that helps you optimize your web pages and improve user experience.


Lighthouse is scored on a scale of 0-100, where 0 is the worst and 100 is the best. The scores are categorized as follows:

• 90 to 100 (green) : Rated as "good", close to ideal, with only minor improvements needed.
• 50 to 89 (orange) : The evaluation is "acceptable", and there are relatively many places that can be improved.
• 0 to 49 (red) : Rated as "Poor" with a lot of room for improvement.
  

1. Performance

LighthouseThe main analysis under Performancethe following performance indicators:

1. First Contentful Paint (FCP): FCP records the time from when the browser requests a web page to when any content (such as text, pictures, etc.) in the web page is rendered to the screen for the first time. Between 0-2 seconds is considered good performance, 2-4 seconds is improvement, and more than 4 seconds is poor performance.

2. Speed Index (SI): SI indicates the average time it takes for most of the content to load in the user-visible section. 0-4.3 seconds is considered good performance, 4.3-5.8 seconds is improvement, anything over 5.8 seconds is poor performance.

3. Largest Contentful Paint (LCP): LCP indicates the time when the largest page content element is loaded. 0-2.5 seconds is good performance, 2.5-4 seconds is performance that needs improvement, and more than 4 seconds is poor performance.

4. Time to Interactive (TTI): TTI measures the time from when a web page starts loading until it is fully operational for the user. 0-3.8 seconds is a good performance, 3.8-7.3 seconds is a performance that needs improvement, and more than 7.3 seconds is a poor performance.

5. Total Blocking Time (TBT): TBT measures the total time it takes a webpage to complete all tasks before it is fully interactive. 0-200 ms is considered good performance, 200-600 ms is improvement, and more than 600 ms is poor performance.

6. Cumulative Layout Shift (CLS): CLS is a new page user experience indicator, which is used to measure the number of changes in the position of elements during the loading process of a web page. 0-0.1 is better performance, 0.1-0.25 is performance that needs improvement, and more than 0.25 is poor performance.

These indicators can help you find out the reasons for slow web page loading or poor runtime performance, and provide a quantitative evaluation basis in the process of optimizing web page performance.

There is also an independent performance option in chrome devtools, and the indicators here are more detailed

2. Accessibility

LighthouseThe following Accessibilityrefers to the evaluation of the accessibility of the website. This is an auditing mechanism to check that a website or web application is easy to use for all users, including users with disabilities.

Accessibility mainly analyzes the following performance indicators:

1. Whether the image element has an alt attribute set.
2. Whether the site supports screen readers or other accessibility tools.
3. Whether the color contrast is appropriate and friendly to color-weak or color-blind users.
4. Whether to provide links to skip navigation to help blind, low-vision or keyboard-only users quickly access the main content of the page.
5. Whether the headings have a clear hierarchy and are properly labeled.
6. Whether the form input interface has a corresponding label.
7. Whether page elements have a focus order so that keyboard users can navigate logically.

3.Best Practices

" Best Practices" is a part of the toolset Chrome DevToolsin . LighthouseIt provides a series of dashboards on how your website or application should be optimized for maximum performance, accessibility, Progressive Web Apps, and more.

The role and use of "Best Practices" include:

1. Code Improvement : It will tell you about whether the JavaScript library needs updating, is using outdated APIs, or is implementing bad practices that may impact performance.

2. Improve performance : It helps you understand when your site loading and interaction performance is slow and how to improve it.

3. Improving Accessibility : Guides you through understanding and improving web accessibility so users can use your app or website smoothly regardless of their ability.

4. Improve website security : Actions such as avoiding opening links in new windows can improve website security.

1. TRUST AND SAFETY

The " Trust and Safety" part is about site security and how much users trust the site. This category mainly covers a series of best practice recommendations, including but not limited to avoiding the use of insecure or deprecated APIs, enhancing user privacy protection, ensuring the integrity of website content, limiting the attack surface of potential attacks, etc. .

These checks are based on Googlebest practice standards developed by the web security team and are updated frequently to examine and remind developers whether they are following these best practices to create safer and more trustworthy websites.

2. User experience

In Lighthouse's Best Practices User experience, it is part of the criteria for evaluating the user experience in a website . This includes smooth navigation, consistent design, clear directions and feedback, easy-to-use forms, and an accessible, inclusive experience. Optimizing for these aspects can significantly improve the user satisfaction of your website.

3. General

Under Best Practices under Lighthouse in Chrome DevTools Generalis an indicator to evaluate whether your web page complies with best development practices. This includes detecting whether the application uses outdated APIs, whether it uses the correct security measures, whether it allows the user to decide whether to play audio when needed, and so on.

This assessment report can help developers identify issues that may be affecting user experience, performance, and accessibility. Developers can then improve these areas based on the report's recommendations, improving the overall quality of the page.

Please note that "General" refers to some general, broadly applicable best development practices, rather than recommendations for a specific technology or framework.

4. seo

In Lighthouse, SEOthe search engine optimization) section is mainly used to help developers optimize their websites so that they can rank higher in search engines, thereby increasing the visibility of their websites .

LighthouseThe SEOchecks include checking whether the page has a successful HTTP status code, whether the document has a view window, whether the page is accessible, whether metadata is complete, and so on . These checks can help developers locate issues that may affect SEO and provide possible solutions.

In general, the functions Lighthousein SEOcan help developers improve their website's search engine ranking, increase their website traffic, and thus increase their business success rate.

5.pwa

PWA, that is Progressive Web App, the Chinese name Progressive Web Application . This is a web application technology that can provide users with an experience similar to that of mobile applications. It allows web applications to work in a certain way even when users are offline , improving the user experience.

Chrome DevToolsUnder in refers to a feature for detecting, measuring, and optimizing Progressive WebLighthouse Apps . It will conduct a series of automated tests to determine whether your webpage meets the standards of PWA, and then generate a report to help you understand which aspects should be optimized to achieve a better user experience. For example, it will check whether your PWA can be loaded and displayed normally in an offline or poor network environment, whether it responds quickly, whether user interaction is smooth, etc.PWA

3. WebPageTest

webpagetest official website: https://www.webpagetest.org/

This is an online tool for testing website performance . This website helps developers and website owners test the loading speed and performance of their websites in different environments and on different devices. The test includes page loading speed, first drawing time, comparison speed and many other indicators. Through this website, users can better understand their website performance, identify possible problems, and optimize and improve the quality of the website.

1. The steps are as follows:

1. Enter the website address to be measured

2. Advanced Configuration

Under the test settings in WebPagetest.org's Advanced Configuration (Advanced Configuration), there will be the following options:

1. Connection: This option allows you to choose to simulate a specific network connection type, such as wired connection, 3G, 4G, etc. This helps to understand how your website performs under different network conditions.

2. Bandwidth Down/Up: You can set the download and upload bandwidth to simulate specific network environment conditions.

3. Latency: This is the setting of network delay, simulating a more accurate experience of accessing the network.

4. Packet Loss Rate: Used to set the packet loss rate to simulate an unstable network for testing.

5. Test Duration: You can set the test duration.

6. Number of Tests to Run: This lets you set the number of tests to run for more accurate results.

7. Repeat View: is to enable repeat view testing. This is an option that measures simulated user revisiting your site.

8. Capture Video: It is used to confirm whether to capture the video of the test process, so as to troubleshoot problems in detail.

9. Keep Test Private: Keep test results private for viewing only by you.

10. Stop Test at Document Complete: The test will end when the document is loaded.

11. Clear Certificates: Clears any existing SSL certificates before loading the page.

12. Ignore SSL Certificate Errors: Ignore SSL certificate errors and let the test continue.

3. start Test

After configuring how to test according to your needs, you can click start Testto test website performance

4. waiting

Here you will be prompted to wait for the test results, just wait

Summarize

In this post, we dive deep into front-end performance optimization, focusing on three important tools: Chrome Devtools, Lighthouse, and WebPageTest . We understand that performance optimization is not just about making web pages load faster, but also about improving user experience and interactivity. With a solid understanding of the key metrics for performance optimization, we also learned how to use the above tools to monitor and improve these metrics. Through practice and continuous optimization, we can provide users with a faster, smoother and more enjoyable user experience. The use of the above tools can not only help us improve the performance of web pages, but also an important tool for us to optimize code and improve development efficiency. In the future front-end development work, I hope these tools and techniques can provide you with effective help.