网页优化要点

我多少有点强迫症,明知道这个博客访客并不多,但还是竭尽所能地调整了一切有可能影响用户体验的东西。目的很简单,只要任何一个访客轻轻松松点一下链接,等两三秒就可以舒舒服服地浏览我写的那些胡言乱语就行了。下面是自己的WordPress博客正在使用的一些优化策略,全写在下面了,以免有人以为我是技术博客。

图片存储:访问网站的时候基本上图片加载最慢,因此提高图片加载速度颇为必要,为此,我将不再文章内出现的图片全部采用了GIF格式,首页有10张,加起来大概30KB,全部撂到了专门在又拍网(Yupoo)注册的放这10张图片的外链帐号上面,每月1G免费流量能够坚持35000次新点击,明显够用。但还是有个缺点我解决不了,因为首页有10张图片就会有10次请求,会拖慢加载速度,我尝试使用CSS Sprites把这基本图片合并成一张,然后定位分割,可是学了一上午毫无成效,以后再说吧。

统计代码:一年以来我把国内所有的流量统计网站全部注册试用了,到现在又回到了51la统计。这款统计程序最适合小流量网站使用,它能统计每个来源的IP和点击的页面。对比其他程序,百度和GA统计不支持IP统计,Gostats不能显示来源城市,量子统计显示来源页面不全;但是51la有一个缺点,它要显示统计图标,戴着用户违约的帽子,我一狠心给隐藏了。其实51la可以参照Gostats,提供一些收费隐藏统计图标的功能,最好价格低点。

分享图标:在文章页(single.php)的下方一般都会有分享功能,有些站长采用了插件方式实现。为了在新浪微博和腾讯微博显示分享来源地址,我以前直接在文章结尾添加代码,虽然不能添加twitter和facebook的分享按钮,但主要的分享来源地址已经解决,然而又出现了新的麻烦,由于按钮代码太多,文章单页加载速度变慢了。现在我找到了新方法,采用了Passit,它和Jiathis的区别在于能够添加新浪微博和腾讯微博的appkey,仍然能够显示访问来源。和所有分享功能一样,Passit也有恶心的弹出分享窗口,于是我建了一个框架,把弹出窗口给取消了,并且重新和“分享到:”定位,调试好后基本看不出来是采用了什么方式实现的。

取消Passit弹出窗口的方法如下:

编辑single.php,把Passit调用代码应用在你希望放置的地方:


<small><div style="border:0px solid;width:262px;height:16px;">
<span style="float:left;">分享到:</span>
<span style="float:right"><span class="passit_def_div"></span></span>
</div></small>


再把Passit的script放置在index.php或者single.php最下面,为了不影响首页速度,我放在了single.php:


<script type=”text/javascript”>
var passit_title = “”;
var passit_url = “”;
var passit_content= “”;
var passit_image= “”;
var sina_appkey= “3404202488″; //改成你自己的appkey可以显示分享来源,或留空
var qq_appkey= “″; //改成你自己的腾讯微博appkey或者留空
</script>
<script type=”text/javascript”>
bookmark_service_div=”qq,kxzt,qqxy,baiduHi,bookmark,baidu,douban,sohuweibo,163weibo,more”;
bookmark_service=”qqkj,douban,sinaweibo,xnzt,qqweibo,facebook,twitter”;</script>
<script type=”text/javascript” src=”http://www.passit.cn/js/passit_default_new.js?pub=0&simple=1″ charset=”UTF-8″></script>


JS放置:为了减少不必要的加载,当一个页面需要JS的时候,我才把JS放置到这个页面上,这种方法主要减少了首页的压力。但是有缺点,每打开一篇文章的时候就要加载一次JS,对速度依然有影响。不过我觉得让人家飕飕地打开首页总比等很久好一点,内页将就一下吧。

CSS合并和压缩:首页的分页导航我使用了插件实现,为了减少读取次数,我把分页导航的CSS合并在了了主题CSS里面。为了继续提高CSS下载速度,还把style.css给压缩了,删除了无聊的注释,要更改的时候直接在原主题里改了再压缩复制进去。另外博客的CSS也存在了又拍云。

我把上面这些完成后,扣掉了2分CSS Sprites和1分统计代码,网页评分能打97,还行。

Posted in , , , . Bookmark the permalink . RSS feed for this post.
Made with ♥ in ChengDu. © 2009-2015 Jaz's Blog. All Rights Reserved. Powered by Blogger.