前端與移動(dòng)開(kāi)發(fā)：如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

對(duì)于一個(gè)產(chǎn)品來(lái)說(shuō)，不論一個(gè)網(wǎng)站的頁(yè)面多酷炫，代碼多牛叉，如果讓客戶(hù)等的時(shí)間太長(zhǎng)，那都是白搭。所以，不論是前端還是后臺(tái)，用戶(hù)體驗(yàn)對(duì)于我們多重要就不用說(shuō)了，現(xiàn)在我就從前端的角度來(lái)談?wù)劸W(wǎng)站資源優(yōu)化的一些方法和小竅門(mén)。

首先就是圖片了，圖片是UI的最?lèi)?ài)，前端的最恨了。

1、圖片優(yōu)化

首先，你需要優(yōu)化你網(wǎng)站上的圖片，來(lái)獲得絲毫加速網(wǎng)站的機(jī)會(huì)。從原圖上移除額外的注解、不必要的空間和無(wú)用的顏色，將圖片保存為JPEG格式，因?yàn)樗词拐加每臻g小，也能保證圖片的高質(zhì)量。

對(duì)于WordPress網(wǎng)站，建議使用smush.it插件來(lái)自動(dòng)優(yōu)化網(wǎng)站的圖片。如果圖片是PNG格式，可以使用tinypng 優(yōu)化圖片，提高圖片質(zhì)量。

2、開(kāi)啟GZip壓縮

GZip壓縮聽(tīng)起來(lái)很復(fù)雜，但實(shí)際上很簡(jiǎn)單，被用于減少HTTP請(qǐng)求的大小來(lái)縮短響應(yīng)時(shí)間。因?yàn)檫@允許你發(fā)送GZip壓縮文件而不是HTML文件給瀏覽器，它將縮短頁(yè)面等待時(shí)間和加載時(shí)間。對(duì)于Apache服務(wù)器，可以將下面的代碼添加到.htaccess文件中來(lái)開(kāi)啟GZip壓縮。

3、服務(wù)器響應(yīng)時(shí)間

即使網(wǎng)站已經(jīng)格外優(yōu)化，但是除非服務(wù)器響應(yīng)時(shí)間非?？?，否則就不會(huì)有什么大的效果。當(dāng)涉及到提高網(wǎng)站的速度，服務(wù)器響應(yīng)時(shí)間起著重要的作用。下面是一些提高服務(wù)器響應(yīng)時(shí)間的建議。

有獨(dú)立的服務(wù)器，而不是選擇共享/托管服務(wù)器。

提高Web服務(wù)器的質(zhì)量。

移除不必要的插件，只有那些必要的插件，才需要一直保持啟用狀態(tài)。

4、使用CDN

內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)是位于不同地理位置的服務(wù)器組成的網(wǎng)絡(luò)。每個(gè)服務(wù)器都擁有所有網(wǎng)站的文件副本。當(dāng)用戶(hù)請(qǐng)求文件和網(wǎng)頁(yè)時(shí)，就可以直接從就近的網(wǎng)站服務(wù)器獲取相應(yīng)資源(也可以是從負(fù)載最小的服務(wù)器)。你可以使用Amazon cloud front 或者M(jìn)axCDN為網(wǎng)站開(kāi)啟CDN加速。

5、壓縮CSS、JavaScript和HTML文件

通過(guò)刪除所有不必要的空格和注釋?zhuān)瑥亩鴾p小文件大小，提高頁(yè)面的加載速度。下面是一些優(yōu)化CSS、JavaScript和HTML文件的流行工具，非常有用。

CSS Minifier

Avivo

HTML Compressor

6、避免重定向

重定向是對(duì)網(wǎng)站訪問(wèn)者的一種極大的刺激。就類(lèi)似你去一個(gè)朋友家，卻發(fā)現(xiàn)你朋友早已經(jīng)搬到三個(gè)街區(qū)遠(yuǎn)的地方了。重定向會(huì)消耗額外的時(shí)間，降低加載速度。

7、指定字符集

指定字符集是加速瀏覽器渲染頁(yè)面的另一個(gè)有用的技巧。下面的代碼就能輕松實(shí)現(xiàn)：

8、避免錯(cuò)誤請(qǐng)求

當(dāng)用戶(hù)在網(wǎng)站上搜索時(shí)，收到404或410錯(cuò)誤是比較失望的。錯(cuò)誤請(qǐng)求會(huì)對(duì)網(wǎng)站的頁(yè)面加載速度產(chǎn)生不利影響。因此，建議你無(wú)論如何都要避免錯(cuò)誤請(qǐng)求。Check My Link 能幫你找出404鏈接，清除它們，改善用戶(hù)體驗(yàn)。

當(dāng)然，除了前端方面的優(yōu)化外，還有一些其他的優(yōu)化，例如SEO、后臺(tái)代碼。這些需要大家以后再工作中慢慢摸索。好了，今天就說(shuō)到這里了，祝大家以后都工作順利。

本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā)：http://web.itheima.com/