preface

At the time of writing this article, have seen a lot of performance optimization, and right, every time I see other people write good blog 🧠 final destination is not a brain, but favorites 📖, also leads to performance problems when I really helpless, when I’m really understand that sentence paper will sleep shallow, know this matter to practise. Today with the test of time, test brother has been teasing, why you this new page white screen so long, the picture here rendering so slow, why feel this animation a card a card…… Really that moment I was quick to be asked to become a hundred thousand why, at this moment I opened dusty already long collection clip read up……

Into the Lighthouse

According to the article in my favorites, my Google browser can do H5 page performance analysis, I am so happy, I love this zero-configuration zero-code idiot tutorial.

Advanced Versions of Google’s Browser ship with Lighthouse, and you don’t need to perform any other operations

Categoies includes Performance,PWA,Best practices,Accessibility,SEO.

Device can also be Mobile or Desktop.

Since we are on the H5 page, we should select Mobile well, and we did not use PWA technology for classification. Then we checked all the boxes except PWA, and finally clicked Generate Report to Generate the final report.

Performance index analysis

This is the final report of our website. Below is the score of each metric, and below is a more specific time metric to measure our performance.

It is really can only lightly say that The Times has changed, the original measure of performance is good or bad have the following 6 aspects, I remember before measuring the performance of a page at the beginning of the mouth is the number of seconds 😂

FCP

FCP(Fisrt Contentful Paint) : This metric is used to record the time when a page first draws text, images, non-blank Canvas or SVG.

For example, it is the time from the blank screen to the appearance of a picture or a paragraph of text. Of course, in many cases, the page needs to request the interface to pull data. If the network is slow, the blank screen will be longer. In fact, we can put a loading picture before the data is loaded to tell the user that the page is loading, thus reducing our FCP time.

TTI

TTI(Time to Interactive) : Indicates the first Interactive and smooth interaction Time. This Time has several characteristics: it is after FCP and no long task (greater than 50ms) is executed within 5 seconds.

In fact, this indicator is as important as FCP. FCP may mean that our page is starting to render, even if the rendered page does not mean that we can interact. Most of the time, our page is rendered, but it will be sluggish.

Speed Index

The Speed index measures how fast content visually appears during page loading. Lighthouse starts by capturing a video of a page loading in the browser and calculating the visual progress between frames.

TBT

Total Blocking Time (TBT) : indicates the Total Blocking Time of a long task in the FCP to TTI phase.

The following is an example of TBT written on web.dev:

The figure above shows the time line of tasks performed by the main thread, which can be divided into long tasks and short tasks (long tasks are based on whether the execution time is more than 50ms).

So anything over 50ms is actually the blocking time, so the blocking time up here is actually 345ms. Blocking, of course, prevents the browser from interrupting the task in progress, preventing the user from interacting immediately and affecting the experience.

LCP

Largest Contentful Paint (LCP): Indicates the Largest content on a page. This time can vary with page rendering, as the maximum element on the page may change during rendering, and this metric stops recording after the user’s first interaction.

CLS

CLS Cumulative Layout Shift (CLS) : indicates the Cumulative Layout Shift of a page. Unexpected movement of page content usually occurs as a result of asynchronously loading resources or dynamically adding DOM elements to a page above existing content.

If a user clicks a button while using a page, and the page generates a piece of content that causes everything below that content to move down, that’s a page shift.

Proposed changes to Lighthouse

The advantages of Lighthouse are not only that we can grade our pages according to these important indicators, but more importantly, it gives us a lot of suggestions for optimization. This is just like the fact that the teacher can both grade the students and explain the wrong questions. It’s really fun, otherwise you have to go online and find solutions one by one. And most of the time they have not solved the direction.

  • Here are some suggestions lighthouse gave us

  • Here are the performance diagnostics for our project

In the follow-up, detailed practice of project performance optimization is carried out.