网站前端性能测试报告

内下内容选自《小强软件测试疯狂讲义》一书

1. 测试目的

通过主要功能页面的前端性能测试，从前端分析引起页面响应缓慢的原因，并根据优化建议对其进行优化，提升前端性能，从而达到提升系统整体性能的目的。

2. 测试范围

主要对用户常用的页面进行测试，至少包括：首页、各分类页、搜索结果页等，此处我们只以首页为例进行测试和分析。

3. 测试方法

利用YSlow、PageSpeed等工具进行测试，因该网站是第三方的并不是我们自己的，所以无法进行埋点测试。其他的测试方法大家可自行练习。

4. WEB端测试结果分析

通过YSlow、PageSpeed等工具的测试后，综合结果并不算好，属于较差的情况，其中YSlow给出的评级是F（最差），具体结果分析如下：

l 存在较多的HTTP请求。其中有16个external Javascript scripts，7个external stylesheets，18个external background images，这些都可以尝试进行合并。

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因为篇幅有限，这里就没有一一列出