概述

參考自谷歌的教程網站的加載性能可以從減少網絡延遲、減少資源數量、減少資源體積和使用緩存 4 個方面來進行優化。

1. 減少網絡延遲與網絡請求避免使用著陸頁進行重定向。重定向會導致額外的HTTP請求，造成網絡延遲，拖慢網頁的呈現。重定向也可能造成額外的DNS查找，TCP握手和TLS協商。合并資源，減少網絡請求合并資源網站優化，最常見的就是精靈圖了。此外網站優化，還可以合并一下 CSS 和 JS 代碼。2. 控制資源下載數量

訪問一個網頁時，所請求的資源一定要都是有用的，避免無用的資源請求，如：1. 多余的js文件，css文件2. 多余的圖片請求3. 多余的字體請求

3. 資源體積的優化

網站用到的資源主要有：

3.1 文字類資源的優化

首先當然是自己要寫出優質、簡潔的代碼了。

其次，對于 js文件，html文件，css文件，要進行文件最小化處理，去除文字間的空格、換行，進行變量名的替換等等。這些工作一般都是在前端工程打包時進行的， 如：

接下來就是使用GZIP對文件進行編碼壓縮了。現代瀏覽器都可以接受 gzip 格式的文件，我們要做的就是對服務端進行配置。

3.2 圖像類資源的優化

選擇正確的圖片格式雖然經常說png 圖片比 jpge 圖片能更好的表現攝影圖像，但是對于很多圖片來說，png格式的圖片，轉化為 jpeg 格式后，對于圖片的清晰度并沒有特別大的影響，但是體積卻能大大減少。

移除不必要的元數據某些拍出來的照片會含有元數據，就是描述數據的數據。元數據會描述圖片拍攝的設備信息，時間戳，圖片尺寸等，這對于某些網頁圖片來說不是很重要，所以我們可以剔除掉這些元數據。嘗試下這個網站。

減小圖片的尺寸某些情況下，\

標簽或標簽的背景即使用了大圖，其在實際網頁中的尺寸也很小，這時使用大圖就是造成資源的浪費了。這是可以對圖片尺寸進行重設， 比如將1200 x 600 像素的圖片改為 600 x 300 像素。

降低圖片質量在某些情況下，降低圖片的質量并不會造成任何視覺上的差別，卻能減少大量的體積。有很多處理圖片質量的軟件，如：

更多參考這里。

圖片壓縮盡管對圖片使用gzip壓縮沒什么效果，但是還是有很多軟件可以在不影響圖片尺寸和視覺質量的情況下，對圖片進行壓縮的，比如這個網站。更多網站可以參考這里。