1. Ranking of optimization strategies for 6 major measurement indexes

  • Largest Contentful Paint (LCP)

The FCP Maximum Content Rendering time marks the time at which the maximum text or image can be rendered

  • Total Blocking Time (TBT)

TBT measures the total time between FCP (first content rendering) and TTI (interactive time). TTI may be blocked by the main thread and unable to respond to the user in a timely manner. Tasks larger than 50ms are called long tasks, and when any long task occurs, the main thread is said to be blocked. Since the browser does not interrupt a long task in progress, if the user has an interaction event with the page while executing a task, the browser must wait until the long task is complete before responding. TBT calculates the sum of all long task times between FCP and TTI.

As shown in the figure below, we have 5 tasks, 3 of which are long tasks because they are over 50ms in length. Although the total running time of the task is 560ms, only 345ms is considered to be the total blocking time.

  • First Contentful Paint [FCP: First content rendering]

FCP measures how much content is rendered onto the screen from the start of the page to any part of the page.

  • 【 SI: Speed Index 】

The SI speed index indicates how fast web content can be filled visually. Lighthouse first captures the view of a page as it loads, and then compares how it looks from frame to frame (as measured by the Structural similarity Index SSMI). How to improve SI?

  1. Minimize main thread workload
  2. Reduce JS execution time
  3. Make sure the text is visible during the font loading process
  • Time to Interactive 【 TTI for short: Time to Interactive 】

Interactivity time refers to how long it takes a web page to provide full interactivity. TTI measures how long it takes from the start of the page for the primary ancillary resources to load to the page to be ready to respond quickly enough to user input.

  • Cumulative Layout Shift [CLS] Cumulative Layout Shift

CLS cumulative layout migration is designed to measure the movement of visible elements within the viewport. The lower the CLS value, the better.

2. Optimization measures for each measurement index

Step 1: Optimize LCP

Optimized pop-ups to replace large background images. Preload images. Speed up image download.

Measure 2: Reduce useless JS and CSS, reduce TBT and improve SI

  1. Code thoroughly split
  2. The front-end route is loaded lazily
  3. Split Chunk (e.g. Antd, ANTD-Mobile, etc.)
  4. Micro front end preloading
  5. Help us analyze projects with Webpack Bundle Analyzer

Measure 3: Reduce the user-defined first screen time for the first picture

  1. The default page SVG goes to base64
  2. Base64 Indicates disk cache

Measure 4: Preload resources

Here you can use the Webpack plug-in to add the preload attribute when packaging

<! -- preload js --><link rel="preload" as="script" href="} {js address" crossorigin /><! -- preload css --><link rel="preload" as="style" href="Address} {CSS" crossorigin /><! -- Preload image --><link rel="preload" as="image" href="{picture address}" crossorigin />

// webpack
new PreloadWebpackPlugin({
    rel:"preload".as(entry){
        if(/\.css$/.test(entry)) return "style"
        if(/\.woff$/.test(entry)) return "font"
        if(/\.png$/.test(entry)) return "image"
        return "script"}})Copy the code

Step 5: Establish third-party links in advance

Note: Use preConnect only for third-party sites that need it immediately. It is inefficient to preconnect to all third party sites. Do preconnect for important third party sites and do dnS-prefetch for the rest. Save 20-120ms.

<! -- preconnect 3rd party -->
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="dns-prefetch" href="https://cm.g.doubleclick.net" />
Copy the code

Step 6: Reduce CLS

In fact, layout offsets are quite common. For example, our user information data, in the user information card of my page, is obtained by the asynchronous interface. Therefore, it is possible to see that a part of the page is loaded first, and then the progress bar is displayed and generated after getting the data. This asynchronous content reduces CLS in a way:

You can solve this problem by incorporating the asynchronous interface into the main interface, or by setting up a default image placeholder. Replace it when the data comes in. UseSWR: asynchronous update cache policy, please refer to useSWR principle – Zhihu (zhihu.com)

Measure 7: Browser caching mechanism

Combining strong Cache and negotiated Cache, we can Cache static resources reasonably. For example, when the content of our resources cannot be reused, we can directly set no-store for cache-control to reject all forms of Cache. If yes, set cache-control to no-cache. If yes, set cache-control to no-cache. Otherwise, consider whether the resource can be cached by the proxy server and decide whether to set it to private or public based on the result. Then consider the expiration time of the resource and set the corresponding max-age and s-maxage values. Finally, configure Etag and last-Modified parameters required by the negotiation cache.

Other measures

When opportunities and diagnosis given by Lighthouse are fulfilled, you can consider it

Reduce server TTFB and require backend optimization of the master interface. Third party script governance: can optimize optimization, can not optimize to find a way to post loading, to avoid blocking the main JS.

Optimizations in code

“%” mod operation, “/” mod operation