Jincheng bar on the front-end optimization of DISCUZX _php skills

Recently, the DX version of Kangsheng is basically determined, at least in the short term will not change greatly, therefore, I to Jincheng bar of the whole station for the front-end optimization, the operation of their own record down, one has a record, to prevent forgetting, and the second is to share with the online friends of their own experience.

Front End Optimization Recommendation tool

Firefox browser +yslow+google pagespeed+firebug specific download address please own Baidu

First, the DX background and DIY optimization

1. Home DIY Avoid too many layers of nesting

Each of the DX's frames produces very much, much more code. My home page has been as simple as possible, the result of light DOM has 1600 +, embarrassing me.

So, try not to use too many frames to nest

2. Avoid excessive user avatar calls

Homepage member call is to use redirects, will slow down the speed of the page, Ucenter can be changed to pseudo static, but there is a bug, no custom avatar member Avatar is unable to display

3. Open gzip

In the background of the Web site or to the config.php file will be gzip opened

4. The background map is reused as much as possible to reduce the number of background maps

The background of each column as much as possible, so that you can reuse the picture, to find the balance between the beautiful and speed, this one, I actually also in the constant attempt, here recommend the Monitoring Treasure server access speed tracking, you can grasp the overall site by the user when the speed of the situation.

5. Open and set up the background of the various optimizations and caching

A lot of information on this, I do not waste time here, (by the PIA Fly ~ ~ ~ ~ ~)

Ii. Code and Space optimization

1. Use minify compression to merge JS

DX's CSS basically merges very well, one page to 2, but JS is a lot of. Open your template to the common directory of Header.htm, see. Dense JS, and too much of the file will cause too many connections, slowing down speed.

Here we use minify to merge it into a compressed cache

First of all, download the minify compression package, decompression, the Min folder uploaded to the site root directory.

Then modify the 2 files:

The groupsconfig.php under the 1.min folder

<?php /** * Groups configuration for default Minify implementation * @package minify */ /** * Wish to use the Minify URI Builder app to suggest * Changes. http://yourdomain/min/builder/ **/ Return Array (

Add the following code behind the code above

' 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 header.htm of the template

What the?? Where is this file???? I was beaten by you.

Modify the following to replace the first piece of code with the second paragraph

<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][al Lowdiy]) &&!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 '] [' t Plfile '])}-->{subtemplate common/css_diy}<!--{/if}-->

Replaced by

<!--{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][al Lowdiy]) &&!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 '] [' t Plfile '])}-->{subtemplate common/css_diy}<!--{/if}-->

Open Jincheng Bar Home, point open source code, look at the beginning of the head of JS is not a lot of AH

2. Modify the image, Flash, CSS, JS cache time

Cache a long cache time for the above Dongdong settings. For example 1 years, then after the first visit, users do not have to download the background map, Flash,css,js in this year. Of course, if you didn't change it.

The method is to modify the Web site 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>

Third, summary

Well, the temporary optimization is these, through these optimizations, the Jincheng bar's YSlow rating rises from D to 80+ B, and some pages are rated 90+ a. The whole is still very effective.

If you need to forward this article, please keep the Jincheng link, if you can help to make a friend chain, it would be too grateful ...

Attached to some websites in 07 YSlow ratings

Amazon D

AOL F

CNN F

ebay C

Google a

MSN F

MySpace D

Wikipedia C

Yahoo! A

YouTube D

Author: Jincheng Bar

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