前幾天幫杭州開茶室的朋友折騰網(wǎng)站，他那頁面打開慢得跟老牛拉車似的，顧客還沒瞅見茶葉圖片就關(guān)頁面跑了。我擼起袖子就開干，結(jié)果瞎折騰半天才發(fā)現(xiàn)問題出在三個地方。

一、圖片壓得我手都麻了

朋友非要用單反拍的高清圖，一張荷花茶具圖足足15MB，傳了20張。我說這哪行，抄起電腦就給他現(xiàn)場教學(xué)：

• 用在線工具把圖片尺寸砍到800像素寬
• 格式全轉(zhuǎn)成WebP格式
• 壓圖時盯著質(zhì)量滑塊來回調(diào) 生怕糊了

好家伙 原來加載要8秒的頁面，現(xiàn)在3秒就能看見茶葉在水里打轉(zhuǎn)了。

二、代碼刪得心都在滴血

檢查發(fā)現(xiàn)他找的建站公司塞了一堆垃圾代碼，光是沒用的CSS動畫就有十幾段。我抄起代碼編輯器就開刪：

• 把五六個炫酷滾動效果全關(guān)了
• 合并了三個重復(fù)的樣式文件
• 砍掉那個永遠(yuǎn)加載失敗的天氣預(yù)報插件

頁面文件直接從2.3MB瘦身到700KB，朋友在旁邊直叨咕：“原來這些花里胡哨的玩意兒全是累贅！”

三、CDN配置夠費勁的

本來以為買個CDN服務(wù)就完事了，結(jié)果凌晨兩點還在調(diào)試：

• 先是緩存規(guī)則設(shè)太狠 價格表更新不了
• 又碰上手機端總加載舊版樣式
• 發(fā)現(xiàn)得給動態(tài)頁面單獨設(shè)規(guī)則

測試時用我破手機3G網(wǎng)絡(luò)開網(wǎng)頁，杭州西湖區(qū)的用戶打開速度快了兩倍不止，朋友盯著屏幕直拍大腿：“早該這么整了！”

現(xiàn)在這破網(wǎng)站算是起死回生了，上周訂單還多了兩成。朋友非要請我喝龍井，結(jié)果發(fā)現(xiàn)他網(wǎng)站茶葉圖加載太快，顧客沒等緩沖就把最貴的明前茶給下單了！