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

设计理念
Web 可访问性
Web 国际化
让你的Blog重获青春
精彩网页设计九“慎”
CSS如何为同一个元素处理多种规则
30步,网站信任度提升200%
平台越简单,成功的指数越高
困扰个人网站做大做强的思考
25种马上提高浏量的方法
CSS比表格更难吗?
web标准的商业价值
关注web标准的真正原因
web标准,我们去向何方?
通向web标准之路
初学web标准的几个误区
学习CSS的10大理由
伴随着Web标准发展
同一个页面用多个id有什么影响
如何提高页面响应速度
十大网站设计错误

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


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

Many webmasters get caught up in the design and creation process that they forget that visitors will have to download all of it. Forgeting to optimize your code and graphics for your site will increase your website's load time and will determine future visits.

许多网站管理者在设计和创建网站的过程中,会添加过多的内容,他们可能忘了:浏览者需要花费时间下载网站的内容。只有优化网站的编码和图片,才能提高网站的下载速度,吸引更多的访问者。

In order to keep your site in peak condition and always loading as fast as possible even for visitors with slow connection, consider the following aspects:

不论访问者的网络链接速度是快时慢,网站的下载速度一定要保持最快。要达到这个目的,你必须要考虑以下几个问题:

Image Optimization
图像优化

An image's file size is usually the main reason web pages load slow. To combat this problem, you can either decrease the image's dimensions or decrease the image's resolution. When creating your images, always ask yourself if you can decrease the dimensions but still create the same effect you would like. Can I accomplish the same thing by starting off with smaller image dimensions or by using the crop tool in my image editing program? If so, always use the smallest image possible while maintaining visiblity.

图片文件尺寸是限制下载速度的主要原因。要解决这个问题,需要缩小图片尺寸或者是降低图片分辨率。在设计图片的时候,要考虑:能否在保证图片效果的情况下,缩减图片的尺寸呢?能否开始就使用较小尺寸的图片或者是利用图片编辑程序中的修剪工具,来达到这个目标呢?如果可以,在保证图片清晰度的同时,尽可能使用尺寸最小的图片。

You can also optimize your images by reducing the image's resolution. With a program like Image Ready, which comes bundled with Adobe Photoshop, you can use a "Save for Web" utility. Always use this utility to change the amount of colors in an image. Always use the least amount of colors, again, while maintining visibility. Changing the format of the image from GIF to JPG, or vice versa, can also drastically reduce an image's file size.

你还可以通过降低图片分辨率,对图片进行优化。如果有了Image readyAdobe Photoshop自带的)这样的程序,你就可以使用Save for Web" 功能,这样可以改变图片的颜色数量 。保持图片清晰程度的同时,使用最少的颜色。把GIF格式的图片改为JPG格式,这样可以显著减少图片文件的尺寸,反之亦然。

Decrease_Websites_Load_Time

Optimized image (gif, 15kb)

优化之后的图片(gif,15kb)
<img src="OptimizedImage.gif" width="175" height="150">

Image Quantity
图片数量

As I'm sure you already know, the more images there is on a site, the slower the page will load. If you can, try to keep images down to a minimum, but don't sacrifice your vision for page speed. If anything, try an alternate way to achieve your layout goals - when used correctly, the minimal presence of images can be an effective design technique.

我想你已经知道,网页图片数量越多,下载速度越慢。如果可以,把图片数量控制在最少范围内,不要制约网页下载速度。你可以选择一种方式,来设计网页的布局——如果方式运用得当,最少数量的图片仍然可以呈现吸引力强的设计效果。

Image Tag Formating
图片标签格式

Another way to decrease a page's load time is to predefine the dimensions of your images in your source. By doing this, the browser can read ahead and determine how much space the image will occupy on the page. Although doing this won't drastically speed up your site, it still helps. If you are not sure how to do this, here is a quick example.

另外一个提高网页下载速度的方法是:事先确定图片尺寸。这样浏览器可以提前确定图片在网页上占用的空间。虽然这个方法作用不是太明显,但总是有帮助的。如果不了解设置的方法,可以看下面的例子。
<img src="yourimage.gif" width="200px" height="100px">

Image Use
图片使用方法

Do you have a secondary page where you could use an image that you used on your home page or different secondary page? If so, use it! By doing so, the image will have already been downloaded to the visitor's browser cache. The computer will not have to download the image again and will decrease load time.

你的网站上有没有二级网页呢,如果有,你可以使用首页中的图片或者是其它二级网页的图片。这样,可以使图片下载到访问者的浏览器缓冲存储器中,这样就避免了电脑再次下载,减少了下载时间。

Text Management
文本管理

If you have large pages of text, break it down into more manageable chunks. Spreading text out isn't a bad thing; it's easier on the eyes and faster to load.

如果网页文本内容很大,你可以把它分解为易管理的几部分。把文章展开不是一件坏事情,这样方便阅读,也方便下载。

Learn more about website optimization at http://www.websiteoptimization.com/speed/toc/

你可以登录http://www.websiteoptimization.com/speed/toc/网站,查找更多的网站优化方法

评论 (0) All

登陆 | 还没注册?