|
|
代码设置不妥不仅延长网页加载时间,也严重影响蜘蛛程序对网页内容的抓取.通过对网页代码进行清减去掉臃肿杂乱的代码,减小网页文件大小,能够加快网页加载速度,让蜘蛛快速索引到重要内容.整个网页最好不要超过 30K,文字内容最好5K-10K 之间,Google 只对内容的前5000 个字进行索引.
& }7 K: \$ {7 v l* s' S, }2 L: h- O
网页减肥重点涉及以下几个要点:
& O$ S1 e( L! L
5 o- R9 R! w' z8 |* v( k) l 1.CSS 样式
0 l6 p/ I3 f% W/ i2 E
0 h& o8 _$ l2 F7 M1 p+ W 网页制作应通过 CSS(层叠样式表单)来统一定制字体风格.例如:
6 F" E& e% P+ `- g5 K' I% E& B+ ~
$ W, K" ^$ N6 P0 l; | <b style="color:red;font-size:16px;">测试</b>; r" Q6 D% v7 V7 ^- Y- i, k
4 L9 A/ [3 X8 [. S; t) O* ~ <div id="divmain" style="font-size:12px;">DIV</b>
" [ M% h0 ]- Z- `9 y9 s1 g4 ], ]2 B: j2 Z- J" l7 `
<div style="color:red;"> 红色 <b style="color:green;">绿色</b> </div>1 I! v/ o' P0 I4 q5 v: H
$ ^9 b$ {; m/ v1 V+ U
----------------------! I' [. z6 J0 x
% K4 H& E! F5 u# A, g% E4 m
<style type="text/css">: l5 `0 r, V2 n1 L3 |* L6 i& l; l
) b: J" l1 Q5 G3 Y3 m. j4 s
b { color:red;font-size:16px; } /*通用对象*/
3 t% L8 G3 ]# A/ K
& _ L& ]8 f) o! D- n* ?5 d. ? #divmain {font-size:12px;} /* ID 对象 */
; y: B! S j: q; i
. q! L( }( Q8 P2 K8 Q, O6 T$ I .red {color:red;}/* 定制类别 */
5 a3 B3 a! P5 ^' P) w7 ?" H9 Q. \
4 L0 v* _. f+ Q .red b {color:green;}/* 定制类别下的 通用对象*/9 Q+ P1 z9 A0 _
8 {9 ~* @, I+ O
</style>) v0 ]+ l) v% m1 V" f
: `0 B% J6 h2 r. U& s1 G
<b>测试</b>
3 J- i: a0 [2 _) p" y! S8 q: c$ A: B. ], F
<div id="divmain">DIV</b>
% G: W0 s# i7 M! v3 B, K5 ]+ X6 M2 |3 Z; x3 T% u3 q
<div class="red"> 红色 <b>绿色</b> </div>; j S! L& T6 |. y2 ~5 q; f! \
$ S+ j$ E# \; n! l3 K0 Y CSS 减肥示例文件 把文字的字体、字号、颜色、背景色等统一起来,不用对每段文字单独进行格式定义,从而减少大量重复性标签.注意把所有css文件单独存放在命名为css的外部文件中.- N+ M9 R- V6 e1 \; J7 I8 Q
2 r, G7 t2 U& f, {$ x- z/ | 语法:<link rel="stylesheet" type="text/css" href="/common/client.css">
- d( \: {$ `. E4 M' s& l. o- G' Z
* \2 `/ Z' [- G# s- [+ o 作用的优先级:自身的style属性> 页面的内部style对象> 页面外部css文件.0 y( v3 P2 J H9 d; i
; W% d) e, i$ Q. v$ q
下载:css帮助
4 V0 L7 f- Q8 a
' O9 S( @1 y3 O; O' }1 ^ 2.JavaScript :" c; @, K8 n8 H" m( R' J
* q8 L1 q5 t" j' o& D
1. 简化js 中的函数名称和变量.+ }. m4 }0 V" z {/ d; h3 v0 h' q
1 x& N8 M7 f( e1 @$ _/ o 例如:Google,里面的函数名称只有 1 个或者 2 个字符.
- S' V* p! @. d- |$ }( `! q# h+ O) o# z# p; E) J' | n1 I# g
2. 将网页的公共部分转换为脚本并存于js 文件里.这样可以减少文件大小,加快下载速度,同
6 n6 [4 [ w8 y7 c( Y9 o1 s2 Y- a. m" X' I
时也方便管理.不过不能将导航等等优化的关键代码转换成js ,否则搜索引擎搜索不到.
: |! b3 m5 R) J% ?4 z' H8 r d& I/ h0 B9 s
转换方式:- @/ j2 L& K2 s: [$ Y. X- u
$ M8 w+ z) a$ e
原来:<h1>天天收藏夹</h1>
; ^! K0 M3 k) I6 w2 e7 n$ q) N6 c4 \( Y
脚本:document.write("<h1>天天收藏夹</h1>");
( G4 m( G' @6 c( r+ ]* p& V* H5 P* J0 p: v
例如:华军软件园 源代码,将标题、导航等等都放着js 文件里,将导航放在js 里面就不太好了.
) Y3 K/ S+ u4 i+ F& Z: B
: A9 R0 V* n9 t" Q, ? 3.使用 base 标签:; m- X Z+ q* t. i3 Q5 C1 y Q7 o
6 r9 n! O& M1 l% d' } Base 标签是一个全集控制的标签.6 ~7 P8 T* t0 T, [& A
1 ?: A: g1 q2 G, s4 J
比如:
, v% c, F7 b, }7 w1 r; x( | S8 c3 L- x4 y8 \2 o% p: \
<A HREF="http://www.7769999.com/html/nanxingke/ " target="_blank">厦门妇科医院</A> t3 C* b+ M6 g) c8 K, a n+ F
9 j3 g5 r) M% J5 q0 {+ j$ j, m B& W <A HREF="http://www.7769999.com/html/zaoxie/" target="_blank">厦门妇科医院</A>
3 m. P8 j, j% {
- d7 P9 }' b8 T( c k4 ^8 o' f7 T 其中 http://www.7769999.com 和target="_blank": 多次重复,增加无用的代码. t5 Z# t1 m* W* f
- {' Q5 o1 E. c" x4 F 修改为:
0 t& D! y5 P8 p- e7 W' B( g7 z$ n7 ?5 T7 @+ F7 J7 x# W- E" e4 M
<head>$ x/ h, m; p0 `& M
% C$ B1 y0 x. o
<base href="http://www.7769999.com/" target="_blank">
6 i2 ^4 P: V( @- I1 w$ Z9 h; @" \8 u2 k" ]! J5 a' O X
</head>
" M. j1 K7 S9 L% i# d2 ~8 d1 D
* y0 t2 a3 }( d. `) Q <body>
: |3 ~# d7 N5 ~3 p0 }! r$ D8 g& L# ]; O; Z
<a href="/html/nanxingke/">厦门妇科医院</a>. f1 v7 Q: u1 N4 q
) F/ n2 f3 {( M <a href="/html/zaoxie/">厦门妇科医院</a>' P4 L3 g, X, Q+ W6 z* v5 j! v6 r
. m) `8 C7 U" J: x5 M* l </body>
. `7 x. j3 h7 ]% X# I7 K/ e
! x3 V& \( G8 Q8 ^/ |( F 4.慎用网页减肥工具2 p# G" h0 @' O9 J( M. J+ l
+ Z* v; o+ F F, V) S% H% v2 o 通常的网页减肥工具,对 htm 减肥具有一定的破坏性,常常为了减肥将标签的 后半个标签删除,$ Z2 Z) Z- Y" ?/ ]+ a5 @
& a* q- W! M$ y! y, u
造成网页的不完整.5 u0 z" u/ Z* b8 C
: A1 U9 u a$ _: b; s u 处理前:<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>
! k8 Q& D. |% a5 }" @$ |! w
0 h+ L- D N5 G; z9 T! [# X) B' e( ?& R4 d 处理后:<table><tr><td>第一行<tr><td>第二行</table>
. O( l% b6 V6 {
! {6 u7 z# b! S4 ~* F0 \3 D9 b1 w 处理后 </td></tr> 被去掉了,使页面不完整.
( N$ S" `4 e7 h( s( ?% ^( s: {" x# l7 t: c* P; k+ o9 Y
5.删除空格和回车
; x* q0 ?, M+ I) B
5 `) `* I6 ^4 Y4 g 如果要更加苛刻的减肥,那最后一步就是删除空格了,还可以使文件大小下降很多.
1 C+ v) N% |6 l1 M( w( W! [# i& W3 j1 c/ ] h5 A6 H/ Z- b; d
不过删除空格后的页面由于没有阶梯排列,将很难读懂.
0 x$ x J8 ~+ v5 X( x
0 n3 `- [& X5 n- z- `# Y( G 例子:百度首页的代码就非常紧凑. |
|
