Aug 5, 2009

CSS 优化工具

现在网页制作中采用CSS/XHTML技术,可以有效地对页面以及各种元素的布局、字体、颜色、背景和其它效果实现跨浏览器的精确控制。但是,就算是简单的博客,所包含的CSS文件就可能很大。举个简单的例子,WordPress theme的CSS文件有时就多大20k。从网页速度优化的角度来说,CSS有很大的可压缩空间。

CSS优化工具是一款基于CSS Tidy 的强大CSS优化器。它可以根据你的需要对CSS进行精简优化,提高网页加载速度。

之前我使用的优化工具是CSS Tweak,不过在使用了一段时间后,我却发现这个网页已经不复存在了。 为了方便自己使用,就在自己网站上安装了这款开源工具。也希望能给其他人一点帮助。

用法很简单:
把你的CSS代码复制进去,然后根据需要选择不同的压缩方式就可以了。一般建议自己保留一份未压缩的,然后网站上使用的css文件用最大压缩比方式(就是下拉菜单的第一个选项)来压缩。

Tags:     
Post by SUN @ 3:24 pm | 随笔杂谈 | Comment (0)
Apr 18, 2007

搜索机器人访问控制

关键词:搜索 机器人 Web Spider php

主页在载入速度对浏览者来说是一个比较关键的因素。一般来说,浏览者的容忍极限为5s左右,如果读取时间大于5s,浏览者往往会选择放弃。因此,我采用了现在的Live Archive方式,用 http://blog.znsun.com/archives.html 来代替我现在的主页,同时对该页面内的内容进行精简,将内容控制在80k以内,以提高那些新访问者的速度。

但是,相应的问题也来了。Live Archive的结构不利于搜索机器人(Web Spider)爬行,且它调用了不少的javascript内容,搜索机器人(Web Spider)无法跟踪;其次,正常主页上的诸多好友链接也被“精简”,影响了交互。虽然部分问题可以用设定robots.txt的方式来弥补,但是还是有些欠缺。

因此做了如下的处理:

  1. 让用户可以自己设定浏览方式。
    用户可以通过点击左侧“我的网站”中的Live Archive/Normal Mode 来切换浏览主页的方式,同时结果保存在浏览器Cookies中,下次用同一台电脑访问时候,系统会自动根据用户喜好选择不同的浏览方式。比方说我自己就采用正常浏览方式,因为大量的内容已经被缓存在我的浏览器中,对我来说速度已经不是瓶颈问题。
  2. 将搜索机器人(Web Spider)直接引导到正常的主页,使得他们能够收集更详细全面的信息,包括我的诸多好友链接。主要参考了该网页,精简为下面的一段代码:

    $UA=$_SERVER['HTTP_USER_AGENT'];
    if eregi("Googlebot|Yahoo|VoilaBot|Ask Jeeves|SpeedySpider|MSNbot|Yahoobot|Baiduspider|Sohubot|Lycos|Robozilla|Inktomi Slurp|larbin|spider|crawlGoogle AdSense|EchO!|Magpie|InternetSeer|Magpie|Alexa|The World Wide Web Worm|Voyager|robot|Speedy Spider|Motor|AskJeeves|GigaBot|The Python Robot|MSIECrawler|GetBot|SurveyBot|Fish search|Netcraft",$UA) //大小写没有影响
    {$file = "/home/znsunima/public_html/wordpress/index2.html";
    ob_start('ob_gzhandler');
    echo implode('', file($file));
    ob_end_flush();}
    else
    header("Location: http://blog.znsun.com/archives.html"); //见注¹

上面代码的原理是利用HTTP_USER_AGENT参数来判断是否为搜索机器人²,如果是,返回压缩过的正常主页;反之,返回Live Archive版本的主页。如果你用的是firefox,可以通过在地址栏输入“about:config”,新增general.useragent.override 字段后设定User_Agent来测试。

注¹. 其实其中的archives.html其实我也用php压缩过了,因为我的服务器不支持html格式的直接压缩
注². 网上的机器人很多,我只列了访问过我网站的和其他一些常见的Spider。

Tags:   
Post by SUN @ 12:07 pm | 与时俱进, 网站更新 | Comment (1)
Apr 6, 2007

优化WP-Cache:Wordperss优化手册(2)

关键词:WP-CacheWordpress优化加速Gzip

注:
♣ 本文是加速Wordpress-终极优化手册一文的补充,强烈建议您先参考终极优化手册后再看此文。
♣ 本文的方法只适用于单作者(不开放注册)的wordpress系统(但我相信目前绝大多数wordpress系统都是不开放注册的)。

加载WP-Cache插件是wordpress中最为常用的一种优化方式,同时,php程序本身也提供了一种非常强大的优化方式,也就是Gzip压缩传输。非常遗憾的是,WP-Cache插件要求关闭wordpress的内置gzip压缩功能。因此,我们要实现的就是在WP-Cache中使用Gzip的功能。这一思路的实现,我在终极优化手册中已经提到:

打开wp-cache-phase1.php,大概在35行左右找到如下代码:

foreach ($meta->headers as $header) {
header($header);

在此代码前添加下面的代码:

if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');

OK,现在问题来了。
让我们深入分析一下加了Gzip功能的WP-Cache的工作原理:
首先,WP-Cache在用户第一次访问页面的时候,将生成的页面传输给用户,同时在服务器上缓存了页面,这第一次传输给用户的页面是没有用gzip方式压缩的。
第二,我们看wp-cache-phase1.php中的最后一个函数function wp_cache_get_cookies_values(),不难发现wp-cache是根据访问者的email来判断是否为同一用户的。问题就在WP-Cache的的这个判断机制上:

WP-Cache为不同的用户生成了不同的缓存页面。而这些用户第一次访问某一页面时候,WP-Cache发送的都是未经过Gzip压缩的页面。因此,除非这些用户再次访问该页面,否则他们都是享受不到Gzip压缩带来的好处的。

既然知道了问题的症结所在,解决的方法也就显而易见了。我们可以换用判断用户网址的办法来判断是否为同一用户,因为大多数用户都不会填写网址。这样用户A访问后,其他的BCDE等用户来访问,系统一般都会将用Gzip压缩过的页面传输给他,大大提高了缓存页面的利用率。但是这会产生一个新的问题:当用户A访问某一页面后,缓存页面中也就保留了他填写的用户名和email地址(comments.php中用php来读取缓存)。这个问题很好解决,我们可以用javascript来读取缓存

现在要做的就是修改代码了:
在wp-cache-phase1.php文件中找到如下代码

if (preg_match("/^wordpress|^comment_author_email_/", $key)) {

在前面加上//将其comment out,随后在该行的下一行添加如下代码:

if (preg_match("/^wordpress|^comment_author_url_/", $key)) {

接着,打开你的theme中的comments.php文件,找到填写comment的表单部分,这里以theme/default下的文件为例:

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"

将其中的 value="<?php echo $comment_author; ?>"删除。并以此类推,删除表单中email和url的value项。
随后,我们在紧跟表单后的<?php endif; ?>之前添加如下的代码,用以读取用户的Cookies:

<script type="text/javascript">
//<![CDATA[
// Set cookies
var aCookie = document.cookie.split("; ");
function GetCookie(sName, id)
{
// cookies are separated by semicolons
var something = document.getElementById(id);
// set value to NULL for new visitors
something.value="";
if(!something) return 0;
for (var i=0; i < aCookie.length; i++)
{
// a name alue pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{
//reading cookie value
something.value=unescape(aCrumb[1]);
return 1;
}
}
// a cookie with the requested name does not exist
return 0;
}
GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "author");
GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");
//]]>
</script>

请注意,其中的"comment_author_"中的长串字符为系统生成,请自行查找后替换。(我是用firefox的web developer插件看cookie的名字的)OK,把所有修改过的文件保存一下,上传,试试下效果吧。

Tags:     
Post by SUN @ 10:53 pm | 与时俱进 | Comments (14)
Mar 19, 2007

WP Real Static Homepage

PLEASE Scroll down for Chinese version

This plugin enables the wp system to convert your dynamic homepage to static index.html, more importantly, keep the content up to date. It can speed up the loading for your homepage.

Readme:

  1. Plugin WP-Cron is needed for this plugin, I've packed WP-Cron v 1.4 in the zip file.
    Please upzip all the files to plugins/static-index, so that it look like:
    ------plugins/
    ------------static-index/
    ----------------static.php
    ----------------wp-cron-static-index.php
    ----------------wp-cron.php
  2. Active two plugins :WP-cron and WP-Cron Static Homepage.
  3. Create a file named index.html in your blog root folder, set
    666 permissions for it.

Well, the system will update index.html automatically (per 15 mins), you may hack wp-cron.php at line 49 to change the time for scheduled exection actions.

More Tips:

  1. You may use the following php to refresh homepage when comments come in.

    <?php
    include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php");
    ?>

  2. The following script is to demo how to set cookies in the html files.

    <script type="text/javascript">
    function GetCookie(sName, id)
    {
    // cookies are separated by semicolons
    var something = document.getElementById(id);
    if(!something) return 0;
    for (var i=0; i < aCookie.length; i++)
    {
    // a name alue pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    {
    if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
    something.value = decodeURI(aCrumb[1]);
    else
    something.value=unescape(aCrumb[1]);
    return 1;
    }
    }
    // a cookie with the requested name does not exist
    return 0;
    }
    //please fill in with your own cookie id
    GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
    GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
    GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

Post by SUN @ 7:32 am | 我的页面 | Comments (7)
Mar 16, 2007

WP Static Homepage

PLEASE Scroll down for Chinese version

This plugin enables the wp system to convert your dynamic homepage to static index.html, more importantly, keep the content up to date. It can speed up the loading for your homepage.

Readme:

  1. Plugin WP-Cron is needed for this plugin, I've packed WP-Cron v 1.4 in the zip file.
    Please upzip all the files to plugins/static-index, so that it look like:
    ------plugins/
    ------------static-index/
    ----------------static.php
    ----------------wp-cron-static-index.php
    ----------------wp-cron.php
  2. Active two plugins :WP-cron and WP-Cron Static Homepage.
  3. Create a file named index.html in your blog root folder, set
    666 permissions for it.

Well, the system will update index.html automatically (per 15 mins), you may hack wp-cron.php at line 49 to change the time for scheduled exection actions.

More Tips:

  1. You may use the following php to refresh homepage when comments come in.

    <?php
    include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php");
    ?>

  2. The following script is to demo how to set cookies in the html files.

    <script type="text/javascript">
    function GetCookie(sName, id)
    {
    // cookies are separated by semicolons
    var something = document.getElementById(id);
    if(!something) return 0;
    for (var i=0; i < aCookie.length; i++)
    {
    // a name alue pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    {
    if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
    something.value = decodeURI(aCrumb[1]);
    else
    something.value=unescape(aCrumb[1]);
    return 1;
    }
    }
    // a cookie with the requested name does not exist
    return 0;
    }
    //please fill in with your own cookie id
    GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
    GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
    GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

Post by SUN @ 5:22 pm | 与时俱进 | Comments (2)
Mar 10, 2007

优化Wordpress-wp终极优化手册

本文已于2009年08月21日再次更新

更新:关于wp-cache的优化,请参见本站新作:
优化WP-Cache:Wordprss优化手册(2)

Wordpress的功能非常强大,诸多的插件、花哨的界面,使得它的读取速度也大大降低。因此,如何优化以加快访问者的浏览速度便成了wper们思考的问题。我将诸多高手的方法进行了整理和总结,再结合自己优化的经验汇成此文,希望能对大家有所帮助。

To be, or not to be: that is the question:
这是我想讨论的第一个问题----就是有没有必要做优化。在我看来,绝大多数个人博客是不需要做优化的。花很多时间对一个日访问量不到100的博客做优化还不如花这点时间来好好充实自己的博客内容。
在准备自己的个人博客时最应该考虑的有2个问题。

  • 首先是选一个合适的Linux主机。
  • 其次尽可能使用最新版本的WordPress,新版本在后台有很大的改进,方便你自己使用、更新。

当你博客的访问量稳步上升后,优化才是你应该考虑的问题。

  1. 优化所有的图片(images):
    图片其实是影响网页读取速度的关键,稍大一些的图片就可能达到100K;因此,在上传自己的图片之前,务必用Photoshop的"保存至网页"(save for web)功能,对图片进行优化。(例如,保存成GIF, PNG格式等等)


  2. 关闭一切不必要的插件(plugins):
    在安装插件之前,首先问一下自己,你是否必须要此插件。尽可能的减少插件数量。


  3. 开启缓存(Cache)功能:
    • 首先你可以开启WordPress自带的缓存功能:
      打开WP根目录下的wp-config.php文件,在最后一行之前添加 define('ENABLE_CACHE',true);
      将WP-content目录下的cache目录属性改为777,以保证系统能够写入cache。
    • 如果您的blog日访问量在200以上,建议安装WP-Cache或者WP Super Cache插件,否则不推荐使用。我自己使用的是WP-Cache。
    • 让WP-Cache也用上Gzip:
      如果你安装了WP-Cache,一定知道WP-Cache要求必须关闭WP的内置GZip功能,但是我们可以在wp-cache-phase1.php中添加代码来实现Gzip压缩功能。 打开wp-cache-phase1.php,大概在35行左右找到如下代码:

      foreach ($meta->headers as $header) {
      header($header);

      在此代码前添加下面的代码:

      if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');
  4. 减少HTTP请求---合并JS和CSS文件:
    不少插件都有自己的JS文件,系统在读取这些文件时候会产生大量的http requests,产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并,会减少很多HTTP请求,大大加快页面的读取速度。
    但是我不建议大家自己手动合并代码,这里我采用的是阅微堂的合并的方法
    具体是建立一个新的all.js.php文件,内容是:

    <?php
    require_once('目录/wp-blog-header.php' ) ;
    include ("/blog/a.js" ) ;
    include ("/b.js" ) ;
    ?>
    

    其实就是将header.php里面的那些js文件都include到all.js.php,然后在header里面包含all.js.php文件即可:

    <script xsrc="all.js.php" type="text/javascript"/>

    另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过

    add_action('wp_head','fun' );

    这样的钩子添加到head里面的。在function函数的定义处去掉对应的代码,或者直接把这条语句删除即可。
    对CSS文件也可以用同样的处理方式。CSS文件一般都不多,这时候可以直接手动把它们都贴到一起。 另外js文件的载入位置也很重要,放在越后面越好,让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。

  5. 合理放置css文件和js文件:
    一般来说,css文件放在页面头部,而JavaScript脚本则最好放在页面尾部,让浏览器先下载html代码。像Google Analytics 或者Google Ajax Search 这样的大型js代码最好放在文件最后。
  6. 压缩代码:
    1. 在管理界面的 Options->Reading选项中,开启WP自带的压缩功能(WordPress should compress articles (gzip) if browsers ask for them)
    2. 利用CSS 优化工具压缩CSS代码,注意。为了方便自己编辑,最好保留一份未经过压缩的代码。
    3. 利用Shrinksafe 压缩JS代码,同样的,最好保留未经过压缩的JS代码,以便将来更改时候便于阅读。
  7. 静态化处理:
    为了免得生成太多的文件,我只对首页做初始化。其实这个想法和用WP-Cache差不多,所不同的是 WP-Cache生成缓存页面是靠浏览完成,而我说的方法却是由服务器来完成。我的网页中,Comments都是用javascript实时显示的,所以我要做的只是在更新或添加post后刷新一次主页。所用的程序如下:
    <?php
    function wwwcopy($link,$file)
    {
    $fp = @fopen($link,"r");
    while(!feof($fp))
    {
    $cont.= fread($fp,1024);
    }
    fclose($fp);
    $fp2 = @fopen($file,"w");
    fwrite($fp2,$cont);
    fclose($fp2);
    }
    //Example on using this function
    wwwcopy("您的动态网页(如http://blog.znsun.com/index.php)", "放置静态网页的绝对地址(如/home/znsunima/public_html/wordpress/index.html)");
    ?>
    

    记住要把index.html的属性设置成666,这样结果就是别人访问你的网站时候,会直接先读取静态的首页,大大加快了速度。

    当然,如果你需要更多静态化页面的帮助,也可以考虑安装 cos-html-cache 这个插件。

  8. 利用Gzip对css、js还有html文件进行压缩:
    这步其实是第六步的延续,因为gzip的压缩比很好,以至于我们可以不用预先压缩css和js代码就可以达到很好的压缩比。
    首先建立一个文件style.css.php,放在自己的theme目录里面。然后在header.php文件中把读取style.css改为读取style.css.php。 随后在style.css.php文件添加如下代码:

    <?php
    if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
    header("Content-type: text/css");
    # echo the file’s contents
    include($_SERVER['DOCUMENT_ROOT']."/wp-content/themes/default/style.css");//请自行更改css文件位置
    if(extension_loaded('zlib')){ob_end_flush();}
    ?>
    

    js文件的压缩方法相同,把all.js改名all.js.php,然后将上面要添加的代码中的text/css改成text/javascript即可。

    而html文件,可以用rewrite的方法,比方说我的index.html事实上是利用php读取的index2.html规则,请在.htaccess文件中添加如下代码:

    RewriteRule index.html /readhtml.php [L]

    readhtml.php文件的内容和之前读取css文件的类似:

    <?php
    if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
    header("Content-type: text/plain");
    # echo the file’s contents
    include($_SERVER['DOCUMENT_ROOT']."/index2.html");//请自行更改html文件位置
    if(extension_loaded('zlib')){ob_end_flush();}
    ?>
    
  9. 利用Image Map减少meta部分的image读取量:
    本部分比较复杂,如不懂可跳过。
    在阅读这部分内容之前,你可以点一下这个链接Image
    你所看到的就是我这个博客使用的背景图。其实现原理就是把一些常用的image用一个大的image来代替,并且在css文件中设置为背景。然后利用div的控制实现鼠标的悬停指向。

    这里以我siderbar下方的meta图标为例。
    我使用的Two Columns的模版,因此,除了index.php文件外,还会有一个siderbar.php文件,meta信息都会放在这个文件中。一般我们在 meta部分会添加不少图标,所以我们可以将不同的图标放到一个大的gif文件中,然后利用Slice Tools对图片进行分割。

    分割完成可在每个Slice上右击鼠标,读取Slice的属性,记下 下图中的X,Y,W,H坐标值。
    如图所示的就是图标Creative Commons的坐标(可点击看大图)。

    接着在CSS文件中建立一个class

    .creativec	{
    float:left;
    margin-top:2px; //可自己更改
    margin-left:0px; //可自己更改
    background: url(images/bg.gif) no-repeat -41px -82px; //前者为X坐标,后者为Y坐标
    width: 110px;
    height: 29px;
    }
    

    有人还会在上面这段css定义中添加一句:

    text-indent: -9900px;

    主要用来将文字隐藏,但我不建议这样做,这样的话,在firefox中点击会出现长长的虚框,影响美观。
    我的做法是此链接的title文字部分,用“&nbsp;”。回到我的例子,我们就可以在sidebar.php添加如下的信息。注意我在写它的title时候用的是空格符号&nbsp;。

    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="Some Rights Reserved" class="creativec" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>
    

    把所有你会用到image都用这种方式修改。上传更改过的所有文件,重新读取,你会发现你网站loading的速度会快很多。你可以按照每个image所产生的http requests约为0.2s来计算。

    阅微堂还给出了一个全站静态化的绝好方法,值得借鉴,尤其是java读取cookie的方法,相信对不少人都会有用。

    还有一些方法或需要服务器根目录的读写权限,或者需要数据库的root权限,不具有普遍性,就不列出了。

    参考资料:

    1. 阅微堂:加快WordPress的页面生成和载入速度
    2. 4+1 Ways to Speed Up Wordpress With Caching
    3. 5 Ways to Speed Up Your Site

Tags:   
Post by SUN @ 10:35 pm | 与时俱进 | Comments (47)