1. 首页
  2. 网络营销赋能
  3. 海外营销

如何通过更快的网站提高转换率

早在八月,Zoompf的团队就Moz分析了网站速度实际如何影响搜索排名,发布了一项联合研究。在这项研究中,一个意外的结果显示页面加载时间和搜索排名之间没有明确的相关性。这使我们感到困惑,因为我们预计会看到至少一些小的相关性,特别是在2010年谷歌宣布网站速度会对搜索排名产生部分影响之后。然而,我们确实观察到“时间到第一个字节”和搜索排名之间的相关性,我们在后续帖子中深入研究了更多细节。

在这两篇文章中,我们的读者注意到,虽然页面加载时间似乎不会直接影响搜索排名,但它仍然会对用户体验产生明显影响,并且可能会对未来的搜索排名产生越来越大的影响。换句话说,页面加载时间仍应被视为您网站成功的优先级。

但它真的有多重要?当然,这取决于:您的网站现在越慢,您的用户体验就越落后于您的竞争对手。此外,您的网站获得的流量越多,您从性能优化中获得的收益就越多(我们将在下面详细介绍)。

好消息是,与搜索排名的影响不同,有大量的独立研究表明,在提高网站性能和提高转换率,用户参与度和客户满意度之间存在明显的因果关系。这也是有道理的 – 我们所有人都访问过慢速网站,而且当页面加载时间过长时我们都会得到保护。在移动设备上,我们的耐心更低。

然而,令人惊讶的是,缓慢的表现会对您的转化产生多大的影响。我们先来看看。

这个调查
research_books

早在2006年,亚马逊提出了首批将页面加载时间与在线客户收入明确相关联的研究之一,在Greg Linden的演示文稿Make Data Useful中进行了总结。通过A / B测试,Greg显示每100毫秒的页面渲染时间延迟导致亚马逊的销售额下降1%。

在最近的研究中,Intuit在他们最近将页面加载时间从15秒减少到2秒的努力中展示了Velocity 2013的发现。在这一努力期间,他们观察到每隔一秒的转换量显着增加,削减了他们的页面加载时间,在阶梯中随着速度的增加而减少。特别:

每秒+ 3%的转换次数从15秒减少到7秒
每秒+ 2%的转换次数从第7秒减少到第5秒
每秒+ 1%的转换次数从第4秒减少到第2秒
换句话说,在初始优化中有巨大的价值,并且随着它们变得更快而减少价值。

在最近的另一份报告中,来自2011年奥巴马美国竞选网站的Kyle Rush 通过A / B测试显示,3秒的页面时间减少(从5秒到2秒)将现场捐赠提高了14%,导致增加了超过选举捐款3400万美元。

事实上,有大量的研究支持改善网站性能的明显经济效益,显然网站越慢,您获得的就越多。此外,流量越高,每毫秒产生的影响就越大。

我应该多快?
每当我们与人们谈论网络性能时,他们总是想知道“我应该多快?” 不幸的是,这个很难回答,因为结果对您的业务目标是主观的。那些表演行业(其中,完全披露,Zoompf是其成员)可能会让你达到两秒或更短的时间,引用来自Forrester的研究表明,47%的用户希望在两秒或更短的时间内加载页面。

我们更倾向于采用更实用的方法:您应该优化到ROI持续有意义的程度。您的流量越高,每毫秒获得的货币差异就越大。如果你是Amazon.com,200毫秒的改进可能意味着数百万美元。如果你刚刚推出一个新网站,那么下降到4-6秒就足够了。它实际上是对您当前的流量水平,竞争对手的位置,预算和战略优先级的判断。

不过,第一步是衡量你的立场。幸运的是,谷歌在WebPageTest.org上支持一个很棒的免费工具,它可以测量来自世界各地的页面加载时间。如果您收到大量国际流量,请不要只选择离家近的位置 – 查看您的网站从悉尼,伦敦,弗吉尼亚等地加载的速度。个别结果可能会有所不同!WebPageTest有很多花里胡哨的东西,所以请查看这本初学者指南以了解更多信息。

我从哪里开始?
提高您网站的性能似乎令人生畏,因此从低悬的果实开始是非常重要的。谷歌首席性能工程师史蒂夫·索德斯(Steve Souders)曾声称:
“最终用户响应时间的80-90%用于前端。从那里开始。”
这被称为表演黄金法则。通俗地说,这意味着虽然优化Web服务器和数据库基础架构非常重要,但首先要优化用户浏览器加载的前端组件,您将获得更高的时间投资回报。这意味着所有图像,CSS,JavaScript,Flash和其他资源作为基础HTML页面的依赖关系链接。

您可以在WebPageTest等工具返回的典型瀑布图中看到Performance Golden Rule。请注意,请求的原始页面是整个时间的一小部分。生成此原始基页是完成所有后端服务器工作的地方。但是,该页面包含的所有其他资源(图像,CSS等)都占用了大部分时间来加载:

waterfall_frontend

那么如何才能加快前端性能并获得更好用户体验的回报呢?实际上有数百种方式。在下面的部分中,我们将重点关注通常以最少的努力获得最大收益的高级最佳实践。

第1步:减小页面大小
膨胀的内容需要很长时间才能下载。通过缩小页面大小,您不仅可以提高速度,还可以减少托管服务提供商向您收取的已用网络带宽。

一个简单的优化是启用HTTP压缩,这通常可以将文本资源(HTML,CSS和JavaScript)的大小减少50%或更多。WhatsMyIP.org有一个很棒的免费工具来测试你的网站是否开启了压缩。使用时,不仅要测试主页的URL,还要测试JavaScript和CSS文件的链接。通常我们发现HTML文件的压缩是开启的,但JavaScript和CSS不是。当您的服务器配置为正确压缩时,这可以代表相当大的潜在性能提升。但请记住,您不希望服务器压缩图像,因为它们已经过压缩。额外的服务器处理时间只会减慢速度。您可以在此详细指南中了解更多信息 你应该在你的网站上压缩什么内容。

如果您发现您的服务器未使用压缩,请与您的服务器管理员或托管服务提供商联系以将其打开。它通常是一个简单的配置设置,例如,请参阅Apache,IIS 7 配置文档的mod_deflate模块或有关在WordPress站点上启用的文章。

此外,图像通常可占总页面下载量的80%或更多,因此对其进行优化也非常重要。在某些情况下,请遵循以下最佳做法将图像尺寸缩小50%或更多:

不要将PNG图像用于照片。JPEG图像可将照片压缩到更小的尺寸,并具有出色的图像质量 例如,在Windows 8发布日,微软主页使用了1兆字节的PNG照片,而视觉上可比的JPEG将是140k!想想单独一张图片上所有浪费的带宽!
不要过度使用PNG来提高透明度。透明度效果很好(JPEG不支持),但如果您不需要它,您并不总是需要PNG图像的额外空间,特别是对于摄影图像。PNG可以更好地用于具有鲜明对比度的徽标和图像,如文本。
正确设置JPEG图像质量。使用50-75%的质量设置可以显着减小图像的大小,而不会对图像质量产生明显影响。当然,每个结果都应该单独评估。在大多数情况下,您的图像尺寸应小于100k,最好小一些。
从图像中删除无关的元数据。图像编辑器会在图像文件中留下大量“垃圾”,包括缩略图,注释,未使用的调色板条目等。虽然这些对设计人员很有用,但您的用户无需下载它们。相反,让你的设计师为自己使用制作备份副本,然后通过免费优化器(如Yahoo的Smush.It)或开源工具(如pngcrush和jpegtran)运行网站图像版本。
最后,减少页面大小的另一个好方法是缩小您的Javascript和CSS。“缩小”是一个删除代码中额外注释和空格的过程,以及缩短函数和变量的名称。最好通过示例看到:

示例:原始Javascript

/ * ALERT PLUGIN DEFINITION

  • ======================= * /
    var old = $ .fn.alert
    $ .fn.alert = function(option){
    return this.each(function(){
    var $ this = $(this)
    ,data = $ this.data(’alert’)
    if(!data)$ this.data(’alert’,(data = new Alert(this)))
    if(typeof option ==’string’)data [option] .call($ this)
    })
    }
    $ .fn.alert.Constructor =警报
    缩小版(来自YUI Compressor):

var old = $ .fn.alert; $。fn.alert = function(a){return this.each(function(){var c = $(this),b = c.data(“alert”); if( !b){c.data(“alert”,(b = new Alert(this)))} if(typeof a ==“string”){b [a] .call(c)}})};
您的缩小页面仍将呈现相同的内容,这通常可以将文件大小减少10-20%或更多。正如您所看到的,这还具有混淆代码的额外好处,使您的竞争对手更难以根据自己的目的复制和修改所有辛苦赚来的工作。JSCompress是一个基本的Javascript简单在线工具,或者您也可以尝试更强大的工具,如JSMin或Yahoo的YUI压缩器(也适用于CSS)。还有YUI的一个有用的在线版本,我们推荐。

第2步:减少浏览器请求的数量
浏览器请求呈现页面的资源越多,加载所需的时间就越长。减少页面加载时间的一个好方法是简单地减少页面必须提出的请求数量。这意味着更少的图像,更少的JavaScript文件,更少的分析信标等。有一个原因,谷歌的主页是如此简洁,干净的界面几乎没有依赖,因此加载速度超快。

虽然“少即是多”应该是目标,但我们意识到这并非总是可行,因此您可以采用一些其他策略:

允许浏览器缓存。如果您的页面依赖关系不经常更改,则浏览器没有理由一次又一次地下载它们。与您的服务器管理员联系,确保为您的图像,JS和CSS启用缓存。快速测试是将您的一个图像的URL插入redbot.org并查找标题Expires或Cache-Control: max-age结果。例如,eBay主页上的此图像将由您的浏览器缓存28,180,559秒(仅超过1年)。
expires_header2

Cache-Control是更新的做事方式,但通常你也会看到Expires支持旧的浏览器。如果你看到两者,Cache-Control将为新浏览器“赢”。

虽然浏览器端缓存不会加速您网站的初始页面加载,但它会在重复视图上产生巨大差异,通常会在70%或更多时间内消失。在WebPageTest测试中查看“重复视图”指标时,您可以清楚地看到这一点,例如:

broswer_caching

结合相关的CSS和JS文件。虽然您的开发人员可以更轻松地维护大量单独的CSS和JS文件,但浏览器可以更快地加载更少数量的文件。如果您的文件不经常更改,那么一次连接文件很容易。如果它们经常更改,请考虑在部署过程中添加一个步骤,在部署之前自动连接相关的功能组,按相关功能区域进行分组。每种方法都有优缺点,但这个StackOverflow线程中有一些很好的信息。
将小图像组合成CSS精灵。如果您的站点有许多小图像(按钮,图标等),您可以通过将它们全部组合到一个称为“精灵”的单个图像文件中来实现显着的性能提升。精灵实施起来更具挑战性,但可以为视觉丰富的网站带来显着的性能提升。有关更多信息,请参阅w3schools上的CSS Image Sprites文章,并查看免费工具SpriteMe。
第3步:缩短与您网站的距离
如果您的网站托管在弗吉尼亚州,但您的用户正在访问澳大利亚,则需要很长时间才能下载您的图片,JavaScript和CSS。如果您的网站内容繁重,并且您从远处的用户那里获得了大量流量,这可能是一个大问题。幸运的是,有一个简单的答案:注册内容交付网络(CDN)。现在有许多优秀的产品,包括Akamai,Amazon CloudFront,CloudFlare等。

CDN的工作基本上是这样的:您可以通过以下方式更改图像,JS和CSS的URL:

http://mysite.com/myimage.png
这样的事情(根据你的CDN提供商给你的指示):

http://d34vewdf5sdfsdfs.cloudnfront.net/myimage.png
然后指示浏览器在CDN网络上查看您的图像。然后,CDN提供商将该图像返回给浏览器(如果有的话),或者它将从您的站点中提取并存储以供稍后重复使用(如果没有)。CDN的神奇之处在于,他们然后将相同的图像(或javascript或CSS文件)复制到世界各地的数十,数百甚至数千个“边缘节点”,以将该浏览器请求路由到最近的可用位置。因此,如果您在墨尔本并要求在弗吉尼亚州托管图像,您可以从悉尼获得一份副本。就像魔术一样。

为了说明,请考虑左图像(中央服务器)与右图像(世界各地的重复内容):

在结束时
虽然前端性能目前似乎不会对搜索排名产生直接影响,但它对用户参与度和对付费客户的转化产生了明显影响。由于页面加载时间也会对用户体验产生直接影响,因此很可能会对搜索排名产生未来影响。

虽然有很多方法可以优化您的网站,但我们建议您在优化网站时要记住三个核心原则:

减小页面大小
减少浏览器请求的数量
缩短与您网站的距离

免责声明:本文仅代表作者个人观点,与穷思笔记网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。

发表评论

登录后才能评论

联系我们

 

在线咨询:点击这里给我发消息

邮件:320192271@qq.com

QR code