当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 提高网页下载速度

设计理念
什么是XHTML?
启发设计灵感
网站设计的新视角
从最优化角度来设计你的网站
脱离Google生存
logo的类型
Flash的弊端
避免使用JavaScript动态导航条的7大理由
正确使用“留白”属性
商务图形设计
如何使用“哇元素”
提高网站的可访问性
让你步入专家领域
“一页站点”的概念
高级网页设计原则
接近你的客户
创建网站的黄金法则
3条帮助你成功创建“会员制营销”的方法
重新改造你的主页
避免图形文件过量

设计理念 中的 提高网页下载速度


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1667 ::
收藏到网摘: n/a

Get_FASTER_Download_Times_By_Making_BIGGER_Web_PagesAs a webmaster you already know how important it is that your web pages download fast. In a nutshell, if your pages are slow, then you're losing visitors. And if you're losing visitors, you're losing money.

网站管理员应该了解提高网页下载速度的重要性,简言之,网页下载速度慢,就会流失网站访问者,也就会流失金钱。

To speed up your download times, most web design experts will suggest that you optimize your GIFs and JPGs so that they download faster. They'll suggest that you make your images smaller or remove them altogether. Or they'll simply suggest that you put less stuff on your pages.

大多数网站设计专家建议优化GIFJPG图片,以提高下载速度,他们会建议缩小图片尺寸或移除图片,或者建议减少网页内容量。

All of these methods work. The problem, however, is that they all involve doing things that you don't want to do. You don't want to squeeze any more quality and color out of your images. The same goes for your content - you put it there because you want it there. Basically, there's only so far you can go with these approaches before you really start to ruin your page.

这些方法都可取,但问题是你不想采取这些方法。你不希望减少图片颜色,降低图片质量;你不希望减少网页内容,因为它们具有存在价值。如果遵循这些建议,你可能会毁掉整个网页。

Fortunately, there's one way to get your pages opening faster without having to compromise your images or your content. This is a simple and effective method, but one that is rarely discussed by the web design experts.

然而,值得高兴的是,有一种方法可以减少网页下载时间,并且不会改变图片与内容。这种方法简单、有效,但网站设计专家很少提及。

To understand this approach, it's important to recognize the difference between "perceived" download time and "actual" download time. The perceived download time is the time it takes to have enough stuff displayed on your page for the visitor to be able to start studying your content. The actual download time is the time it takes for the entire page and all its contents to be fully downloaded.

了解这种方法之前,首先明确“可感知的下载时间”与“实际下载时间”之间的区别。“可感知的下载时间”是指访问者可以浏览网页内容所需要的下载时间(不必全部下载完毕,内容足够访问者浏览即可);“实际下载时间”是指网页全部下载完毕所需要的时间。

The perceived download time is the one that really counts. Why? Because once your visitor has something before his/her eyes to read or look at, then there is much less risk that he/she will click away because your page is taking too long to load.

“可感知的下载时间”确实很有价值,因为如果网页下载时间很长,用户可能会在未浏览内容之前,离开网站。

So how do you improve your perceived download time?

那么,如何减少“可感知的下载时间”。

Simple, you break the content of your page down into two or more tables.

很简单,把网页内容分隔成两个或多个表格。

You see, web browsers will not start displaying the contents of a table until it has compiled the entire table to the end. Once a table is compiled it will display, and the browser will start compiling the next table.

只有表格下载完毕,浏览器才会呈现表格内容。第一个表格呈现出来以后,浏览器逐渐呈现其余表格,第二个、第三个……

That means that if you place the entire contents of your page inside one big table, the browser will have to compile the entire contents of your page before anything will be displayed. The result: your visitor spends all that time staring at a blank screen.

这就意味着,如果网页内容设置在一个大表格中,访问者必须等待很长时间,才能浏览到网页内容,也就是说访问者需要长时间浏览空白屏幕。

However, by putting some of the content towards the top of the page into a table of its own, the rest of the page can be downloading farther down, while your visitor is busy studying the stuff that's already displayed.

然而,如果把某些内容放在网页顶部表格中,其它网页内容的下载速度也可以提高,并且用户在等待网页下载时,不会浪费时间。

I've used this method to great effect on my own website. I went from an actual download time of up to 20 seconds (staring at a white screen) down to a perceived download time of rarely more than 3 seconds (often as low as 1 second)!

我的网站就利用了此种方法,效果很好。以前实际下载时间在20秒左右,但后来可感知的下载时间不会超过3秒(通常为1秒)。

The ironic thing is, my page is now bigger (in terms of Kilobytes) than it was before I made the change. That's because 2 tables take more HTML than one.

有趣的是,现在网页尺寸(以Kb计算)比过去更大,因为2个表格比1个表格占用的空间更大。

But boy has that extra bit of HTML paid off!

但占用的空间不能太大。

Make a test page now and try it out. Your hit counter will thank you for it!


测试网站,利用此种方法修改网站,效果不错。

评论 (0) All

登陆 | 还没注册?