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