你的網站是不是因為所有的大圖片而經常加載的很慢？大約需要一個普通的撥號用戶多長時間來耐心地等待一個網站在他/她的瀏覽器上完全加載？60秒？30秒？' ^6 s. v1 d1 p8 H, ] O# R; h+ m7 N
& F# X" l9 n( x9 i& I1 \ 經統計30秒是可以忍受的，實際上每位用戶（尤其是56K或更慢的modem用戶）都沒有那麼大的耐心在線等待，如果網站在20秒或者更短的時間內不能加載他們會點離你的網站。! n( m4 G) u' Y, q1 o
- O$ n: D% C* u8 e# e% d 如果你的站點中採用了很多重磅的網絡圖片和Flash文件（尤其在主頁上），你很可能處於極其不利的甚至危險的形式之下！你很可能面臨喪失那些連接速度較慢的用戶，而且坦率地講，如果出現那種情況，是不是已讓用戶們失去了購買的情緒？/ S p- C% O( w
2 y* J9 b; Q. d6 \' h8 i
許多人仍然通過簡單的modem瀏覽網絡獲得信息。除非你的網站專門從事圖片瀏覽，比如遊戲查看站點或者這些圖片對產品至關重要，否則的話盡量避免使用大圖片。
& u2 b" K1 W. t# t3 ^8 B* U& ?+ {4 J
$ m4 N# J6 q; q 如果你必須使用大量的及大容量圖片，你可以嘗試將圖片切割成小的圖片或者將它們轉換成優化的格式。1 V* r6 e3 {4 v$ ~" Z* D
下邊列出了在網絡上用來顯示圖片的兩種常用的格式：
. n8 f2 b9 e1 ^8 a8 N; E+ V9 z6 D. M# L+ }* B, _% C3 Y3 j
GIF（圖形交換格式）最適合於小於256色的圖片——通常用於平面圖，比如像公司的標識、導航按鈕等等。
' [3 J* h/ P# ? W& D- z8 b4 c G5 v2 g% w @8 b
JPEG（聯合圖像專家組）對於帶有照相元素的圖片是最好的格式——比如風景、汽車、人物臉部圖片等等。
+ f% ?! T' y6 o7 b/ u* E& e1 g
4 h; `3 |& {3 Q 如果你相應地優化你的圖片，你可以將加載時間最高縮短50-70%。如果你先前的加載時間為30秒，你可以將其縮短至15秒之內！ 這樣對你的訪客是不是太好了？6 |. Y8 S z, k& a- {: t1 c" ?% w
4 {+ s5 ]/ M% {: w7 ^ 當然了，在你優化網絡圖片時在質量和大小之間還需要權衡利弊。尺寸越小，質量越差，反之亦然。網絡圖片優化的關鍵是在合理的文件大小的情況下獲得最佳的質量。) ?, i2 s# h1 n5 Z
, V: }( l# Q0 A 文本又怎麼樣呢？是不是你的某個網頁採用了太多的文本，其加載時間無法在20秒內完成？出現這種情況你怎麼辦？將它們分成小的網頁？對了，如果採用表格呢？/ ~4 f1 N1 E* z' L' R
4 X ?6 P: s+ {+ Q+ z( |1 y7 M
對，可以嘗試將網站設計成表格！將一篇大的文本放入不同的表格中（不是表格之內套表格），這樣管理方便而且網頁也加載的很快！8 `, w% `+ B9 u( ~/ V, p* l' ?
) w4 s* ?9 L" I, M% D% X 你的網站會從第一個表格開始到最後一個表格進行逐步顯示，這樣你的訪客就可以在觀看某些內容的過程中等待網站的全部加載。$ a' b" B4 \! q# s! z) g( L
8 ?9 z. f, ~6 U- f& K: x 這是代碼的示例：# ?1 V- t7 a! f3 q! N$ ~
5 f+ D7 x' a& g" y' l4 N- ~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
) f9 N: b% h, A) ` <HTML><HEAD> * j A( J* e1 f$ F. b: A
<TITLE>Using Tables For Faster Loading Time</TITLE> - h* L/ e- L/ X! F3 P8 c% b
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style : j0 w0 C9 V9 c: w$ u3 P
type="text/css">
& G" t8 @- a6 L& k3 N2 I <!-- + T# q9 f1 c; t0 ^
body {
: |' ]# ]/ G+ G& @$ @/ o# s4 h* r background-color: #CCCC99; 2 {3 n- g7 x% _7 r9 H* H$ Z8 A- `
}
# Z2 h; S8 l( \+ e1 F# u -->/ Z( a/ \4 P. p6 N* K5 E4 u
</style></HEAD> 2 ]% n1 ]( T) L0 \1 V' ^, f
<BODY> 1 y7 n1 g& a/ k% _( @$ m ^
<strong></strong>
% q4 m0 y6 e# e0 N" O5 B" |6 g% z/ N) M <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> # K5 ]1 f+ f7 h" N5 [* H
<tr> ?2 Z; n2 x" p+ _; A7 b- ?& I. M
<td valign="top" class="chapterCenter"><h1>A
( v) Y t) {+ r* m- f5 ]- N, w Sample Website Using Tables To Progressively 9 R3 z9 [) c/ j* f/ Y f
Load Contents Or Text</h1>
4 A: e$ {1 K2 @1 ?# { <p> </p></td>
7 T6 g. N4 p; f) L1 U </tr> ) e ]: j) Z/ ] q' e. ]+ U
</table> 3 a. T) E) x4 ?( o/ G
<strong></strong> * G! Y# t( m3 s: Y2 s
<table width="510" border="0" cellpadding="0" cellspacing="0" class="normal">
5 F7 m7 L5 {) l% B9 X <tr> 4 R' ^. q8 h, e' U
<td valign="top" class="chapterCenter"><p>This
5 b/ |* K. h i1 ?8 j* Dtable (table 2) will load right
7 x5 M X0 r2 L K- t& T/ x& r after the headline which resides in table 1 "A Sample Website Using Tables
7 V! Y! l6 B8 r5 i9 S5 r8 L3 w& r To Progressively Load Contents Or Text"</p> + H8 O4 U [, r* ?* I! E( K9 h( K0 C
<p> </p></td> 9 |( z s- j9 }2 Z v$ C' l. o
</tr> $ f: c+ B l+ c9 d( X+ k
</table>
3 K" `# B6 m/ \0 R0 Y <strong><!--Here's Table #3--></strong> : t4 C S+ n, Q" ^1 \ B* ]4 G
<table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> , o% ?9 h# A6 N% ~
<tr>( s$ ~5 \$ ]& s1 a/ E
<td valign="top" class="chapterCenter"><p>This
. f6 d7 A; O: ?8 w- }: I table (table 3) will load right after
+ J! T& g0 Q/ I9 Q# [ table 2 above. </p>
( w6 o7 v8 m& l6 U. \ d. i: l4 I <p> </p></td>
) t; v$ u5 V+ \ </tr>
2 A5 b- g1 ]( `) J( W7 G( i$ U" C </table>
+ v, X# h# L& ^4 V0 a- b4 G <strong><!--Here's Table #4--></strong> ! I0 Q; O% w. E3 S/ {+ b3 L
<table width="510" border="0" cellpadding="0" cellspacing="0" class="normal"> 1 n" q4 n5 g. O; t8 p. P: @
<tr>
. X9 F- }7 C- R# D2 L7 Q <td valign="top" class="chapterCenter">This table 1 o( r f' R- X8 ~7 I7 }3 a
(table 4) will load last because 8 c9 f! g6 r' l: T: I k! u
it's the last table on this web page before the closing tags </BODY></HTML></td> / i+ s( @0 V6 z+ R# R1 ]
</tr> ) x' O4 y# }- O& n# l3 Y. c+ f0 {7 m& e
</table>
! E1 v2 J8 X( S1 o" z+ j9 w </BODY> . i5 y5 D* G6 {' w* b
M P; d7 L6 Z; n0 y4 A 這樣可以允許你的網頁逐步的加載和顯示（首先從表格1開始，然後是表格2，之後是表格3，最後是表格4），這樣使用戶能有東西可以閱讀而無需等待網頁全部加載完成。
R0 z8 @7 W% x4 D" x1 S
' k% }& @7 B% V& j 注意：不要使用嵌套表格（表格套表格），因為它不會有相同的效果而且會因瀏覽器在加載表格之內的任何表格之前需要完成加載主要的表格而最終降低了加載速度。嵌套表格非常難於控制。6 B2 o: G3 s0 s5 y: O! l
4 V4 u, x! l2 t. I4 ]$ o( U2 ~ 這就是文章的全部，希望您能在網站加載速度優化中獲得樂趣！ |
|
發表於 2005-1-28 19:16:48
提升卡
沉默卡
变色卡