6 ways to improve Web site speed front-end optimization method

Recently a few colleagues opened a personal blog, but complained that because of the purchase of virtual space, so the personal blog site is very slow to open. For this phenomenon, according to the general situation, a website access to open speed and slow, all is to see this site use space configuration, if this space host configuration is good, then your website access speed will be very fast, on the contrary, if your space host configuration sucks, then your website access speed will be very slow. In fact, the allocation of space mainframe not to talk about, our webmaster or SEO staff can also start from the Web page production, thereby improving the access speed of the site from the existing resources. If you do not know how to optimize the site to improve the speed of access to the site, then look at the Ma Haixiang blog for you to summarize the six tips it, I hope you can help!

　1. Use the browser to cache your JS and CSS files:

Add the following code to the Web site root directory. htaccess

Expiresactive on

ExpiresDefault "Access plus 1 year"

This code means to send the header cache header to Jpg|gif|png|css|js, cache for one year, and when the browser does not use CTRL+F5 force flush, it will be cached until the end of time. The only regret is that if you change the JS or CSS file must change the previous path or file name, you can base.js?ver= (x) This way the next time the browser will be automatically read and cached.

2. Replace your. JS library file address with the address of your Google CDN:

With the use of JS libraries such as jquery and MooTools, more and more of the. js files need to be loaded. The traditional web site is usually uploaded to the website itself. But for a jquery.js volume that is close to more than 70 KB does not help the site respond faster, you should use Google API at this time.

For example: Replace your http://www.***.cn/jquery.x.x.js with http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/ Jquery.min.js, the implication is that once a user has visited a website that uses the Google API, it is not necessary to re-load the file once it accesses another site that has called the API address. So as to achieve the purpose of speed.

Not only is the jquery library, other such as MooTools Yui can also use this way.

　3. Streamline and optimize your JS and CSS:

Although the cache and gzip escort, but for JS and CSS optimization is also necessary. We write JavaScript scripts and CSS code that are indented and wrapped, suitable for human reading, but the browser executes these scripts and requires these meaningless spaces and line breaks. So we should get rid of some whitespace wrapping, and even shorten the variables inside JavaScript and CSS. such as the optimization tools have YUI Compressor and Closure Compiler. Both of these tools are Java-based, and the JDK should be installed with the Java_home set. (It's really a bit difficult for a non-programmer's webmaster)

This tool can not install the JDK locally, directly upload JS and CSS files for compression, you can choose to use YUI Compressor or Closure Compiler.

　4. GZIP compress your JS and CSS files:

Compression JS and CSS can be done through the server dynamic script can also be more simple to use the Apache server can be in the site root directory. htaccess Add the following code

Addoutputfilterbytype DEFLATE text/html text/css text/plain text/xml application/x-javascript Application/json

Header Append Vary accept-encoding

This code means that the compression module of the calling server is gzip compressed prior to the output of the above file, and all files should be able to reduce the volume by more than 30% after gzip compression. Especially for a large number of blogs using JS have gzip escort after the speed can be improved a lot.

　5. Merging pictures with CSS Sprites

A website often uses small icons and small images to beautify, but unfortunately these small images take up a large number of HTTP requests, so you can use the Sprites way to merge all the pictures into a picture, can be merged online through the relevant tools, can also be merged in PS.

　6. Optimize your website Image:

A large number of images and icons can give the site a beautiful effect, graphics and text mixed is a very brilliant way to show the blog. But the volume of the picture is really not very strong, JPG is a lossy compression format, while PNG is lossless, but the flaw is quite large. In order to reduce the volume of pictures to achieve the fastest download speed, each picture should be optimized before uploading the volume.

This article for Ma Haixiang Blog original article, if want to reprint, please indicate the original site from the http://www.mahaixiang.cn/wyzz/207.html, annotated source, otherwise, no reprint; Thank you!

6 ways to improve Web site speed front-end optimization method