In front end development, App or Web Page performance and response speed, especially the App side is particularly important, has always been a headache for the front end. Professional testing tools can know what their web pages need to be optimized, the overall score is how much, whether in line with user experience standards.

Response speed

  • The response time is within 100ms, and the response speed of the system is relatively fast.
  • The response time is within 500-1500ms, and the response speed of the system is normal, but acceptable;
  • The response time is over 2000ms. The response speed of the system is slow. The customer loses patience and cannot accept it

One of my favorite performance analysis tools is Lighthouse, which collects performance metrics and insights about developer best practices and allows developers to evaluate page analysis reports to optimize and refine the site and improve the user experience of the system.

Analyze the key metrics of your web page

Key metrics of Lighthouse analytics include Performance, Progress Web App, Best Practices, Accessibility, and SEO; Below is the performance analysis report generated for the mining face.

Laboratory data performance indicatorsThe red arrow indicates that it takes too long to optimize

  • First Contentful Paint. The point in time when any content (text, image, Canvas, etc.) is first drawn to the screen by the browser.
  • First Meaningful Paint. It measures how long the user perceives the primary content of the page to be visible. For different sites, the primary content is different. For example, for a blog post, the title and first screen text are the primary content, while for a shopping site, images can become important.
  • First CPU Idle. The point at which the page first responds to input, usually after the first effective drawing. This indicator is still in the experimental stage.
  • Time to Interactive. This is the point in time when all the page content has successfully loaded and is able to respond quickly to the user’s actions. This indicator is still in the experimental stage.
  • Speed Index. Measures how fast the first screen of visible content is drawn on the screen. Showing as much content as possible during the first page load will always give the user a better experience, so the smaller the speed indicator, the better.
  • Estimated Input Latency. This metric measures how quickly a page responds to user input, and the baseline value should be less than 50ms.

Opportunities 

Refers to optimization opportunities, which provide detailed recommendations and documentation to explain the reasons for the score and help us specifically implement and improve it.

Diagnostics

It refers to the existing problems and provides guidance for further experiments and adjustments to improve performance. Click the drop-down to quickly locate the lines of code with problems and make timely modifications.

Note: there is a specific document link address in the drop-down arrow, and you can quickly view the optimization guidelines and methods

Accessibility

The access accessibility score is calculated from a weighted average of relevant indicators. You can check the specific weight of each indicator in the scoring details. The index items with larger weight have greater influence on the score. As this is less used in the actual development, the understanding is limited, interested partners can specially research and learn.

Best Practices (optimization)

The best practice score ranges from 0 to 100. The weight of the indicators influencing the score is the same, and the evaluation dimension is relatively wide. Some guidance and suggestions are given in the aspects of code security, writing specification, element attribute declaration, naming and so on.

Search Engine Optimization (SEO)

This is the world of business partners, here do not do too much to explain, personal insight is the code specification and W3C specification must be familiar with, such as in the page title, description, keyword optimization, page icon and other aspects of the effort, can let the search engine can climb to this site.

PWA (Progressive Web App)

This is the one you hear the most and perhaps the vaguest, but here is a rough understanding of THE PWA that I collected for reference only. A PWA is a discoverable, easy to install, linkable, network independent, progressive, reusable, responsive, and secure user experience. Here is a reference link. Gradual application of PWA

  • Fast and reliable:

    • Pages can load quickly on mobile network conditions (if the network is not good).
    • The page can return status code 200 when offline. This can be made available offline via a Service Worker.
    • Manifest.json file, which specifies the URL to load when the user opens the PWA.

  • Can be installed:

    • Always use HTTPS.
    • Register the Service Worker to cache the page and the start_URL.
    • Using the manifest file to meet the need to install the PWA, the browser can proactively notify the user to add the application to the desktop, increasing retention.

  • PWA optimization:

    • Redirect HTTP traffic to HTTPS.
    • Configure a custom splash screen.
    • Set the address bar theme color.
    • Page content ADAPTS to viewport size, making it more user-friendly for mobile users.
    • Using the<meta name="viewport">Tag and set the width or initial-scale attribute.
    • When JavaScript files are not available, provide degrading measures so that the page can display basic content without white screen.