找回密码
 加入怎通
查看: 552|回复: 2

[站长八卦] 是谁拖累了你“网页”的打开速度

[复制链接]
像疯一样的人 发表于 2014-03-13 17:09:14 | 显示全部楼层 |阅读模式
  一、如何判断一个网页的打开速度
5 ]1 R* r. t0 T0 J4 G  1、网页内容的大小: ?; K1 M7 @  }" w
  搜索引擎优化网页打开的最佳 速度:2秒!网页内容所包括的文本、产品的图片、视频、Flash文件等。 我们有一个网页访问的时间计算公式:网页打开时间=网页内容大小/最小带宽+解析次数*每次解析时间+服务器处理时间+客户端解析时间。用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在 6-8秒之间。这就是说,8秒是个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。
; M  ?" x8 m  }* W% q  2、控制页面的总规模
" Y* L; E- y. X2 t' \: b9 `4 Q) k  要想把网页做得精彩,内容必须丰富,但不要把所有的内容都放在一个页面上,应控制页面的总规模。首先统计页面中的每个元素,如文字、图像、ActiveX或Java代码 以及HTML文本的大小,页面容量最好在50K以下。# R  O1 r0 u2 u# S
  二、网页设计优化
  G, H; i) ~$ X: ^- L  网页优化是指在设计,使用网页各元素时,能够尽量减少网页元素对下载速度所产生的影响。这些细节我们了解后,是能在日常网页制作中可以进行避免的。- R" k1 Q( J6 s2 j' w4 t$ `$ w
  1、让网页符合W3C标准' _( U5 D" d* y  M. P9 j" j: J! G
  (1)在网页制作中使 用结构层同表现层完全分离。也就 是布局使用用CSS而不用TABLE。这样做不仅能替换掉专业的表现层的垃圾代码如标签。而且也能让你的网站在重构方而能够轻松实现。几年来的多项研宄已实,如果对一个网站进行重写,使用DIV+CSS布局取代表格布局,那么可以砍掉原XHMTL文档大小的一半。9 D. N# ^$ G0 m: c  y/ F
  (2)让HTML标记有始有终。不管是我们自己写或是查看他人的HTML代码时,会发现HTML代码标签写得不规范。有的标记有头无尾,如标签li,标签p。它并没有妨碍代码的正确执行。但浏览器却会花费时间来判断和计算段落或者列表项目在哪里结束。所以,我们一定要让标记有始有终,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。
+ a) a& z& `! S" f( j) e% n  2、优化层叠样式表$ s) p) M# [# Z$ l4 Y$ o
  (1)层叠样式表css是HTML的装扮器,一个漂亮的Web页面不可能没有它。一般来说,我们要合并精减CSS代码,移除无用多余代码;图片尽量不要使用CSS的滤镜来渲染; CSS的选择器尽量简单定义。
2 b' e5 O0 Q" a* E! g6 j  (2)HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于
7 c. N2 w" t* ^2 I1 o  3、优化图片
+ |8 @2 C+ W) r1 V( B) i  图片可以说是影响网页加载速度最大的因素,不管是使用图片优化工具,还是减小图片大小。在质量和文件大小之间必须找到一个合适的均衡点。主要有以下几个需了解的方面。
# Z9 Y. u, L% L* Q  (1)一般在网页上使用的图片格式有三种,jpg、png、gif。我们只 需要知道在什么时候应该使用什么格式,以减少网页的加载时间。5 p6 b" I8 [$ _  `. P5 q7 m% c. t
  (2)图片的使用显示。需要显示图片时,尽量使用背景图片,而不是直接加载。也需要注意的是尽量不要用一个很小的图片当背景,这样做会加大客户端CPU处理时间。比如说预载入下一页的主要内容时。在用户看到大图之前先把小图展开,让用户不至于在等待的过程中太焦虑。
" ?8 r4 t/ ~. W" X  (3)图片在HTML代码里要标明大小。这样浏览器就能事先留好空。当你在网页上添加图片或表格时,你应该指定它们的高度和 度,也就是参数。如果浏览器没有 找到height和width这两个参数, 它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度, 也影响浏览体验。
: H# R: x- s- t! C9 x0 c& N  y' Z" B) C7 a4 ?
回复

使用道具 举报

拯救面子 发表于 2026-01-10 06:11:38 | 显示全部楼层
蹲了这么久,终于看到有价值的讨论,支持一下!
回复 支持 反对

使用道具 举报

洗涮涮 发表于 2026-04-07 19:06:41 | 显示全部楼层
这个分享太实用了,刚好能用到,感谢楼主!
回复 支持 反对

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-4-28 04:31 , Processed in 0.655018 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表