Home Backend Development PHP Tutorial 晋城吧对DiscuzX进行的前端优化要点_php技巧

晋城吧对DiscuzX进行的前端优化要点_php技巧

May 17, 2016 am 09:23 AM
Front-end optimization

最近,康盛的DX版本基本确定,至少短期内不会大变了,因此,我对晋城吧的整站进行了前端优化,把自己 所做的操作记录下来,一是有个记录,防止忘掉,二是和网上的朋友们共享下自己的心得。

前端优化 推荐工具

火狐浏览器+Yslow+google pagespeed+Firebug 具体下载地址 请自行百度

一、DX后台 及DIY的优化

1.首页DIY避免过多层的嵌套

DX的每一个框架都会产生非常多非常多非常多的 代码。我的首页已经尽可能简单了,结果光 DOM 有1600+,囧死我了。

所以,尽可能不要用过多的框架嵌套

2.避免过多的用户头像调用

首页的会员调用是使用重定向的,会减慢网页的速度,UCenter倒是能改为伪静态,但是目前是有BUG的,没有自定义头像 的会员头像是无法显示的

3.打开Gzip

在网站后台 或者到config.php文件 将Gzip打开

4.背景图尽可能重复利用,减少背景图的数量

各个栏目的背景图尽可能一样,这样可以重复利用图片,要找到美观和速度之间的平衡,这一条,我其实也还在不断的尝试 中,这里推荐监控宝的服务器访 问速度跟踪,可以全局掌握自己网站被用户访问时的速度状况。

5.打开并设置好后台的各种优化和缓存

关于这方面的资料很多,我就不在这里浪费时间了,(被pia飞~~~)

二、代码 及空间优化

1.利用minify压缩合并js

DX的CSS 基本合并的很好,一个页面一到2个,但是JS就很多了。打开你的模板的common目录的header.htm,看到么。密密麻麻的js ,而过 多的文件会造成连接过多,减慢速度。

这里我们利用minify将其合并 压缩 缓存

首先,下载minify的压缩包,解压,将min文件夹上传到网站根目录。

然后修改2个文件:

1.min 文件夹下的groupsConfig.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(

在上边的代码后边加上如下的代码

    '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.修改模板的header.htm

什么??这个文件在哪里????我被你们打败了。。

修改如下 ,将第一段代码 替换为第二段


                   
                   
                           
                   
                          
                           
                           
                           
                  
                         
                  
                          
                  
                  
                          
                  
                   {subtemplate common/css_diy}

替换为


                          
                   
                           
                   
                           
                   
                           
                   
                  
                          
                  
                   {subtemplate common/css_diy}

打开晋城吧首页,点开源代码 ,看看 开头 的 head 里的 js 是不是少了很多啊

2.修改图片、flash、css、js的缓存时间

为上述东东设置缓存一个长长的缓存时间。比如1年,那么在第一次访问后,用户在这一年中都不用下载背景图,flash,css,js 。当然前提是你没有修改

方法 是修改网站根目录.htaccess文件

加入如下代码


   
    Header set Cache-Control "max-age=43200″
   

    #cache css, javascript and text files for one week
  
    Header set Cache-Control "max-age=604800″
   

    #cache flash and images for one month
  
   Header set Cache-Control "max-age=2592000″
 

   #disable cache for script files
  
   Header unset Cache-Control
  

  

三、总结

恩,暂时的优化就是这些,通过这些优化,晋城吧 的yslow评分从50 D 上升到80+ B ,有些页面的评分为90+ A.总体还是很有效果的。

如果你需要转发此文,还请保留晋城吧链 接,如果能帮忙做个友链,那就太感谢了。。。

附上一些网站在07年Yslow的评分

Amazon     D

AOL        F

CNN        F

eBay       C

Google     A

MSN        F

MySpace    D

Wikipedia  C

Yahoo!     A

YouTube    D

作者:晋城吧

文章来源:http://www.jincheng8.com.cn/thread-303-1-1.html

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to improve the access speed of Python website through front-end optimization? How to improve the access speed of Python website through front-end optimization? Aug 05, 2023 am 10:21 AM

How to improve the access speed of Python website through front-end optimization? With the development of the Internet, website access speed has become one of the important indicators of user experience. For websites developed using Python, how to improve access speed through front-end optimization is a problem that must be solved. This article will introduce some front-end optimization techniques to help improve the access speed of Python websites. Compress and merge static files In web pages, static files such as CSS, JavaScript and images will take up a lot of bandwidth and load.

The key optimization mode to improve website speed, every front-end developer must master! The key optimization mode to improve website speed, every front-end developer must master! Feb 02, 2024 pm 05:36 PM

A must-have for front-end developers: master these optimization modes and make your website fly! With the rapid development of the Internet, websites have become one of the important channels for corporate promotion and communication. A well-performing, fast-loading website not only improves user experience, but also attracts more visitors. As a front-end developer, it is essential to master some optimization patterns. This article will introduce some commonly used front-end optimization techniques to help developers better optimize their websites. Compressed files In website development, commonly used file types include HTML, CSS and J

React Mobile Adaptation Guide: How to optimize the display effect of front-end applications on different screens React Mobile Adaptation Guide: How to optimize the display effect of front-end applications on different screens Sep 29, 2023 pm 04:10 PM

React Mobile Adaptation Guide: How to optimize the display effect of front-end applications on different screens. In recent years, with the rapid development of the mobile Internet, more and more users are accustomed to using mobile phones to browse websites and use various applications. However, the sizes and resolutions of different mobile phone screens vary widely, which brings certain challenges to front-end development. In order for the website and application to have good display effects on different screens, we need to adapt to the mobile terminal and optimize the front-end code accordingly. Using Responsive Layout Responsive layout is a

Ensuring a maintainable WordPress meta box: completing the front-end part Ensuring a maintainable WordPress meta box: completing the front-end part Aug 27, 2023 pm 11:33 PM

In this series of articles, we’ll review some tips and strategies you can use to build a more maintainable WordPress plugin, and we’ll do it all within the context of a plugin that utilizes tabbed meta boxes. In the previous article, We implemented functionality specifically for our tabs and also implemented a first textarea which will be used to capture some user input. For those of you who have been following, you know we only did: Make the tabs functional Introduce a single UI element that the user can interact with We haven't gone through the actual process of cleaning, validating, and saving the data, nor have we bothered to introduce the rest of the options The contents of the card. In the next two articles, we will do exactly that. Specifically, in this article, we will continue

Reveal the secret of front-end optimization: make the website load quickly! Reveal the secret of front-end optimization: make the website load quickly! Feb 02, 2024 pm 09:11 PM

The big secret of front-end optimization: make the website speed fly! In today's Internet era, websites have become an important channel for people to obtain information and communicate. However, with the popularity and development of the Internet, users have increasingly higher requirements for website speed. Once the website loads too slowly, users are likely to leave or even switch to a competitor's website. Therefore, website speed optimization becomes crucial. This article will reveal the techniques and methods of front-end optimization to help you make your website faster! Compressing and merging files In front-end development, a lot of C is usually used

Application and optimization of WebMan technology in online business platform Application and optimization of WebMan technology in online business platform Aug 26, 2023 pm 09:15 PM

Application and optimization of WebMan technology in online business platforms Introduction: With the development of the Internet, more and more business activities have been transferred to online platforms. The online business platform has the advantage of being available around the clock and across regions, providing merchants and consumers with a broader market and a more convenient transaction method. In this process, WebMan technology plays an important role. This article will introduce the application of WebMan technology in online business platforms and propose some optimization methods. 1. Application of WebMan technology in online business platform

Try these front-end optimization tips to improve website speed! Try these front-end optimization tips to improve website speed! Feb 02, 2024 pm 05:02 PM

Website too slow? Try these front-end optimization patterns! With the rapid development of the Internet, websites have become the main way for many people to obtain information and interact. However, website speed is very important to user experience. If a website loads slowly, users may become impatient and leave quickly. In order to solve this problem, front-end optimization has become an important topic. Front-end optimization is a collection of techniques and strategies designed to improve the performance and loading speed of your website. The following introduces several common front-end optimization models to help you optimize your website and improve user experience.

How to improve the rendering speed of Python website through front-end optimization? How to improve the rendering speed of Python website through front-end optimization? Aug 06, 2023 am 08:36 AM

How to improve the rendering speed of Python website through front-end optimization? Overview: With the rapid development of the Internet, users have increasingly higher requirements for website loading speed. For Python websites, front-end optimization can play an important role in helping to improve the rendering speed and user experience of the website. This article will introduce some common front-end optimization techniques and how to implement them in Python websites. 1. Compress and merge static resources: Static resources such as CSS, JavaScript and images take up a large part of the website loading time.

See all articles