系列概述
在移動web興起的年代，速度優化重新被大家重視起來，因為手機的網路環境和效能比PC端差了很多，估計大家也能感覺到用手機開啟網頁的時候，能明顯感覺到頁面蝸牛般的速度。
這個系列的優化會以移動環境為基礎，當然絕大多數規則也同樣適合PC端。
優化的基本原則
速度優化有一些基本思路，提前總結一下
- 按需載入(只載入你需要的)
- 並行(讓序列的事情並行起來)
- 壓縮(通過壓縮減少體積)
- 快取(利用快取，減少請求等待)
- 預測(預測使用者行為，提前發出請求)
- 合併(把多個零散檔案合併起來，減少請求)
- 自動化(讓速度優化變成一種常規，和自動化工具(例如gulp,grunt,fis)結合，減少成本)
進入正題，優化你的css
為什麼第一篇講css，因為css是最難優化的，圖片和js你都可以延遲載入，而css不可以，你必須在dom前面載入css，你必須接受css阻塞dom渲染的現實。
css優化之壓縮(cssshrink)
我們一般都會對css進行常規壓縮，主要做去空格和換行的工作。這裡推薦的cssshrink會做更精細的工作，cssshrink會首先通過css parser對css進行解析，然後有針對性的進行優化。例如會吧0px和0%轉換成0，bold轉換成700，字元級別的極致壓縮，為作者點個贊。
css優化之合併
- 使用gulp-concat將多個css合併在一起
- 不要使用@import 減少阻塞和請求
css拆分
看起來和上面有些衝突，這也是css和其它部分優化不同的地方。 一般我們大家都習慣把css放在最上面，js放在最下面。這是一個好習慣，但是對於css來說並不是最好的選擇。
在移動端，大家非常重視首屏時間，也就是使用者看到頁面的時間。把整個頁面的css都放在最上面，大量首屏用不到的css會阻塞首屏的展現。
- head只放首屏能用到的css，首屏外的css下移
css使用率
一般頁面經過多人維護後，會產生大量用不到css，大家也不敢隨意刪除，這就需要一些檢測工具
- unu
1.1 unu是一個用來檢測頁面哪些css沒有用到的Node.js模組
1.2 優點：提供視覺化介面,使用非常簡單，輸入url，即可檢視頁面css的使用情況
1.3 缺點：目前只支援style標籤式的css，另外沒有執行頁面的js - uncss
2.1 uncss是可以把頁面css沒有用到去除的模組
2.2 優點：支援命令列和gulp、grunt外掛，支援link方式，基於phantomjs，模擬瀏覽器執行，支援js執行
2.3 缺點：僅憑一個url匯出的css，不具有實際價值，另外不支援style標籤 - critical
3.1 critical是一個用來檢測首屏css有哪些沒用到的模組
3.2優點：可以輸入首屏寬高來檢測、有gulp、grunt外掛
3.3 缺點：不支援url，只支援本地html，不支援style標籤
總結
速度優化對於開發人員來說是件降低生產力的事情，所以需要儘可能的自動化，設定好規則，無痛優化，同時避免後續惡化。