CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。對(duì)于它的好處我想大家都知道，但一直以來都只有大公司才用得起。但如今已經(jīng)有了一些面對(duì)中小企業(yè)的CDN服務(wù)，甚至是免費(fèi)的。如百度旗下的加速樂（http://jiasule.baidu.com/），安全寶（http://www.anquanbao.com/），而且安全寶還和DNSPod進(jìn)行了無縫對(duì)接，很有吸引力。還有阿里云（http://www.aliyun.com/）開放存儲(chǔ)服務(wù) OSS、內(nèi)容分發(fā)網(wǎng)絡(luò) CDN。這些都不錯(cuò)，對(duì)于個(gè)人站長(zhǎng)來說質(zhì)量和價(jià)格都能接受。但這些都有一些限制，有些需要備案，有些對(duì)個(gè)人開發(fā)者不是十分友好。
其實(shí)對(duì)于個(gè)人站點(diǎn)來說，只要能加速網(wǎng)站上的靜態(tài)文件，比如圖片、js文件、css文件，網(wǎng)站的訪問速度就會(huì)大大的提升。像我的網(wǎng)站空間租用的是香港的服務(wù)器，ping值基本在45左右，南北互聯(lián)延遲不是問題，瓶頸在于網(wǎng)頁的加載速度（香港的空間一直都是小水管，帶寬小）?；谶@個(gè)需求，七牛云存儲(chǔ)（http://www.qiniu.com/）是個(gè)不錯(cuò)的選擇。每個(gè)月有免費(fèi)的配額，操作又比較簡(jiǎn)單。它的直接競(jìng)爭(zhēng)對(duì)手又拍云（https://www.upyun.com/index.html）也是個(gè)不錯(cuò)的選擇。兩者都是提供云存儲(chǔ)、云處理、云分發(fā)的服務(wù)。由于七牛云存儲(chǔ)后臺(tái)操作簡(jiǎn)捷、直接，每個(gè)月又有免費(fèi)的配額，所以個(gè)人推薦使用七牛云存儲(chǔ)。
使用步驟
說了那么多現(xiàn)在直接進(jìn)入主題，僅需三部輕松提升博客訪問速度。
第一步：注冊(cè)七牛云（https://portal.qiniu.com/signup?code=gmseew5nwy）
第二步：七牛云后臺(tái)設(shè)置
首先需要建立一個(gè)Bucket（空間）。使用鏡像加速需要設(shè)置為公開空間。
創(chuàng)建一個(gè)公開空間
然后空間需要綁定一個(gè)七牛云提供的二級(jí)域名（可自由設(shè)置），如果你的域名已經(jīng)備案可以使用自己的域名，不過需要一段時(shí)間審核才能生效。
然后空間需要綁定一個(gè)七牛云提供的二級(jí)域名（可自由設(shè)置），如果你的域名已經(jīng)備案可以使用自己的域名，不過需要一段時(shí)間審核才能生效。
最后開啟鏡像存儲(chǔ)功能。
這里有幾點(diǎn)需要注意：
1、如果你的wordpress站點(diǎn)不是建在根目錄下面需要帶上相應(yīng)的路徑。
2、為了防止網(wǎng)站因?yàn)殚_啟鏡像存儲(chǔ)功能而被降權(quán)，開啟鏡像加速功能時(shí)七牛云會(huì)自動(dòng)上傳robots.txt到空間下面，不要不小心把它刪了就行。
3、鏡像存儲(chǔ)和傳統(tǒng)的CDN有些不同，鏡像存儲(chǔ)是存儲(chǔ)（和普通的存儲(chǔ)沒什么不同，鏡像功能只是存儲(chǔ)的一個(gè)特性），不是緩存，故此鏡像存儲(chǔ)對(duì)每個(gè)資源來說只回源一次，后續(xù)訪問的時(shí)候就不再回源了。所以在源站的url內(nèi)容會(huì)經(jīng)常發(fā)生變化時(shí)，并不適合用鏡像存儲(chǔ)（少量變化是可以接受的，你可以主動(dòng)刪除鏡像存儲(chǔ)里面的文件，從而達(dá)到強(qiáng)制刷新的目的）。
第三步：wordpress后臺(tái)設(shè)置
這里需要借助一個(gè)插件WP Super Cache，這個(gè)插件幾乎是必備插件（緩存插件，能極大提升頁面加載速度），如果還沒安裝的話，不要猶豫馬上安裝。
點(diǎn)擊設(shè)置界面的CDN選項(xiàng)卡：
在Off-site URL處填上七牛云提供的那個(gè)二級(jí)域名就行了。域名后面不用帶上“/”。其它設(shè)置默認(rèn)即可，然后保存。
至此所有設(shè)置都已經(jīng)完成，這時(shí)你再訪問你的站點(diǎn)會(huì)發(fā)現(xiàn)圖片、js、css的鏈接都已經(jīng)變了。
加速后可以很清楚的感覺到速度有提升，但到底提升了多少呢？下面以一張圖片的加載速度做對(duì)比，可以更直觀的感受到加速的效果
加速前：
加速后：
可見使用了七牛云存儲(chǔ)的鏡像加速功能后網(wǎng)站的訪問速度有了質(zhì)的飛躍。而且設(shè)置完成后無需任何后續(xù)操作，發(fā)文章就像以前一樣在后臺(tái)編輯好直接發(fā)布就行了。而當(dāng)你不再需要這個(gè)功能時(shí)，直接在WP Super Cache插件中關(guān)閉CDN功能就行了，不會(huì)有任何的后遺癥。
使用小結(jié)：
鏡像就和平常照鏡子一樣，自己什么樣鏡子里的人就是什么樣。七牛云空間里面存儲(chǔ)的文件和自己站點(diǎn)里面的文件一模一樣，不但加速了靜態(tài)資源的訪問，還做了次備份，可謂是一舉兩得。
在設(shè)置wordpress插件WP Super Cache的Off-site URL選項(xiàng)時(shí)有一行提示：“The new URL to be used in place of http://iyaozhen.com/yz_wp for rewriting.”意思就是插件將會(huì)把靜態(tài)文件鏈接中的“http://iyaozhen.com/yz_wp”替換成“http://iyaozhen.qiniudn.com”。如“http://iyaozhen.com/yz_wp/wp-content/uploads/2013/09/01.jpg”替換成“http://iyaozhen.qiniudn.com/wp-content/uploads/2013/09/01.jpg”。當(dāng)?shù)谝淮渭虞d這個(gè)文件時(shí)會(huì)進(jìn)行同步（回源），“http://iyaozhen.qiniudn.com/”表示自己沒有這個(gè)文件，七牛云服務(wù)器會(huì)認(rèn)為這是一個(gè)新的文件，然后將圖片（http://107.170.241.195/wp-content/uploads/2013/09/01.jpg）下載到自己的服務(wù)器。這樣就完成了同步，可以看出同步需要雙方都進(jìn)行了正確的配置，所以進(jìn)行第二步和第三步的配置時(shí)一定不要出錯(cuò)。由于第一次訪問的時(shí)候需要回源，因此訪問速度有點(diǎn)慢。主動(dòng)同步數(shù)據(jù)可以提升第一次的數(shù)據(jù)訪問速度。但主動(dòng)同步數(shù)據(jù)比較麻煩，一般不去做。當(dāng)然，如果是做別的應(yīng)用開發(fā)，則就另當(dāng)別論了。還有就是七牛云沒有采用目錄存儲(chǔ)結(jié)構(gòu)，而是采用了文件前綴，上傳文件時(shí)候需要特別注意。
七牛云還有圖片自動(dòng)裁剪、自動(dòng)添加水印、防盜鏈等功能。操作都很便捷，有需要的可以去設(shè)置一下。
PS：七牛云存儲(chǔ)圖片流量?jī)?yōu)化方案
我們都知道不同的圖片格式在同等圖片質(zhì)量的情況下，文件的大小差異很大。比如在同等圖片質(zhì)量的情況下，bmp格式比png要大得多，而png可能比jpg又大得多，而jpg又可能比google最新推出的webp格式大得多。
在互聯(lián)網(wǎng)時(shí)代，無論是移動(dòng)端還是web端都追求一個(gè)極致的客戶體驗(yàn)，因此在同等圖片質(zhì)量的情況下，擁有較小的文件大小的圖片格式才是最好的格式。
七牛云存儲(chǔ)支持webp的格式。你可以指定imageView2指令的format參數(shù)為webp來獲取一個(gè)圖片轉(zhuǎn)換為webp格式后的結(jié)果。我們?nèi)我馊∫粡垐D片來做演示。
上面獲取資源的大小，可以使用命令curl -I 資源鏈接>來獲取資源頭部信息，然后查看Content-Length的值。
雖然這種webp格式擁有如此的魅力，但是由于不是所有的瀏覽器都支持，另外iOS平臺(tái)默認(rèn)也不支持這種格式，所以看上去沒有辦法在所有的平臺(tái)推廣。但是本著最大優(yōu)化的原則，我們還是可以采用一些措施來極大地降低圖片的流量。
我們把圖片的訪問分為移動(dòng)平臺(tái)和web平臺(tái)。
對(duì)于移動(dòng)平臺(tái)，Android是默認(rèn)支持的，iOS的話，如果是App，可以通過這個(gè)項(xiàng)目(https://github.com/seanooi/iOS-WebP)來集成webp圖片解碼功能。
對(duì)于移動(dòng)端，目前只有chrome是支持webp格式的，chrome在訪問圖片的時(shí)候會(huì)默認(rèn)給Accept頭部添加image/webp值，如下圖所示：
所以業(yè)務(wù)服務(wù)器端可以根據(jù)這種頭部來判斷終端瀏覽器是否支持webp，如果支持的話，返回webp格式的圖片鏈接，如果不支持那么返回jpg格式的圖片。這種在動(dòng)態(tài)頁面里面是很容易實(shí)現(xiàn)的。首先利用imageView2和imageMogr2支持webp的特點(diǎn)來將獲取不同圖片格式的指令定義為不同的樣式，然后在MVC的結(jié)構(gòu)里面，Controller可以去判斷Accept頭部里面是否有image/web，如果有則返回目標(biāo)格式為webp的圖片樣式，否則返回目標(biāo)格式為jpeg的圖片格式。
上面的方案讓webp覆蓋了Android和iOS的移動(dòng)設(shè)備和以chrome為內(nèi)核的所有瀏覽器。另外對(duì)于實(shí)在無法支持的瀏覽器，采用jpeg的格式也會(huì)大大減少用戶的流量。
