Front-end optimization points of DiscuzX in Jincheng bar

Recently, KANG Sheng's DX version is basically determined, at least it will not change in a short period of time. Therefore, I optimized the whole site of Jincheng bar and recorded my operations, one is to keep a record to prevent forgetting, and the other is to share your experiences with friends on the Internet.

Recommended front-end optimization tools

Firefox + Yslow + google pagespeed + Firebug

I. DX background and DIY Optimization

1. Home Page DIY avoids multi-layer nesting

Every DX framework generates a lot of code. My homepage is as simple as possible. As a result, DOM is more than 1600, And I am killed.

Therefore, try not to use too many nested frameworks

2. Avoid calling too many user portraits

Member calls on the home page are redirected, which slows down the webpage speed. The UCenter can be changed to pseudo-static, but there are bugs currently. Member portraits without Custom portraits cannot be displayed.

3. Open Gzip

Open Gzip in the website background or in the config. php file

4. Reuse the background image as much as possible to reduce the number of background images

The background images of each topic are as similar as possible, so that you can reuse the images and find a balance between appearance and speed. In fact, I am still trying to find this one, we recommend that you track the server access speed of the monitoring site. You can view the speed at which your website is accessed by users.

5. Open and set various background optimizations and caches

I have a lot of information about this, so I am not wasting my time here ~~~)

Ii. Code and space optimization

1. Merge js with minify Compression

Dx css is basically well integrated, one or two pages, but Javascript is a lot. Open the header.htm of the commonobject of your template. Can you see it. Js is very sensitive, and too many files may cause too many connections and slow down the speed.

Here we use minify to merge and compress the cache.

First, download the minify compressed package, decompress it, and upload the min folder to the root directory of the website.

Then modify the two files:

1. groupsConfig. php In the min folder

<? Php /** * Groups configuration for default Minify implementation * @ Package Minify */ /** * You may wish to use the Minify URI Builder app to suggest * Changes. http: // yourdomain/min/builder/ **/ Return array (

Add the following code behind the above Code

'Portal '=> array (' // static/js/common. js', '// static/js/home_friendselector.js', '// static/js/forum. js', '// static/js/portal. js '), 'Forum' => array ('// static/js/common. js', '// static/js/home_friendselector.js', '// static/js/forum. js '), 'Home' => array ('// static/js/common. js', '// static/js/home_friendselector.js', '// static/js/home_cookie.js', '// static/js/home_common.js ', '// static/js/home_face.js', '// static/js/home_manage.js '), 'Userapp' => array ('// static/js/common. js', '// static/js/home_friendselector.js', '// static/js/forum. js', '// static/js/home_common.js '),

2.modify the template's header.htm

What ?? Where is this file ???? I was defeated by you ..

Modify the following to replace the first code with the second one.

<Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} common. js? {VERHASH} "> </script> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_friendselector.js? {VERHASH} "> </script> <! -- {If $ _ G ['basescript'] = 'Forum '| $ _ G ['basescript'] = 'group'} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} forum. js? {VERHASH} "> </script> <! -- {Elseif $ _ G ['basescript'] = 'home'} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_cookie.js? {VERHASH} "> </script> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_common.js? {VERHASH} "> </script> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_face.js? {VERHASH} "> </script> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_manage.js? {VERHASH} "> </script> <! -- {Elseif $ _ G ['basescript'] = 'userapp'} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} home_common.js? {VERHASH} "> </script> <! -- {Elseif $ _ G ['basescript'] = 'portal '} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} portal. js? {VERHASH} "> </script> <! -- {/If} --> <! -- {If $ _ G ['basescript']! = 'Portal '& $ _ GET ['diy'] = 'yes' & ($ _ G [mod] = 'topic '| $ _ G [group] [allowdiy]) &&! Empty ($ _ G ['style'] ['tplfile'])} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} portal. js? {VERHASH} "> </script> <! -- {/If} --> <! -- {If $ _ GET [diy] = 'yes' & ($ _ G [mod] = 'topic '| $ _ G [group] [allowdiy]) &&! Empty ($ _ G ['style'] ['tplfile'])} --> {subtemplate common/css_diy} <! -- {/If} -->

Replace

<! -- {If $ _ G ['basescript'] = 'Forum '| $ _ G ['basescript'] = 'group'} --> <Script type = "text/javascript" src = "/min/g = forum"> </script> <! -- {Elseif $ _ G ['basescript'] = 'home'} --> <Script type = "text/javascript" src = "/min/g = home"> </script> <! -- {Elseif $ _ G ['basescript'] = 'userapp'} --> <Script type = "text/javascript" src = "/min/g = userapp"> </script> <! -- {Elseif $ _ G ['basescript'] = 'portal '} --> <Script type = "text/javascript" src = "/min/g = portal"> </script> <! -- {/If} --> <! -- {If $ _ G ['basescript']! = 'Portal '& $ _ GET ['diy'] = 'yes' & ($ _ G [mod] = 'topic '| $ _ G [group] [allowdiy]) &&! Empty ($ _ G ['style'] ['tplfile'])} --> <Script type = "text/javascript" src = "{$ _ G [setting] [jspath]} portal. js? {VERHASH} "> </script> <! -- {/If} --> <! -- {If $ _ GET [diy] = 'yes' & ($ _ G [mod] = 'topic '| $ _ G [group] [allowdiy]) &&! Empty ($ _ G ['style'] ['tplfile'])} --> {subtemplate common/css_diy} <! -- {/If} -->

Open the Jincheng homepage and click the source code to see if the js in the header at the beginning is missing.

2. Modify the cache time of images, flash, css, and js

Set a long cache time for the above-mentioned items. For example, after the first visit, users do not need to download background images, flash, css, and js during the year. Of course, the premise is that you have not modified

The method is to modify the website root directory. htaccess File

Add the following code:

<Ifmodule mod_expires.c> <FilesMatch ". (html | htm) $"> Header set Cache-Control "max-age = 43200 ″ </FilesMatch> # Cache css, javascript and text files for one week <FilesMatch ". (js | css | txt) $"> Header set Cache-Control "max-age = 604800 ″ </FilesMatch> # Cache flash and images for one month <FilesMatch ". (flv | swf | ico | gif | jpg | jpeg | png) $"> Header set Cache-Control "max-age = 2592000 ″ </FilesMatch> # Disable cache for script files <FilesMatch "\. (pl | php | cgi | spl | scgi | fcgi) $"> Header unset Cache-Control </FilesMatch> </Ifmodule>

Iii. Summary

Well, these are the temporary optimizations. Through these optimizations, The yslow score of Jincheng bar has increased from 50 D to 80 + B, and the score for some pages is 90 +. overall, it is still very effective.

If you need to forward this article, please keep the Jincheng bar link. If you can help you make a friend Link, thank you very much...

Attach the Yslow rating for some websites in

Amazon D

AOL F

CNN F

EBay C

Google

MSN F

MySpace D

Wikipedia C

Yahoo! A

YouTube D

Author: Jincheng

Source: http://www.jincheng8.com.cn/thread-303-1-1.html