Tips: 使用 FireFox+FireBug 分析网页加载过程

Firebug是Firefox下的一款开发类插件,现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。~~引用: 初识Firebug 全文

安装好FireBug扩展后,在 FireFox 中打开FireBug的界面,扩展就可以捕获当前窗口(标签)的网页加载过程。如我按Ctrl+F5强制刷新访问博客首页 http://oneoo.com

 firebug-tips-01.gif firebug-tips-02.gif

  从左图最下方,我们可以看到整个页面加载浏览器发起了94个请求,总下载数据是146Kb,整个加载过程耗时5.24秒。而在右图,点击请求列表以展开显示该请求的详细信息,当中包括了服务器传回浏览器的Header信息,和浏览器向服务器发出请求的Header信息。这些Header信息对于普通用户来说,没什么特别意义,我就不在这里给大家阐述了。我们只需要找出影响页面加载速度的地方就足够了 :)

 firebug-tips-03.gif firebug-tips-04.gif

   从左图我们可以在请求列表上,很直观的就可以判断出哪些请求是比较慢的。查出原因就可以对症下药,想办法加快它的加载速度(通常是由我来想的)或删除之。而右图则是浏览器刷新访问时产生的请求列表,当中可发现很多请求只是304 Not Modify返回(即无需重新下载,使用浏览器缓存)结合下面的右图(普通点击访问)所产生的请求列表,来做一个综合性的分析,看看哪些请求在下载时的速度慢,和哪些请求是可以被浏览器缓存下来的(这个最重要)务求把普通点击访问所需要发起的请求数量降到最低(Yo2的博客最低可以只发起2个请求)我的博客已经做过认真的分析和优化,去除了第三方网站的访问统计,第三方网站的图片调用等等,与博客没什么必要关联的东西,可以说是最佳状态了。当然关闭yo2sns插件的访问统计功能,速度还能更快一些。

  但做事不一定要极端的,能把页面的加载耗时控制到10秒以下,基本ok :)

firebug-tips-05.gif firebug-tips-06.gif

  左图是我使用另一个扩展 Yslow分析得出的数据,左边的饼图是浏览器在没有任何缓存数据的情况下,将需要下载的页面元素,右边的饼图则是在浏览器有缓存数据的访问所需下载元素。 Yslow还可以给页面下载速度打分,要获取高分就得有很高深的优化能力了 _-!!不是一般人可以做得来,我的博客评分也只是60左右,勉强及格。

  我的博客页面上的元素非常多,达到 94个,能够获得5秒左右的加载速度,成绩算理想的。我个人评分是90分 :D 看过其他BSP提供的博客服务,个别经过精心优化(很少图片)的页面加载需要发起30多个请求,耗时在3~5秒左右。而部分华丽的BSP甚至一个页面就需要发起100多个请求,加载耗时超过10秒 _-!!什么音乐播放器、动态相册、广告等等的附加元素都挂到博客上,不慢才怪 _-!!

  博客是以内容为主打,千万别忘记这个宗旨。太多花哨的玩意不会增加流量。

Tips: 使用 Fiddler 分析网页加载过程

Fiddler 是一个http调试代理,它能够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddler 所有的“进出”的数据(指cookie,html,js,css等文件)

引用自:HTTP调试工具:Fiddler介绍一(翻译)

   Fiddler2 下载地址:http://www.fiddler2.com/fiddler2/version.asp

  安装好 Fiddler 并开启该软件,然后 Ie 浏览器的所有访问请求都将被 Fiddler 截获,我们会根据截获的内容进行分析:) 以下为全新访问(浏览器没有任何缓存数据) http://oneoo.com 所获得的截图:

fiddler-tips-01.gif fiddler-tips-02.gif

  软件界面上的左栏为打开该页面所产生的全部访问请求,其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据,包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。

  全选左栏的请求记录,并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间:

fiddler-tips-03.gif fiddler-tips-04.gif

   选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间(右图)。从左图的条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化(如果是第三方网站的服务调用,可以考虑去除)。而状态栏上可查看到整个页面所需要发送的请求总数。

  分析得出,我的博客首页总共有 84 个请求,其中两个比较大的图片耗时最多,全新的访客打开页面需要 9 秒时间。

  现在我们点Edit菜单Remove -> All sessions 清空记录,开始分析普通访客的加载过程 :)

 fiddler-tips-05.gif fiddler-tips-06.gif

   左图为用户点击链接访问,因刚才的访问已经让浏览器把大量的数据缓存下来,所以需要发送的请求数量很少,才5个,总耗时1秒。而右图为用户点击刷新按钮访问页面,因为是刷新访问,浏览器不会使用缓存数据,但会发送请求询问页面服务器浏览器上的缓存数据是否过期,所以会发送 84个请求。因为这些请求比较特殊,如果浏览器上的缓存数据跟页面服务器上的内容一致,那么服务器会返回 304 状态,而不需要重新下载内容的,所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。

  综合以上的全新访问、带缓存点击访问和带缓存刷新访问,三种形式测试得出的数据,可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。

  如果你觉得自己的博客打开速度慢,也可以试试用 Fiddler 来测试一下,看看到底是慢在哪个地方,做出优化 :D 通常国外的统计代码都比较拖时间的~

  Ok~ 下期将会推出 FireFox + FireBug 和 httpfox 扩展来分析网页加载过程的教程。(FeedSky 验证 ece410df)

使博客访问速度更快的技巧

  很多网友会发现,大家同样是使用 Yo2 的博客服务,怎么自己的博客打开速度比人家慢?嗯,虽然都是跑同样的服务器,同样的线路,但博客的设置各不相同,这样就会出现差距了。我作为 Yo2 的开发员,我给大家介绍一下如何设置自己的博客可以取得更快的访问速度 :)

  1. 不要频繁进入管理后台更改设置
    • 很多网友喜欢经常到管理后台更改一下设置,看到文章有点瑕疵就重新编辑发布等等,这些操作都会触发 Yo2 CDN 系统更新博客缓存,如果一个博客的缓存被更新,那么就需要重新生成这些博客页面了,打开一个缓存页面的速度比重新生成一个页面快很多。所以大家要改改这些习惯
  2. 打开博客的缓存加速功能
    • 在管理后台-设置-输出,可以打开博客的缓存加速功能,大家可以根据所使用的模板进行选择,那些页面组成部分可以让系统缓存(比如我的博客只有页首因为有当前页面标识的功能,而侧栏和页尾的内容都可以是固定不变的,那么我就打开了侧栏和页尾的缓存加速)。开启了页面组成部分的缓存加速,可以让在重新生成页面时,可以直接使用已缓存的页面组成部分,减少了部分的数据操作,相对生产页面所消耗的时间就得到减少了
  3. 尽量减少第三方网站提供的 JavaScript 、图片调用
    • 有些网友喜欢在自己的侧栏加入很多第三方网站提供的服务,比如播放器、Rss、图片、访问统计等等,甚至有人会加入多个统计代码。博客确实很多东西了,但随之而来的速度被拖慢了,如果调用了一些国外的服务,对博客的访问速度影响更大。我之前有加入过 google 的访问统计,但这个有比较长时间的页面显示延迟,为了获取更快的速度,我把它删了。之前我还是用了 FeedSky 的 JavaScript 方式显示订阅按钮,后来直接写成 Html 格式,都可以加快页面的显示速度。我建议大家尽可能把第三方的调用控制在2个以内
  4. 减少首页(列表页面)的文章数量
    • 文章中可能包含了一些图片,在单个文章显示时的速度还挺快,但首页(文章列表)中包含的文章数量多的话,也就代表该页要显示的图片是列表上的文章所包含总和。还有部分网友是使用其他相册提供的图片服务,如果这些相册的访问速度慢,同样对自己的博客有影响。我建议把首页(文章列表)一页显示的文章数量控制在 5 个左右,确实需要一下显示多个文章的话,可以选择摘要输出(不显示图片)
  5. 使用 CNAME 绑定域名(收费用户)
    • Yo2 在各个网络都部署有独立服务器节点,只有使用 CNAME 方式进行域名解析,才能使用 Yo2 的 CDN 服务进行访问加速。对于使用了 A记录方式直接解析到我们其中一台服务器,那么所有网友访问你的博客也只限于在一台服务器上,并且这台服务器的线路不一定是最快的。如果你要使用 domain.com 这的域名进行绑定,而域名服务器又无法给 domain.com 提供 CNAME 方式的解析,我建议你更换绑定的域名为 www.domain.com 或 blog.domain.com ,又或者更换域名的解析服务器,改为使用 DnsPod 这样的域名解析服务

完成 ! 希望这些技巧能让你更好的使用 Yo2 博客服务 :)

yo2 是“wordpress” base,但我们提供的是服务 :)

   yo2 是由 WordPress 为基础 服务 的,或许大家会把 yo2 跟其他的 WordPress 服务商排列在一起。但事实上我们 yo2 提供的不单是 WordPress ,我们提供的是服务,我们并不像其他的 BSP 单纯的为网友提供博客服务,我们为大家提供的是个平台,大家可以在这个舞台上尽情舞蹈,我们正在努力营造一个大型的网络社区。

  yo2 主张独立博客,这样才真正让用户拥有了自己的家。而独立在网络世界是相对矛盾的,因为你可能会成为网络世界里面的一个孤岛,独立了,网友接触你的机会就少了,信息的传播只能依赖自己经过漫长岁月建立起来的网友圈,和排名相对落后的搜索引擎。要在独立上取得一个好的突破点,就是我们 yo2 正在做的。我们在广大独立博客群中,建立一条沟通的桥梁。

  沟通的桥梁是无形的,但是确实的存在。有网友向我推荐过 gavatar 插件 ,而 yo2 为什么不采用这个世界闻名的服务呢?因为 gavatar 服务只限于头像,太过单一的服务。而使用 yo2avatar 服务,可以在头像的基础上增加博客访问、短信留言、互加好友等交互功能,有了这项服务,在博客上,网友都可以通过此途径更容易了解到作者。

  并且我们还提供 yo2similar 服务,这项功能可以在文章加入一个关联列表,可以选择性的关联到自己的文章、好友的文章或整个 yo2 社区的文章。由此网友可以很方便的在博客上找到自己感兴趣的文章,这无形中又多了一个互联的渠道。

  在自己感兴趣的文章上发出自己的评论,是很多人会做的。而评论是发出了,但我们很难跟踪文章的评论 发展 情况,不可能经常回访这个文章去看看有没有人对你的观点做出回复吧?这个 yo2 为大家想到了,我们推出了 yo2commentAlert 服务,可以很方便的通过站内短信通知你,所关注的文章评论发展状况。这个功能是个很重要的沟通桥梁,能把网友的互动做得更加到位 :)

  yo2 没有其他 BSP 的内容栏目,没有推荐文章,而我们是通过 标签 搜索的方式把用户的文章推广开去。当然我们还在构思其他更好的展现方式 :) 这个会跟随 yo2 的成长一步一步实现。

  看到这里,我想大家应该意识到 yo2 提供的不是博客,而是一个服务吧 :) 我们欢迎你加入 yo2 的大家庭!

yo2 建博教程[完善ing]

[!TOC]  大家在使用我们的博客服务时,或许会有点陌生,就让我来给大家一份简单的教程吧 :)

管理插件

wp-plugin.png

外观

一、挑选模板

yo2_use_theme.png  人靠衣冠,博靠模板。我们yo2给大家提供数十款精美的模板挑选,并且还可以自己上传哦。当然自己上传的模板有可能需要做些修改,不使用我们禁止的函数调用才可以上传,这就需要您熟悉PHP语言。

登录到博客管理后台,进入外观页面就可以随意挑选自己喜欢的模板。

二、设置页面的自定义CSS和页面头部、尾部

yo2_use_theme_5.png  我们提供 MyCSS + Page Header & Footer 插件给大家做简单的页面自定义使用,这个是需要大家到后台的插件管理页面启用的。

yo2_use_theme_2.png   启用插件后,后台的外观页面,会多出“MyCSS + Page Header & Footer”选项页,在此页面中,我们可以简单的添加CSS 和HTML到博客的页面上。比如我的就在页面尾部加入了统计代码,当然我使用了 <div style=”display:none”> … </div>把统计隐藏起来了。

.

三、自定义侧栏

yo2_use_theme_4.png   想自己定义模板的侧栏,需要启用侧栏插件和选用支持侧栏插件的模板才可以。

在我们的模板列表中,都有表明该模板是否支持侧栏插件。

yo2_use_theme_3.png

只要启用了侧栏插件和选用了支持侧栏插件的模板,在后台-》外观页面就可以看到“侧边栏区块”的选项页,在这个选项页,我们可以自由拖动需要的栏目到我们的侧栏上。

比如文本区块,可以插入常见的音乐播放器代码、统计代码、或者广告链接。

评论头像

yo2avatar.png

yo2avatar2.png

yo2avatar_1.png  使用我们yo2服务的博客都可以在评论者名称前显示相关的头像信息,并且可以关联到评论者在yo2的用户信息。

当然,想使用此功能必须到后台启用“ yo2avatar ”插件

文章标签

tag-plugin.png
tag-plugin-1.png  当然了使用次功能,同样需要到后台启“Jerome’s Keywords”插件。

并且此插件跟稍后接受的“yo2keywords”插件有关联哦。

相关文章

tag-plugin.png
yo2similar_11.png  到后台启用“ yo2similar ”插件,就可以使用此功能,默认是搜索整个yo2的文章库,当然您还可以自己设置是否只搜索自己的博客文章。此插件会自动分析文章标题,并提取关键字进行搜索,如果文章设置有标签,则通过标签进行搜索。

yo2similar_21.png

关键字链接

yo2keywords.png

yo2keywords_1.png   使用此功能,需要启用“yo2keywords”插件。插件可以自动在您的文章上对相关的关键字进行替换。

yo2keywords_2.png   后台-》选项-》yo2keywords option 可以设置此插件的工作,指定插入如何提取关键字进行替换,当然还可以人手输入需要的关键字哦:D

.

.

yo2(相册、做事)服务相关

yo2services.png  在yo2的相册和做事栏目发表的信息还可以关联您的博客上哦:)

只要您启用“yo2services”插件就可以享用此功能,并且此功能还支持 Flick、Yupoo 等支持RSS输出的相册哦 :)

为了方便使用,我们建议使用yo2的相册,虽然功能简单。

yo2services_1.png

yo2好友列表

yo2friends.png

yo2friends_1.png   当然得启用“yo2friends”插件,并且在侧栏添加好列表才可以显示出来哦。嗯,最重要的还是在yo2广交好友,不然列表为空_-!!