發(fā)布日期：2017/3/18

網(wǎng)站的打開速度是一個(gè)特別很是主要的用戶體驗(yàn)考核標(biāo)準(zhǔn)，當(dāng)然，影響網(wǎng)站打開速度的原因有許多，比如服務(wù)器的問題，比如程序的問題等等，本文我和大家主要分析的不是外部因素，主要是大家在網(wǎng)站設(shè)計(jì)過程當(dāng)中，把內(nèi)部因素做到，加快網(wǎng)站的打開速度就是這么簡(jiǎn)單!

一、如何判斷一個(gè)網(wǎng)頁的打開速度

1、網(wǎng)頁內(nèi)容的大小

搜索引擎優(yōu)化網(wǎng)頁打開的好佳 速度：2秒!網(wǎng)頁內(nèi)容所包括的文本、產(chǎn)品的圖片、視頻、Flash文件等。 我們有一個(gè)網(wǎng)頁訪問的時(shí)間計(jì)算公式：網(wǎng)頁打開時(shí)間=網(wǎng)頁內(nèi)容大小/好小帶寬+解析次數(shù)*每次解析時(shí)間+服務(wù)器處理時(shí)間+客戶端解析時(shí)間。用戶好寫意的打開網(wǎng)頁時(shí)間，是在2秒以下。用戶能夠忍受的好長(zhǎng)等待時(shí)間的中位數(shù)，在 6-8秒之間。這就是說，8秒是個(gè)臨界值，假如你的網(wǎng)站打開速度在8秒以上，那么很可能，大部分訪問者好終都會(huì)離你而去。

2、控制頁面的總規(guī)模

要想把網(wǎng)頁做得精彩，內(nèi)容必須雄厚，但不要把所有的內(nèi)容都放在一個(gè)頁面上，應(yīng)控制頁面的總規(guī)模。首先統(tǒng)計(jì)頁面中的每個(gè)元素，如文字、圖像、ActiveX或Java代碼 以及HTML文本的大小，頁面容量好好在50K以下。

二、網(wǎng)頁代碼設(shè)計(jì)優(yōu)化

網(wǎng)頁優(yōu)化是指在設(shè)計(jì)，使用網(wǎng)頁各元素時(shí)，能夠盡量削減網(wǎng)頁元素對(duì)下載速度所產(chǎn)生的影響。這些細(xì)節(jié)我們了解后，是能在日常網(wǎng)頁制作中可以進(jìn)行避免的。

1、讓網(wǎng)頁吻合W3C標(biāo)準(zhǔn)

(1)在網(wǎng)頁制作中使 用結(jié)構(gòu)層同體現(xiàn)層完全星散。也就 是布局使用用CSS而不用TABLE。這樣做不僅能替代掉專業(yè)的體現(xiàn)層的垃圾代碼如標(biāo)簽。而且也能讓你的網(wǎng)站在重構(gòu)方而能夠輕松實(shí)現(xiàn)。幾年來的多項(xiàng)研宄已證實(shí)，假如對(duì)一個(gè)網(wǎng)站進(jìn)行重寫，使用DIV+CSS布局庖代表格布局，那么可以砍掉原XHMTL文檔大小的一半。

(2)讓HTML標(biāo)記有始有終。不管是我們自己寫或是查看他人的HTML代碼時(shí)，會(huì)發(fā)現(xiàn)HTML代碼標(biāo)簽寫得不規(guī)范。有的標(biāo)記有頭無尾，但是并沒有妨礙代碼的準(zhǔn)確執(zhí)行。但瀏覽器卻會(huì)花費(fèi)時(shí)間來判斷和計(jì)算段落或者列表項(xiàng)目在哪里結(jié)束。所以，我們一定要讓標(biāo)記有始有終，這樣做不僅使HTML代碼格式規(guī)范，更可以加速頁面的顯示速度。

2、優(yōu)化層疊樣式表

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

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

3、優(yōu)化圖片

圖片可以說是影響網(wǎng)頁加載速度好大的因素，不管是使用圖片優(yōu)化工具，照舊減小圖片大小。在質(zhì)量和文件大小之間必須找到一個(gè)合適的均衡點(diǎn)。主要有以下幾個(gè)需了解的方面。

(1)一般在網(wǎng)頁上使用的圖片格式有三種，jpg、png、gif。我們只 需要知道在什么時(shí)候應(yīng)該使用什么格式，以削減網(wǎng)頁的加載時(shí)間。

(2)圖片的使用顯示。需要顯示圖片時(shí)，盡量使用背景圖片，而不是直接加載。也需要注重的是盡量不要用一個(gè)很小的圖片當(dāng)背景，這樣做會(huì)加大客戶端CPU處理時(shí)間。比如說預(yù)載入下一頁的主要內(nèi)容時(shí)。在用戶看到大圖之前先把小圖睜開，讓用戶不至于在等待的過程中太焦慮。

(3)圖片在HTML代碼里要標(biāo)明大小。這樣瀏覽器就能事先留好空。當(dāng)你在網(wǎng)頁上添加圖片或表格時(shí)，你應(yīng)該指定它們的高度和 度，也就是參數(shù)。假如瀏覽器沒有 找到height和width這兩個(gè)參數(shù)， 它需要一邊下載圖片一邊計(jì)算大小，假如圖片許多，瀏覽器需要賡續(xù)地調(diào)整頁面。這不但影響速度， 也影響瀏覽體驗(yàn)。

4、優(yōu)化腳本語言

(1)網(wǎng)頁的效果離不開腳本程序的支撐，我們經(jīng)常會(huì)在頁面中嵌入多種腳本語言，比如常用到的javascript 與VBScript語言。動(dòng)態(tài)腳本代碼在使用中也可以進(jìn)行一定的優(yōu)化。在網(wǎng)頁中使用統(tǒng)一種腳本語言。不知你發(fā)覺沒有，在一個(gè)網(wǎng)頁中使用到多種腳本代碼時(shí)，這樣的混合使用會(huì)減慢頁面的訪問速度。原因在于：要詮釋并運(yùn)行多種腳本代碼，就必須在內(nèi)存中裝載多種腳本引擎。所以，請(qǐng)盡量在頁面中使用統(tǒng)一種腳本語言編寫代碼。

(2)能用層疊樣式表實(shí)現(xiàn)效果時(shí)，不使用腳本語言。如必須使用動(dòng)態(tài)腳本代碼時(shí)，盡量將代碼外放。我們知道搜索引擎是不能讀取腳本語言的。假如你覺得往外放太 過麻煩，我們可以將腳本代碼與網(wǎng)頁星散，單獨(dú)放到底部來。對(duì)于訪客來說，網(wǎng)站打開至加載到底部的代碼時(shí)間很短，有時(shí)可以忽略不記，所以不會(huì)影響什么。而對(duì)于搜索引擎來說它不熟悉的代碼越少當(dāng)然越好了。

(3)將多個(gè)頁面都用到的腳本程序編寫成自力存在的腳本文件，然后再在頁面中通過javascript等腳文語言調(diào)用它。將多頁面共有部分提掏出來削減web頁面下載時(shí)間的關(guān)鍵就是設(shè)法減小文件大小。當(dāng)多個(gè)頁面共用一些成分內(nèi)容時(shí)，就可以考慮將這些公用部分單獨(dú)星散出來。這樣，公用文件只需要下載一次，然后就進(jìn)入緩沖區(qū)。等下 再次調(diào)用包含公用文件的html頁面時(shí)，下載時(shí)間顯明削減。

5、其它技巧的優(yōu)化

(1)巧用IFRAME布局

巧用iframe加快網(wǎng)頁打開速度。假如網(wǎng)頁上插入一些廣告代碼，又不想讓這些廣告網(wǎng)站影響 度的話，那么，使用iframe好合適不過了。例如在某個(gè)首頁上插入一些廣告代碼方法：將這些廣告代碼放到一個(gè)自力的頁面去，然后在首頁用iframe代碼將該頁面嵌入即可，這樣就不會(huì)因?yàn)閺V告頁面的延遲而拖了整個(gè)首頁的顯示。又比 如，開發(fā)一個(gè)文檔預(yù)覽頁面，可以在左邊放置一系列主題，在右邊放置一個(gè)IFRAME，其中包含要預(yù)覽的文檔;當(dāng)鼠標(biāo)掠過左邊的每一個(gè)主題鏈接時(shí)，就在右邊建立一個(gè) 預(yù)覽文檔。我們只需使用單一且簡(jiǎn)化了處理過程。

(2)不要讓統(tǒng)計(jì)代碼影響速度

許多網(wǎng)站都有統(tǒng)計(jì)代碼，為站長(zhǎng)和廣告商家提供訪問依據(jù)，但是，不管功能有多壯大的網(wǎng)站統(tǒng)計(jì)系統(tǒng)，都會(huì)有出問題的時(shí)候。都要運(yùn)行時(shí)間，假如直接把統(tǒng)計(jì)代碼放到頁面內(nèi)容的前面，或者放在一個(gè)Table或者div標(biāo)簽里，那么在計(jì)數(shù)器不能訪問的時(shí)候，你的頁面上那個(gè)Table或者div就會(huì)產(chǎn)生幾十秒鐘的延遲，導(dǎo)致頁面很長(zhǎng)時(shí)間才能訪問。所以，要提高網(wǎng)站的速度，就要講究統(tǒng)計(jì)代碼放置的位置，推薦的做法是：把統(tǒng)計(jì)代碼放到頁面的好下面，并且不要和頁面內(nèi)容同在一個(gè)Table或者div標(biāo)簽里。 可以在頁面代碼的好下方直接放置統(tǒng)計(jì)代碼，或者在好下方單獨(dú)做一 個(gè)Table或者div來放置計(jì)數(shù)器，這樣，在計(jì)數(shù)器不能訪問的時(shí)候，你的 IFRAME，修改它的SRC屬性即可。這樣做，不僅代碼效率高效，而網(wǎng)站速度也不會(huì)受到涓滴影響。

(3)頁面靜態(tài)化設(shè)計(jì)

有些內(nèi)容可以靜態(tài)化就將其靜態(tài)化，以削減服務(wù)器的負(fù)擔(dān)。 如用圖片代替flash，這對(duì)seo也有益處。同理，能用靜態(tài)HTML頁面實(shí)現(xiàn)的，盡量用靜態(tài)網(wǎng)頁。因?yàn)閿?shù)據(jù) 更新的原因，ASP、PHP、JSP等程 序?qū)崿F(xiàn)了網(wǎng)頁信息的動(dòng)態(tài)交互，運(yùn)行起來的確特別很是方便，因?yàn)樗鼈兊?數(shù)據(jù)交互性好，能很方便存取好新 內(nèi)容、更改數(shù)據(jù)庫(kù)的內(nèi)容，使網(wǎng)站 “動(dòng)”起來，如：論壇、留言板 等。但是這類程序必須先由服務(wù) 執(zhí)行處理后，生成HTML頁面，然后 再“送”往客戶端瀏覽，這就不得 不耗費(fèi)一定的服務(wù)器資源。假如在 虛擬主機(jī)上過多地使用這類程序， 網(wǎng)頁顯示速度一定會(huì)慢，所以如何 可能，為了網(wǎng)頁打開速度加快，請(qǐng) 盡量使用靜態(tài)的HTML頁面。

對(duì)于網(wǎng)頁設(shè)計(jì)者來說。每一個(gè)頁面都應(yīng)該是精雕細(xì)刻，盡其可能優(yōu)化每一個(gè)細(xì)節(jié)，加快網(wǎng)頁下載打開的速度，以提高用戶體驗(yàn)的感受，能夠讓我們的網(wǎng)站有更好的用戶體驗(yàn)，趕緊按照上面說的方法，讓自己的網(wǎng)站打開速度飛起來吧!