电子娱乐网页应针对三种设备进行优化

aiboboxx

9 [' ?. s$ k1 q3 a/ z5 N

9 \5 D! O' l3 O5 ?, N( J' {! ^- N                               
登录/注册后可看大图

我们预计，在即将到来的圣诞和新年假期中，很多消费者都会购买新的智能手机和平板电脑，在他们享受新设备给他们带来的乐趣时，他们很有可能会访问很多数字娱乐网站。
这些数字娱乐网站将会给我们带来许多音乐、视频和播客等内容，并且这些网站还会添加社交功能，让用户和其他有相同爱好的用户们进行交流。
我们调查了许多数字娱乐网页企业，我们认为此时正是观察他们表现的好时机。现在让我们看看他们在3个屏幕上(电脑、智能手机和平板电脑)投递内容的工作是否成功。
在测试时，电脑方面我们使用IE9浏览器、智能手机使用iPhone4、平板电脑方面我们则使用了iPad2。
/ B2 C, {" v+ W: o* [# C& s( \首先，最重要的是页面加载速度
; J3 W4 ^# \, l/ `7 ~8 d+ p. A  k) a我们认为，在智能手机方面，页面的响应时间最好应该低于5秒。而在实际测试中，只有Spotify和rdio能够达到这个要求。而ProjectPlaylist的响应时间居然达到了惊人的36.4秒!

: u; B- a8 l  _, u. _4 z                               
登录/注册后可看大图

# f, Y  D; d) ?# D在桌面电脑方面，通常的页面响应时间为2-3秒，奇怪的是Spotify在桌面电脑上的平均加载时间为9.62秒。看来这些电子娱乐网页在这方面还有很长的路要走。
我们决定在仔细对SoundCloud进行细致的测试，因为这个网站在智能手机网页开发方面为其他公司作出了优秀的榜样。总体来说，通过测试我们发现SoundCloud为智能手机的屏幕作出了特别的优化，而对3G网络的优化力度却还不够。我们来具体分析一下它的表现。
SoundCloud在智能手机网页方面做的比较好的一点，就是他们使用dataURL来加载图片元素。DataURL将页面中的图片元素直接添加到HTML中，这些图片无需访问多余的HTTP地址。这让设备仅仅通过一次下载就能显示页面中的所有元素，能够起到节省流量、加快响应速度的作用。
另外一个SoundCloud使用的技术能被称为CSS精灵的网页图片应用处理方式。这个技术能够将多张小型图片整合成一张大型图片，并且使用CSS规则来确定图片具体的展示位置。CSS精灵比dataURL稍微复杂一点，它在处理需要缓存或是二次使用的页面时更具优势。这些就是针对移动设备进行优化的好榜样。
# x. c) F0 t2 }! s2 ?* Z! u& P第二，最重要的仍然是页面加载速度
现在我们来看看SoundCloud在移动网页上做的不足的方面。一个关键的问题就是他们会将最初的页面请求重新定向到基本的HTML页面上。第一次重定向时，他们会将用户的访问请求指向一个安全域名，之后在识别请求是来自桌面电脑还是移动设备之后，他们又会将用户的访问请求指向到一个非安全域名上。这些步骤，会造成在用户的页面访问请求开始加载前，出现整整一秒的延迟。
2 n  r( O1 `% M另外一个会影响响应速度的，则是分析标签(analyticstag)，例如GoogleAnalytics。在SoundCloud上，我们发现分析标签会先于一些重要网页内容开始加载。这不仅会造成网页反应方面的延迟，更会增加出现问题的可能性。如果某个第三方应用出现问题，无法正常工作，它可能会导致全部页面的加载失败。网页最好应该在加载网页重要内容后再对这些标签进行加载。
& U2 `. o' E* Q3 F: |/ \2 V9 A另外，SoundClond有意识的做出了这样一个决定，那就是在移动网页上展示大量的元素和内容。他们的移动主页上拥有25张小型图片。这些过多的元素和内容会导致在3G网络下，移动页面的响应时间过长。这样的设计对于使用WiFi接入的用户来说可以接受，但是对于使用3G网络接入的用户来说，会对他们产生重要的影响。虽然SoundCloud为了提高移动网页的性能，对网页上的非动态图像进行了优化，但是这些优化显然还不够，使用3G网络接入的用户仍然会感受到明显的延迟感，移动网页加载速度明显偏慢。
为了进行对比，我们对SoundCloud的主要竞争对手Spotify的移动页面也进行了测试。我们发现Spotify的移动主页上，动态内容数量就十分有限，他们的移动网页响应时间为4.67秒，rdio的网页响应速度更快，所用时间为3.9秒。
总结
毫无疑问，很多的数字娱乐网页会在假期中迎来大批的访问用户，我们希望他们能够为用户提供令人满意的客户体验，这种客户体验应该在多种设备上都能够满足客户的需求，这样才会避免访问者的流失。我们的测试使用了各种移动设备，并且模仿了多种测试场景，例如使用不同的供应商网络，试图了解用户最终的体验，帮助企业做出最好的决策，帮助他们更好的进行竞争和成长。
2013年我们再见!
+ S1 V6 i& P! e: m. N' @(viaVB)