Blog > 用户体验设计 > 页面头部最后加载

页面头部最后加载

昨天在回答水煮鱼的提升博客的用户体验的文章中提到关于将头部文件放到页面最后加载。今天就收到好几个朋友的Mail询问具体的做法。想想还是写一篇文章详细介绍一下。

为什么要将页面头部放到最后加载呢?

  1. 相信大家现在都已经知道,为了尽快的显示页面,我们提倡将页面上调用的JS放到页面最下方加载。但有些同学喜欢在头部里加入一些服务的JS。例如大家在浏览我的博客的时候就能感觉到,由于头部的那段Friendfeed的JS,其实页面加载还是挺慢的。
  2. 很多同学,特别是站长。都希望通过优化代码提高seo的效果。比如文章的详细页面,我们希望搜索引擎能最快的独到我的文章标题“页面头部最后加载 ”。可往往我们的头部文件就噼里啪啦的占去了好几十行的代码。而这个头部也并非当前读者最关注的东西。将头部文件放到页面最后加载既能提高页面显示速度, 还能保证seo的效果。

说了这么多,具体该如何操作呢?

  1. 首先,建议大家对html/Css有一定的了解,这样会利用在对自己的网站进行改造。
    先来看个例子
  2. 可以看到,我在头部加入了Google Reader的分享。通过Yslow,可以发现,这段JS加载平均需要2.3秒的样子。如果是将Header、Content、Footer顺着显示,代 码跑到Header这块就会卡个2秒的样子。而我们将头部放到底部加载后,基本上不会影响到对此文字的浏览。

明白了吧,将Header通过css绝对定位到顶部。其实是很简单的。可是我很懒,一直没给自己改改。-_-~~
OK,有问题给我留言:)

6条评论

  1. Leeiio says:

    不用絕對定位的話,似乎是可以用js把底部的頭部複製到頭部的某個預留的空的div裡面。

  2. Pingback: 用jQuery控制網頁內容的加載順序 - Leeiio Chaos Made.

  3. king51 says:

    可是酱紫对用户体验不好,
    万一他网速慢点,那就看到裸体了,等很久才看到衣服。
    这个问题怎么解决?

  4. cuikai says:

    @king51可以先加载样式,后加载内容

    另外:
    感觉5key文风很犀利,不知道是否能交换连接?
    我是崔凯,目前在从事“前端开发”方面的工作。
    我已经做好了你的链接,如果可以的话,可以去 http://uicss.cn 查看。

  5. cuikai says:

    @king51可以先加载样式,后加载内容

    另外:
    感觉5key文风很犀利,不知道是否能交换连接?
    我是崔凯,目前在从事“前端开发”方面的工作。
    已经做好了你的链接,如果可以的话,可以点我的名字去查看地址。

  6. 5key says:

    @cuikai, OK了:)

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>