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

设计理念
图形简介:第一部分
图形简介:第二部分
图形简介:第三部分
图形简介:第四部分
网站规划101
通过网络赚取客户的信任
网站配色:第一部分
网站配色:第二部分
CGI剖析:第一部分
CGI剖析:第二部分
CGI剖析:第三部分
下拉表单:第一部分
下拉表单:第二部分
下拉表单:第三部分
网站设计公司:第一部分
网站设计公司:第二部分
Web 标准
HTML 元素
样式表
Web 易读性

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1759 ::
收藏到网摘: 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

登陆 | 还没注册?