Google page-speed優(yōu)化首頁加載速度詳解
重視網(wǎng)站的用戶體驗是互聯(lián)網(wǎng)發(fā)展由技術(shù)為中心到以用戶為中心的一種轉(zhuǎn)變，主流的搜索引擎都將網(wǎng)站的用戶體驗作為評價網(wǎng)站的重要標準，畢竟搜索引擎蜘蛛也只是網(wǎng)站的一個普通用戶，要想在搜索引擎獲得好的評價，就不得不重視用戶體驗的優(yōu)化。
網(wǎng)站的用戶體驗分為4個方面：
1、網(wǎng)站的加載速度，即用戶打開網(wǎng)站的速度，該方面的用戶體驗是首當其沖的，用戶首先打開了網(wǎng)站才能去體驗網(wǎng)站的內(nèi)容，試想一下在網(wǎng)速正常的情況下，一個打開速度很慢的網(wǎng)站如何能夠吸引用戶，所以網(wǎng)頁的加載速度的優(yōu)化是很重要的。
2、頁面的設(shè)計，即網(wǎng)站的美觀度，這就需要網(wǎng)站的美工設(shè)計人員能夠具備大眾審美觀，才能吸引住用戶。
3、內(nèi)容的質(zhì)量，即網(wǎng)站提供的內(nèi)容對用戶是否有價值。
4、合理的布局，網(wǎng)頁的整體布局合理，不會出現(xiàn)雜亂無章的現(xiàn)象，能夠合理的引導(dǎo)客戶對網(wǎng)站頁面的訪問。
本文所分析的重點是網(wǎng)頁的加載速度，其它三個方面的優(yōu)化可能要貫穿到網(wǎng)站的一個長期發(fā)展中，比如內(nèi)容質(zhì)量是網(wǎng)站發(fā)展中一直要重視的方面。56K貓上網(wǎng)的情況已經(jīng)不復(fù)存在，網(wǎng)速已經(jīng)不是互聯(lián)網(wǎng)快速發(fā)展的瓶頸，所以要想提高用戶體驗就必須從自身的網(wǎng)站進行優(yōu)化，把該簡化的網(wǎng)頁內(nèi)容簡化了，才能有效加快網(wǎng)頁的載入速度。
對于網(wǎng)頁加載速度的分析，Google提供了page-speed工具，可以提供詳細的網(wǎng)頁加載速度的優(yōu)化報告，下面將以這個工具的對齊魯人才網(wǎng)的分析報告為依據(jù)，說明網(wǎng)頁速度優(yōu)化的內(nèi)容。（相關(guān)閱讀：Google推出Apache加速模塊 速度提高50%！）
一、工具的準備
1、電腦需安裝瀏覽器Firefox;
2、安裝Firefox的組件：Firebug和page-speed。
二、工具的使用
1、用Firefox打開齊魯人才網(wǎng)首頁;
2、選擇“工具”-“firebug”或者使用快捷鍵F12，彈出firebug工具，如下圖：
3、點擊“Analyze Performance”對網(wǎng)頁性能進行分析，得到如下圖的分析結(jié)果：
三、對報告的說明分析
1、“Page Speed Score：83/100”
說明：本頁面的性能分數(shù)為83分，總分100分。
2、報告內(nèi)容圖標的說明：
(1)“紅色嘆號”為沒有進行過優(yōu)化的內(nèi)容，需要進行優(yōu)化的內(nèi)容：
a、“Leverage browser caching”：瀏覽器緩存文件
說明：列表中的內(nèi)容(如圖片)沒有定義緩存過期時間，只有設(shè)置了緩存過期時間，等文件過期后才會重新進行緩存，所以該項內(nèi)容需要進行優(yōu)化，對圖片的緩存過期時間進行設(shè)置。
b、“Specify image dimensions”：指定圖片的尺寸
說明：列表中的圖片都沒有在代碼中設(shè)置圖片的大小，比如代碼中的<img src=“/images/1new/city_ico_2.gif” />，沒有添加width=“15” height=“13”，沒有添加width=“15” height=“13”的屬性，瀏覽器在加載的時候就要計算圖片的尺寸，增加了加載時間。所以優(yōu)化方式為：對網(wǎng)頁中的圖片指定尺寸。
c、“Parallelize downloads across hostnames”：平衡文件的下載主機來源，也就是將文件分配到不同的服務(wù)器上，分攤壓力。
說明：這方面可以通過增加獨立服務(wù)器才能實現(xiàn)，。
(2)“黃色三角”為需要進一步優(yōu)化的內(nèi)容
a、“Combine external JavaScript”：合并外部的JavaScript文件
合并JS文件，降低瀏覽器對JavaScript文件的讀取，有效的減少http的請求數(shù)量。
b、“Enable compression”：啟用壓縮，這里提到時啟用gzip格式的壓縮
說明：該列表中詳細提供了這些資源通過gzip壓縮后能夠節(jié)省多少時間成本。下面是對gzip的解釋：所謂gzip壓縮是一種開發(fā)的壓縮算法，目前的主流瀏覽器與主流服務(wù)器 (Apache， Lighttpd， Nginx)均對其有很好的支持。gzip壓縮是通過HTTP 1.1協(xié)議中的Content-Encoding ： gzip來進行標記說明，其可以明顯減少文本文件的大小，從而節(jié)省帶寬和加載時間。
c、“Remove unused CSS”：移除不用的CSS代碼
說明：在網(wǎng)站的CSS文件中可能會存在一些用不到的代碼，這項工作應(yīng)該在網(wǎng)站的發(fā)布之前對CSS，JavaScript文件進行檢查，刪除沒有用到的代碼，該列表中詳細的列出了沒有用到的CSS代碼。
(3)“綠色對勾”為已經(jīng)進行過優(yōu)化，暫不需要優(yōu)化的內(nèi)容。
網(wǎng)易首頁需要優(yōu)化的內(nèi)容比較少，性能分數(shù)也比較高，網(wǎng)頁加載速度比較快。
【編輯推薦】
