很(hěn)多站(zhàn)長(cháng)使用虛(xū)擬(nǐ)主機來(lái)做(zuò)網站，網頁(yè)內容(róng)一(yī)旦很(hěn)多(duō)，網站打(dǎ)開速度(dù)就會特別(bié)慢(màn)，如果說服務(wù)器，帶寬，CDN這類硬指(zhǐ)標我們(mén)沒有(yǒu)經濟實(shí)力去做，不(bù)妨(fáng)通過(guò)網頁代碼(mǎ)優化(huà)的方式來提(tí)高(gāo)速度(dù)，總(zǒng)結了一些可行(háng)性的方法(fǎ)。
1: 縮小(xiǎo)Javascript和(hé)CSS文件
如(rú)果你(nǐ)的網站大(dà)約(yuē)有(yǒu)50-60%的用戶是第(dì)一(yī)次訪客(kè)，那麼(mó)這些人(rén)會下載(zǎi)Javascript和CSS，如果這(zhè)些(xiē)文(wén)件很大瀏覽(lǎn)器會下載很(hěn)長時間(jiān)。
使用(yòng)壓縮工具可以減少Javascript和(hé)CSS盡(jìn)一(yī)半(bàn)的文件大(dà)小，如果(guǒ)你有信(xìn)心(xīn)使用“命令行”我(wǒ)強烈(liè)推(tuī)薦使用(yòng)雅(yǎ)虎(hǔ)的YUI壓縮(suō)，至少(shǎo)能提高40%到60%的壓縮率，如果你是在(zài)不(bù)懂(dǒng)可(kě)以用站長之家(jiā)的(dí)CSS\JS壓縮工(gōng)具。
2：減(jiǎn)少HTTP請求
瀏覽(lǎn)器會花費(fèi)80%的時間獲取外(wài)部元(yuán)件(jiàn)，包(bāo)括(kuò)腳本，樣(yàng)式表，圖像(xiàng)等(děng)，隻有(yǒu)20%的時間(jiān)用來(lái)加(jiā)載(zǎi)內(nèi)容(róng)，每(měi)個網站(zhàn)都會(huì)有許(xǔ)多(duō)HTTP請求(qiú)，由於隻(zhī)有2個(gè)HTTP請(qǐng)求可(kě)以(yǐ)在同一(yī)時(shí)間(jiān)傳(chuán)送，所(suǒ)以請求(qiú)一旦(dàn)過多就(jiù)會造(zào)成延遲(chí)。
通過Yslow可(kě)以看(kàn)出我博客(kè)的(dí)HTTP請求數，可以看(kàn)到(dào)JS，CSS和CSS引(yǐn)用(yòng)的圖片文(wén)件過多(duō)，導(dǎo)致(zhì)HTTP請求(qiú)過多(duō)。
3：緩存圖(tú)片，CSS和Javascript
每當一個新用(yòng)戶訪問你的網站(zhàn)，圖片(piàn)，CSS和(hé)Javascript應該在其(qí)瀏覽(lǎn)器緩存(cún)，這(zhè)樣他們下(xià)一次訪問(wèn)就(jiù)特(tè)別快(kuài)。
絕(jué)大(dà)多(duō)數windows主機(jī)已經默認啟(qǐ)用(yòng)了(liǎo)，隻需(xū)要(yào)在(zài)控(kòng)製麵(miàn)板(bǎn)中設(shè)定(dìng)過(guò)期(qī)時(shí)間(jiān)和(hé)文(wén)件類(lèi)型那(nà)個就(jiù)可以(yǐ)了，我建議(yì)圖片，CSS和(hé)Javascript時(shí)間可設置(zhì)為(wéi)一個(gè)月(yuè)。而(ér)對於(yú)Apache Web服(fú)務器，使用(yòng)mod_cache模塊開啟緩(huǎn)存。:
4：合並CSS引用(yòng)圖片(piàn)
如(rú)圖一(yī)所示，很(hěn)多(duō)網站的(dí)圖片(piàn)都是(shì)切成(chéng)小塊的，這樣(yàng)下來(lái)就會(huì)有(yǒu)大(dà)量(liáng)CSS引用圖(tú)片，如(rú)盧鬆鬆博客(kè)的CSS就引用了14張圖(tú)片(piàn)，cssimages也是(shì)影(yǐng)響網站速度的一(yī)種(zhǒng)重要(yào)因(yīn)素(sù)。
如果我(wǒ)們把CSS圖片合並成(chéng)一個，14個HTTP請求變(biàn)成(chéng)1個(gè)，想(xiǎng)想(xiǎng)會是什(shí)麼(mó)效果(guǒ)？它的原理(lǐ)就(jiù)是(shì)通過CSS坐(zuò)標的方(fāng)式取得(dé)圖(tú)片徑(jìng)路(lù)，每個CSS標簽(qiān)引(yǐn)用不同坐標就會(huì)得到(dào)不(bù)同(tóng)圖片。我們看到(dào)很(hěn)多(duō)網站(zhàn)的CSS圖片隻(zhī)有一張，用的(dí)就(jiù)是(shì)這個原(yuán)理(lǐ)。
不懂(dǒng)也沒(méi)有(yǒu)關係(xì)，CSS圖片合(hé)並(bìng)生(shēng)成器(qì)這(zhè)個網(wǎng)站(zhàn)能幫(bāng)助(zhù)你合(hé)並CSS圖(tú)片(piàn)，並且(qiě)能(néng)得到相應(yīng)代(dài)碼(mǎ)。
5：隻加載<head>部分(fēn)的(dí)基本腳(jiǎo)本
這(zhè)個(gè)最簡單，不花時間(jiān)，點擊自(zì)己(jǐ)網(wǎng)站右鍵(jiàn)“查(chá)看源(yuán)文件”找到(dào)<head>與</head>之間的區(qū)域，看看(kàn)那(nà)些不重要(yào)好的(dí)JS文(wén)件，把它仍(réng)到(dào)頁麵(miàn)底(dǐ)部，也(yě)就(jiù)是讓它(tā)最後加載(zǎi)。或者(zhě)直(zhí)接(jiē)刪(shān)除(chú)。
例如(rú)盧鬆鬆(sōng)博(bó)客引用的(dí)jiathis（社會化(huà)分享(xiǎng)按鈕）和util.js（回頂(dǐng)部(bù)，寫(xiě)評(píng)論快捷(jié)標簽），讓(ràng)它最後(hòu)加(jiā)載，這(zhè)樣能(néng)提(tí)升內容(róng)打開速度，而(ér)且它(tā)們也不(bù)太重(zhòng)要。
6：對圖像進行壓(yā)縮(suō)
除(chú)非(fēi)你(nǐ)加載視(shì)頻，那麼(mó)影(yǐng)響(xiǎng)網(wǎng)站速度(dù)罪(zuì)魁禍首應該就是圖片(piàn)了，如果(guǒ)是jpeg，png圖片，保證不失(shī)品質的前提(tí)下，讓他們(mén)盡量(liáng)壓(yā)縮，Fireworks軟件“導出向導”功能，它提(tí)供(gōng)了一(yī)個很(hěn)好的(dí)方(fāng)式來預覽保存的圖像，讓圖(tú)片大小與(yǔ)質(zhì)量之間(jiān)平(píng)衡，大(dà)多數其(qí)他(tā)圖像編(biān)輯(jí)軟件都有(yǒu)類似的(dí)功(gōng)能(néng)。
例如(rú)我(wǒ)的(dí)每篇(piān)博文配圖都(dū)用(yòng)了“導出向導”功能(néng)，我盡量(liáng)把(bǎ)圖片都壓(yā)縮在30K以內，在(zài)一(yī)定程(chéng)度上加快了(liǎo)瀏(liú)覽(lǎn)速(sù)度，但(dàn)也(yě)有(yǒu)部分(fēn)圖片(piàn)失(shī)真，看不清(qīng)楚(chǔ)。
7：開(kāi)啟gzip模(mó)塊(kuài)
gzip壓(yā)縮(suō)是非(fēi)常(cháng)流行(háng)的(dí)一種數(shù)據(jù)壓縮(suō)格式(shì)，一般(bān)網站啟(qǐ)用(yòng)gzip後(hòu)，壓縮率都(dū)會(huì)有(yǒu)70%-80%的提升，效(xiào)果是(shì)立竿見(jiàn)影(yǐng)的。
部分虛擬主(zhǔ)機(jī)默認(rèn)有(yǒu)gzip功能，但大部分沒(méi)有，獨立主機(jī)，VPS一般可(kě)以設(shè)置，開啟gzip會加重(zhòng)服務器負擔，而(ér)且要(yào)修改服務器配(pèi)置(zhì)，強烈建議(yì)大(dà)家開啟(qǐ)gzip，如果(guǒ)不清楚可(kě)以問(wèn)問(wèn)所(suǒ)在空(kōng)間(jiān)商，讓他們幫(bāng)忙(máng)開啟。
作者：盧鬆(sōng)鬆
轉(zhuǎn)載請保(bǎo)留原文地址(zhǐ): https://antelcom.cn/show-295.html