網站前端性能測試報告

內下內容選自《小強軟件測試瘋狂講義》一書

1. 測試目的

通過主要功能頁面的前端性能測試，從前端分析引起頁面響應緩慢的原因，并根據優化建議對其進行優化，提升前端性能，從而達到提升系統整體性能的目的。

2. 測試范圍

主要對用戶常用的頁面進行測試，至少包括：首頁、各分類頁、搜索結果頁等，此處我們只以首頁為例進行測試和分析。

3. 測試方法

利用YSlow、PageSpeed等工具進行測試，因該網站是第三方的并不是我們自己的，所以無法進行埋點測試。其他的測試方法大家可自行練習。

4. WEB端測試結果分析

通過YSlow、PageSpeed等工具的測試后，綜合結果并不算好，屬于較差的情況，其中YSlow給出的評級是F（最差），具體結果分析如下：

l 存在較多的HTTP請求。其中有16個external Javascript scripts，7個external stylesheets，18個external background p_w_picpaths，這些都可以嘗試進行合并。

l 未使用CDN。

l 未指定失效時間。部分CSS、JS和圖片等靜態資源未指定失效時間，尤其像logo這樣的不經常變化的圖片應該指定Expires headers，可指示瀏覽器從本地磁盤中加載以前下載的資源，而不是通過網絡加載。

l 未啟用壓縮。部分CSS、JS和圖片等靜態資源未啟用壓縮，為這些資源資源啟用壓縮可將其傳送大小減少135.2 KiB (68%)。

l 未優化圖片。適當地設置圖片的格式并進行壓縮可以節省大量的數據字節空間。尤其是對類似客服電話.jpg這樣的圖片。對這些圖片資源進行優化后可將其大小減少282.1 KiB (47%)。

l 不要在HTML中進行圖片縮放。本網站有11個圖片進行了縮放。YSlow給出的建議是：你希望展現多大的圖片，原始的圖片大小就應該是多大，圖片不要比期望的尺寸小，也不要比需要的尺寸大。

比如，如果我們要求現實一個200x200的圖片，而我們的原始圖片只有100x100，訪問的時候瀏覽器需要等待圖片完全下載完畢之后才知道圖片的實際尺寸，然后才會判斷圖片是否滿足預定的尺寸大小，如果大了就要縮小，如果小了就要放大。換句話說：圖片下載完畢之前，瀏覽器無法正確給出判斷，而且圖片的清晰度也可能受到影響。

5. 移動端測試結果分析

移動端發現的問題以及需要優化的資源同4.WEB端測試結果分析中的內容，除此之外，還有如下內容需要進行優化：

l 字體大小無法自適應，在移動端不清晰。

l 移動端的頁面沒有自適應，導致用戶需要水平滾動屏幕，如圖8.32所示。

l 頁面中并未設置視口。該網頁在移動設備上的呈現尺寸將與在桌面瀏覽器中一樣，因此系統會將其縮小到適合在移動屏幕上顯示的尺寸。可以在Header區增加類似如下的代碼：<meta name=viewport content="width=device-width, initial-scale=1">

在實際應用中還要注意優先級的排序，在時間充裕時，可以優化所有內容；當時間緊急時，可以通過優化優先級高且屬于公共資源的元素來縮短前端頁面的響應時間。

至于需要具體優化的URL因為篇幅有限，這里就沒有一一列出