“This is the 28th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Front-end performance optimization

As a C + V engineer, I don’t know if you have ever experienced this situation:

  • During the interview:
    • Interviewer: Will you optimize your performance?
    • Interviewer: From the inputURLWhat happens when you get to the page?
  • In the development process:
    • The page is taking so long to load. What’s going on?
    • The page keeps stalling. What’s going on?

Presumably we should or more activities have encountered it, but also because of this, so this chapter will also talk about the performance optimization problem, of course, because of the chapter is limited, this chapter does not have a very detailed point: how to optimize cache, DNS, rendering how to optimize and so on.

This chapter focuses on the concepts and routines of front-end performance optimization.

What is Web Performance

It’s simply whether your site is fast enough.

It’s pretty simple to say, but it can be measured in terms of:

  • Open the speed
  • Animation effects
  • The form submission
  • The list of the scroll
  • Page switching
  • .

Definition of Web performance on MDNWhat is web performance?

Web performance is all about making websites fast, including making slow processes look fast. Does the site load quickly, allow users to quickly start interacting with it, and provide reliable feedback if something takes time to load (like loading a spinner)? Does scrolling and animation flow smoothly?

Web performance is an objective measure and perceived user experience of a Web site or application.

Why care about Web performance

The performance of the Web depends to some extent on:

  • Retention of users
  • The conversion rate of the website
  • Experience and Dissemination
  • .

Then there’s your performance

How to optimize Web performance?

There are a few things you need to know about Web performance tuning:

  1. We need to understand performance metrics
  2. Learn to use Web performance testing;
  3. Based on the life cycle of web page response, the reasons for poor performance can be analyzed.
  4. Technical transformation, feasibility analysis and other specific optimization implementation

Performance indicators

1.The RAIL model measures performance

The four words RAIL represent four aspects related to the life cycle of a site or application that affect the performance of the entire site in different ways.

  • Response: Should respond to the user as quickly as possible, should respond to the user input within 100ms.
  • Animation: When displaying animations, each frame should be rendered in 16ms to maintain consistency and avoid stalling.
  • Idle: When using the Javascript main thread, you should divide tasks into fragments that take less than 50ms to free up threads for user interaction.
  • Load: Your site should Load in less than 1s and be ready for user interaction.

2.Measure performance and user experience

  • Largest Contentful Paint (LCP)

Maximum Content Rendering (LCP) is an important user-centric measure of perceptual loading speed because it marks points on the page loading timeline when the main content of the page is almost complete. Quick LCP helps assure users that the page is valid.

  • Contentful Paint (FCP)

First Content Rendering (FCP) is an important user-centric measure of perceived load speed because it marks points in the page load timeline when the user first sees anything on screen, and quick FCP helps to assure the user that something is going on.

3.Web Vitals

What is Web Vitals?

The definition given by Google is Essential metrics for a healthy site. In the past, there were too many metrics needed to measure a site’s quality. Web Vitals can simplify the learning curve of metrics. Just focus on the performance of the Web Vitals metrics.

In these Web Vitals, Google has identified three main metrics, Core Web Vitals, that are common across all types of sites:

How do you measure it?
  • Performance testing tools, such as Lighthouse
  • Web – vitals library
  • Web Vitals plug-in
How to optimize?
  • Optimized Largest Contentful Paint for maximum content rendering
  • Optimized First Input Delay First Input Delay
  • Optimized Cumulative Layout Shift Cumulative Layout offset

4. Other performance indicators

  • Redirection times
  • Redirection Time
  • DNS Resolution Time
  • TCP Connection Time
  • SSL connection time
  • Network Request Time (TTFB)
  • Data Transmission time
  • DOM Parsing Time
  • Resource Loading Time
  • The first package time
  • Bad time
  • First interaction time
  • The DOM Ready time
  • Page full load time
  • HTTP header size

What are the performance metrics for the Web?

Professional tools

Usually we use some tools to measure performance. This section provides a brief overview of the tools used, and if the chapter is well read, there will be a separate section detailing their use and analysis of the report generation.

  • lighthouse
  • WebPageTest tests performance
  • Test performance using Chrome DevTools
  • Performance API

The life cycle of web site page responses

  1. The browser requests an HTML text
  2. The renderer parses the HTML text and builds a DOM tree
  3. While parsing HTML, download and build stytle rules if you encounter inline styles or style scripts, or download execution scripts if you encounter JavaScript scripts.
  4. After the DOM tree and style rules are built, the render process merges them into a render tree.
  5. The render process starts to layout the render tree, generating a layout tree.
  6. The rendering process draws the layout tree and generates a drawing record
  7. The rendering process layers the layout tree, rasterizes each layer separately, and produces composite frames
  8. The renderer process sends the composited frame information to the GPU process for display on the page

Page rendering is the process by which the browser converts HTML text into page frames

Optimization scheme

After measuring the performance of web pages and understanding the rendering process, I believe you have a better understanding of the cause of poor performance experience, then the next is to optimize performance, let’s first briefly introduce some optimization ideas.

  • Optimizations from sending requests to receiving responses, such as DNS queries, HTTP long connections, HTTP 2, HTTP compression, HTTP caching, and so on.
  • Key render path optimizations, such as whether there is unnecessary redraw and backflow.
  • Optimization of the loading process, such as lazy loading, whether there is non-critical information that does not need to be displayed on the front screen, takes up page loading time.
  • Resource optimization, such as pictures, videos and other different formats will have different use scenarios, whether it is appropriate in the process of use.
  • Build optimizations, such as compression merging, webPack based optimizations, etc.
  • .

Because there is a lot of content to actually split, here is a little bit more simple, if you are interested… To write!

reference

  • [1] RAIL model measures performance
  • Largest Contentful Paint [2] Largest Contentful Paint
  • 【3】First Contentful Paint (FCP)
  • 【4】 Optimized Largest Contentful Paint
  • [5] Optimize First Input Delay
  • [6] Optimized Cumulative Layout Shift Cumulative Layout offset
  • [7] Web Vitals
  • [8] Read the next generation of Web performance experience and quality metrics bytedance leaders
  • [9] Google’s new generation of Web performance experience and quality indicators: Web Vitals
  • [10] What are the performance indicators of the Web?
  • [11] How to use Lighthouse Performance Monitoring Tool
  • [12] [WEB] Open source solution of front-end performance monitoring
  • [13] # Thoroughly understand server rendering – SSR Principle #30

recommended

  • 【 1 】 to senior front-end on performance optimization of the nine main strategy and six indicators | netease practice for four years
  • [2] Talk about front-end performance optimization
  • [3] 24 Suggestions for front-end Performance Optimization (2020)