iT邦幫忙

DAY 5
4

視覺設計師邁向程式設計師養成計畫系列 第 5

Day 5: 【演講】愛料理網站建置經驗談 (4)-介紹Pingdom

iCook透過Pingdom的監控服務,掌握營運狀況。

Pingdom
有效地分析網頁速度並給予評分,我們可以透過詳細的檢測資料來改善網站。
影響網站連線速度,不只是ISP,
網站內有許多元素,都可能是會讓網站連線速度變慢的原因。

但我們目標是要建立良好的使用者體驗,
為了改善網站速度,我們要怎麼知道是什麼讓網站速度變慢?

有很多種方式:

  1. Firebug(Firefox 的一個擴充套件)缺點:必須學會此軟體操作。
  2. Google Page Speed 可以偵測網站速度並分析。 缺點:只有統計出時間,並沒有分析到底是那項元素影響速度。
  3. Pingdom有效地分析網頁速度並給予評分,我們可以透過詳細的檢測資料來改善網站。

以下整理Pingdom的操作方式與提供的檢測內容:

《Pingdom Tool線上工具:
Pingdom Tools 的功用就是逐一告訴你網站每項物件開啟的時間,並繪製出一個很詳盡的圖表與統計資訊。使用時完全無須下載或是註冊、登入,僅需輸入欲檢驗的網址並按下 Test now 即可。》

網站名稱:Pingdom Tools
網站網址:http://fpt.pingdom.com

Setp1: 點選Full Page Test

在編輯欄位輸入網址,下方可以選擇是否將測試資料儲存並公開,或者選擇檢測的伺服器位置,選擇完畢,就可以點選Test Now,進行分析。

Setp2: Pingdom對網站進行分析,列出主要評分項目如下:

• Perf.grade:評分,滿分100。(越高越好)
• Requests:請求連線數。(越低越好)
• Load time:載入時間(越低越好)
• Page size:網頁大小(越低越好)

在這些評分項目下方,有列出網站詳細資訊(Waterfall,Performance Grade,Page Analysis,History)

Waterfall(網站連線狀況)
顯示載入頁面的連線資訊。包含網站讀取各元素的請求次序和所需的請求時間。
元素可能有images, CSS, JavaScripts, RSS, Flash and frames/iframes 等等,
都會分別列出下載所需的時間,點開還會有詳細的資訊。

網頁的請求數目越多,越可能讓網頁速度變慢。我們可以根據此資訊,找到問題。
例如:該網站需要讀取非常多圖片,則圖片請求數量過高,網站連線速度變慢。
解決:可以把站內圖片做成一張大張的,再用CSS去切區塊,可以減少請求數目,達到網站速度優化。

Performance Grade(效能評等)
分析網站整體效能的分數等級,滿分100。
例如:
Leverage browser caching 控制瀏覽器暫存
Avoid bad requests 避免錯誤請求
Specify a cache validator 指定快取驗證
Reduce DNS Lookups 減少DNS解析(就是去DNS伺服器詢問將網址解析為IP的過程)

Pages Analytics(頁面分析)
透過長條型報表來查看頁面中各類型元素所占用的時間百分比。
其中Connect(內容)應該是佔最大比例。
分析各類型檔案的請求比例,例如Script、CSS、Image、HTML等。

History(歷史報表)
如果一開始在Full Page Test時,我們有設定儲存報表並公開,
那麼紀錄就會存在於這網站上,未來不管是誰,只要測試到相同網站,
在History都可以查到曾經分析過的網站速度。
這樣的做法可以讓我們比較網站優化後是否真的有達到其效果,
透過比較的方式,才可以最快了解自己優化的成果。

備註:
Pingdom 通知的方式包括最基本的 E-mail 和簡訊,
而新註冊用戶,
Pingdom 也會送你 20 封額度的免費提醒簡訊讓你可以透過簡訊得到訊息
除此之外 Pingdom 還支援 Twitter ,
另外也有開發 iPhone 和 Android 應用程式 當網站發生問題時,
也可以立刻收到 Push 訊息,而這個功能一樣是免費的,非常方便!

參考:
Pingdom 找出拖垮網站速度的元凶(網頁速度檢測)
http://sofree.cc/pingdom/

Pingdom - 免費監測網站是否正常運作的服務
http://www.pingdom.com

Pingdom 網頁加載速度測試
http://key.chtouch.com/ContentView.aspx?P=1510

Pingdom DNS Health 檢查網域名稱 DNS 設定健康狀況http://www.freegroup.org/2012/01/pingdom-dns-health-check/

Pingdom-軟體下載
http://download.ithome.com.tw/Pingdom/8004?from=Category

數字會說話,Pingdom 2011網路數據解密http://www.bnext.com.tw/focus/view/cid/103/id/21806

Pingdom 網頁速度優化參考工具使用心得http://playpcesor.blogspot.com/2007/10/pingdom.html

Pingdom:「Facebook 已經變成網路的 DNA 了!」http://techorange.com/2012/06/20/facebook-widget/

Pingdom 免費服務 - 監測網站是否正常運作
http://blog.mowd.tw/index.php?pl=951

你的網站到底是慢在哪裡?讓 Pingdom Tools 告訴你
http://www.freegroup.org/2007/06/pingdom/


上一篇
Day 4: 【演講】愛料理網站建置經驗談 (3)-介紹d3.js
下一篇
Day 6: 【演講】愛料理網站建置經驗談 (5)-介紹NewRelic
系列文
視覺設計師邁向程式設計師養成計畫7

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-06 20:24:42

沙發

ted99tw iT邦高手 1 級‧ 2012-10-06 20:30:35 檢舉

樓主分享的資料粉多,賽事結束時,一定要集結成章,讓小囉囉們有溫習的機會.....
謝謝謝謝謝謝

我要留言

立即登入留言