Pinterest如何在移动设备上表现更好
Pinterest是现在硅谷最热门的初创公司之一。Virtual PIN板启动筹集了3.38亿美元的风险投资,价值为25亿美元。它拥有2500万活跃用户,并有一个活跃和专注的关注。尽管如此,Pinterest仍然没有表现,并且可以在移动上表演。
该网站在其桌面站点上具有非常令人印象深刻的子第二页加载时间,但在移动设备上具有严重的性能问题。我们在主题演讲中,请参阅Pinterest Mobile主页上加载大量内容,并且在折叠下方的大部分(除非您向下滚动而不可见)。完整页面加载时间平均为42秒。
这为内容丰富的移动站点的管理员开辟了一个重要的主题。根据一些研究,用户更愿意向下滚动以查看内容而不是向右滑动,或者单击按钮以加载其他页面。考虑到这一点,一些移动网站所有者故意在一个页面上装载大量内容,其中大部分是“折叠下方”。即使完整页面负载需要更长时间,希望在页面顶部显示在屏幕上显示的内容已准备好快速。由于网站访问者正在阅读页面顶部的内容,因此其他内容可以继续加载。对于此页面设计策略有效地工作,重要的是,最高内容“高于折叠”的速度很快。
Pinterest.
我们用Pinterest的移动网站看到的是它根本就不会像应该一样快速加载至关重要的“折叠”内容。页面设计顶部的图像和其他内容未按正确的顺序加载。Pinterest站点与Facebook具有一定的设计特征,例如使用其帖子显示的用户缩略图。我们首先看到在网络上请求的缩略图图片 - 甚至领先于顶级Pinterest标志,登录按钮和其他更关键的页面组件。缩略图的图像,渲染“折叠下方”的呈现早于加载“高于折叠”的关键内容。
换句话说,负载序列不是首先是第二级的顶级。使用上面的示例,如果它们低于折叠,可以加载较慢的项目,只要折叠上方的顶部项目首先启动并进入六次第二标准。例如,Pinterest徽标通常不会被请求,直到18秒(或更长时间)如果用户处于3G移动网络连接,则在主页初始请求之后。
镀金
它不一定是这样的。主题演示启动枪管索引中的另一个启动,该索引在其移动优化的主页上加载大量的“折叠”内容是零售商Gilt组。Gilt的主页显示缩略图图像,以便在需要滚动到结束时的长短列表中的许多不同当前运行的销售。但是,镀金页面设计优先于“折叠”产品图像之前的“折叠”内容。这确保现场访问者可以尽快看到完全渲染的屏幕,即使某些内容继续载入视线也会持续。
我们经常重复的另一个提示是确保所有这些分析标签都在页面末尾加载以防止延迟。就像加载下面的折叠图像一样,如果站点正在加载分析标签(Google Analytics,Omniture等),则可以延迟折叠图像的负载,这是那些第三方电话会影响用户对页面加载的看法。最佳方法是在加载所有关键内容后加载分析标签,无论是页面加载的最终还是在加载和呈现的所有“折叠”内容之后。镀金是其网站的这种最佳实践,其移动用户因此具有更好的网站体验。
Pinterest的缓慢移动性能有点令人惊讶,鉴于Pinterest网站的桌面版本的令人印象深刻的页面加载时间。移动网站本身看起来很干净,设计在视觉上有吸引力。挑战是确保3G移动网络用户获得优异的用户体验。另一方面,镀金的移动网站是让它正确的一个很好的例子。
希望加载大量“折叠”内容的网站的最佳做法是确保页面上的关键组件 - 徽标,登录图标,购物车图标 - 在第一个负载时旋转顶部。这意味着确保图像以正确的顺序加载。这对于提供“长”移动页面的人至关重要。
要查看全方位的主题指数,请访问此处。
主题演讲每小时测试指数中的网站,并在三个最大的美国无线网络上的四个位置测试时钟。使用三个不同的设备模拟访问者。从多个位置收集数据,然后聚合以在性能和可用性方面提供总月平均值。