Web 效能優化方法

CodeFarmer發表於2018-08-18
  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 協議》,轉載必須註明作者和本文連結

CodeFarmer

相關文章