重視網(wǎng)站的用戶體驗是互聯(lián)網(wǎng)發(fā)展由技術(shù)為中心到以用戶為中心的一種轉(zhuǎn)變，主流的搜索引擎都將網(wǎng)站的用戶體驗作為評價網(wǎng)站的重要標(biāo)準(zhǔn)，畢竟搜索引擎蜘蛛也只是網(wǎng)站的一個普通用戶，要想在搜索引擎獲得好的評價，就不得不重視用戶體驗的優(yōu)化。

　　網(wǎng)站的用戶體驗分為4個方面：

　　1、網(wǎng)站的加載速度，即用戶打開網(wǎng)站的速度，該方面的用戶體驗是首當(dā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)站頁面的訪問。

　　本文所分析的重點(diǎn)是網(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)站進(jìn)行優(yōu)化，把該簡化的網(wǎng)頁內(nèi)容簡化了，才能有效加快網(wǎng)頁的載入速度。

　　對于網(wǎng)頁加載速度的分析，Google提供了page-speed工具，可以提供詳細(xì)的網(wǎng)頁加載速度的優(yōu)化報告，下面將以這個工具的對齊魯人才網(wǎng)的分析報告為依據(jù)，說明網(wǎng)頁速度優(yōu)化的內(nèi)容。

　　一、工具的準(zhǔn)備

　　1、電腦需安裝瀏覽器Firefox;

　　2、安裝Firefox的組件：Firebug和page-speed。

　　二、工具的使用

　　1、用Firefox打開齊魯人才網(wǎng)首頁;

　　2、選擇工具-firebug或者使用快捷鍵F12，彈出firebug工具，如下圖：

　　3、點(diǎn)擊Analyze Performance對網(wǎng)頁性能進(jìn)行分析，得到如下圖的分析結(jié)果：

　　三、對報告的說明分析

　　1、Page Speed Score：83/100

　　說明：本頁面的性能分?jǐn)?shù)為83分，總分100分。

　　2、報告內(nèi)容圖標(biāo)的說明：

　　(1)紅色嘆號為沒有進(jìn)行過優(yōu)化的內(nèi)容，需要進(jìn)行優(yōu)化的內(nèi)容：

　　a、Leverage browser caching：瀏覽器緩存文件

　　說明：列表中的內(nèi)容(如圖片)沒有定義緩存過期時間，只有設(shè)置了緩存過期時間，等文件過期后才會重新進(jìn)行緩存，所以該項內(nèi)容需要進(jìn)行優(yōu)化，對圖片的緩存過期時間進(jìn)行設(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：平衡文件的下載主機(jī)來源，也就是將文件分配到不同的服務(wù)器上，分?jǐn)倝毫Α?/p>

　　說明：這方面可以通過增加獨(dú)立服務(wù)器才能實現(xiàn)，。

　　(2)黃色三角為需要進(jìn)一步優(yōu)化的內(nèi)容

　　a、Combine external JavaScript：合并外部的JavaScript文件

　　合并JS文件，降低瀏覽器對JavaScript文件的讀取，有效的減少http的請求數(shù)量。

　　b、Enable compression：啟用壓縮，這里提到時啟用gzip格式的壓縮

　　說明：該列表中詳細(xì)提供了這些資源通過gzip壓縮后能夠節(jié)省多少時間成本。下面是對gzip的解釋：所謂gzip壓縮是一種開發(fā)的壓縮算法，目前的主流瀏覽器與主流服務(wù)器 (Apache， Lighttpd， Nginx)均對其有很好的支持。gzip壓縮是通過HTTP 1.1協(xié)議中的Content-Encoding ： gzip來進(jìn)行標(biāo)記說明，其可以明顯減少文本文件的大小，從而節(jié)省帶寬和加載時間。

　　c、Remove unused CSS：移除不用的CSS代碼

　　說明：在網(wǎng)站的CSS文件中可能會存在一些用不到的代碼，這項工作應(yīng)該在網(wǎng)站的發(fā)布之前對CSS，JavaScript文件進(jìn)行檢查，刪除沒有用到的代碼，該列表中詳細(xì)的列出了沒有用到的CSS代碼。

　　(3)綠色對勾為已經(jīng)進(jìn)行過優(yōu)化，暫不需要優(yōu)化的內(nèi)容。

　　網(wǎng)易首頁需要優(yōu)化的內(nèi)容比較少，性能分?jǐn)?shù)也比較高，網(wǎng)頁加載速度比較快。

it知識庫：Google page-speed優(yōu)化首頁加載速度詳解，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。