Web 前端性能優化相關內容解析

Web 前端性能優化相關內容，來源於《Google官方網頁載入速度檢測工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相關說明。你們能夠對照着去優化本身的網站或者相關項目。本文由Jeff 整理。

0.提升服務器的響應速度

砸錢的東西，但卻最根本；搞好這一項，甚比下面任何一項。

1.優化樣式表和腳本的排列順序

正確地排列外部樣式表與外部和內嵌腳本的順序，可增長下載時同時加載的數據量，並提升瀏覽器顯示網頁的速度。

將樣式表放在頂部，將腳本放在底部

2.使用瀏覽器緩存

在 HTTP 標頭中爲靜態資源設置有效期或最長存在時間（Google建議最短爲一週，最好能達一年左右，⊙﹏⊙b汗），可指示瀏覽器從本地磁盤中加載之前下載的資源而不是從網絡中加載。

3.使目標網頁重定向可緩存

許多網頁都會將用戶重定向至不一樣的網址，例如：從 www.example.com 重定向至 m.example.com。使這些重定向信息可緩存到用戶的瀏覽器中，可加快訪問者屢次訪問同一網站時的網頁加載速度。

4.內嵌小型 CSS

將小型樣式表內嵌到主 HTML 網頁中，可減小在下載其餘資源時的往返時間 (RTT) 和延遲時間。

5.內嵌小型 JavaScript

將小型 JavaScript 文件內嵌到主 HTML 網頁中，可減小在下載其餘資源時的往返時間 (RTT) 和延遲時間。

6.壓縮 CSS

壓縮 CSS 代碼能夠節省大量的數據字節空間，並提升下載、解析和執行的速度。

7.壓縮 HTML

壓縮 HTML 代碼（包括其中所含的任何內嵌 JavaScript 和 CSS）可節省大量的數據字節空間，並提升下載、解析和執行的速度。

8.壓縮 JavaScript

壓縮 JavaScript 代碼能夠節省大量的數據字節空間，並提升下載、解析和執行的速度。

9.啓用 Keep-Alive

有效地下降TCP握手的次數，減小httpd進程數，下降內存的使用

10.啓用壓縮

使用 gzip 或 deflate 壓縮資源，可減小經過網絡發送的字節數。

11.將圖片組合爲 CSS 貼圖定位

儘可能減小使用 CSS 貼圖定位合併圖片後的文件數量，可減小在下載其餘資源時的往返時間和延遲時間、節省請求開銷，並減小網頁下載的總字節數。

12.將查詢字符串從靜態資源中刪除

在 HTTP 標頭中爲靜態資源啓用公共緩存，可以讓瀏覽器從附近的代理服務器中下載資源，而沒必要從遠程原始服務器中下載。

13.儘可能減小請求的數據量

儘可能減小 Cookie 和請求標頭的大小，可確保將 HTTP 請求放入單個數據包中。

14.儘可能減小重定向

儘可能減小從一個網址到另外一個網址的 HTTP 重定向次數，以減小額外的往返時間 (RTT) 和用戶等待的時間。

15.指定圖片大小

爲全部的圖片指定寬度和高度，可消除進行沒必要要重排與重繪的需求，從而加快圖片的顯示速度。

16.提供壓縮後的圖片

適當地調整圖片的大小，可節省大量的數據字節空間。

17.由同一網址提供資源

經過惟一的網址發佈資源，這樣才能避免下載重複的字節以及產生額外的往返時間 。

18.請指定一個「Vary: Accept-Encoding」標頭

指示代理服務器緩存資源的兩個版本：壓縮版與未壓縮版。這樣有助於避免公共代理沒法正確檢測 Content-Encoding 標頭的問題。

19.請指定緩存驗證工具

經過指定緩存驗證工具（Last-Modified 或 ETag 標頭），您能夠確保系統可以有效地肯定緩存資源的有效性。

20.避免出現錯誤的請求

刪除「已損壞的連接」或會致使 404/410 錯誤的請求，可避免發出無效的請求。

21.首選異步資源

錯開資源的加載時間可減少網頁加載時出現資源堵塞的機率。

22.避免在 CSS 中使用 @import

在外部樣式表中使用 CSS @import 會增長網頁加載時的延遲。

23.暫緩 JavaScript 解析

經過最大程度地減小顯示網頁所需的 JavaScript 數據量，並暫緩解析不須要的 JavaScript（等到須要執行時再進行解析），您能夠提升網頁的初始加載速度。

24.優化圖片

適當地設置圖片的格式並進行壓縮，可節省大量的數據字節空間。

25.指定字符集

儘早爲您的 HTML 文檔指定字符集，可以讓瀏覽器當即開始執行腳本。

26.避免在meta 標籤中指定字符集

27.合併CSS、JavaScript文件

減小HTTP請求的數量

 

相關閱讀：

http://developer.yahoo.com/performance/rules.html