作者：Ken Harker

新技术让我们进一步看到网页运行表现对桌面用户体验的影响。与原来只是简单地衡量页面加载时间的情况不同，新标准让我们得以获知访客花费多长时间看到浏览器变化，访问需在多长时间后才能开始与页面互动等更多详情。这些是用户体验中的重点，这意味着并非所有的加载时间都是相等的。

过去几年，网站一直用监测服务来衡量完整的页面加载时间。但是，这并不能说明用户的网页浏览器如何有效整合了内容，或者用户在多久之后可以开始与页面互动。我们还知道有许多种方法可以整合及展示网站上的内容，有些方法要优于其他选择。

新行业标准得到了IE9、Chrome、火狐等当代浏览器的支持，这可以根据用户在页面加载过程中的真正体验，更全面地揭示网页运行表现。现在的浏览器本身可以保存加载新页面过程中不同事件的时间标记，包括开始和结束阶段的时间标记，以便衡量运行表现：

web_performance(from keynote.com)

*除了空白屏幕或之前屏幕之外，用户所看到的第一点内容（“第一呈现时间”）

*页面何时可以点击、划动和滚动（“页面互动时间”）

*一个页面加载完该页所有内容所需的总体时间（“整体用户体验时间”）

举例来说，想象你在访问两个网站，每个网站的一个页面加载时间都是5秒。如果A网站半秒内就会开始显示内容，而B网站要4秒后才能开始看到内容，你就会感觉A网站可能更有活力，尽管这两者的整体用户体验时间都是5秒。

案例：Rovio

数字娱乐传媒公司Rovio的桌面网页响应时间就很糟糕，多达7.75秒。它在iPhone平台的页面响应时间也达到5.71秒，在iPad上也需要6.59秒。今天的用户期望都很高，像Rovio这类网站应该力争实现2秒的端对端桌面网页加载时间，在3G移动网络的端对端页面加载时间也不宜超过6秒。Rovio桌面网站显然应该提速。

第一呈现时间

除了缓慢的端对端页面加载时间之外，Rovio网站在第一呈现时间的表现上也不理想。我们看到该网站在浏览器能够渲染屏幕上的任何内容之前，就有超过63个的元素在进行加载。这包括15个JavaScript文件，5个CSS文件以及4个自定义字体文件（游戏邦注：使用自定义字体的网站并不多见，部分是因为这会影响页面运行表现，网站需要在初始渲染之前先加载字体）。

压缩

有趣的是，Rovio也没有针对那些可压缩的元素使用gizp进行压缩。所有现代浏览器都支持gzip压缩，这可以在网络传输过程中缩小文件，并在呈现于浏览器时进行解压。如果Rovio网站针对所有页面资产进行压缩，许多文件就可以缩小60-70%，这就有助于加快运行速度。

图片累赘

我们看到Rovio网站要加载大量图片，例如YouTube视频缩略图（Rovio网站在浏览器中以更低的分辨率呈现该图）。图片下载时的像素为480*360，呈现时的像素也仅为160*120。这意味着Rovio网站所下载图片比其实际所需的大9倍，这是在无效使用网络带宽和客户端处理时间。

HTTP持续连接

最后，Rovio也没有合理利用HTTP持续连接的优势。如果没有在网络服务器使用HTTP持续连接，浏览器就会对服务器产生多个不必要的网络连接。HTTP持续连接可以让同个网络连接针对多个请求而进行重用，并且速度更快。

总结

这三个衡量网络运行表现的额外标准为真正评估用户对网页浏览器加载时间的看法增加了筹码，提升了开发者和网站所有者优化网站运行表现的维度。希望Rovio也能花些时间实践这些做法，提升网站运行表现。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Pressure to perform: A closer look at web performance metrics

Ken Harker

New technology allows us to take an even closer look at the impact of Web performance on the desktop user experience. Rather than simply measuring the time it takes for the entire page to load, new standards allow us to capture details about how long it takes for the visitor to see something change in the browser and how long before a visitor can begin to interact with a page. These are important points in the user experience, which mean that not all load times are equal. Let us explain.

For years, Web sites have used monitoring services that provide an external perspective of performance by measuring complete page load times. However, this doesn’t represent how well a user’s Web browser is actually assembling that content or how soon the user can begin to interact with the page. We also know there are many ways to assemble and display content on a site – some methods are better than others.

New industry standards supported by modern browsers like IE9, Chrome, and Firefox can reveal performance more holistically—based on users’ true experience during the page load. The browser itself now saves timestamps from various events in the process of loading a new page, including timestamps for the starting and ending of phases to help measure:

• The first point at which the user sees something other than a blank screen or the previous screen (“Time to First Paint”)

• When a page can be clicked, swiped and scrolled (“Time to Interactive Page”)

• The total time a page takes to load all assets on the page (“Total User Experience Time”)

As an example, imagine you visit two sites, each with a page load time of five seconds. If site A starts delivering content in half a second and site B doesn’t start giving you any content at all until four seconds, your perception of site A will be much more positive even though both sites have the same overall five second user experience time.

Rovio, where art thou?

On the Keynote Startup Shootout Index, digital entertainment media company Rovio has a woefully slow desktop response time of 7.75 seconds. Given its stature amongst the mobile device user community, it comes in with an also unimpressive 5.71 seconds on the iPhone and 6.59 seconds on the iPad.  Users have high expectations today; sites like Rovio should be aiming for two seconds end-to-end page load times for the desktop and no slower than six seconds end-to-end page load times on 3G mobile networks. Rovio’s desktop site could definitely be faster than it is. We were surprised at some missed opportunities and failures to follow best practices.

Time to Paint

In addition to slow end-to-end page load times, Rovio is also showing a very slow time to first paint. We are seeing over 63 elements loading before the browser is able to render any content on screen. This includes 15 JavaScript files, five CSS files plus four custom font files (few websites use custom fonts, in part because of the effect they have on performance, as the site might need to load fonts before its initial render).

Compression

Interestingly, Rovio is also not using gzip compression on all the elements that are compressible. All modern browsers support gzip compression, which shrinks file sizes for transfer over the network before decompressing them to use in the browser. If the Rovio site were to use gzip on all page assets, many files could be 60-70% smaller, again helping to speed performance. There really is no reason not to do this.

Image Bloat

We see a number of images loading, such as YouTube video thumbnails that the Rovio site is displaying at a lower resolution in the browser.  The images are being downloaded at 480×360 pixels, but then displayed at 160×120 pixels. This means that the Rovio site is downloading images 9X larger than it needs, an inefficient use of network bandwidth and client-side processing time.

HTTP Persistent Connection

And lastly, Rovio is failing to take advantage of HTTP persistent connections (also known as HTTP keep-alive or HTTP connection reuse).  Without HTTP Keep Alive turned on at the web server, browsers are making and then tearing down dozens of unnecessary network connections to the server.  HTTP Keep Alive allows the same network connection to be re-used for multiple requests, and is much faster.

Conclusion

The three additional metrics for measuring web performance add a very useful nuance to being able to truthfully gauge how a user will perceive a page loading in the web browser.  It gives developers and site owners an additional dimension to improve and refine. Let’s hope Rovio takes some time to step up performance across these best practice areas.（source：venturebeat）