之乎者也2011

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

wordpress 并不是那么智能,我们都知道插件太多的情况下,网站打开速度会越来越慢,而php绝对不会是性能的瓶颈,因此,一个原因可能是因为过多的mysql查询,增加了系统负载。这个问题,插件 super cache (全静态化缓存)可以轻松解决掉,那第二个原因呢,也许就出在网站的前端上了。比如,插件会有自己的JS/CSS/img文件读取方式,从而产生出了过多 的HTTP请求。这些多余的请求以及加载方式,同样也有办法被轻易的解决掉。这里我以我的网站为例,加以说明。令人欣慰的是,优化后,我的网站速度有了明 显提升(打开速度应该快30%以上),Yslow评级从 C 上升到 A

优化前

1.这是Firefox的插件 Firebug 抓取的瀑布式HTTP请求


可以看到,优化前,我的网站有15个HTTP请求。耗时1.09秒

2.然后分别用Firefox插件 PageSpeedYslow 进行一些分析,优化前,我的Yslow评分为C,同时也智能的列出了一些优化方案,事实上,我们的要做的工作就在其中。

减少HTTP请求

  • 可以看到共产生的15个HTTP中,有1个来自html文档,4个来自CSS,3个来自JS,2个来自blog图片,5个来自CSS中使用的背景图片
  • 其中的3个CSS 请求来自插件:Pagenavi,EasyArchives,Syntax。分别读取了自己的css文件,而事实上,完全可以将他们的样式写入 style.css 内,然后再后台设置插件不读取自己的CSS,从而减少3个HTTP请求
  • 其中的5个CSS背景图片,可以用PS进行合并,合成一张图片,然后用 background-position 来显示。这样又可以减少4个HTTP请求
  • 之后,还有3个JS文件,一个来自插件 Collapsing Categories,一个来自 google 分析,另一个是整站使用的 Jquery 库。还算OK。因为我已经在后台将插件 Collapsing Categories 自带的 Jquery 库禁用
  • 最终,我们已经减少了7个HTTP请求,将总请求数减少了 40%

gzip压缩

  • 我们知道,GZIP压缩可以非常有效的减少传输的数据量大小(可降低40%-60%)
    数据量小了,从服务端返回给浏览器的时间也就缩小了。
  • 推荐一个在线工具,可检查文件是否被gzip压缩
  • Gzip需要去服务器进行设置,并且需要支持http1.1协议的浏览器(只要不是IE5),Linux下的Gzip安装及其配置方案可以 看这篇文章
  • 如果你用的虚拟服务器,可以在.htaccess文件中加入:
    <IfModule mod_deflate.c>
     DeflateCompressionLevel 7
     AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
     AddOutputFilter DEFLATE css js
    </IfModule>

增加Expires时间

    • 毕竟返回304响应还是会请求服务器,所以延长缓存时间,直接从浏览器取cache可以大大的减少网站打开速度
    • 此方案需要服务器安装Expires模块,不过一般都会默认安装的(如没有,可以单独编译 mod_expires 模块解决)。所以我们要做的,只需配置 .htaccess 文件
<IfModule mod_expires.c> 
    ExpiresActive On 
    ExpiresDefault A604800 
    ExpiresByType text/css "access plus 2 month"  
    ExpiresByType application/x-javascript "access plus 2 month" 
    ExpiresByType image/gif "access plus 2 month" 
    ExpiresByType image/jpeg "access plus 2 month" 
    ExpiresByType image/png "access plus 2 month" 
    ExpiresByType image/x-icon "access plus 2 month" 
    ExpiresByType image/x-ico a2592000 
    ExpiresByType application/x-shockwave-flash A2592000 
</IfModule>

CDN

  • CDN就是按地理位置去寻找离客户端最近的服务器,对静态内容非常管用,比如图片,视频。但是一般CDN的架设非常昂贵,不建议个人blog使用
  • 不过,貌似有免费的CDN服务,可以去google一下

JS放到尾部,CSS放到头部

  • 将 JS 文件放到尾部,可避免下载JS时阻塞网络,影响并行下载。尤其对图片比较多的网站影响较大。因为浏览器在下载JS时,会等到JS文件全部下载完后,再进行余下的组件下载,所以将一些JS文件放到最后,让他不影响图片的下载,是个不错的选择
  • 将 CSS 文件放到头部,可避免页面白屏,影响用户体验。这个大家都懂。你把CSS文件去掉,看看网站什么样就明白了。

减小JS文件大小

  • 利用 JSmin 工具 ,可智能化去掉空格、回车、注释,减小JS文件约30%的大小。同理,因为文件大小的减少,可减少服务器返回响应的时间。
  • 这里需要说明的是,我按照官方的方法没成功,即
    运行 jsmin.exe,输入:jsmin <script.js> small_script.js 没反应?
    于是只好cmd,输入:D:\jsmin\jsmin.exe <D:\jsmin\script.js> D:\jsmin\small_script.js

删除ETags

  • ETags 的问题在于它们是基于服务器唯一性的某些属性构造的。而当今大部分网站都是使用服务器集群来处理请求,这样Etag不容易命中。因此,若不需要用到ETags系统提供的灵活的验证机制,最好删除 ETag。
  • 再说,Last-Modified头已经提供了基于元素时间戳的验证,而且删除ETag会减少 http 响应头的大小
  • 只需在httpd.conf文件最后添加一行:FileETag none

优化后

  • 我的blog访问速度得到了很大的提升,首页的HTTP请求降为:8个,耗时0.62秒。性能提升在30%-40%左右
  • Yslow评分为:A ,很荣幸跟 google,baidu 同级~哈哈

http://www.auu.name/423/index.html

posted on 2011-09-05 06:03  之乎者也2011  阅读(361)  评论(0编辑  收藏  举报