Website Front End Performance optimization Summary "Go"

One, server-side optimization

1 .  Add Expires or Cache-control Information Header  

Some images (banner, logos, etc.) that are often used and do not change frequently, static files (login home page, explanatory documents, etc.) can be set for a long period of validity (expiration date), which indicates to the client the validity and durability of the document. If there is a cache, the document can be read from the cache (except that it has expired) rather than from the server. The client then examines the copy in the cache to see if it expires or fails to determine whether the update must be obtained from the server.

Each container has a specific scenario, in Apache, for example:

expiresactive on
Expiresbytype Image/gif"Access plus 1 weeks"

Represents the GIF file cache week, the configuration can be adjusted according to the specific business, specific configuration can refer to: http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_expires.html

2 .  Compress content  

For the vast majority of sites, this is a necessary step, can effectively reduce network traffic pressure.

<ifmodule mod_deflate.c>
Deflatecompressionlevel9
Addoutputfilterbytype DEFLATE text/html text/plain text/xml application/x-httpd-php
Addoutputfilter DEFLATE HTML htm xml php css JS
</ifmodule>

Indicates that zlib can use memory to the maximum extent in compression, compressing HTML, text, XML, and PHP files, specifying files with extensions such as HTML, HTM, XML, PHP, CSS, and JS to enable compression.

Specific configuration can be consulted: http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_deflate.html

3. set etags

Before using etags, it is necessary to review the meaning of the return values 200 and 304 specified in the RFC2068:

$--ok
304--not Modified

When the client requests a file, the server checks to see if the file exists, and if the client does not exist , it downloads the file and returns it, if the client exists and the file has not been modified for the specified period (Inode ,MTime and Size), the server returns only one 304, does not return the resource content, and the client will use the previous cache file. The etags is a notation that determines whether the file has been modified and is associated with resource one by one on the server side, so etags is especially useful for CGI-type page caches.

is optimized before the first page: (Note that at this time does not compress the first page picture, even if the use of the cache, still need about 5s of time)

A page before the

It is important to note that the use of Etags increases server-side load and requires self-balancing in real-world applications.

second, cookie optimization

1. Reduce Cookie Volume
HTTP Coockie can be used for a variety of purposes, such as permission authentication and personalization. The information inside the Coockie is communicated between the Web server and the browser via the HTTP file header. It is therefore important to keep the coockie as small as possible to reduce the user's response time.

Make cookies as small as possible;

Set the bookie on the appropriate sub-domain name to avoid affecting the response under other subdomains;

Set a reasonable expiration time to remove unnecessary cookies.

Here's a comparison of the cookies for each website:

As can be seen in the figure, 6K cookies are obviously unnecessary.

2. use no Coockie domain name for page content

When the browser requests a static picture and sends Coockie in the request, the server does not use any of these coockie. So they are just the network transmissions created because of some negative factors. So you should be sure that the request for static content is a no-coockie request. Create a subdomain and use it to store all of the static content.

For example, if the domain name is www.example.org, you can consider the existence of static content on the static.example.org. However, if Coockie is not on www.example.org but in the top-level domain example.org, then all requests for static.example.org will contain Coockie. In this case, consider re-purchasing a new domain name to have static content, and to keep the domain name as non-Coockie. For example, T.qq.com uses qpic.cn,weibo.com that sinaimg.cn,xiaonei.com uses hdn.xnimg.cn and so on.

Performance considerations There is also the use of subdomains with www and set coockie on it, because ignoring www will set the cookie to *.example.com up, so that the cookie with some unnecessary information.

third, JAVA SCRIPT and CSS optimization

1. put CSS on the top of the code page

This prevents the browser from interpreting it once, using CSS for a second explanation, because the user is not interested in the CSS naked Day effect at all.

CSS Bare-ben Festival (Source: Network)

2. Avoid CSS expressions

Anything that only IE can use is not a good thing.

3. stripping JavaScript and CSS from the page

After stripping, it can be targeted to a separate processing strategy, such as compression or caching strategy.

(CSS has been stripped, but JS embedded in the HTML, and placed in the upper part of the HTML, so this goods is positive + negative)

4. Streamline JavaScript and CSS

Grammar can be abbreviated as much as possible.

(class merge with same performance)

5. use <link> instead of @importChoose <link> over @import

In IE, the @import directive is equivalent to writing the link tag at the bottom of the HTML, which is contrary to the first one.

6. Avoid using CSS Filter

Try to use a PNG-formatted picture instead of a filter effect, because opening the filter increases the cost of the browser.

7. JS as far as possible on the bottom of the page

When a script is downloaded, the browser will get stuck and cannot respond to other requests. Therefore, the functional JS can be put to the end of processing.

8 .  page display as far as possible to give CSS Complete

I've seen a drop-down box written by a js+css,

The realization principle is that JS gets each select element of the page and its corresponding attributes, and then uses JS to redraw the new style effect:

The extra part of the JS execution process degrades the performance of the client, so the select style is not used in the end.

Four, picture optimization

1. picture optimization

Use PNG-formatted images as much as possible, because PNG has more features and smaller volumes than GIF, and future PNG adds animation effects:

2. using CSS Sprites to optimize images

Simply put, "use CSS background related elements for the absolute positioning of the background map," The number of HTTP calls into one call:

These expressions, when the mouse does not pass, are absolutely located from a picture, only when the mouse on a certain expression, will be downloaded from the server GIF pictures, this can reduce (N-1) the HTTP request.

The disadvantage of using CSS Sprites is that the client will consume more memory because the CSS Sprites will open a copy of multiple images, and the current solution is to merge them into several levels of images, in batches, and on the client side, depending on the frequency of use.

3. do not scale the picture in HTML

Use the Imagemagic command (convert) to scale the image to the appropriate size, so try not to give it to the browser.

4. with smaller and cacheable favicon.ico

Because there is no favicon.ico, the server returns a 404, and a large number of 404 increases the number of responses to the server compared to files that can be cached for a long time.

(404 errors due to missing favicon.ico on the server)

4. compressed images are not necessarily lossy

Compressing an existing image does not affect the user experience, mainly based on the following two points:

1. The user may not feel the loss of color;

2. Compression does not necessarily damage the quality of the picture.

Lossless compression of the principle of the picture can refer to the following links, this article does not repeat: http://en.wikipedia.org/wiki/Image_compression

The first Test platform home use is uncompressed pictures, download speed is significantly delayed, and sometimes up to nearly 10 seconds of download time, after lossless compression home image, the effect is obvious, the basic control within a second:

Is the size comparison before and after compression:

The tool address is: http://www.smushit.com/, it is highly recommended.

Five, content optimization

1. reduce DNS lookups

DNS Lookup is a time-consuming step, and the problem with DNS lookups is not negligible if you use too many widgets outside the site.

2. Minimize redirects

And note that some unnecessary redirects, such as adding a "/" to the Web site's PIP directory, can effectively avoid a redirect. There is a difference between the request HTTP://EXAMPLE.COM/FML and the request http://example.com/fml/for the server. If it is an Apache server, you can resolve this problem by configuring Mod_rewrite. For details, please refer to: http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_rewrite.html

3. cut the grouping to multiple domains

The main purpose is to improve the page component parallel download Ability , but note, also do not use too many domain names, otherwise there will be the first DNS lookup too much problem, under normal circumstances two domain names can be.

4. eliminate http 404 Errors

Full testing of page links coupled with constant tracking of the Web server error log can effectively reduce the 404 error and improve the user experience.

PostScript:

This summary gives me the inspiration is not to improve the performance of the system itself, improve performance is only a very superficial thing, there are a lot of methods on the Internet, there are many methods of testing, according to do all over again, performance will certainly improve, but this know it does not know why the performance improvement is meaningless, This is where the purpose of this article is.