[Frontend optimization] improves Website access speed through six methods

1. Replace the file address of your. js library with the address of Google CDN ::

(Google APIS is currently not very stable in China and is not recommended .)

 

With the use of JS libraries such as jquery and mootools, more and more. js files need to be loaded,Typically, a traditional website is uploaded to its own directory.However, for jquery, which is close to 70 KB.JS volume is indeed not conducive to the improvement of website response speed,In this case, Google API should be used.

Replace your http://www.cnblogs.com/jquery.x.x.js with a http://ajax.googleapis.com/Ajax/libs/jquery/1.4.4/jquery.Min. jsIt means that when a user accesses a website using Google APIs,Accessing other websites that call this API address again does not need to load the file again.. To speed up.

Not only the jquery library, but other methods such as mootools Yui can also be used.
We recommend a website (http://scriptsrc.net/) which collects the js api paths provided by Google. Click Copy to get the latest file path.

2. streamline and optimize your JS and CSS ::

Despite the support of caching and gzip, the optimization of JS and CSS is also necessary. The JavaScript scripts and CSS code we wrote are indented and line breaks, which are suitable for human reading,However, the browser does not need meaningless spaces or line breaks to execute these scripts.Therefore, we should remove the space line breaks and even shorten the variables in JavaScript and CSS. Such optimization tools include Yui compressor and closure compiler. Both tools are based on Java. JDK should be installed and java_home should be set. (It is indeed difficult for non-programmer website administrators)

Recommend an address (http://ganquan.info/yui? Hl = ZH-CN)

This tool can directly upload JS and CSS files for compression without installing JDK locally. You can choose Yui compressor or closure compiler.

 

Use Yui compressor or closure compiler and compressed code such

Function Hello (name ){
Alert ('Hello blog' + name );
}
Hello ('garden ');

It will become

Function Hello (a) {alert ("Hello blog," + a)} Hello (" ")

Remove your indentation and empty rows and shorten the variable name,This optimization method is irreversible,Therefore, before using these two types of compression, back up a source file for later modification.


3. gzip ::

To Compress JS and CSS, you can use dynamic scripts on the server or simply use the Apache server. You can add the following code to the website root directory. htaccess:

 

<Ifmodule mod_deflate.c>

Addoutputfilterbytype deflate text/HTML text/CSS text/plain text/XML application/X-JavaScript Application/JSON
Header append vary accept-Encoding
</Ifmodule>

This code indicates calling the compression module of the server to perform gZip compression. After gzip compression, all files should be reduced by 30%.The above volume.Especially for a large number of blogs using JS, the speed can be improved after gzip escortHigh.

4. cache your JS and CSS files ::

Add the following code to the website root directory. htaccess:
<Ifmodule mod_expires.c>
<Filesmatch "\. (JPG | GIF | PNG | CSS | JS) $">
Expiresactive on
Expiresdefault "access plus 1 year"
</Filesmatch>

This code is used to cache JPG, GIF, PNG, CSS, and JS headers for one year. When the browser does not use Ctrl + F5 to force click farming, will be cached until the end of the time,The only pity is that if you change the JS or CSS file, you must put the previous path orThe file name is changed. Can base. js be used like this? Ver = (x) This method will be automatically read and cached by the browser next time.

5. Use CSS Sprites to merge Images

A website often uses small icons and small images for beautification, but unfortunately these small images occupy a large number of HTTP requests. Therefore, you can use sprites to merge all the images into one image, http://csssprites.com/can be merged online through this URL or in PS.

For more information about CSS Sprites, see http://baike.baidu.com/view/2173476.htm

 

6. optimize your website images (images )::

Although a large number of images and Icons can bring beautiful results to the website,Text-and-image mixing is a very brilliant way to present blog posts.But the size of images is really not very powerful. jpg is a lossy compression format,While PNG is a non-destructive defect, it is very large in size.In order to reduce the image volume to the fastest download speed,The size of each image should be optimized before being uploaded. yslow, which focuses on the front-end, has a tool called smushit.

Http://www.smushit.com/ysmush.IT/

This tool is a lossless image compression tool,You can optimize the size of your image while keeping the original quality unchanged.The size of this optimization is usually above 10%, which means
A 30 kb image is only 27kb or less after optimization ......

Summary:

The above six optimization methods are front-end. The significance of front-end optimization is to reduce HTTP requests and the size of website front-end programs.

In fact, optimization at the backend is also essential to reduce more database queries,Only data caches that are frequently called can be obtained through memory caches such as memcache.The fastest speed.