鱼有所思,鱼有所悟
做个不错的人,微笑面对人生
PHP博客
首页
新随笔
联系
聚合
管理
随笔-103 评论-37 文章-0 trackbacks-0
优化网页加载速度的小技巧
互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。
一、优化图片
几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。
即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。
优化图片包括减少图片数、降低图像质量、使用恰当的格式。
1、减少图片数:去除不必要的图片。
2、降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的。
3、使用恰当的格式:请参阅下一点。
因此,在上传图片之前,你需要对图片进行编辑,如果你觉得photoshop太麻烦,可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果?可以试试用过调用javascript来实现图片特效。
二、图像格式的选择
一般在网页上使用的图片格式有三种,jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。
1、JPG:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
2、GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。
3、PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。
三、优化CSS
CSS叠层样式表让网页加载起来更高效,浏览体验也得到提高。有了CSS,表格布局的方式可以退休了。
但有时我们在写CSS的时候会使用了一些比较罗嗦的语句,比如这句:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
你可以将它简化为:
margin: 10px 20px 10px 20px;
又或者这句:
<p class="decorated">A paragraph of decorated text </p>
<p class="decorated">Second paragraph </p>
<p class="decorated">Third paragraph </p>
<p class="decorated">Forth paragraph </p>
可以用div来包含:
<div class="decorated">
<p>A paragraph of decorated text </p>
<p>Second paragraph </p>
<p>Third paragraph </p>
<p>Forth paragraph </p>
</div>
简化CSS能去除冗余的属性,提高运行效率。如果你写好CSS后懒得去做简化,你可以使用一些在线的简化CSS工具,比如CleanCSS。
四、网址后加斜杠
有些网址,比如"www.kenengba.com/220",当服务器收到这样一个地址请求的时候,它需要花费时间去确定这个地址的文件类型。如果 220是一个目录,不妨在网址后多加一个斜杠,让其变成www.kenengba.com/220/,这样服务器就能一目了然地知道要访问该目录下的 index或default文件,从而节省了加载时间。
五、标明高度和宽度
这点很重要,但很多人由于懒惰或其它原因,总是将其忽视。当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数。如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。
下面是一个比较友好的图片代码:
<img id="moon" height="200" width="450" src="http://www.kenengba.com/moon.png" alt="moon image" />
当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。
六、减少http请求
当浏览者打开某个网页,浏览器会发出很多对象请求(图像、脚本等等),视乎网络延时情况,每个对象加载都会有所延迟。如果网页上对象很多,这可以需要花费大量的时间。
因此,要为http请求减负。如何减负?
1、去除一些不必要的对象。
2、将临近的两张图片合成一张。
3、合并CSS
看看下面这段代码,需要加载三个CSS:
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />
我们可以将其合成一个:
<link rel="stylesheet" type="text/css" href="/style.css" />
从而减少http请求。
七、其它小技巧(译者添加)
1、去除不必要加载项。
2、如果在网页上嵌入了其它网站的widget,如果有选择余地,一定要选择速度快的。
3、尽量用图片代替flash,这对SEO也有好处。
4、有些内容可以静态化就将其静态化,以减少服务器的负担。
5、统计代码放在页尾。
posted on 2008-06-03 17:40
鱼有所思
阅读(501)
评论(0)
编辑
收藏
引用
网摘
所属分类:
HTML
只有注册用户
登录
后才能发表评论。
网站导航:
IT新闻
博客园
BlogJava
博客生活
IT博客网
C++博客
程序员招聘
<
2008年6月
>
日
一
二
三
四
五
六
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
留言簿
(79)
给我留言
查看公开留言
查看私人留言
随笔分类
AJAX(30)
css
Document(2)
HTML(15)
java(2)
jsp(2)
LINUX(4)
MySQL(20)
PHP(34)
随笔档案
2015年4月 (1)
2014年12月 (1)
2014年11月 (1)
2014年9月 (1)
2014年8月 (1)
2014年7月 (2)
2014年4月 (1)
2014年1月 (1)
2013年8月 (2)
2013年7月 (1)
2013年4月 (3)
2013年3月 (2)
2012年5月 (1)
2012年4月 (1)
2012年2月 (2)
2012年1月 (1)
2011年11月 (2)
2011年8月 (1)
2011年5月 (2)
2010年6月 (1)
2010年4月 (2)
2010年3月 (1)
2010年2月 (1)
2009年12月 (1)
2009年11月 (5)
2009年10月 (2)
2009年9月 (2)
2009年8月 (1)
2009年3月 (2)
2009年2月 (1)
2009年1月 (1)
2008年12月 (1)
2008年11月 (8)
2008年10月 (2)
2008年9月 (5)
2008年8月 (2)
2008年7月 (3)
2008年6月 (2)
2008年5月 (2)
2008年4月 (4)
2008年2月 (1)
2008年1月 (1)
2007年11月 (2)
2007年10月 (1)
2007年7月 (2)
2007年5月 (5)
2007年4月 (5)
2007年3月 (10)
相册
鱼有所思
php
【孟子E章】
fengyun的个人空间 mysql优化
isno relax world的PHP技术博客
http://www.isnono.com/index.php?mode=1&page=1
阿赖的个性空间
寒松的博客
http://expectforever.bokee.com/index.html
好东西
今晚好梦博客-很多好收藏
流水孟春
易中求
php linux
搜索
最新评论
1. re: 需求分析文档都包括哪些内容
评论内容较长,点击标题查看
--鱼有所思
2. re: js获取本机ip地址、mac地址、机器名
评论内容较长,点击标题查看
--鱼有所思
3. re: Eclipse跑通第一个已有的jsp项目
突然想起来一件事,有一次用Eclipse写php代码,结果用浏览器浏览的时候,汉字全为乱码,当时知道是编码的问题,但是最后也没弄好......
--卢中阳
4. re: 如何学习JSP
评论内容较长,点击标题查看
--鱼有所思
5. re: 表格隔行变色,鼠标放上变不同颜色。兼容IE,FF firefox
评论内容较长,点击标题查看
--鱼有所思
阅读排行榜
1. js中innerHTML与innerText的用法与区别(109351)
2. Keycode对照表(54890)
3. JS转义 escape()、encodeURI()、encodeURIComponent()区别详解(35469)
4. Js字符串操作函数大全(26885)
5. mysql insert的几点操作(DELAYED 、IGNORE、ON DUPLICATE KEY UPDATE )(21317)