|
1. Replace your .js library file address with the Google CDN address:
(Google APIs are not very stable in China at present, so it is not recommended to use this method.)
With the use of js libraries such as jquery and mootools, the .js files that need to be loaded are becoming more and more numerous and larger. Traditional websites usually upload them to the directory of the website itself. But for a jquery.js file with a size of nearly 70KB, it is not conducive to improving the website response speed. In this case, Google API should be used.
The significance of replacing your http://www.cnblogs.com/jquery.xxjs with http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js is that after a user has visited a website that uses the Google API, he does not need to load the file again when visiting other websites that call the API address. Thereby achieving the purpose of speeding up.
Not only the jquery library, but other libraries such as mootools yui can also use this method.
I recommend a website (http://scriptsrc.net/) which collects the js API paths provided by Google. Simply click Copy to get the latest version of the file path. 2. Streamline and optimize your js and CSS:
Although cache and gzip are used to protect it, optimization of js and css is also necessary. The JavaScript scripts and CSS codes we write are indented and wrapped, which is suitable for human reading, but browsers do not need these meaningless spaces and wrapping to execute these scripts. So we should remove these spaces and line breaks, and even shorten the variables in JavaScript and CSS. Such optimization tools include YUI Compressor and Closure Compiler. Both tools are Java-based, and you should install JDK and set JAVA_HOME to use them. (It is indeed a bit difficult for non-programmer webmasters)
Recommend an address ( http://sweet.fengyin.name/?hl=zh-CN )
This tool does not require JDK to be installed locally. You can directly upload JS and CSS files for compression. You can choose to use YUI Compressor or Closure Compiler.
The code after compression through YUI Compressor or Closure Compiler is as follows
function hello(name) {
alert('hello blog' + name);
}
hello('Garden');
It will become
function hello(a){alert("hello blog, "+a)}hello("Garden")
While removing your indents and blank lines, it also shortens the variable names. This optimization method is irreversible, so please back up a copy of the source file before using these two compressions to facilitate future modifications. 3. GZIP compress your JS and CSS files:: Compressing js and css can be done through server dynamic scripts or more simply using apache server. You can add the following code to the .htaccess in the root directory of the website.
<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 means calling the server's compression module to perform GZIP compression on the above files before outputting them. After gzip compression, the size of all files should be reduced by more than 30%. Especially for blogs that use a lot of js, the speed can be greatly improved with the protection of gzip. 4. Cache your js and CSS files::
Add the following code to the .htaccess file in the root directory of your website
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
This code means sending a header cache header to jpg|gif|png|css|js, caching it for one year. When the browser does not use ctrl+F5 to force refresh, it will be cached until the time ends. The only regret is that if you change the js or css file, you must change the previous path or file name. You can do this base.js?ver=(x) in this way, the browser will automatically read and cache it next time.
5. Use CSS sprites to combine images
A website often uses small icons and small pictures for beautification, but unfortunately these small pictures take up a lot of HTTP requests. Therefore, you can use sprites to merge all the pictures into one picture. You can merge them online through http://csssprites.com/ or merge them in PS.
For more information about css sprites, please visit http://baike.baidu.com/view/2173476.htm 6. Optimize your website images (pictures)::
Although the extensive use of pictures and icons can bring beautiful effects to the website, the mixed editing of pictures and text is a very gorgeous way to display blog posts. But the size of the picture is really not that impressive. Jpg is a lossy compression format, and although png is lossless, its disadvantage is that it is quite large in size. In order to reduce the size of the image and achieve the fastest download speed, each image should be optimized before uploading. 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 that can optimize the size of your images while maintaining the original quality. This optimization usually reduces the size by more than 10%, which means that a 30KB image will only be 27KB or less after optimization... Summarize:
The above 6 optimization methods are all front-end. The significance of front-end optimization is to reduce http requests and reduce the size of the front-end program components of the website.
In fact, it is also necessary to reduce more database queries in the back-end optimization. The fastest speed can be achieved by caching frequently used data through memory cache such as memcache.
|
