上一篇《WordPress 網(wǎng)站全方位速度優(yōu)化：主機(jī)篇》講的是關(guān)于WordPress 網(wǎng)站所在主機(jī)的設(shè)置，這次我們來(lái)講網(wǎng)站內(nèi)部臃腫導(dǎo)致加載變慢。
還是上一篇那個(gè)例子，一個(gè)網(wǎng)站首頁(yè)總大小，如果從3MB下降到1MB。即便是1M 帶寬的主機(jī)，加載時(shí)間也會(huì)從25秒下降到8秒，也是很可觀的。但是要給網(wǎng)站減肥可不是一件容易的事兒，我盡可能的詳細(xì)介紹：
一個(gè)工具解析頁(yè)面加載全過(guò)程
訪客的瀏覽器從遠(yuǎn)程主機(jī)上抓取網(wǎng)頁(yè)，先抓取首頁(yè)的HTML 文件，然后再?gòu)?HTML 文件里提取出 CSS、JS、圖片、視頻等文件分別加載，有的 JS 和 CSS 里還會(huì)加載更多的 CSS、圖片、視頻。
有一個(gè)工具可以看到網(wǎng)頁(yè)加載過(guò)程，比如：文件數(shù)量、加載順序、每個(gè)元素的響應(yīng)時(shí)間、明細(xì)等信息。谷歌Chrome瀏覽器自帶的“檢查”工具，火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360瀏覽器，Safari 瀏覽器，IE 新版本都集成了這個(gè)功能。（如圖：minify是個(gè) css 文件，大小426KB）
如果是咱們自己寫(xiě)的 HTML、CSS、JS 文件，可以輕易瘦身，自己熟悉代碼哪里能優(yōu)化，但 WordPress 主題的 HTML、CSS、JS 我們是無(wú)能為力，只能通過(guò)Gzip壓縮解決。（如下圖，經(jīng)過(guò) Gzip 壓縮，minify 文件 從426KB變成了57KB）
給首頁(yè)HTML、JS、CSS文件瘦身
Gzip是服務(wù)器或者虛機(jī)提供的一種組件服務(wù)，簡(jiǎn)單地說(shuō)：Gzip開(kāi)啟后，從主機(jī)到訪客之間傳送的文件會(huì)被壓縮處理，這樣就會(huì)減小通過(guò)網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高瀏覽的速度。比如一個(gè)首頁(yè)150KB，但是經(jīng)過(guò)壓縮真實(shí)傳輸大小是25KB。（如下圖）
Gzip具體使用方法：主機(jī)不同調(diào)用方法也不同，有的是寫(xiě).htaccess，有的是安裝個(gè)插件，不管是那種，可以到 Chinaz 站長(zhǎng)工具里面檢測(cè)（網(wǎng)址：http://tool.chinaz.com/Gzips/）。比如小紅公司的網(wǎng)站：www.jianzhan1.cn的 html 文件是150KB，Gzip 壓縮之后變成26KB，然后在火狐里用 FireBug 檢查首頁(yè)果然是25.9KB。雙重驗(yàn)證說(shuō)明 Gzip 生效了。此外Gzip 對(duì) CSS 這類(lèi)文本類(lèi)的文件也會(huì)壓縮，比如有個(gè)CSS 文件是426KB，壓縮之后是57KB。
上圖為 ChinaZ 網(wǎng)站檢查結(jié)果，我們也可以從其他網(wǎng)站看出Gzip 是否生效，另外也可以用瀏覽器檢查工具檢查 header 是否有 Gzip。
通常Gzip只會(huì)壓縮 HTML 和 TXT 之類(lèi)的文本文件，不建議用它來(lái)壓縮圖片，因?yàn)檫@樣會(huì)增加服務(wù)器 CPU 的負(fù)擔(dān)，還會(huì)增加圖片的體積，具體原因大家百度一下。后面會(huì)說(shuō)給圖片瘦身。
圖片優(yōu)化：先了解圖片種類(lèi)和用途
網(wǎng)站上用的圖片大概這么幾種：
1 頭部Slider的背景圖和前景圖。2 產(chǎn)品和案例的圖片。3 其他裝飾圖片。
不論什么圖片，第一步先看寬高尺寸，大小夠用就好，切忌貪大，尺寸越大，容量越大，下載越慢，特別是產(chǎn)品圖，有的同學(xué)直接上傳2000px寬的2MB 圖片。（很多同學(xué)不了解常識(shí)）
此外圖片還分透明圖片和不透明圖片：透明圖比如說(shuō)去掉背景的產(chǎn)品圖，還有特殊字體的文字也需要做成透明圖片，可以把他們放到背景圖上。不透明的圖片比如說(shuō)背景圖片和產(chǎn)品展示圖等。
給PNG 透明圖片瘦身的絕技
先說(shuō)透明圖片，常用PNG格式，當(dāng)然 PNG 圖片也有透明和不透明之分，還有8位和24位的區(qū)別。總而言之，透明圖片我們用 PNG，但是 PNG 圖片很大，解決辦法是，到 TingPNG 網(wǎng)站優(yōu)化壓縮，網(wǎng)址：https://tinypng.com/，通常可以得到比較好的壓縮比，圖片質(zhì)量幾乎沒(méi)變化。因?yàn)檫@種壓縮是在線壓縮，需要上傳和下載，有點(diǎn)麻煩，但是一次麻煩終身受益。
給 JPG 圖片瘦身秘籍
再說(shuō)經(jīng)常用到的JPG 圖片，通常我們直接在PhotoShop 里修改，裁切大小，另存為 web 格式壓縮，jpg 質(zhì)量60左右。這個(gè)大家都會(huì)，我再分享個(gè)秘籍：“WP Smush”，這是一個(gè) WordPress 插件，每次上傳圖片時(shí)會(huì)自動(dòng)在線壓縮，壓縮比很高，質(zhì)量損失很小，速度稍慢，絕對(duì)值得，一般人我不告訴他。
PNG 透明圖和 JPG 圖的究極壓縮方法都是在線工具，小而精 小而美，這是他們的獨(dú)門(mén)秘籍，不會(huì)輕易外傳，在線提供服務(wù)也是一種保護(hù)。
給視頻減肥
網(wǎng)站上用的視頻通常有兩種方式，一種是托管在視頻網(wǎng)站，比如優(yōu)酷，我們?cè)谧约壕W(wǎng)站上引用優(yōu)酷視頻的地址，通常會(huì)有優(yōu)酷的標(biāo)志或者廣告。另外一種方式是把視頻存放在本地主機(jī)上，我們主要說(shuō)這種。這種視頻往往容量很大，用戶下載慢，使用時(shí)一定要注意。下面說(shuō)說(shuō)如何優(yōu)化：
以小紅建站公司網(wǎng)站首頁(yè)為例，第一屏有個(gè)背景視頻，1000kb碼率的MP4格式，36秒，5.4MB，嚴(yán)重影響打開(kāi)速度。壓縮成384kb碼率的webm格式視頻后，變成1.4MB，但畫(huà)質(zhì)很粗糙，顯得很low。最后把視頻剪輯成22秒，壓縮成512kb碼率的webm是1.4MB，質(zhì)量好些，在視頻上覆蓋一層灰色，遮住粗糙的視頻，整體顯得高檔。
這樣做還有個(gè)問(wèn)題，IE11瀏覽器 和 微軟Edge瀏覽器 不支持webm 格式的視頻，這需要額外增加mp4格式的視頻給微軟的瀏覽器。訪客瀏覽器如果是支持webm視頻的谷歌等瀏覽器，網(wǎng)站直接給他看webm視頻；訪客如果是 IE 瀏覽器，網(wǎng)站會(huì)給他看 MP4視頻。
同樣22秒 512k的碼率MP4也是1.4MB，但是質(zhì)量差很多，不得不提升768k碼率，視頻質(zhì)量和webm的512k碼率類(lèi)似。吐槽Edge瀏覽器，播放MP4的質(zhì)量好差，同樣一段視頻比IE11差不少，馬賽克嚴(yán)重。
以上是對(duì)站內(nèi)HTML，CSS，JS，圖片，視頻的優(yōu)化壓縮，木桶理論的兩塊木板“主機(jī)提速”和“站內(nèi)減肥”介紹完了，下集將是最后一集，講谷歌這個(gè)“外患”，還有外鏈，緩存，調(diào)用系統(tǒng)中文字體微軟雅黑，。
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請(qǐng)移步到建站教程頻道。
