跨越不同地域的數千個網站的原始數據保存在龐大的數據庫中，這些原始數據即是網站正在測量的網絡組件、頁面性能、可用性，以及頁面內容指標（Page content metrics）。當我們將這些數據呈現給他人而沒有對其進行正確組織和分類時，這將導致難以閱讀、分析和確定結論。

通過圖形方式來組織和分類這些數據集，并將其呈現，則可以更輕松地達成您的目的。接下來，我們將看到各種各樣的圖表類型，這些圖表常常會在性能分析中使用到，并且在基于數據類型的各種場景中也適用。

常用的圖表類型有如下幾種：

1. 條形圖（Bar chart）。

1. 折線圖（Line chart）。

1. 散點圖（Scatterplot chart）。

1. 直方圖（Histogram）。

1. 累積分布圖（Cumulative distribution chart）。

1. 地理圖（Geo chart）。

1. 氣泡圖（Bubble chart）。

為了準確地確定代表一組數據的圖表類型，我們來看看實際情景下的一些性能分析案例。

使用案例之其一

通常在分析性能數據時，我們會遇到需要根據某些定性數據（Qualitative data）對數據進行排名的情況。例如，考慮美國不同城市網站性能的定性數據，讓我們試試確定哪種圖表有助于以最佳方式解釋數據。

條形圖以垂直線條形式展示數據。這適用于需要比較可分類的不同定性數據的情況。因此，當我們想要在性能分析中展示排名數據時，使用條形圖是恰當的。

Catchpoint 的數字體驗智能平臺提供了以不同級別的分解來生成條形圖的選項，這是按排名順序展示定性數據的一個有效方法。

?

橫軸：城市名稱；縱軸：頁面響應時間（單位 ms）

上面的條形圖展示了美國不同城市的網頁加載時間排名。通過看這張圖，我們很容易找出哪個城市比其他城市表現更好。

使用案例之其二

考慮另一種情況：我們需要研究一段時間內的性能數據，以查看性能是否有任何變化。

折線圖可以用來表示特定時期內，網站的定性性能數據的持續分布。這可以確定性能受到影響的時間范圍。Catchpoint 可以靈活地提供折線圖（可一次繪制 10 種不同指標的折線圖），以提供詳細信息以找出問題的根源。

?

從上面的折線圖中，我們看到 10 月份的性能表現發生了變化，原因是頁面上的內容總數有所增加。

因此，折線圖可幫助您了解性能變化，并且分析出一段時間內性能變化背后的根本原因。

使用案例之其三

錯誤過濾（Error filtering）是數據分析的重要組成部分。它能幫助識別不同的錯誤以及發生錯誤的時間，從而評估網站的可用性。這也有助于評估網站的可用性，因此，此圖表類型經常用于性能分析中，以監控網站的可用性。

一些解決方案提供了一種輕松的方式來過濾特定時間范圍內不同的錯誤類型。散點圖是能直觀地展示所有這些錯誤的方法，它繪制出了每次失敗的測試運行。

?

橫軸：時間；縱軸：頁面響應時間（單位 ms）

上圖展示了指定時間間隔內，網絡測試所出現的所有錯誤，人們可以通過單擊數據點并查看瀑布式數據（Waterfall data）來進一步分析每個數據點。

散點圖也可以用來展示不同的數據模式，以便深入分析根本原因。例如，考慮到頁面性能受文件高響應時間影響的情況。分析數據點揭示了來自不同服務器的文件中，有一些服務器未經壓縮便發送文件，這些未壓縮的文件增加了頁面加載的延遲。

下面的散點圖展示了文件 1 和文件 2 的不同數據段，每個數據段都具有從不同服務器提供的未壓縮和壓縮版本。壓縮文件的響應時間比較大的未壓縮文件要好得多，因為從服務器向客戶端發送更多字節的數據需要更長的時間。

?

橫軸：時間；縱軸：文件大小

使用案例之其四

在性能分析中，了解存在于性能指標閾值范圍內的數據點的數量是非常重要的。這對于評估有多少用戶受到低性能的影響，以及有多少有經驗的、可靠的性能來說，很有用。

將數據分類到范圍桶（Range buckets）中可幫助您了解有多少數據點位于該網站所需的閾值范圍內。它有助于進一步分析性能較低的數據集。

直方圖可以用來表示范圍桶中的數據分布。每個桶描述了性能指標范圍，以及數據集中落入該范圍的數據的數量。

?

橫軸：加載時間范圍；縱軸：數據數量

上面的直方圖展示了 Y 軸上的數據運行次數以及 X 軸上的網頁加載時間范圍。第二欄顯示有 232 次運行，其網頁響應時間在 5.3-6 秒范圍內。

直方圖為查看受影響的用戶數提供了一個范圍桶，而累積分布圖則給出了超過該性能指標閾值的用戶數量的百分比。

累積分布圖是一種常用的圖表類型，它用百分表示性能指標。它繪制出了性能指標大于或小于網站閾值的用戶的百分比。

下圖顯示了網頁響應時間的累積分布圖。

?

橫軸：用戶數量百分比；縱軸：頁面響應時間（單位 ms）

從上面的累積分布圖中，我們看到在第 90 百分位，網站的網頁響應時間為 10.3 秒。這意味著，在收集到的數據的時間范圍內，網頁加載時間超過了 10.3 秒的用戶占比為 10%。

使用案例之其五

當網站托管在多個地點時，我們有必要從不同的地理位置評估其性能。Catchpoint 提供了展示性能的地理統計圖，其中綠色到紅色的變化對應著性能從好到壞的變化。

?

上面的地理圖展示了單個網站的性能在不同地域間的差異。從圖中，我們看到美國和歐洲的用戶體驗到了最佳的網頁加載時間，而中國用戶則體驗到更長的網頁加載時間。

使用案例之其六

迄今為止，我們所討論的圖表類型都關注于可被選擇用于評估性能的單個度量標準。如果我們想評估一個以上的度量標準，或一組不同網站的性能，這時候該怎么辦呢？

在這種情況下，對于在單個視圖中評估不同網站的多個性能指標，氣泡圖是一個很好的選擇。

?

橫軸：文檔完成時間（單位 ms）；縱軸：網頁響應時間（單位 ms）

上述氣泡圖在單個視圖下給出了 3 個不同網站的性能數據（文檔完整，網頁響應）。

總結

從上述場景中我們可以看出，可視化是以更有意義的方式表達數據的強力方法。它有助于找出問題的根本原因并得出結論，從而縮小需要優化的區域。

Catchpoint 中提供的不同圖表類型可幫助您以不同的方式分割和切分數據，以對數據進行分析。除了分析數據以外，監測不同網頁或競爭對手網站的性能趨勢也很重要，以了解系統隨時間的變化情況。