前端與移動開發(fā)：如何對網站的文件和資源進行優(yōu)化?

對于一個產品來說，不論一個網站的頁面多酷炫，代碼多牛叉，如果讓客戶等的時間太長，那都是白搭。所以，不論是前端還是后臺，用戶體驗對于我們多重要就不用說了，現在我就從前端的角度來談談網站資源優(yōu)化的一些方法和小竅門。

首先就是圖片了，圖片是UI的最愛，前端的最恨了。

1、圖片優(yōu)化

首先，你需要優(yōu)化你網站上的圖片，來獲得絲毫加速網站的機會。從原圖上移除額外的注解、不必要的空間和無用的顏色，將圖片保存為JPEG格式，因為它即使占用空間小，也能保證圖片的高質量。

對于WordPress網站，建議使用smush.it插件來自動優(yōu)化網站的圖片。如果圖片是PNG格式，可以使用tinypng 優(yōu)化圖片，提高圖片質量。

2、開啟GZip壓縮

GZip壓縮聽起來很復雜，但實際上很簡單，被用于減少HTTP請求的大小來縮短響應時間。因為這允許你發(fā)送GZip壓縮文件而不是HTML文件給瀏覽器，它將縮短頁面等待時間和加載時間。對于Apache服務器，可以將下面的代碼添加到.htaccess文件中來開啟GZip壓縮。

3、服務器響應時間

即使網站已經格外優(yōu)化，但是除非服務器響應時間非常快，否則就不會有什么大的效果。當涉及到提高網站的速度，服務器響應時間起著重要的作用。下面是一些提高服務器響應時間的建議。

有獨立的服務器，而不是選擇共享/托管服務器。

提高Web服務器的質量。

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

4、使用CDN

內容分發(fā)網絡(CDN)是位于不同地理位置的服務器組成的網絡。每個服務器都擁有所有網站的文件副本。當用戶請求文件和網頁時，就可以直接從就近的網站服務器獲取相應資源(也可以是從負載最小的服務器)。你可以使用Amazon cloud front 或者MaxCDN為網站開啟CDN加速。

5、壓縮CSS、JavaScript和HTML文件

通過刪除所有不必要的空格和注釋，從而減小文件大小，提高頁面的加載速度。下面是一些優(yōu)化CSS、JavaScript和HTML文件的流行工具，非常有用。

CSS Minifier

Avivo

HTML Compressor

6、避免重定向

重定向是對網站訪問者的一種極大的刺激。就類似你去一個朋友家，卻發(fā)現你朋友早已經搬到三個街區(qū)遠的地方了。重定向會消耗額外的時間，降低加載速度。

7、指定字符集

指定字符集是加速瀏覽器渲染頁面的另一個有用的技巧。下面的代碼就能輕松實現：

8、避免錯誤請求

當用戶在網站上搜索時，收到404或410錯誤是比較失望的。錯誤請求會對網站的頁面加載速度產生不利影響。因此，建議你無論如何都要避免錯誤請求。Check My Link 能幫你找出404鏈接，清除它們，改善用戶體驗。

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

本文版權歸黑馬程序員前端與移動開發(fā)學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員前端與移動開發(fā)培訓學院

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