- 相關(guān)推薦
網(wǎng)站代碼優(yōu)化：讓網(wǎng)站打開(kāi)速度飛起來(lái)
網(wǎng)站的打開(kāi)速度是一個(gè)非常重要的用戶(hù)體驗考核標準，當然，影響網(wǎng)站打開(kāi)速度的原因有很多，比如服務(wù)器的問(wèn)題，比如程序的問(wèn)題等等，本文和大家主要分析的不是外部因素，主要是大家在網(wǎng)站設計過(guò)程當中，把內部因素做到極致，加快網(wǎng)站的打開(kāi)速度就是這么簡(jiǎn)單!
一、如何判斷一個(gè)網(wǎng)頁(yè)的打開(kāi)速度
1、網(wǎng)頁(yè)內容的大小
搜索引擎優(yōu)化網(wǎng)頁(yè)打開(kāi)的最佳 速度：2秒!網(wǎng)頁(yè)內容所包括的文本、產(chǎn)品的圖片、視頻、Flash文件等。 我們有一個(gè)網(wǎng)頁(yè)訪(fǎng)問(wèn)的時(shí)間計算公式：網(wǎng)頁(yè)打開(kāi)時(shí)間=網(wǎng)頁(yè)內容大小/最小帶寬+解析次數*每次解析時(shí)間+服務(wù)器處理時(shí)間+客戶(hù)端解析時(shí)間。用戶(hù)最滿(mǎn)意的打開(kāi)網(wǎng)頁(yè)時(shí)間，是在2秒以下。用戶(hù)能夠忍受的最長(cháng)等待時(shí)間的中位數，在 6-8秒之間。這就是說(shuō)，8秒是個(gè)臨界值，如果你的網(wǎng)站打開(kāi)速度在8秒以上，那么很可能，大部分訪(fǎng)問(wèn)者最終都會(huì )離你而去。
2、控制頁(yè)面的總規模
要想把網(wǎng)頁(yè)做得精彩，內容必須豐富，但不要把所有的內容都放在一個(gè)頁(yè)面上，應控制頁(yè)面的總規模。首先統計頁(yè)面中的每個(gè)元素，如文字、圖像、ActiveX或Java代碼 以及HTML文本的大小，頁(yè)面容量最好在50K以下。
二、網(wǎng)頁(yè)設計優(yōu)化
網(wǎng)頁(yè)優(yōu)化是指在設計，使用網(wǎng)頁(yè)各元素時(shí)，能夠盡量減少網(wǎng)頁(yè)元素對下載速度所產(chǎn)生的影響。這些細節我們了解后，是能在日常網(wǎng)頁(yè)制作中可以進(jìn)行避免的。
1、讓網(wǎng)頁(yè)符合W3C標準
(1)在網(wǎng)頁(yè)制作中使 用結構層同表現層完全分離。也就 是布局使用用CSS而不用TABLE。這樣做不僅能替換掉專(zhuān)業(yè)的表現層的垃圾代碼如標簽。而且也能讓你的網(wǎng)站在重構方而能夠輕松實(shí)現。幾年來(lái)的多項研宄已證實(shí)，如果對一個(gè)網(wǎng)站進(jìn)行重寫(xiě)，使用DIV+CSS布局取代表格布局，那么可以砍掉原 XHMTL文檔大小的一半。
(2)讓HTML標記有始有終。不管是我們自己寫(xiě)或是查看他人的HTML代碼時(shí)，會(huì )發(fā)現HTML代碼標簽寫(xiě)得不規范。有的標記有頭無(wú)尾，如標簽 li，標簽p。它并沒(méi)有妨礙代碼的正確執行。但瀏覽器卻會(huì )花費時(shí)間來(lái)判斷和計算段落或者列表項目在哪里結束。所以，我們一定要讓標記有始有終，這樣做不僅使HTML代碼格式規范，更可以加速頁(yè)面的顯示速度。
2、優(yōu)化層疊樣式表
(1)層疊樣式表css是HTML的裝扮器，一個(gè)漂亮的Web頁(yè)面不可能沒(méi)有它。一般來(lái)說(shuō)，我們要合并精減CSS代碼，移除無(wú)用多余代碼;圖片盡量不要使用CSS的濾鏡來(lái)渲染; CSS的選擇器盡量簡(jiǎn)單定義。
(2)HTML頁(yè)面中有多種引用CSS的方法，不同的方法導致的效率也不一樣。通常，我們可以將定義于
3、優(yōu)化圖片
圖片可以說(shuō)是影響網(wǎng)頁(yè)加載速度最大的因素，不管是使用圖片優(yōu)化工具，還是減小圖片大小。在質(zhì)量和文件大小之間必須找到一個(gè)合適的均衡點(diǎn)。主要有以下幾個(gè)需了解的方面。
(1)一般在網(wǎng)頁(yè)上使用的圖片格式有三種，jpg、png、gif。我們只 需要知道在什么時(shí)候應該使用什么格式，以減少網(wǎng)頁(yè)的加載時(shí)間。
(2)圖片的使用顯示。需要顯示圖片時(shí)，盡量使用背景圖片，而不是直接加載。也需要注意的是盡量不要用一個(gè)很小的圖片當背景，這樣做會(huì )加大客戶(hù)端CPU處理時(shí)間。比如說(shuō)預載入下一頁(yè)的主要內容時(shí)。在用戶(hù)看到大圖之前先把小圖展開(kāi)，讓用戶(hù)不至于在等待的過(guò)程中太焦慮。
(3)圖片在HTML代碼里要標明大小。這樣瀏覽器就能事先留好空。當你在網(wǎng)頁(yè)上添加圖片或表格時(shí)，你應該指定它們的高度和 度，也就是參數。如果瀏覽器沒(méi)有 找到height和width這兩個(gè)參數， 它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁(yè)面。這不但影響速度， 也影響瀏覽體驗。
4、優(yōu)化腳本語(yǔ)言
(1)網(wǎng)頁(yè)的效果離不開(kāi)腳本程序的支持，我們經(jīng)常會(huì )在頁(yè)面中嵌入多種腳本語(yǔ)言，比如常用到的javascript 與VBScript語(yǔ)言。動(dòng)態(tài)腳本代碼在使用中也可以進(jìn)行一定的優(yōu)化。在網(wǎng)頁(yè)中使用同一種腳本語(yǔ)言。不知你發(fā)覺(jué)沒(méi)有，在一個(gè)網(wǎng)頁(yè)中使用到多種腳本代碼時(shí)，這樣的混合使用會(huì )減慢頁(yè)面的訪(fǎng)問(wèn)速度。原因在于：要解釋并運行多種腳本代碼，就必須在內存中裝載多種腳本引擎。所以，請盡量在頁(yè)面中使用同一種腳本語(yǔ)言編寫(xiě)代碼。
(2)能用層疊樣式表實(shí)現效果時(shí)，不使用腳本語(yǔ)言。如必須使用動(dòng)態(tài)腳本代碼時(shí)，盡量將代碼外放。我們知道搜索引擎是不能讀取腳本語(yǔ)言的。如果你覺(jué)得往外放太 過(guò)麻煩，我們可以將腳本代碼與網(wǎng)頁(yè)分離，單獨放到底部來(lái)。對于訪(fǎng)客來(lái)說(shuō)，網(wǎng)站打開(kāi)至加載到底部的代碼時(shí)間很短，有時(shí)可以忽略不記，所以不會(huì )影響什么。而對于搜索引擎來(lái)說(shuō)它不認識的代碼越少當然越好了。
(3)將多個(gè)頁(yè)面都用到的腳本程序編寫(xiě)成獨立存在的腳本文件，然后再在頁(yè)面中通過(guò)JAVASCRIPT等腳文語(yǔ)言調用它。將多頁(yè)面共有部分提取出來(lái)減少web頁(yè)面下載時(shí)間的關(guān)鍵就是設法減小文件大小。當多個(gè)頁(yè)面共用一些成分內容時(shí)，就可以考慮將這些公用部分單獨分離出來(lái)。這樣，公用文件只需要下載一次，然后就進(jìn)入緩沖區。等下 再次調用包含公用文件的html頁(yè)面時(shí)，下載時(shí)間明顯減少。
5、其它技巧的優(yōu)化
(1)巧用IFRAME布局
巧用iframe加快網(wǎng)頁(yè)打開(kāi)速度。如果網(wǎng)頁(yè)上插入一些廣告代碼，又不想讓這些廣告網(wǎng)站影響 度的話(huà)，那么，使用iframe最合適不過(guò)了。例如在某個(gè)首頁(yè)上插入一些廣告代碼方法：將這些廣告代碼放到一個(gè)獨立的頁(yè)面去，然后在首頁(yè)用iframe代碼將該頁(yè)面嵌入即可，這樣就不會(huì )因為廣告頁(yè)面的延遲而拖了整個(gè)首頁(yè)的顯示。又比 如，開(kāi)發(fā)一個(gè)文檔預覽頁(yè)面，可以在左邊放置一系列主題，在右邊放置一個(gè)IFRAME，其中包含要預覽的文檔;當鼠標掠過(guò)左邊的每一個(gè)主題鏈接時(shí)，就在右邊建立一個(gè) 預覽文檔。我們只需使用單一且簡(jiǎn)化了處理過(guò)程。
(2)不要讓統計代碼影響速度
很多網(wǎng)站都有統計代碼，為站長(cháng)和廣告商家提供訪(fǎng)問(wèn)依據，但是，不管功能有多強大的網(wǎng)站統計系統，都會(huì )有出問(wèn)題的時(shí)候。都要運行時(shí)間，如果直接把統計代碼放到頁(yè)面內容的前面，或者放在一個(gè)Table或者div標簽里，那么在計數器不能訪(fǎng)問(wèn)的時(shí)候，你的頁(yè)面上那個(gè)Table或者div就會(huì )產(chǎn)生幾十秒鐘的延遲，導致頁(yè)面很長(cháng)時(shí)間才能訪(fǎng)問(wèn)。所以，要提高網(wǎng)站的速度，就要講究統計代碼放置的位置，推薦的做法是：把統計代碼放到頁(yè)面的最下面，并且不要和頁(yè)面內容同在一個(gè)Table或者div標簽里。 可以在頁(yè)面代碼的最下方直接放置統計代碼，或者在最下方單獨做一 個(gè)Table或者div來(lái)放置計數器，這樣，在計數器不能訪(fǎng)問(wèn)的時(shí)候，你的 IFRAME，修改它的SRC屬性即可。這樣做，不僅代碼效率高效，而網(wǎng)站速度也不會(huì )受到絲毫影響。
(3)頁(yè)面靜態(tài)化設計
有些內容可以靜態(tài)化就將其靜態(tài)化，以減少服務(wù)器的負擔。 如用圖片代替flash，這對SEO也有好處。同理，能用靜態(tài)HTML頁(yè)面實(shí)現的，盡量用靜態(tài)網(wǎng)頁(yè)。因為數據 更新的原因，ASP、PHP、JSP等程 序實(shí)現了網(wǎng)頁(yè)信息的動(dòng)態(tài)交互，運行起來(lái)的確非常方便，因為它們的 數據交互性好，能很方便存取最新 內容、更改數據庫的內容，使網(wǎng)站 “動(dòng)”起來(lái)，如：論壇、留言板 等。但是這類(lèi)程序必須先由服務(wù) 執行處理后，生成HTML頁(yè)面，然后 再 “送”往客戶(hù)端瀏覽，這就不得 不耗費一定的服務(wù)器資源。如果在 虛擬主機上過(guò)多地使用這類(lèi)程序， 網(wǎng)頁(yè)顯示速度肯定會(huì )慢，所以如何 可能，為了網(wǎng)頁(yè)打開(kāi)速度加快，請 盡量使用靜態(tài)的HTML頁(yè)面。
對于網(wǎng)頁(yè)設計者來(lái)說(shuō)。每一個(gè)頁(yè)面都應該是精雕細刻，盡其可能優(yōu)化每一個(gè)細節，加快網(wǎng)頁(yè)下載打開(kāi)的速度，以提高用戶(hù)體驗的感受，能夠讓我們的網(wǎng)站有更好的用戶(hù)體驗，趕快按照上面說(shuō)的方法，讓自己的網(wǎng)站打開(kāi)速度飛起來(lái)吧!
【網(wǎng)站代碼優(yōu)化：讓網(wǎng)站打開(kāi)速度飛起來(lái)】相關(guān)文章：
網(wǎng)站優(yōu)化技巧方法07-16
怎么做網(wǎng)站優(yōu)化07-11
淺談企業(yè)網(wǎng)站優(yōu)化技巧07-11
關(guān)于提升網(wǎng)站優(yōu)化排名的技巧07-20
談?wù)劸W(wǎng)站的外部?jì)?yōu)化之我見(jiàn)07-10
網(wǎng)站優(yōu)化和數據分析的關(guān)系07-10