Web Performance Optimization Series (1): Web performance Optimization Analysis

This article by Bole Online-pear Alexander Translation, Sunbiaobiao School Draft. without permission, no reprint!
English Source: Gokulkrishh.github.io. Welcome to join the translation team.

If your site is in 1000ms Nega, then there will be an average of one user to stay down. In 2014, the average web page size was 1.9MB. Read more about the statistics.

The core content of the site needs to be presented within 1000MS. If it fails, the user will never visit your website again. By reducing the time it takes to load pages, many well-known companies have a significant increase in revenue and download volumes. Like what

• Each time the Walmart is reduced by 100ms, their revenue is increased by 1%.
• Each time Yahoo reduced the load by 400ms, they increased their traffic by 9%.
• Mozilla has boosted their page speed by 2.2 seconds, gaining more than 160 million Firefox downloads per year.

Steps for site optimization

1. Set the performance budget.
2. Test the current performance.
3. Identify areas that cause performance problems.
4. Finally, Duang, use optimization stunts.

Here are a few ways to improve your page performance, let's take a look at

Speed Indicator

The speed indicator is the average speed at which the visible part of the page is rendered in the browser. Represents the form of milliseconds, and depends on the size of the viewport. See (Display the page load time in seconds in the form of a video frame).

The lower the speed indicator, the better.

Speed metrics can be tested by webpagetest (maintained by Google)

Short

Webpage test has many features, such as running multiple tests with different browsers in different places. You can also measure other data such as load time, number of DOM elements, first byte time, etc...

For example: View Amazon's test results on webpagetest.

Take a look at this video to learn more about webpagetest (FQ), which is explained by Patrick Meenan .

Render Blocking

If you know how the browser works, then you should know how HTML, CSS, JS is parsed by the browser and which block the rendering of the page. If you don't know, please look.

Click how a browser works to learn more about how the browser works (author Tali Garsiel and Paul Irish).

Steps for browser rendering

1. First, the browser parses the HTML tag to construct the DOM tree (DOM = Document Object model)
2. Then parse the CSS to construct the CSSOM tree (CSSOM = CSS object model CSS)
3. The JS file is parsed and executed before the DOM and cssom trees are combined into a render tree.

Now that you know how the browser is parsed, let's see what part of the rendering tree is blocking the build.

1. Blocking the rendered CSS

Some people think that CSS blocks rendering. When constructing Cssom, all CSS will be downloaded, regardless of whether they are used in the current page.

To resolve this rendering blocking, follow the two steps below to do

1. Embed the key CSS inside the page and write the style that is used for the most important (the part of the page that is visible at the first load) to the<style></style>里。
2. Remove the unused CSS.

So how do I find out which CSS is useless?

1. Use Pagespeed Insight to get statistics like unused CSS, blocking rendered CSS and JS files, and so on. For example: Flipkart's pagespeed insight statistical results.
2. Use gulp tasks, such as gulp-uncss, or use grunt tasks, such as grunt-uncss. If you don't know what they are, please read my previous article.

# #专业小贴士

1. Use CSS stats to ensure that there are absolutely no unused elements in the page, unique styles and fonts, and so on.
2. Pagespeed Insight Chrome plugin.
3. Tag Counter Chrome plugin.

2. Render blocked JavaScript

If the browser encounters JavaScript while parsing the HTML markup, the parsing stops. The HTML rendering will continue only after the script has finished executing. So this blocks the rendering of the page.

In order to solve it

Use the async or defer feature in the <script></script> tab.

1. <script async> will download the file during HTML parsing and execute it as soon as it finishes downloading.
2. <script defer> will download the file in HTML parsing and execute it after the HTML parsing is complete.

Example: Async and defer are used in Google Analytics

Click to view the browser support for async and defer.

Memory Leaks

Memory leaks and page bloat are one of the problems that front-end developers face. Let's take a look at how to discover and resolve memory leaks.

Looking for memory leaks in JavaScript

Use Chrome Task Manager to detect the memory used by the app and the JS memory (total memory + real-time memory). If your memory continues to increase with each of your operations, you can suspect a memory leak.

The following is the Chrome Task Manager .

Chrome Devtools Analytics

Use the Heap Profiler to view the memory leaks. Open Chrome DevTools and click the Profiles tab, then select Take heap snapshot. If you don't know chrome DevTools, please read the previous article.

Heap Profiler has four snapshot views (snapshot view)

1. Summary View – Shows the total number of objects and their total instances, the shallow (shallow) size (the memory size of the object itself), and the reserved (retained) size (the amount of memory freed after the automatic GC occurs + the memory size of the object that cannot be executed).
2. Comparison view-Used to compare two or more snapshots of an operation before and after a memory leak can be detected.
3. Containment View-Shows the overall view of your app object schema + Domwindow object (under Global object), GC root, local object (from browser).
4. Dominators View-Shows the heap diagram of the Dominators tree.

Click to learn more about HEAP Profiler.

Dom Leaks

A reference to a DOM element causes the DOM to leak and prevents automatic garbage collection (GC) from being made.

Take a look at an example

12345

<div>    <div id="container">        <h1 id="heading">I am just a heading nothing much</h1>    </div></div>

12345678

var parentele = document.getElementById ( ' container ' //get parent Ele reference get a reference to the parental element  var headingele = document.getElementById ( ' heading ' ); //get Child ele reference get a reference to a sub-element   parentele.remove (); //removes the parent element from the DOM removes the parents  //but its child ref still exist, so Parentele won ' t collect GC ' d and causes DOM Leak //but its child element references still exist, so parentele will not be recycled by GC, resulting in DOM leaks.

Set its reference to NULL to fix the DOM leak.

1	headingEle = null; //Now parentEle will be GC‘d

This is the problem that front-end developers often encounter. That's all for today. If you like my article, please share or comment below. Thank you!!

Web Performance Optimization Series (1): Web performance Optimization Analysis