Front-end sister and I complained about how their pages load very slowly, and how to gracefully pack them in front of her 13

The purpose is to install force, graceful to install force, let sister think you are very good, right? You're going to give your sister a hug after you've analyzed it, right?
First of all, to pretend to be forced to appear with nature, natural, look at a glance to know where the problem. If you need to Chi began popping to check the log, analysis core files, that force lattice naturally reduced a lot. So how can nature be sexually? The answer is to look at the page waterfall diagram. What is a waterfall chart? I don't know if I'm chasing the front-end sister. Open the Web page with chrome, press and hold Option+command+i (Windows is F12, but if you press this, then how dare you say you want to install force, front-end team are clear a water Mac, Pro, first change a Mac reload), open developer tools to see the network.

With the waterfall diagram, the following is the focus of the installation force, to pretend to easily, lightly sweep a waterfall, and then meditate for a few seconds, the tone slightly deep with sister said: "I know." Of course, you have to really know to do, do not give the sister to tell a why, the last dead or you.
Cause a lot of slow loading, but you just need to know some of it, I will give you some common problems and identification methods, if these are not, then you can only wish you good luck buddy.
1.problems at the back end
See no, the first request is particularly long, especially long, and is clearly more discordant than the other requests. General Web page The first request is the probability of a dynamic request is relatively large, if the request is particularly time-consuming, it is certainly not the front-end responsibility, not the sister's problem, LUN home HTML is not loaded, how can you say is the front-end problem. Optimize PHP, optimize the database, optimize everything that can be optimized, to make sister feel very good.
2.The number of requests is too many

Count the total number of rows in the waterfall chart, and if there are hundreds of rows before onload, then there are too many requests. Ask sister, all of a sudden load so many resources really good? With sister said, Css,js the merger of the merge, icon of the Genie of the wizard, tell sister use the font icon can also improve your image on the tall. What's more, something unimportant doesn't have to be loaded before the onload, and it's the same thing that goes in the back. The number of Web page requests is the same as the number of her ex-boyfriend, the less the better.
3.Rat poop .
See this request in the picture? Looking at other requests, this request is an order of magnitude larger than the time of the other request. This is usually because a resource is too slow, it is a mouse excrement, broken the whole pot of soup, resulting in a slow overall page. Resource slow reason, you can go to Starbucks with sister, two people to take a pair of programming slowly play the mouse excrement, the probability of a relatively large number of possible is: a) resources on third-party sites, they are slow; b) This resource is too large; c) There is a problem with the domain name used by this resource.
4.Network Problems

Taking a closer look at a single HTTP request, they are divided into several stages, namely, domain name resolution, connection creation, sending requests, waiting for responses, and receiving data. In theory, the domain name resolution and the establishment of the connection should take a small amount of time, the main time should be used in the following stages. , light gray and Gray respectively represent domain name resolution and establish a connection, and you can see that the time spent on the network layer in both requests is too long, more than half of the total time. The network layer time is too long in addition to the underlying network may be related, but also the site's service-side performance (back-end rd things OH). Of course, if this happens on a request sent to a third-party site (which in fact often happens), you can recommend that you cancel or change some site features to avoid such a request.
5.too long to receive data
It says that most of the time the HTTP request should be spent in the following stages, such as waiting for a response and receiving data. However, if the time to receive data is too long, up to hundreds of milliseconds or even in seconds, there is a problem. This is generally because the content of the download is too heavy, such as large images, large scripts, and so on. This type of problem can be solved using gzip compression, picture compression, or js/css minify.

6.JS blocking Request

There is a big gap between the two successive requests in the figure, why does this void occur? May be because she wrote the JS performance problems, parsing the implementation of JS took a long time, resulting in this period of time the resource load is blocked. If this happens, you should be patient to comfort sister, ask if she is in the code when the body is not comfortable ah, the mood is not good ah and so on, remember not to directly say sister code write No, otherwise certainly not then.
7.if none of the above

Can and sister to look at each HTTP request, carefully study each request header response header, to see if there is no cache set, picture optimization is not good enough or the like. If you are worried that your analysis is not good, you can find a tool to analyze, such as: http://speed.mmtrix.com/, the above picture to the sister to see, the problem at a glance.

Write here I suddenly think of a little, sister complained about the slow when you did not pretend to force, now learn how to install force, still time? Is it too late? Can you do that? And you? Do you? 

Front-end sister and I complained about how their pages load very slowly, and how to gracefully pack them in front of her 13