巧用Google工具page-speed優化首頁加載速度

  看得起網站的用戶體驗認識是互聯網進展由技術為核心到以用戶為核心的一種轉變,主流的搜索引擎網站都將網站的用戶體驗認識作為名聲網站的關緊標准,畢竟搜索引擎網站蛛蛛也只是網站的一個平常的用戶,要想在搜索引擎網站取得好的名聲,就只得看得起用戶體驗認識的優化。

  網站的用戶體驗認識分為4個方面:

  1、網站的加載速度,即用戶敞開網站的速度,該方面的用戶體驗認識是首當其沖的,用戶首先敞開了網站能力去體驗認識網站的內部實質意義,試著想想一下子在網速正常的事情狀況下,一個敞開速度很慢的網站怎麼樣能夠吸援用戶,所以網頁的加載速度的優化是很關緊的。

  2、頁面的預設,即網站的好看度,這就需求網站的擔任美術工作的人預設擔任職務的人能夠具有大眾領會藝術品的美觀,能力吸引住用戶。

  3、內部實質意義的品質,即網站供給的內部實質意義對用戶是否有價值。

  4、合理的布局,網頁的群體布局合理,不會顯露出來顛三倒四的現象,能夠合理的指導客戶對網站頁面的過訪。

  對於網頁加載速度的剖析,Google供給了page-speed工具,可以供給周密的網頁加載速度的優化報告陳述,下邊將以這個工具的對齊魯人材網的剖析報告陳述為根據,解釋明白網頁速度優化的內部實質意義。

  一、工具的准備

  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:合並外部的JS文件

  

  合並JS文件,減低瀏覽器對JS文件的讀取,管用的減損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,JS文件施行查緝,刪去沒有用到的代碼,該列表中周密的列出了沒有用到的CSS代碼。

  (3)綠顏色對勾為已經施行過優化,暫不必優化的內部實質意義。

  附:網易的首頁的性能剖析:

  

  網易首頁需求優化的內部實質意義比較少,性能分數也比較高,網頁加載速度比較快。