1.盡量減少請求數
提取公用CSS,模塊化,其他的合並。Javascript也一樣(可以避免頁面加載阻塞)。
對頁面上的小圖標,背景等圖片進行合並,減少請求次數。
2.減少頁面體積
壓縮JS
3.CSS&HTML的重構
CSS選擇器不能太長,禁止使用ID選擇器和!important
4.延遲加載
通常應用於圖片比較多的網頁,如果一個頁面圖片比較多,且頁面高度或寬度有好幾屏,頁面初次加載時,只顯示可視區域的圖片,當頁面滾動的時候,圖片進入了可視區域再進行加載,這樣可以顯著的提高頁面的加載速度,更少的圖片並發請求數也可以減輕服務器的壓力。如果用戶僅僅在首屏停留,還可以節省流量。如果TAB中的圖片較多,也同樣可以應用於TAB中,當觸發TAB時再進行圖片的加載。
原理:將圖片的先用一個1*1的占位圖片代替(如果占位圖片能設置成真實圖片的寬高是最好的)真實地址緩存在一個自定義的屬性(lazy-src)中,
等到進入可視區(或距離可視區域一定范圍)時,將占位圖片的src換掉,真實圖片開始加載。
優化方向
優化手段
請求數量
合並腳本和樣式表,CSS Sprites,拆分初始化負載,劃分主域
請求帶寬
開啟GZip,精簡JavaScript,移除重復腳本,圖像優化
緩存利用
使用CDN,使用外部JavaScript和CSS,添加Expires頭,減少DNS查找,配置ETag,使AjaX可緩存
頁面結構
將樣式表放在頂部,將腳本放在底部,盡早刷新文檔的輸出
代碼校驗
避免CSS表達式,避免重定向