中国龙,中国风,中国会变得更加强大! 力量越大,责任越大! 人的一生,会面临很多选择,但决定一个人一生的,往往就是最关键那么的一两步

15招快速减少页面载入时间(转网络)

上一篇 / 下一篇  2008-12-26 17:15:32 / 个人分类:软件公司

 

也许是因为越来越多的人用上了大号的水管,
前端程序员差不多将网页的优化工作都抛在脑后了。
越来越多的 widget 和 javascrīpt 代码被加在网页上,以致网页越来越慢。
瞬间的载入速度让你感觉就像呼吸到一口新鲜空气。
程序员有时忽略了一些非常简单的规则,导致降低了用户体验。页面的载入速度决定用户的情绪,尤其是电子商务网站。以下是一些它之所以这么重要的原因。

快速的载入可以提升用户体验。用户关注页面的载入速度,或自觉或不自觉地。就好比一个球队中的球员,只有当他表现差的时候才会引起关注。
载入迅速的网页让人感觉更清爽。网页的载入速度有可能影响你的搜索引擎排名。Google 已经明确表示他们很关注网页的载入速度,并且会影响到 Adword 网页的索引,所以也不会在排名中占有太大的比重。
慢速则赔钱——载入速度过慢会赶走你的访客。据估计每年电子商务网站都会因载入速度过慢,而损失11亿到13亿的收入。

载入龟速就算是最优秀的网页设计也会被埋没。这里有一些很好的方法和工具可以帮助你建立一个快速流畅的网站。

 

1. 一个基本的网页分析器

可选的工具有很多,但我总是用“Web Page Analyzer”来检查一般性的错误,并且根据载入速度来判断网站的健康程度。这个分析工具可以显示海量的数据,比如有多少脚本代码、文件有多大等等可能影响到载入速度的因素。(这个工具很小气,100K的图片就警告了 - 译者注)

2. Pingdom

Pingdom 这个网站可以帮你检查损坏的图片链接或链接,测试你的图片和脚本的载入速度。坏链和图片是导致载入缓慢的主要原因。比如,我用这个分析了我的博客 LifeDev 后,我找到了一个错误脚本和2张失效的图片。搞定了这些错误后,网站的载入速度快了一倍。

 

它还有另外一个功能,就是可以看到载入的每一个阶段所用的时间。Pingdom 用不同的颜色表示载入过程的每一个阶段,比如开始连接,载入的第一个字节到最后一个字节等,这样你就可以知道时间究竟是浪费在了哪。

3. 把文件放在本地

虽然这么做会消耗一些带宽,但以本地文件替代照片管理服务(比如 flickr.com),可以省下浏览器从站外下载图片的时间。本地文件总是比外部文件更快。

4. 设置图片的长度和宽度

这是一个正确设置图片长度和宽度的示例:

<img src="images/mine.gif" border="0" alt="my image" width=”125″ height=”250″ />

图片的长度和宽度设置与否简直是天壤之别。若设置了长宽,浏览器会在图片未完成下载前先载入其它内容,并且会在网页预留出图片的空间。否则浏览器会等待图片下载完成,再去载入其余的内容。

5. 慎用 widget

即使 widget(窗口小插件,小固件,小器件等等,什么译法都有,这里保留英文 - 译者注)非常酷而且有一些非同寻常的功能,但考虑到牺牲掉的载入速度,忘掉它也应该不难。要是你的网站因 widget 而挂掉的话,赶紧删掉吧。

6. 使用静态缓存

关于缓存可以有很多种解决方案。从本质上讲,缓存就是:把用动态语言(比如 PHP)写出的页面转换成最终的静态的网页。服务器难以置信地擅长处理静态页面。把动态页面转换成静态页面可以减轻服务器负荷,并节省载入的时间。这里有一些流行语言的缓存教程可供参考:
        *  PHP
        *  Rails
        *  Perl
        *  Java
        *  ASP

7. 加速器

动态语言通常都有脚本帮助加速运行。如果你使用的是 PHP,这些脚本也许有帮助:APC, Zend cache, Xcache

8. Firebug

 

Firebug 是火狐浏览器的一个扩展插件,内嵌在浏览器内。Firebug 的一大功能就是分析网页的每一方面,特别是载入速度。

9. 优化CSS

 

减小JS和CSS代码可以大幅改善网页的载入速度。可以使用一些在线服务比如“CSS clean”来优化你的CSS代码,删去一些不必要的东西比如:
        *  空格
        *  换行符
        *  多余的字符
        *  根据级别更多地压缩代码

10. 使用多个域名

如果你的网页上有很多东西,建议多绑定几个域名,比如 server.example.com,server2.example.com,等等。你同时只有有限的链接数到浏览器,如果绑定多个域名(即使使用同一IP)就可以同时下载多个对象。

11. 精简 Cookie

就像我们的日常饮食,想要保存健康(载入迅速)就不要吃太多的饼干(Cookie)。多余的 Cookie 会拖慢每个网页的载入速度。确保你的 Cookie 已经精简到最小,同时也优化下 Cookie 的使用。

12. 为 Cookie 资源使用独立的域名

为了优化 Cookie 的使用,要为资源使用独立的域名。这对于使用顶级 Cookie 的人很有帮助,当你从上面下载文件的同时就会附上一个 Cookie 文件,如果使用不同的域名就可以避免这种情况。例如 Yahoo! 就使用 yimg.com 存放他们的资源。

13. 优化 Javascrīpt

 

与优化 CSS(#9)的同理,JS代码同样需要优化。使用“Dean Edward’s packer”精简JS代码中冗余的部分。

14. 合并JS文件

通常来说,下载一堆小脚本比下载一个大脚本要慢得多。就是说,合并JS代码可以提升网页的加载速度。最简单的方法就是打开文件复制粘贴代码(很简单吧)。不过,有时还可以更简单一点:
        *   PHP
        *  Smarty (PHP 模板语言)
        *  Rails
        *  ASP

15. 使用内容分发网络

如果你的网站有较多的国际访客的话,建议使用内容分发网络(CDN)。内容分发网络可以自动判断访客的位置并选择服务器位置。比如,一头澳大利亚奶牛要通过网络联系中国的远房亲戚,那么网速会卡得她奶都挤不出来。但如果使用内容分发网络,她会被自动登陆到架设在澳大利亚的服务器(或较近的),这样她就会很快发现她的亲戚已经改产三聚氰胺了。

 

结论

有时新增功能会像花钱一样容易,但根据历史经验,更少就是更多。更少的图片、脚本和 widget 意味着迅速的载入,而迅速的载入则意味这更高的用户体验。

 


TAG: 网页 软件公司 跳页 载入 速度

 

评分:0

我来说两句

Open Toolbar