Web Front End Performance analysis

Web front-end performance typically represents a fully user response time, including the entire process from the beginning of parsing the HTML file to the final rendering completion, but not the interaction phase with the server after the input URL. Here are the steps for the entire process:

1. Begins parsing the HTML file, from head to body in order from top to bottom.
2. When parsing to the head part of the CSS external link, sync to download, if you encounter external JS link is also downloaded
3. Then parse the body part, edge parsing edge start to generate the corresponding DOM tree, while waiting for the CSS file download
4. Wait until the CSS file has been downloaded, then synchronize with the generated DOM node +CSS to generate the render tree
5. The render tree generates a structure model, and then synchronously calculates the layout location of the render tree node
6. After calculating the completion node coordinates, the synchronization begins to render
7. In the process, if you encounter a picture, then jump over to render the following content, waiting for the image to be downloaded successfully will be returned to the location of the original image rendered
8. If the JS code in the rendering process occurs when the DOM tree mechanism is adjusted, it will be restarted again, starting with the modification of the DOM.
9. Eventually all nodes and resources are rendered complete

There will be a lot of separate requests throughout the process, so there will be a lot of TCP connections, and each one will shut itself down, or it will need not be automatically closed on the Keep-live field tag.

For the Web front-end performance analysis from the HTML page structure, analysis of the rationality of its code. The Performance Analysis tool uses page speed. Page speed was originally used by Google to improve the web design of the tool-it is integrated in the famous Firefox plugin Firebug. When the user runs page speed, you can get immediate advice on how to improve page loading speeds. Page Speed tool provides browser plug-ins and online Web site assessment Two ways, where the online website is used for evaluation.

Page Speed Insights can measure how a webpage improves its performance based on the following:

• First screen load time: The time taken from the user requesting a new page to render the first screen content in the browser.

Full page load time: The time it takes for the user to request a new page to fully render the Web page.

Page Speed's website is:

Https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

The page is as follows:

Enter the two sites http://sse.hust.edu.cn and http://cs.hust.edu.cn that we need to evaluate in the text box, and you'll get the corresponding score. Page speed scores range from 0 to 100 points. Higher scores represent better performance. A score of 85 points or higher indicates that the Web page is performing well.

Its scoring rules are listed in the following links:

Https://developers.google.com/speed/docs/best-practices/rules_intro

Includes 10 page speed rules and 5 availability rules, respectively:

Page Speed Rules

L Avoid target page redirection

L ENABLE the compression function

• Improved server response time

L Use browser cache

• Reduce resource size

L Optimize picture

L optimize the CSS sending process

L Arrange visible content by priority

L remove JavaScript that blocks rendering

L Use asynchronous scripting

Availability Rules

• Avoid using plugins

L Configure Viewports

L Adjust the size of the content to fit the viewport settings

L Adjust the size of the target appropriately.

L use clear and recognizable font size

Our scoring results for the target site are as follows:

1. Software Institute official website PC side

1. Software Institute website Mobile End

1. Computer Academy website PC-side

1. Computer Academy website Mobile

Summary: Based on the above results we summarize the performance report as follows.

Test Site Platform	Soft yard pc	Soft Courtyard Mobile	Accounting PC	Hospital Mobile
Total number of points (%)	Needs Work 72	Poor 64	Needs Work 69	Poor 57
Enable compression	√	√	√	√
Reduce CSS	√	√	√	√
Reduce server response Time			√	√
Avoid using landing page redirection	√	√	√	√
Reduce HTML
Reduce JavaScript	√	√
Arrange visible content by priority	√	√	√
Optimize your pictures
Clear JavaScript and CSS that block rendering in the first-screen content
Using browser caching

It can be seen that the Software Academy's website has been optimized for reduced JavaScript compared to the computer academy, but also lacks the optimization to reduce the server response time, and the mobile side of the computer Academy has not finished prioritizing visible content. There are some other optimizations that are not completed, namely:

1. Reduce server response time: The server response time indicates that loading the necessary HTML to start rendering the Web page hosted by the server is too long. The server response time should be controlled within 200 milliseconds. There are a number of potential factors that can slow down server responses, such as slow application logic, slow database queries, slow routing, lack of frameworks, libraries, insufficient resources, or low memory. All these factors need to be considered in order to improve the response time of the server.
2. to reduce JavaScript, you can use tools closure Compiler, Jsmin, or Yui Compressor. Create a build process that uses these tools to reduce the size of the development file and rename it, and then save it to the full version of the catalog.
3. arranges the visible content by priority: Page Speed insights detects that the system needs to make more network round trips to render the first screen of the page. The tool provides suggestions to limit the size of data (HTML tags, images, CSS, and JavaScript) needed to render the first screen of a Web page to increase the speed of page loading. There are several ways to try it: structured HTML to load critical first-screen content first, and reduce the amount of data used by the resource.
4. reduce HTML: To reduce the size of HTML, you can use the page speed Insights Chrome extension to generate optimized HTML code. Of the 4 test examples above, about 17% of the size can be reduced.
5. optimize the Picture: Minimize the size of the picture to reduce the time users wait for the resource to load. Setting the format of the picture appropriately and compressing it can save a lot of data byte space. The recommendation is to make basic optimizations and advanced optimizations for all images. Basic optimizations include cropping unnecessary areas, lowering the color depth to the lowest acceptable level, removing the image comment, and saving the picture in the appropriate format. You can use any picture editing program (for example, GIMP) to perform basic optimizations. Advanced optimizations include performing further compression (lossless compression) on JPEG and PNG files.
6. clears the JavaScript and CSS that are blocked from rendering in the first screen: There are multiple scripting resources and CSS resources in the Web page that block rendering. This can cause a delay in the process of rendering the Web page. No first-screen content will be rendered directly on the Web page until the resource has finished loading. You should try to postpone or asynchronously load block resources, or embed the critical parts of these resources directly into HTML.
7. Use browser caching: Setting the expiration date or maximum presence time for static resources in the HTTP header instructs the browser to load previously downloaded resources from the local disk instead of being loaded over the network.

Conclusion: The front end of two websites has been optimized to some extent, but there is still room for optimization, in general, the Software College's web front-end performance optimization is better than the computer college.

Web Front End Performance analysis