1. 服務(wù)器端未壓縮的靜態(tài)文件

通過文件進(jìn)行Gzip壓縮的方式可以減少從服務(wù)器端到瀏覽器端文件傳輸所需要的時間。

當(dāng)某個用戶點擊到你的網(wǎng)站時，就產(chǎn)生一個從服務(wù)器端調(diào)用文件的請求。文件的尺寸越大，那么從服務(wù)器端加載文件到瀏覽器端所需的時間就會越久。對網(wǎng)頁頁面和樣式文件進(jìn)行Gzip壓縮（最多可以減少70%的文件大小）可以有效減少傳輸所需時間。

考慮到成本和收益方面，Gzip壓縮應(yīng)該是讓你的頁面達(dá)到接近頂級速度優(yōu)化的最佳方案了。

2. 未壓縮的CSS和JavaScript文件

CSS和JavaScript文件的瘦身可以通過minification來完成。

是一個用于在保持代碼功能的前提下消除所有不必要代碼字符的程序。它對CSS和JavaScript文件的處理包括：

• 移除空格；
• 移除注釋；
• 移除無用的代碼；
• 優(yōu)化條件表達(dá)式；
• 縮短變量和函數(shù)名；
• 混淆產(chǎn)品代碼。

Minification還能夠降低網(wǎng)絡(luò)延遲（數(shù)據(jù)包從一個地方傳輸?shù)搅硪粋€地方的時間），這能夠讓瀏覽器加載得更快。

除了Minification，你還可以有更多的選擇：

• 要壓縮樣式列表，可以選擇或者。CSSNano可以通過作為插件集成到你的工作流中去。
• 要壓縮JavaScript，可以選擇。你可以通過或者Gulp插件、將UglifyJS運(yùn)用到工作流中。

3. 未經(jīng)優(yōu)化的圖片

優(yōu)化頁面上圖片可以減少頁面文件大小，而不會影響其質(zhì)量。

通常在大型的網(wǎng)站之中包含了許多圖片，在加載一個頁面的數(shù)據(jù)時需要加載時間最多的就是頁面的圖片。因此，優(yōu)化圖片是改善網(wǎng)頁性能的一個最簡單方式。

優(yōu)化圖片的方式包括：

• 無損壓縮；
• 將圖片轉(zhuǎn)化成網(wǎng)頁適配類型；
• 不犧牲質(zhì)量的前提下移除一些不重要的圖片數(shù)據(jù)；
• 減少圖片周圍的空白；
• 把圖片控制在合適的尺寸。

4. 沒有利用瀏覽器的緩存

緩存可以減少用戶對某個頁面進(jìn)行重復(fù)訪問所需的加載時間；頁面的存儲文件在這個時間段內(nèi)無需再次進(jìn)行獲取和加載。

當(dāng)用戶對某個網(wǎng)站進(jìn)行首次訪問時，會通過網(wǎng)絡(luò)來獲取頁面資源，數(shù)據(jù)請求可能會在客戶端和服務(wù)器端之間進(jìn)行多次傳遞。緩存會存取平時常用的文件，從而確保后續(xù)的網(wǎng)站訪問能夠更加快速。要激活瀏覽器的緩存，需要在http響應(yīng)頭上添加Cache-Control和ETag。Cache-Control定義了瀏覽器和其它高速緩存在哪個時間段，如何對響應(yīng)進(jìn)行緩存。ETag提供了一個用于與服務(wù)器服務(wù)器進(jìn)行通信，檢查是否需要更新資源的驗證令牌。

5. 太多的重定向

重定向需要額外的HTTP請求-響應(yīng)周期，而這會拖延頁面的加載。

請移除不必要的重定向，特別是主頁或者著陸頁上的重定向。

6. 無效的HTML和CSS代碼

請編寫符合W3C標(biāo)準(zhǔn)的HTML和CSS代碼，這樣你的代碼才能夠被現(xiàn)代瀏覽器一致解析。

無效的HTML代碼會因為某些不必要的操作而減緩頁面的加載速度。

無效的CSS代碼會減緩頁面的渲染時間。

在運(yùn)行代碼之前，可以通過驗證HTML代碼，通過驗證CSS代碼。或者你可以通過將工作流和HTML驗證結(jié)合起來。 

7. 陳舊的技術(shù)

盡量避免使用那些過時的技術(shù)，如在瀏覽器中嵌入Flash, Java和Silverlight。

大多數(shù)移動設(shè)備不支持如Flash，并且使用這些插件容易產(chǎn)生頁面崩潰和安全事故。很多插件都是過去的陳舊技術(shù)，你在創(chuàng)建頁面內(nèi)容的時候一定要確保采用能夠被所有的設(shè)備和瀏覽器接受的web技術(shù)。

8. 沒有利用HTML的新特性

這里有一些簡單的HTML 5特性能夠幫助你改進(jìn)網(wǎng)站性能：

在腳本中添加異步標(biāo)簽

對比以前，頁面渲染之前你需要等待腳本完成頁面文件的下載，而現(xiàn)在異步腳本已經(jīng)在后臺完成了下載。這意味著瀏覽器可以跟著異步腳本標(biāo)簽對HTML文件進(jìn)行持續(xù)渲染。

為了讓文檔中head的腳本變成異步，你只需要在腳本標(biāo)簽中添加“async”：

<script src="async-example.js" <strong>async</strong>></script>

這可以防止腳本阻止后續(xù)的腳本和頁面，從而提高了加載速度。

撤銷meta標(biāo)簽的字符集設(shè)置

對meta標(biāo)簽的字符集進(jìn)行指定能禁用IE8的先行下載器（lookahead downloader），而禁用此下載器可以提高頁面的加載速度。

對HTML文件中HTTP內(nèi)容類型響應(yīng)頭（HTTP Content-Type response header )的字符集進(jìn)行設(shè)置，允許瀏覽器能夠立即對HTML文件和腳本進(jìn)行加載。該方法也可以對每一個頁面的字符集進(jìn)行設(shè)置。

以下是在常見服務(wù)器上如何對默認(rèn)字符集進(jìn)行配置：

在Apache中，在根目錄的.htaccess文件中添加以下代碼，然后重啟Apache服務(wù)器：

AddDefaultCharset UTF-8

在nginx中，從server板塊里添加字符集，然后重新加載nginx配置：

server {
   # ... other server config...
   charset utf-8;
}

在IIS中，點擊Open IIS > MIME types，然后將.html MIME type設(shè)置為text/html; charset=UTF-8，最后重啟網(wǎng)站:

9. 同步的JavaScript阻止了頁面的加載

將script標(biāo)簽添加在接近/body標(biāo)簽的位置，以確保它們不會阻止并行下載。

10. 緩慢的服務(wù)器響應(yīng)

這是最復(fù)雜的網(wǎng)站性能殺手，很遺憾，要解決這個問題很難！

而你所能做的就是識別和修正服務(wù)器端代碼，以確保服務(wù)器更快的響應(yīng)時間和網(wǎng)站、應(yīng)用程序更快的加載速度。

本文翻譯自，譯者：慧都控件網(wǎng)-回憶和感動