Automated web performance optimization analysis scheme

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In the build Web In the process of the site , Any detail may affect the visiting speed of the website . If developers don't know about front-end performance , Many factors that are not conducive to the speed of website access will be accumulated online , Thus seriously affect the performance of the website , Resulting in slow website access 、 The user experience is low , The end result is loss of users . Page performance for web pages , It's very important . therefore , Check and analyze the performance of the page , It is an important topic for developers . So how do we monitor and analyze the page and evaluate its performance ？ What are the rules of performance evaluation ？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Technically , Front end performance monitoring is mainly divided into two ways , One is called synthetic monitoring （Synthetic Monitoring,SYN）, The other is real user monitoring （Real User Monitoring,RUM）."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Synthetic monitoring , It's in a simulation scenario , Go to submit a page that needs to be checked for performance , Through a series of tools 、 Rules to run your page , Extract some performance indicators , Get a performance report ."}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Real user monitoring , It's the user browsing on our page , The browsing process produces a variety of performance data , We upload these performance data to our log server , Carry out data extraction, cleaning and processing , Finally, a process of display on our monitoring platform ."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The former pays attention to “ testing ”, The latter pays attention to “ monitor ”."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The following will be from many aspects , Introduce the front end of zhengcaiyun to you ZooTeam Of Web Performance optimization analysis system —— “ Hundred policies ”, How to collect page performance data , And through a series of calculation processing , Output page performance report ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Hundred policies , Named after the historical figure Wei Zheng . Wei Zheng , The word Xuancheng . Li Shimin, Emperor Taizong of the Tang Dynasty , Because I dare to remonstrate with you , Be called a courtier . Because he pointed out the faults of Li Shimin, Emperor Taizong of Tang Dynasty many times and could put forward effective policies , Because it's called “ Wei Baice ”."}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" How to collect page performance data "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Baice system uses the “ Synthetic monitoring ” The plan , We get a set of performance data independent of the host environment . When it comes to synthetic monitoring , when Google Chrome Open source automatic analysis tools produced by the team Lighthouse."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Lighthouse There are several main steps in the workflow of . Some of the steps take place in the browser , The rest of the procedure consists of Lighthouse The operator performs ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Lighthouse working principle "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/98\/98c1c7fac13f7b5242e45a3577b02c7a.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Here is Lighthouse Component part ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" drive "},{"type":"text","text":"  and Chrome Debugging Protocol Interact ."}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" The collector "},{"type":"text","text":"  Use the driver to collect web information . Minimize post-processing . The output of the collector is called  "},{"type":"text","marks":[{"type":"strong"}],"text":"Artifact"},{"type":"text","text":"."}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Censor "},{"type":"text","text":"  take  "},{"type":"text","marks":[{"type":"strong"}],"text":"Artifact"},{"type":"text","text":"  As input , The reviewer will run on it 1 One test , Then the distribution passes \/ Failure \/ Result of score ."}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" Category "},{"type":"text","text":"   Group the results of the review into user facing reports （ Like best practice ）. Add the weight of this part and get the score ."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In short, the process is ： Establishing a connection -> Collect the logs -> analysis -> Generate a report ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" And our hundred policy system is in Lighthouse On the basis of , Some functions are customized and innovated ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" The difference in Lighthouse The function of "}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1） Use Puppeteer"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Puppeteer It's a Node library , It offers an advanced API To pass DevTools Protocol control Chromium or Chrome. Comparison  "},{"type":"codeinline","content":[{"type":"text","text":"Selenium"}]},{"type":"text","text":"  or  "},{"type":"codeinline","content":[{"type":"text","text":"PhantomJs"}]},{"type":"text","text":" , Its biggest characteristic is its  "},{"type":"codeinline","content":[{"type":"text","text":"DOM"}]},{"type":"text","text":"  The operation can be simulated completely in memory , That is to say  "},{"type":"codeinline","content":[{"type":"text","text":"V8"}]},{"type":"text","text":"  Process in the engine without opening the browser , and  "},{"type":"codeinline","content":[{"type":"text","text":"V8"}]},{"type":"text","text":"  engine Chrome The team is maintaining , Will have better compatibility and Prospects ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Run the following code to get the width and height of the visual area of the window ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const puppeteer = require('puppeteer');\n\n(async () => {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  await page.goto('https:\/\/example.com');\n\n  const dimensions = await page.evaluate(() => {\n    return {\n      width: document.documentElement.clientWidth,\n      height: document.documentElement.clientHeight\n    };\n  });\n\n  console.log('Dimensions:', dimensions);\n\n  await browser.close();\n})();\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Lighthouse The solution is to use a lower level DevTools Protocol and browser interaction , We choose Puppeteer Because it's simpler , Some of the commonly used interfaces encapsulated are enough to meet our needs ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2） Simulated Login before visiting the page "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" We not only need to detect the front page that can be accessed anonymously , Also need to detect the background page that can only be operated after login . So before the test , We need to add a step login operation . Of course, the user name and password are also optional , When this is detected URL When you need to log in , Will remind the user to enter the user name and password ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/87\/879a471a1b6f0edecd7650528395ac59.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"3） Collect the data and store it in the database "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" We will store the test data every time , Sort out the data , Get the trend of page performance changes , To provide data assurance for supporting subsequent statistical analysis ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The process after transformation is ： Establishing a connection -> "},{"type":"text","marks":[{"type":"strong"}],"text":" Login detection "},{"type":"text","text":" -> Collect the logs -> "},{"type":"text","marks":[{"type":"strong"}],"text":" Data warehousing "},{"type":"text","text":" -> analysis -> Generate a report "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" How to analyze page performance "}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Customize the indicators "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" At the beginning of system design , We have developed a series of performance index weights and thresholds ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/af\/afbad748a60aeafd2acb3a1c36f22259.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Lighthouse There are also many performance indicators , for example ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"uses-webp-images： Provide pictures in a new generation format "}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"dom-size：DOM Total number of nodes "}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"network-requests： Number of requests when page load is complete "}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"……"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In addition, we have customized more characteristic indicators , for example ：OSS Whether the image uses the compression suffix ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Because the company's pictures are all on Alibaba cloud OSS Upper , Alibaba cloud OSS Provides a very convenient way to optimize the image volume , Add similar parameters to the end of the picture  "},{"type":"codeinline","content":[{"type":"text","text":"?x-oss-process=image\/resize,w_187\/quality,Q_75\/format,webp"}]},{"type":"text","text":", In theory, it's about OSS You need to add compression suffixes to all images on . Why in theory ？ Because we found that if pictures were uploaded OSS front , It has been compressed by other compression tools in advance , After adding the compression suffix , The size of the picture doesn't change much , There will even be negative growth . So we adjusted the evaluation algorithm , It's no longer a simple matter of checking whether the picture has been added OSS suffix , Instead, compare the volume of the current image with the addition OSS Whether the volume difference after compression suffix exceeds the proportion ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Custom inspection model "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" After testing the system for a period of time , We found that not all metrics apply to all types of pages . For example, our front page loads a lot of pictures and requires a high resolution of the pictures 、 And the background page picture is less . We have both traditional back-end rendering + jQuery Type of page 、 Client rendering React page 、 There are also pre rendered Vue page ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" It's obviously not appropriate to test all types of pages according to the same standard , So we introduced  "},{"type":"text","marks":[{"type":"strong"}],"text":" Test model "},{"type":"text","text":"  The concept of . We depend on the type of page , Perform performance test according to the corresponding test model . A detection model can be associated with multiple indicators , And you can configure the index weight and level ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b1\/b198642af104b1fae93998959d1f939d.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The greater the weight, the more points to deduct , The level is divided into error and warning, among warning The grade deduction is not included in the total score , For example, whether the request uses Gzip Namely , Because the front end can't be optimized , Need to push the server to improve ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Calculate page ratings "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/86\/86edc99caf178b42906912851e6770c0.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Provide optimization suggestions and Trends "}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Optimization Suggestions "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Review items for each deduction , We all provide detailed reasons for points deduction , And the corresponding solution ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/62\/62d35d9cf28889d8734991673455dc9f.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Page performance trend chart "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In addition to developing new features , We are also actively refactoring old pages , To analyze the benefits before and after reconstruction , We also provide the function of querying historical data and changing trend ："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/1e\/1e5e68d2966ceed4333bad6e1dc795d9.webp","alt":"Image","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/83\/837bc2d86f87e8cfe41bcc50737d1768.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" summary "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Baice system provides performance optimization analysis services for front-end pages , Combined with the differences of industry solutions and business scenarios , Improve best practices in line with the company's business situation , Hundred policy system has developed a set of Web Page performance testing standards , Through page detection and model analysis , The request in the page was found to take too long 、 Too much resources requested 、 Unreasonable page structure and other problems affecting user experience , And provide corresponding optimization suggestions for the problem , Help developers produce faster rendering 、 Less resources 、 Experience a better page ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The first figure ：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" author ： Front end team of Zhengcai cloud "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" original text ：https:\/\/mp.weixin.qq.com\/s\/2CHA5ewWz_SIlBrdEuVv7w"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" original text ： automation Web Performance optimization analysis scheme "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" source ： Front end team of Zhengcai cloud - WeChat official account [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Reprint ： The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source ."}]}]}