網友上網(wǎng)都不喜(xǐ)歡(huān)用(yòng)太多的時(shí)間(jiān)等(děng)待(dài)網(wǎng)頁(yè)的(dí)打開(kāi)，等待的(dí)越長(cháng)，用戶(hù)可(kě)能(néng)會(huì)直接關(guān)閉網頁，這樣就(jiù)會損(sǔn)失(shī)很多流(liú)量(liáng)！其次，關(guān)鍵字(zì)的排(pái)名與網頁的打開(kāi)速度也(yě)有(yǒu)關係(xì)，這(zhè)個(gè)主要(yào)體(tǐ)現(xiàn)搜索(suǒ)引(yǐn)擎對(duì)用(yòng)戶(hù)體(tǐ)驗(yàn)度上，用戶體驗度好(hǎo)，排名(míng)相對其它網(wǎng)站就好(hǎo)些。因此(cǐ)我(wǒ)覺得(dé)我(wǒ)們(mén)有(yǒu)必要(yào)去(qù)提高(gāo)網(wǎng)頁的打(dǎ)開(kāi)速(sù)度(dù)，這(zhè)個不需要太多(duō)的成本(běn)投(tóu)入，隻需(xū)要(yào)平(píng)時多(duō)注(zhù)意(yì)一些(xiē)小技巧(qiǎo)就行(háng)了(liǎo)！下(xià)麵給出20種(zhǒng)方法幫你(nǐ)提高(gāo)網(wǎng)站訪問速(sù)度(dù)縮短網(wǎng)頁加載時間(jiān)。
1，減(jiǎn)少頁(yè)麵HTTP請求數量(liáng)
比(bǐ)較(jiào)直(zhí)接的理(lǐ)解就(jiù)是要(yào)減少調用其他(tā)頁(yè)麵(miàn)，文件的數(shù)量。
A.我們在使(shǐ)用CSS格式控(kòng)製的(dí)時候，經(jīng)常(cháng)會(huì)采(cǎi)用background載入很多(duō)圖(tú)形文(wén)件，每(měi)個(gè)background的(dí)圖(tú)像(xiàng)至(zhì)少產(chǎn)生1次(cì)HTTP請求，一(yī)般我們(mén)為(wéi)了(liǎo)讓(ràng)頁麵生動(dòng)活潑會大量使(shǐ)用(yòng)background來(lái)加(jiā)載背景圖(tú)，要改(gǎi)善這(zhè)個(gè)狀況，可以采(cǎi)用(yòng)css的1個有用的background-position屬(shǔ)性來加(jiā)載(zǎi)背景圖，我們(mén)將(jiāng)需要頻繁(fán)加載的(dí)多(duō)個(gè)圖(tú)片合成為(wéi)1個單獨(dú)的(dí)圖(tú)片(piàn)，需要加(jiā)載時，采用(yòng)以下形(xíng)式(shì)加(jiā)載即可將這(zhè)部(bù)分圖(tú)片加(jiā)載(zǎi)的(dí)HTTP請求(qiú)縮(suō)減為(wéi)1個。
B.采(cǎi)用Image maps，這個方法也比較(jiào)常(cháng)用(yòng)，隻(zhī)是限(xiàn)於同1個區域使用。
C.Inline images，這(zhè)個(gè)方(fāng)法很少(shǎo)見(jiàn)到(dào)，但對(duì)於很小(xiǎo)很簡單的圖像卻(què)是很(hěn)實用(yòng)的(dí)，相(xiāng)關語法標準參(cān)照(zhào)：tools.ietf.org/html/rfc2397。
2，使用(yòng)CDN(Content Delivery Network)網絡加速
現在(zài)國內做(zuò)CDN加速業(yè)務的(dí)公(gōng)司很多(duō)，簡(jiǎn)單(dān)講，就是將你(nǐ)的(dí)圖片，視頻擴散到(dào)CDN網絡所能到達之(zhī)處，讓(ràng)用戶(hù)訪問時(shí)能(néng)就近(jìn)下載到(dào)這些文(wén)件，從而達到網絡提速(sù)的目(mù)的(dí)，這樣做，同時能減(jiǎn)輕(qīng)你自己(jǐ)網(wǎng)站(zhàn)的負載。
3，添(tiān)加文(wén)件(jiàn)過(guò)期或緩存(cún)頭
對(duì)於(yú)同一用戶頻繁(fán)訪問(wèn)的圖片，Js腳本文件等可(kě)以(yǐ)在Apache或Nginx設置其緩(huǎn)衝 時間，例(lì)如設(shè)置(zhì)24小時過(guò)期(qī)時間，這樣用(yòng)戶在訪(fǎng)問過(guò)該(gāi)頁麵之(zhī)後再次訪問(wèn)時，同(tóng)一組圖片或JS不會(huì)再重復下載，從而減少(shǎo)了(liǎo)HTTP請求，用戶(hù)訪問速度明顯(xiǎn)有 所(suǒ)提(tí)升，同(tóng)時(shí)服(fú)務(wù)器負(fù)載(zǎi)也會下(xià)降(jiàng)。下(xià)麵(miàn)給出(chū)nginx配(pèi)置中緩(huǎn)存(cún)控製的例(lì)子：
4，服務器(qì)開(kāi)啟gzip壓縮
這個(gè)大(dà)家(jiā)都比較了解(jiě)，即將(jiāng)需(xū)要(yào)傳(chuán)輸的內容壓(yā)縮後(hòu)傳輸到(dào)客戶(hù)端(duān)再解壓，這樣(yàng)在網絡上(shàng)傳(chuán)輸的(dí) 數據量會大幅(fú)減小。通常在服務(wù)器上的Apache，Nginx可以直(zhí)接(jiē)開啟(qǐ)這個設(shè)置(zhì)，也(yě)可(kě)以從代碼(mǎ)角(jiǎo)度直接設置(zhì)傳(chuán)輸文(wén)件頭(tóu)，增加(jiā)gzip的設(shè)置，也(yě)可以從 負載均衡(héng)設備(bèi)直(zhí)接(jiē)設(shè)置(zhì)。不過(guò)需要留意(yì)的是(shì)，這個設(shè)置會(huì)略微增加服(fú)務器的(dí)負(fù)擔。
5，css格式(shì)定(dìng)義放置(zhì)在文件(jiàn)頭(tóu)部(bù)
這項設置對(duì)於用(yòng)戶(hù)端是(shì)慢(màn)速網(wǎng)絡或網頁內(nèi)容比較龐(páng)大(dà)的情(qíng)況比較有利，可以在網頁逐(zhú)步(bù)呈現的同(tóng)時仍(réng)會保(bǎo)持格式信(xìn)息，不影(yǐng)響(xiǎng)網頁(yè)美(měi)感(gǎn)。
6，Javascript腳本(běn)放在文(wén)件(jiàn)末尾
很(hěn)多Javascript腳本執(zhí)行效(xiào)率(shuài)低下，或者(zhě)有(yǒu)的(dí)第3方域名腳(jiǎo)本出現意(yì)外(wài)無法載(zǎi)入， 如果將這(zhè)些(xiē)腳(jiǎo)本放(fàng)置(zhì)到(dào)頁(yè)麵(miàn)比較靠前的(dí)位置(zhì)，可能會(huì)導致(zhì)我(wǒ)們自己網站的內容載(zǎi)入速度下降(jiàng)甚至無(wú)法正常(cháng)加(jiā)載，所(suǒ)以(yǐ)一般(bān)將這些(xiē)腳本(běn)放(fàng)置在網(wǎng)頁(yè)文(wén)件末尾，一(yī)定要放(fàng) 置(zhì)在前麵(miàn)的腳本要改(gǎi)用(yòng)所(suǒ)謂的(dí)“後載入”方式加(jiā)載，在(zài)主體網(wǎng)頁加載完(wán)成(chéng)後再加載(zǎi)，防(fáng)止(zhǐ)其(qí)影(yǐng)響(xiǎng)到主體網頁的加(jiā)載速度。
7，避(bì)免(miǎn)使用(yòng)CSS腳本(CSS Expressions)
有(yǒu)時(shí)為了要css的參(cān)數動態改變(biàn)，可能會采(cǎi)用css expression來(lái)實現，但(dàn)這(zhè)樣(yàng)做得不(bù)償失，會使(shǐ)用(yòng)戶(hù)端(duān)瀏(liú)覽器(qì)負擔(dān)明(míng)顯加重，所以不建議(yì)這樣做(zuò)，如(rú)果需(xū)要改(gǎi)變(biàn)，可以(yǐ)使(shǐ)用(yòng)Javascript腳(jiǎo)本(běn)去(qù)實現(xiàn)。
8，css，javascript改由(yóu)外(wài)部(bù)調(tiáo)用
如(rú)果css，js內(nèi)容(róng)比(bǐ)較(jiào)龐大，盡量不要(yào)寫到同(tóng)1個頁(yè)麵中去，改(gǎi)由外(wài)部載(zǎi)入(rù)比(bǐ)較(jiào)妥(tuǒ)當，因(yīn)為瀏(liú)覽(lǎn)器(qì)本(běn)身會對css，js文(wén)件進行(háng)緩存(cún)。
9，壓縮Javascript，CSS代碼(mǎ)
一般js，css文(wén)件(jiàn)中(zhōng)存在(zài)大量(liáng)的空(kōng)格(gé)，換行，注(zhù)釋，這(zhè)些利(lì)於閱讀(dú)，如果(guǒ)能夠壓縮(suō)掉，將會很有(yǒu)利於網(wǎng)絡(luò)傳輸。這(zhè)方麵(miàn)的工具(jù)也(yě)有很多(duō)，一般可以(yǐ)保(bǎo)留(liú)開(kāi)發(fā)版本，利(lì)用(yòng)工具(jù)生(shēng)成生產版本，2個文件比較(jiào)，一般(bān)壓縮率能達到(dào)50%以(yǐ)上(shàng)，減少的(dí)數據(jù)量還(huán)是(shì)比較(jiào)可(kě)觀的(dí)。
我這個博客剛(gāng)改版完成，各(gè)種(zhǒng)代(dài)碼還沒有進(jìn)行(háng)優(yōu)化和(hé)壓縮，目(mù)前yslow評級隻能(néng)達(dá)到(dào)D,等有時間進(jìn)行(háng)部分(fēn)優(yōu)化(huà)，達到C等級應該(gāi)問(wèn)題不(bù)大。
10，避免采(cǎi)用(yòng)301，302轉向
11，養(yǎng)成良好的開(kāi)發維護(hù)習慣(guàn)，盡量避免腳(jiǎo)本(běn)重(zhòng)復調用(yòng)
12，配(pèi)置ETags
13，Ajax采用緩(huǎn)存調(tiáo)用
這個的使用(yòng)可(kě)以參照Discuz論(lùn)壇代碼(mǎ)，裏(lǐ)麵對(duì)於大量(liáng)使用的(dí)Ajax調用都(dū)采用(yòng)了(liǎo)緩(huǎn)存(cún) 調用方(fāng)式，一般采(cǎi)用附加(jiā)特(tè)征(zhēng)參數(shù)方式(shì)實現，注意(yì)其(qí)中的
就(jiù)是特(tè)征參數，這(zhè)個參(cān)數(shù)不變(biàn)化(huà)就使(shǐ)用緩(huǎn)存文(wén)件，如(rú)果(guǒ)發生變化則(zé)重(zhòng)新(xīn)下載新文(wén)件(jiàn)或更(gēng)新信 息(xī)。
14，合(hé)理(lǐ)使(shǐ)用Flush
用戶(hù)端(duān)發送(sòng)瀏覽請求後，服務器端一般要花銷200-500ms去(qù)處理(lǐ)這些(xiē)請(qǐng)求，在(zài)此(cǐ)期間，用戶端(duān)瀏覽器處(chǔ)於等(děng)待狀(zhuàng)態(tài)，如(rú)果(guǒ)要減(jiǎn)少(shǎo)用戶等(děng)待時間(jiān)，可(kě)以(yǐ)在適當的(dí)位置(zhì)使(shǐ)用(yòng)flush，將(jiāng)已經就緒的(dí)內(nèi)容推送(sòng)到用戶(hù)端(duān)，這在php中(zhōng)很容易(yì)實(shí)現(xiàn)例(lì)如(rú)：
15，Ajax調(tiáo)用盡(jìn)量采用(yòng)GET方(fāng)法(fǎ)調(tiáo)用
實際使(shǐ)用XMLHttpRequest時(shí)，如果使用POST方(fāng)法(fǎ)實現，會(huì)發(fā)生(shēng)2次HTTP請(qǐng)求，而使用GET方(fāng)法隻會發生1次(cì)HTTP請(qǐng)求(qiú)。如果改(gǎi)用(yòng)GET方法，HTTP請求減少50%！
16，盡可(kě)能減(jiǎn)少DCOM元(yuán)素
這個(gè)很(hěn)好理解，就是(shì)盡(jìn)可(kě)能(néng)減少(shǎo)網頁中(zhōng)各種(zhǒng)<>元素(sù)數量，例如
的(dí)冗(rǒng)餘(yú)很嚴(yán)重，而(ér)我們完全可(kě)以用(yòng)取(qǔ)代之(zhī)。
17，使(shǐ)用(yòng)多(duō)域名負載(zǎi)網頁內的多個(gè)文(wén)件，圖片(piàn)
記得(dé)有(yǒu)資(zī)料(liào)說(shuō)明(míng)，IE在(zài)網(wǎng)頁(yè)載入(rù)過程(chéng)中，在同1時刻，對同(tóng)1域(yù)名並行加(jiā)的HTTP請(qǐng)求(qiú)數 量最(zuì)高(gāo)為2個，如(rú)果網(wǎng)頁需(xū)要(yào)加載的(dí)文件數(shù)量超(chāo)過(guò)2個(通(tōng)常遠(yuǎn)遠(yuǎn)超(chāo)過(guò)..)，要加(jiā)快(kuài)網頁(yè)訪問速度，最(zuì)好將文件(jiàn)分布到(dào)多(duō)個(gè)域名，例(lì)如(rú)19樓(lóu)，其(qí)js文件(jiàn)采用獨(dú) 立的域(yù)名，據說百度(dù)的(dí)圖片(piàn)服(fú)務(wù)器數量在(zài)20台(tái)以(yǐ)上。
18，縮減iframe的使(shǐ)用，如無(wú)必要，盡(jìn)量不要使(shǐ)用
iframe通常用於不同(tóng)域(yù)名內容的加載，這(zhè)同時也(yě)可能因iframe內容(róng)加載速(sù)度影(yǐng)響(xiǎng)到主網(wǎng)頁加載(zǎi)速(sù)度(dù)，如(rú)果可能，把(bǎ)需(xū)要加載的(dí)內(nèi)容(róng)抓(zhuā)取到本(běn)地直接嵌入(rù)。如(rú)果實在(zài)需要iframe加載(zǎi)，采用後(hòu)載入方(fāng)式(shì)實現。
19，優(yōu)化圖片(piàn)文(wén)件
優化圖(tú)片文件(jiàn)，減(jiǎn)小其尺寸，特別(bié)是縮略圖(tú)，一定要(yào)按尺寸生(shēng)成(chéng)縮略圖(tú)然後調(tiáo)用(yòng)，不(bù)要在(zài)網(wǎng)頁中用resize方法實(shí)現，雖(suī)然這(zhè)樣看(kàn)到的圖片外形笑了(liǎo)，但(dàn)是其加(jiā)載(zǎi)的(dí)數據(jù)量一點(diǎn)也沒(méi)減(jiǎn)少。曾經(jīng)見(jiàn)過有人(rén)在網頁中(zhōng)加載(zǎi)的縮略(lüè)圖，其真實尺寸(cùn)有(yǒu)10M之(zhī)巨…
普(pǔ)通圖像，icon也要盡(jìn)可能壓縮後(hòu)，可以(yǐ)采(cǎi)用(yòng)web圖像(xiàng)保存(cún)，減少顏(yán)色數等等方法實現。
20，當(dāng)頁麵(miàn)內容(róng)龐大到(dào)一定程(chéng)度(dù)，可以采(cǎi)用分頁(yè)的(dí)方(fāng)式展現(xiàn)，或(huò)者taobao的(dí)那(nà)種(zhǒng)翻(fān)頁後載(zǎi)入(rù)方(fāng)式(shì)。
作者：51cto
轉載(zǎi)請保(bǎo)留原文地(dì)址: https://antelcom.cn/show-315.html