關於 Web 效能最佳化

標籤：頁面   jpg   title   壓縮   阻塞   tps   關於   效能最佳化   通過   

• 壓縮源碼和圖片

　　JavaScript 檔案原始碼可以採用混淆壓縮的方式，CSS 檔案原始碼進行普通壓縮，JPG 圖片可以根據具體品質來壓縮為 50% 到 70%，PNG 可以使用一些開源壓縮軟體來壓縮，比如 24 色變成 8 色、去掉一些 PNG 格式資訊等。

• 選擇合適的圖片格式

　　如果圖片顏色數較多就使用 JPG 格式，如果圖片顏色數較少就使用 PNG 格式，如果能夠通過伺服器端判斷瀏覽器支援 WebP，那麼就使用 WebP 格式和 SVG 格式。

• 合并靜態資源

　　包括 CSS、JavaScript 和小圖片，減少 HTTP 要求。

• 開啟伺服器端的 Gzip 壓縮

　　這對文本資源非常有效，對圖片資源則沒那麼大的壓縮比率。

• 使用 CDN

　　或者一些公開庫使用第三方提供的靜態資源地址（比如 jQuery、normalize.css）。一方面增加並發下載量，另一方面能夠和其他網站共用快取。

• 延長靜態資源緩衝時間

　　這樣，頻繁訪問網站的訪客就能夠更快地訪問。不過，這裡要通過修改檔案名稱的方式，確保在資源更新的時候，使用者會拉取到最新的內容。

• 把 CSS 放在頁面頭部，把 JavaScript 放在頁面底部

　　這樣就不會阻塞頁面渲染，讓頁面出現長時間的空白。

　　每一個條目都可以進一步深層挖掘下去。

　　Web 效能最佳化分為伺服器端和瀏覽器端兩個方面。

關於 Web 效能最佳化