Web 效能最佳化方法

1. 壓縮原始碼和圖片
   JavaScript檔案原始碼可以採用混淆壓縮的方式，CSS檔案原始碼進行普通壓縮，JPG圖片可以根據具體質量來壓縮為50%到70%，PNG可以使用一些開源壓縮軟體來壓縮，比如24色變成8色、去掉一些PNG格式資訊等。
2. 選擇合適的圖片格式
   如果圖片顏色數較多就使用JPG格式，如果圖片顏色數較少就使用PNG格式，如果能夠透過伺服器端判斷瀏覽器支援WebP，那麼就使用WebP格式和SVG格式。
3. 合併靜態資源
   包括CSS、JavaScript和小圖片，減少HTTP請求。
4. 開啟伺服器端的Gzip壓縮
   這對文字資源非常有效，對圖片資源則沒有那麼大的壓縮比率
5. 使用CDN
   或者一些公開庫使用第三方提供的靜態資源地址（比如jQuery、normalize.css）。一方面增加併發下載量，另一方面能夠和其他網站共享快取。
6. 延長靜態資源快取時間
   這樣，頻繁訪問網頁的訪客就能夠更快的訪問。不過，這裡要透過修改檔名的方式，確保在資源更新的時候，使用者會拉取到最新的內容。
7. 把CSS放在頁面頭部，把JavaScript放在頁面底部
   這樣就不會阻塞頁面渲染，讓頁面出現長時間的空白。

本作品採用《CC 協議》，轉載必須註明作者和本文連結