更新時(shí)間:2018-01-05 來源:黑馬程序員 瀏覽量:
對于一個(gè)產(chǎn)品來說,不論一個(gè)網(wǎng)站的頁面多酷炫,代碼多牛叉,如果讓客戶等的時(shí)間太長,那都是白搭。所以,不論是前端還是后臺(tái),用戶體驗(yàn)對于我們多重要就不用說了,現(xiàn)在我就從前端的角度來談?wù)劸W(wǎng)站資源優(yōu)化的一些方法和小竅門。
首先就是圖片了,圖片是UI的最愛,前端的最恨了。
1、圖片優(yōu)化
首先,你需要優(yōu)化你網(wǎng)站上的圖片,來獲得絲毫加速網(wǎng)站的機(jī)會(huì)。從原圖上移除額外的注解、不必要的空間和無用的顏色,將圖片保存為JPEG格式,因?yàn)樗词拐加每臻g小,也能保證圖片的高質(zhì)量。
對于WordPress網(wǎng)站,建議使用smush.it插件來自動(dòng)優(yōu)化網(wǎng)站的圖片。如果圖片是PNG格式,可以使用tinypng 優(yōu)化圖片,提高圖片質(zhì)量。
2、開啟GZip壓縮
GZip壓縮聽起來很復(fù)雜,但實(shí)際上很簡單,被用于減少HTTP請求的大小來縮短響應(yīng)時(shí)間。因?yàn)檫@允許你發(fā)送GZip壓縮文件而不是HTML文件給瀏覽器,它將縮短頁面等待時(shí)間和加載時(shí)間。對于Apache服務(wù)器,可以將下面的代碼添加到.htaccess文件中來開啟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)用戶請求文件和網(wǎng)頁時(shí),就可以直接從就近的網(wǎng)站服務(wù)器獲取相應(yīng)資源(也可以是從負(fù)載最小的服務(wù)器)。你可以使用Amazon cloud front 或者M(jìn)axCDN為網(wǎng)站開啟CDN加速。
5、壓縮CSS、JavaScript和HTML文件
通過刪除所有不必要的空格和注釋,從而減小文件大小,提高頁面的加載速度。下面是一些優(yōu)化CSS、JavaScript和HTML文件的流行工具,非常有用。
CSS Minifier
Avivo
HTML Compressor
6、避免重定向
重定向是對網(wǎng)站訪問者的一種極大的刺激。就類似你去一個(gè)朋友家,卻發(fā)現(xiàn)你朋友早已經(jīng)搬到三個(gè)街區(qū)遠(yuǎn)的地方了。重定向會(huì)消耗額外的時(shí)間,降低加載速度。
7、指定字符集
指定字符集是加速瀏覽器渲染頁面的另一個(gè)有用的技巧。下面的代碼就能輕松實(shí)現(xiàn):
8、避免錯(cuò)誤請求
當(dāng)用戶在網(wǎng)站上搜索時(shí),收到404或410錯(cuò)誤是比較失望的。錯(cuò)誤請求會(huì)對網(wǎng)站的頁面加載速度產(chǎn)生不利影響。因此,建議你無論如何都要避免錯(cuò)誤請求。Check My Link 能幫你找出404鏈接,清除它們,改善用戶體驗(yàn)。
當(dāng)然,除了前端方面的優(yōu)化外,還有一些其他的優(yōu)化,例如SEO、后臺(tái)代碼。這些需要大家以后再工作中慢慢摸索。好了,今天就說到這里了,祝大家以后都工作順利。
本文版權(quán)歸黑馬程序員前端與移動(dòng)開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院
首發(fā):http://web.itheima.com/
前端與移動(dòng)開發(fā):高效學(xué)習(xí)小套路
2018-01-05前端通過Chrome Workspace調(diào)試本地項(xiàng)目
2018-01-05前端工程師與互聯(lián)網(wǎng)公司其他崗位是如何配合的?
2018-01-05前端與移動(dòng)開發(fā):js對閉包的深入理解
2018-01-05前端與移動(dòng)開發(fā):Js中調(diào)試小技巧tips---斷點(diǎn)調(diào)試
2018-01-05前端與移動(dòng)開發(fā):H5C3-過渡效果失效的問題小結(jié)
2018-01-05