Web front-end optimization to increase loading speed

Research shows that: the user most satisfied with the open page time is 2-5 seconds, if waiting for more than 10 seconds, 99% of users will close this page. Perhaps this said, you will not have too many feelings, next I enumerate a set of data: Google website access speed per 400ms, resulting in user search requests decreased by 0.59%; Amazon's 1% per cent increase in 100ms will result in a drop in revenue of up to 5-9%, and Yahoo's 400ms latency will result in a drop in traffic. Website loading speed Seriously affected the user experience, also determines the survival of the site.

Some people may say: the performance of the site is a back-end engineer thing, and the front end is not much of a relationship. I can only say that too young too is simple. In fact, only 10%~20% 's end-user response time is used to get the HTML document from the Web server and deliver it to the browser, where is the rest of the time? Take a peek at the Golden Rule of performance :

Only 10%~20% end-user response time is spent on downloading HTML documents. The rest of the 80%~90% time is spent on all the components in the download page.

Next we'll look at how the front-end siege lion can improve the loading speed of the page.

One, reduce the HTTP request

It says that 80%~90% time is spent on HTTP requests made by all components in the download page. Therefore, the simplest way to improve response time is to reduce the number of HTTP requests.

From the Web operating principle, the IIS request is stateless, the server side has been connected and shut down continuously, if you can reduce the server request, the total time will be reduced.

Before I downloaded the 163 mailbox landing page picture when found that they only used a picture to complete the entire page of all the pictures, then I was puzzled, this is not the same as the usual website. However, to reduce the number of browser requests, using HttpWatch you will find that the total time of the request is greatly reduced. The same idea, in the CSS style, JavaScript code should also be done as far as possible in a file to reduce Web requests.

Second, the use of CDN

If the application Web server is closer to the user, the response time for an HTTP request is shortened. On the other hand, if the component Web server is closer to the user, the response time for multiple HTTP requests will be shortened.

A CDN (Content publishing Network) is a set of Web servers distributed across multiple geographic locations that are used to publish content to users more effectively. When optimizing performance, the choice of servers to publish content to a specific user is based on the measurement of network-class congestion. For example, a CDN might choose a server with the smallest number of network steps, or a server with the shortest response time.

CDN also enables data backup, extended storage capabilities, caching, and helps mitigate peak web traffic pressure.

Disadvantages of CDN:

1, response time may be affected by other website traffic. A CDN service provider shares a Web server group among all its customers.

2, if the CDN service quality is reduced, then the quality of your work will also fall

3. Unable to directly control the component server

Third, add expires head

The initial visitor to the page makes a lot of HTTP requests, but by using a long-expires header, the components can be cached and the next time they are accessed, the unnecessary HTPP requests can be reduced, which increases the load speed.

The Web server tells the client through the expires header that it can use the current copy of a component until the specified time. For example:

Expires:fri, 07:41:53 GMT

Expires disadvantage: It requires the server and client clocks to be strictly synchronized; the expiration date needs to be checked frequently

HTTP1.1 introduced Cache-control to overcome the expires header limit, using Max-age to specify how long the component is cached.

cache-control:max-age=12345600

If both Cache-control and expires are established, the Max-age will cover the expires head Four, compression componentsJquery is the most lightweight class library of JS, its original class library is 242KB, compressed it unexpectedly only 91.6KB. Common compression tools are Google Closure Compiler, YUI Compressor, Jspacker, gzip. I often use gzip because it has the highest compression rate. After compressing it with the JDK, it will remove some spaces and replace our long variable names with very short ones.

V. Put the style sheet on the head

First of all, put the style sheet on the head for the actual page load time does not cause too much impact, but this will reduce the time the first screen of the page, so that the page content gradually rendered, improve the user experience, to prevent "white screen".

We always want the page to display content as soon as possible, to provide users with visual feedback, which is very important for users with slow speed.

Placing the style sheet at the bottom of the document prevents the content in the browser from appearing gradually. To avoid redrawing the page element when the style changes, the browser blocks the content from being rendered progressively, resulting in "white screen". This originates from the behavior of the browser: if the stylesheet is still loading, building the rendering tree is a waste, because any style sheet loading parsing is done before the retreat of anything Six, put the script at the bottom (This allows you to load the DOM structure of the page as much as possible before you can level the user experience )

With the same style sheet, the script at the bottom does not have much impact on the actual page load time, but it reduces the time the page's first screen appears, making the page content progressively present.

The download and execution of JS blocks the construction of the DOM tree (which is strictly interrupted by an update of the DOM tree), so the script tag will truncate the contents of the first screen in the HTML snippet in the first-screen range.

Parallel downloads are disabled when downloading scripts-even if different host names are used, no other downloads are enabled. Because the script may modify the page content, the browser waits, and also to ensure that the script executes in the correct order, because the script behind it may have dependencies on the previous script, and failure to execute in sequence may result in an error. Vii. use of external JavaScript and CSS

inline scripting or styling can reduce HTTP requests, which is supposed to increase the speed of page loading. In practice, however, when scripts or styles are imported from outside, it is possible for the browser to cache them, allowing the cache to be used directly at a later time, while the size of the HTML document decreases, increasing the loading speed.

Impact factors:

1. The less page views each user produces, the stronger the argument for inline scripting and styling. For example, if a user visits your website only one or two times per month, then inline will be better in this case. And if the user can generate a lot of page views, then the cached style and script will greatly reduce the download time, submit page loading speed.

2. Using external files can increase the reusability of these components if the components used in the different pages of your site are roughly the same.

Download after loading

Sometimes we want inline styles and scripts, but we can provide external files for the next page. Then we can load the external components dynamically in the page loading, so that the user will access the next. Eight, streamline JavaScript StreamlinedRefinement is the removal of unnecessary characters from the code to reduce the size of the file and to reduce the load time. When the code is streamlined, it removes unnecessary whitespace characters (spaces, line breaks, tabs) so that the entire file size becomes smaller. Nine, make Ajax cacheable

Asynchronous vs. Instant

One obvious advantage of Ajax is that it provides immediate feedback to the user because it asynchronously requests information from the backend Web server. The key factor in whether users need to wait is if the AJAX request is passive or active. Passive requests are pre-initiated for future use, and unsolicited requests are based on the user's current actions

What kind of Ajax requests can be cached?

Post requests are not cached on the client, and each request needs to be sent to the server for processing, and the status code 200 is returned each time. (data can be cached on the server side to improve processing speed)

Get requests, which can be cached by the client (and by default), unless a different address is specified, the AJAX request of the same address is not repeated on the server, but instead returns 304.

Ajax requests Use caching

When making an AJAX request, you can choose to use the Get method as much as possible, so you can use the client's cache to increase the request speed.

Web front-end optimization to increase loading speed