[Tencent cloud front end performance (RUM) optimization competition] general user first screen experience (LCP) optimization for the front end

Ar-Sr-Na 2022-06-23 17:59:44 阅读数:608

tencentcloudendperformancerum

preparation

Access Tencent cloud according to documents RUM

Front end performance monitoring Quick start - Document center - Tencent cloud (tencent.com)

const aegis = new Aegis({
id: 'xxxx', // Report id
uin: 'xxx', // The only user ID( Optional )
reportApiSpeed: true, // Interface speed measurement
spa: true // spa Open when the application page jumps pv Calculation
});

Check whether the access is completed

Deploy the built site

serverless -deploy

console Type in <aegis> appear

that will do


Data analysis

Load for first screen , The following items need to be noted :

1. network optimization

Network problems can be solved through DNS Optimize ,CDN, Back end optimization

utilize ping Tools such as You can intuitively understand the speed of each region

As the site is deployed in Hong Kong, China , So the speed in the northwest of the mainland will decrease , The solution is to deploy more back ends , Then load balancing , When necessary, the network operators should be analyzed separately , equilibrium

Because the back end of this site is built on the object storage of Tencent cloud , Therefore, the switching and management of regions are flexible

For undocumented sites : Analysis of optimization suggestions in South China Hong Kong, China , It is suggested to analyze Russia in North China

If it is a filing site : Direct access CDN, More flexibility to change regional performance and speed , Delay

Because once the network is established , You can't change his performance , And it is greatly influenced by operators and service providers , But for users , Network performance is not the point , Because qualified service providers , Not too slow , Most of it is in 500ms within , Some local people can reach 10ms within

This delay also affects performance , Keep asking , The amount of data is huge , Every data has to go through these delays , Therefore, network optimization is also crucial to front-end performance optimization data

2. resources

Except for delay , Network speed is also an important factor , because html Characteristics of , Resources are loaded synchronously from top to bottom of the document , That is, loading is completed A Reload B, such as

<img src=" resources A">
<img src=" resources B">
<script src=" resources C"></script>

If resources A Time consuming 0.1s, resources B Time consuming 0.2s, resources C Time consuming 0.5s, All in all, it's 0.8s

The key to the first screen speed is LCP, That is, the time when the framework is loaded , This is right index highly demand , If a large file is in index Too slow , Will slow down the speed

On the back end index, commonly 100k Within the best

If it is php Rendered index, Not only will the server's back-end resources be consumed during loading , The front end will be blank , Very slow , as WordPress and hexo Both have the same performance

For example, this code

<head>
<script src="xxxxx"></script>
<link href="xxx.css" rel="stylesheet"/>
<script>
$(document).ready(function(){
$('#text').html(' I'll always like violet ')
})
</script>
</head>
<body>
<div>
<p>
Willett · Eve gaden is a light novel created by Japanese light novel writer xiaojianai 《 Violet eternal garden 》 And the heroine in her derivative works
Subordinate to C·H Of the postal company 「 Automatic hand puppet 」 Girl , Have rare combat effectiveness .
He was picked up by Colonel Dietrich from the war when he was young , After discovering that Willett has extraordinary fighting talent, she took it as 「 Combat weapon 」 To his brother —— Gilbert · Major bugambria .
After that Willett followed major Gilbert , The relationship between the two became closer in the war
</p>
<img src="https://res.arsrna.cn/wallpaper/WELT%20(17).jpg_copwh">
<video src="xxxxx"></video>
<h1 id="text"></h1>
</div>
</body>

The loading sequence is as follows :

When we open the page , First loaded. header Apex Script, meanwhile CSS Load asynchronously

When JavaScript Start loading when loading is complete DOM, meanwhile CSS Continue rendering

DOM The loading of is from top to bottom , Get to the biggest one first div, Then load in sequence

Pictures and videos are big files ,html You can make them load asynchronously , So in the picture video It's actually dom Loading , The loading of resources is in the following interactive resource loading

LCP Do not record the subsequent loading of resources , So this step video Yes LCP Performance has little impact , What matters is img, because img You need to display the picture before loading the frame , and video It will be loaded according to the width and height set by the user

Here the whole page has come out

$(document).ready() Methods also begin to execute ,H1 Start rendering out content “ I'll always like violet ”

Video and pictures occupy a lot of resources here , If not at the top or very important , Advice and preload="none" attribute , Wait for the user to manually operate before loading , This will not take up the time for other resources to load

JavaScript Code , If it is jQuery This type of execution should be performed before the page is loaded , It can be placed on the head ; If it is triggered by the user or the plug-in , Advice on body outside , Load... First dom Then load the script , Reduce dom render time

similarly , Because each load has to be requested , So try to make one of these small resources bundle, A pile of js Write in a js Inside , Otherwise, you need to request every time , Take up a lot of time

Many, many small pictures , It is also recommended that the above method be used , Become a big picture , Subsequently passed background Position to adjust the place to be displayed

3. Rendering performance

Subsequent users will click on the video , When clicked, it will trigger loading , Interactive events start

If it is JavaScript In the calculation of , because JavaScript Native asynchrony , So the time is calculated only according to the longest event

Synchronization part continues timing ( Delayed operation setTimeout Or a timer setInterval With the exception of )

To use less PHP And other scripts that occupy a large amount of memory html page , Waste of resources

Be able to be as pure as possible , Reduce ajax The resulting time-consuming

Large media files , It is not necessary to recommend not preloading

4. Make proper use of cache

Set a cache that is appropriate enough for the browser

html Suggest 2 Hours ,css, Recommended settings for infrequently updated resources such as videos 5 God , In this way, the user will not cache from the beginning when loading repeatedly ,

<meta http-equiv="Cache-Control" content="max-age=7200" />

verification

Do all of the above , It can greatly improve the front-end performance , This web site

Network before optimization : Tencent cloud object storage - Hong Kong, China direct link south 48ms North 100ms

Optimized network : Tencent cloud object storage - Hong Kong, China, , Russia , Singapore 20ms-80ms

Before optimization LCP:8000ms

After optimization LCP:1500ms

1500ms The framework has been loaded by ,2000ms The full page has been loaded by

summary

network optimization : Multi region settings and multi resolution , Optimize for region

Load optimization : pack JavaScript,css, No need to drop the script at the bottom of the page

Content optimization : Reduce unnecessary DOM And video image preloading

版权声明:本文为[Ar-Sr-Na]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/01/202201021749099112.html