Increase your site's first load speed

Especially in mobile phone-side access, the first time users open the site, if you get feedback for too long, the user is likely to finish loading the page before leaving, will not be visited again. Therefore, Web sites, web apps, to increase the load speed of the first visit is particularly important. The first load speed is measured in "first byte time", that is, the time taken from the user's click access to the first byte returned from the server, in the vast majority of cases, the real reason is the front end, Pagespeed YSlow and countless other tools and services to solve these problems.

How the browser loads the page

Resolve domain name à initiate request à download response à render page

When the browser is rendering the page, if the page has a CSS or script outside the chain, the browser will wait until the files are loaded and parsed before rendering the page.

Why is the page loading slowly

The following are possible causes

HTTP connections The number of times a small file is repeatedly requested is much slower than requesting a large file at a time, even though modern browsers already support parallel downloads, but each request still requires an HTTP-level overhead, creating new requests not only requires new overhead, but also consumes CPU and memory, so The time to download two files in parallel is not equal to twice times the speed of a serial download. For larger files, such as some larger pictures, the situation is somewhat different, because this time, the download occupies the majority of the request time, so, the effect of parallel download will be better. For this reason, it is reasonable to place pictures and other resources in different domains on the site, and Yahoo's Steve Souders and YSlow team found that creating two aliases for the current domain allows for more concurrent downloads, which can significantly improve the performance of large file downloads. Using at least two of the maximum five domain names is the rule of thumb for yslow.

Another consideration is the browser cookie, if a cookie matches the requested domain name or path, it will accompany each request to send (upload), so if you have a thousands of-byte cookie under your domain name, Then each request sent to the domain will be included in the request header and then sent (these bytes are still uncompressed). The server reads these cookies before it reads the request body. A cookie can make a very small request very large.

The total number of bytes à this reason is obvious, the size of the resource being downloaded

Wait for rendering blocking à sometimes, not really improve performance, but there are a few tips that can make users feel that the page is loaded quickly. For example, whenever, give the user a timely feedback, let the user know that the page is loading, the link is still there, not disconnected.

Delay à A typical home network link may have 15ms network latency, a typical 3G link has 100ms latency, 3G network compared to home network, not only the download speed is much slower, the delay is also much higher.

Poor caching capability à correct cache setting ensures that the browser will not be able to retrieve the resources that are available at the end, and is the key to solving the problem.

Pagespeed Six basic rules for solving page load performance issues

1. Cache optimization: Save the logical implementation of the page application and the required data offline
2. Minimize round-trip times: Reduce the number of cycle times for request responses
3. Minimize request overhead: Reduce the size of the upload packet
4. Payload minimization: Reduce the size of response packages, download packages, and cache pages
5. Browser rendering Optimizations: Improved browser page layout
6. Mobile device Optimization: Adjusting sites for mobile and mobile devices

The current mobile category contains two recommendations: Delay JavaScript parsing and enable redirection of the home page to be cached

?

In addition, in the actual work, we will encounter some details.

1. Using the same high-resolution image for all sizes of browsers can greatly reduce the effort, but users will not only have to pay for it (traffic costs), but also endure the slow download performance. If it is not possible to generate a reasonable image of each size, perhaps a compromise is chosen, and most devices use the resulting size as an optimization.
2. For different devices, in order to have a more appropriate layout, we will use media queries to solve this problem

   <link rel= "stylesheet" media= "only screens and (max-width:800px)" href= "" Table.css ">

   However, if you place the media layout inside a CSS file, merge different layout codes into one file, reducing the number of HTTP requests at once

   @media only screen and (max-width:800) {}

Increase your site's first load speed