網(wǎng)站前端性能測試報告

內(nèi)下內(nèi)容選自《小強(qiáng)軟件測試瘋狂講義》一書

1. 測試目的

通過主要功能頁面的前端性能測試，從前端分析引起頁面響應(yīng)緩慢的原因，并根據(jù)優(yōu)化建議對其進(jìn)行優(yōu)化，提升前端性能，從而達(dá)到提升系統(tǒng)整體性能的目的。

2. 測試范圍

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

3. 測試方法

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

4. WEB端測試結(jié)果分析

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

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

l 未使用CDN。

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

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

l 未優(yōu)化圖片。適當(dāng)?shù)卦O(shè)置圖片的格式并進(jìn)行壓縮可以節(jié)省大量的數(shù)據(jù)字節(jié)空間。尤其是對類似客服電話.jpg這樣的圖片。對這些圖片資源進(jìn)行優(yōu)化后可將其大小減少282.1 KiB (47%)。

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

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

5. 移動端測試結(jié)果分析

移動端發(fā)現(xiàn)的問題以及需要優(yōu)化的資源同4.WEB端測試結(jié)果分析中的內(nèi)容，除此之外，還有如下內(nèi)容需要進(jìn)行優(yōu)化：

l 字體大小無法自適應(yīng)，在移動端不清晰。

l 移動端的頁面沒有自適應(yīng)，導(dǎo)致用戶需要水平滾動屏幕，如圖8.32所示。

l 頁面中并未設(shè)置視口。該網(wǎng)頁在移動設(shè)備上的呈現(xiàn)尺寸將與在桌面瀏覽器中一樣，因此系統(tǒng)會將其縮小到適合在移動屏幕上顯示的尺寸?？梢栽贖eader區(qū)增加類似如下的代碼：<meta name=viewport content="width=device-width, initial-scale=1">

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

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