## 前言 基于第一篇教程相信你已經對http優化可以從哪些方面入手有了一定的了解，通過該系列的第二篇教程，你可以通過項目實戰來一步步的優化你的項目，并且看到優化成果。 ## audits（審計）視圖 從http圖我們能夠分析出哪些資源的加載情況以及整體耗時，但可能你還是無從下手。這里推薦給大家一種開發者自帶的審計小工具，可以為你提供初步的建議。  ## 網絡通訊審計 ### 合并腳本 * Combine external JavaScript（12） > 要求你吧引入外聯的腳本文件進行合并，同時來自于不同域名的進行合并，盡量放到同一域名。如果其他域名是cdn的，忽略這條合并域名的建議。 * gulp-concat 構建合并腳本，也可以合并樣式 * 實踐 ### 文檔壓縮 * Enable gzip compression (11) > 要求你壓縮文件，比如可以用gzip壓縮，可以達到的效果：compressing the following resources with gzip could reduce their transfer size by about two thirds (~101?KB):下面列舉的是每個文件壓縮之后可能效果。 * gulp-htmlmin,gulp-minify-css,gulp-uglify,gulp-imagemin 為你提供了方案 * 實踐 ### 增強文檔的有效期 * leverage browser caching (30) > 一般會按照情況指明當前資源所處的情況，是未設置有效期，還是有效期過短，還是不可緩存。The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers：沒有設置合適的有效期；The following cacheable resources have a short freshness lifetime:有效期過短；The following resources are explicitly non-cacheable. Consider making them cacheable if possible:不可緩存文件 * http-status 304 not modified * server cache-control 以及page cache-control ### 指明圖片資源的大小 * Specify image dimensions (6) > 沒有指明圖片大小的，瀏覽器需要加載圖片，獲取原圖片大小，然后重構頁面給適當的顯示空間，耗時耗能。如果有了具體的寬高，只要按照代碼設置寬高即可；如果設置了寬度，那有了寬高比也可以得到適當的縮放，至少寬度上可以得到正確的展現。 * 根據數據不同，限制圖片顯示； * lazyload()插件 * 實踐 ## web page performance ### 合適的加載順序 * Optimize the order of styles and scripts (2) > 1. The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in page(建議你把腳本文件放在樣式文件之后,保證頁面被正確的加載) > 2. 1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline(如果允許并行下載，請把這段腳本移動到內聯) * 無用的腳本寫到css之后 * 實踐 ### 移除無用的樣式規則 * Remove unused CSS rules (1323) > 1323 rules (77%) of CSS not used by the current page(會幫你具體分析哪個文件有多少樣式是沒被使用到的，能夠最大程度的反應你的代碼冗余程度)。 * 通過less做項目分析，簡單頁面做單獨的layout處理，避免無用樣式。