網站設計代碼優化讓網站打開速度飛起來

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

網站的打開速度是一個非常重要的使用者體驗考核標準，當然，影響網站打開速度的原因有很多，比如伺服器的問題，比如程式的問題等等，本文我和大家主要分析的不是外部因素，主要是大家在網站設計過程當中，把內部因素做到極致， 加快網站的打開速度就是這麼簡單!

一、如何判斷一個網頁的打開速度

1、網頁內容的大小

搜尋引擎優化網頁打開的最佳 速度：2秒!網頁內容所包括的文本、產品的圖片、視頻、Flash檔等。 我們有一個網頁訪問的時間計算公式：網頁打開時間=網頁內容大小/最小頻寬+解析次數*每次解析時間+伺服器處理時間+用戶端解析時間。 使用者最滿意的打開網頁時間，是在2秒以下。 使用者能夠忍受的最長等待時間的中位數，在 6-8秒之間。 這就是說，8秒是個臨界值，如果你的網站打開速度在8秒以上，那麼很可能，大部分訪問者最終都會離你而去。

2、控制頁面的總規模

要想把網頁做得精彩，內容必須豐富，但不要把所有的內容都放在一個頁面上，應控制頁面的總規模。 首先統計頁面中的每個元素，如文字、圖像、ActiveX或JAVA代碼 以及HTML文本的大小，頁面容量最好在50K以下。

二、網頁設計憂化

網頁優化是指在設計，使用網頁各元素時，能夠儘量減少網頁元素對下載速度所產生的影響。 這些細節我們瞭解後，是能在日常網頁製作中可以進行避免的。

1、讓網頁符合W3C標準

(1)在網頁製作中使 用結構層同表現層完全分離。 也就 是佈局使用用CSS而不用TABLE。 這樣做不僅能替換掉專業的表現層的垃圾代碼如標籤。 而且也能讓你的網站在重構方而能夠輕鬆實現。 幾年來的多項研宄已證實，如果對一個網站進行重寫，使用DIV+CSS佈局取代表格佈局，那麼可以砍掉原XHMTL文檔大小的一半。

(2)讓HTML標記有始有終。 不管是我們自己寫或是查看他人的HTML代碼時，會發現HTML代碼標籤寫得不規範。 有的標記有頭無尾，但是並沒有妨礙代碼的正確執行。 但瀏覽器卻會花費時間來判斷和計算段落或者清單專案在哪裡結束。 所以，我們一定要讓標記有始有終，這樣做不僅使HTML代碼格式規範，更可以加速頁面的顯示速度。

2、優化層疊樣式表

(1)層疊樣式表css是HTML的裝扮器，一個漂亮的Web頁面不可能沒有它。 一般來說，我們要合併精減CSS代碼，移除無用多餘代碼;圖片儘量不要使用CSS的濾鏡來渲染; CSS的選擇器儘量簡單定義。

(2) HTML頁面中有多種引用CSS的方法，不同的方法導致的效率也不一樣。 通常，我們可以將定義于

3、優化圖片

圖片可以說是影響網頁載入速度最大的因素，不管是使用圖片優化工具，還是減小圖片大小。 在品質和檔案大小之間必須找到一個合適的均衡點。 主要有以下幾個需瞭解的方面。

(1)一般在網頁上使用的圖片格式有三種，jpg、png、gif。 我們只 需要知道在什麼時候應該使用什麼格式，以減少網頁的載入時間。

(2)圖片的使用顯示。 需要顯示圖片時，儘量使用背景圖片，而不是直接載入。 也需要注意的是儘量不要用一個很小的圖片當背景，這樣做會加大用戶端CPU處理時間。 比如說預載入下一頁的主要內容時。 在使用者看到大圖之前先把小圖展開，讓使用者不至於在等待的過程中太焦慮。

(3)圖片在HTML代碼裡要標明大小。 這樣瀏覽器就能事先留好空。 當你在網頁上添加圖片或表格時，你應該指定它們的高度和 度，也就是參數。 如果瀏覽器沒有 找到height和width這兩個參數， 它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。 這不但影響速度， 也影響流覽體驗。

4、優化指令碼語言

(1)網頁的效果離不開腳本程式的支援，我們經常會在頁面中嵌入多種指令碼語言，比如常用到的javascript 與VBScript語言。 動態腳本代碼在使用中也可以進行一定的優化。 在網頁中使用同一種指令碼語言。 不知你發覺沒有，在一個網頁中使用到多種腳本代碼時，這樣的混合使用會減慢頁面的存取速度。 原因在於：要解釋並運行多種腳本代碼，就必須在記憶體中裝載多種腳本引擎。 所以，請儘量在頁面中使用同一種指令碼語言編寫代碼。

(2)能用層疊樣式表實現效果時，不使用指令碼語言。 如必須使用動態腳本代碼時，儘量將代碼外放。 我們知道搜尋引擎是不能讀取指令碼語言的。 如果你覺得往外放太 過麻煩，我們可以將腳本代碼與網頁分離，單獨放到底部來。 對於訪客來說，網站打開至載入到底部的代碼時間很短，有時可以忽略不記，所以不會影響什麼。 而對於搜尋引擎來說它不認識的代碼越少當然越好了。

(3)將多個頁面都用到的腳本程式編寫成獨立存在的指令檔，然後再在頁面中通過JAVASCRIPT等腳文語言調用它。 將多頁面共有部分提取出來減少web頁面下載時間的關鍵就是設法減小檔案大小。 當多個頁面共用一些成分內容時，就可以考慮將這些公用部分單獨分離出來。 這樣，公用檔只需要下載一次，然後就進入緩衝區。 等下 再次調用包含公用檔的html頁面時，下載時間明顯減少。

5、其它技巧的優化

(1)巧用IFRAME佈局

巧用iframe加快網頁打開速度。 如果網頁上插入一些廣告代碼，又不想讓這些廣告網站影響 度的話，那麼，使用iframe最合適不過了。 例如在某個首頁上插入一些廣告代碼方法：將這些廣告代碼放到一個獨立的頁面去，然後在首頁用iframe代碼將該頁面嵌入即可，這樣就不會因為廣告頁面的延遲而拖了整個首頁的顯示。 又比 如，開發一個文檔預覽頁面，可以在左邊放置一系列主題，在右邊放置一個IFRAME，其中包含要預覽的文檔;當滑鼠掠過左邊的每一個主題連結時，就在右邊建立一個 預覽文檔。 我們只需使用單一且簡化了處理過程。

(2)不要讓統計代碼影響速度

很多網站都有統計代碼，為站長和廣告商家提供訪問依據，但是，不管功能有多強大的網站統計系統，都會有出問題的時候。 都要執行時間，如果直接把統計代碼放到頁面內容的前面，或者放在一個Table或者div標籤裡，那麼在計數器不能訪問的時候，你的頁面上那個Table或者div就會產生幾十秒鐘的延遲，導致頁面很長時間才能訪問。 所以，要提高網站的速度，就要講究統計代碼放置的位置，推薦的做法是：把統計代碼放到頁面的最下面，並且不要和頁面內容同在一個Table或者div標籤裡。 可以在頁面代碼的最下方直接放置統計代碼，或者在最下方單獨做一 個Table或者div來放置計數器，這樣，在計數器不能訪問的時候，你的 IFRAME，修改它的SRC屬性即可。 這樣做，不僅代碼效率高效，而網站速度也不會受到絲毫影響。

(3)頁面靜態化設計

有些內容可以靜態化就將其靜態化，以減少伺服器的負擔。 如用圖片代替flash，這對SEO也有好處。 同理，能用靜態HTML頁面實現的，儘量用靜態網頁。 因為資料 更新的原因，ASP、PHP、JSP等程 序實現了網頁資訊的動態交互，運行起來的確非常方便，因為它們的 資料交互性好，能很方便存取最新 內容、更改資料庫的內容，使網站 「動」起來，如：論壇、留言板 等。 但是這類程式必須先由服務 執行處理後，生成HTML頁面，然後 再「送」往用戶端流覽，這就不得 不耗費一定的伺服器資源。 如果在 虛擬主機上過多地使用這類程式， 網頁顯示速度肯定會慢，所以如何 可能，為了網頁打開速度加快，請 儘量使用靜態的HTML頁面。

對於網頁設計者來說。 每一個頁面都應該是精雕細刻，盡其可能優化每一個細節，加快網頁下載打開的速度，以提高使用者體驗的感受，能夠讓我們的網站有更好的使用者體驗，趕快按照上面說的方法，讓自己的網站打開速度飛起來吧!

聲明：本文由順e網：HTTP://www.shun-e.com 原創投稿，尊重他人成果，轉載請注明出處!