Tip:
Highlight text to annotate it
X
麦丽·欧耶:大家好
我是麦丽·欧耶
Google网站站长支持小组的
开发者项目技术主管
我将通过这段视频介绍
如何为您自己或者您的技术人员
寻找能够轻松实施的快速修正方案
来提高移动网站的性能
但是在讨论如何提高加载速度之前
我们先看一看相关的统计数据
性能会影响利润是不争的事实
Strangeloop曾做过这样的实验
他们将智能手机用户访问的网页
增加了1秒钟的延迟时间
结果他们发现仅仅是1秒钟的延迟
网页浏览量就减少了9%以上
此外跳出率也增加了8%以上
而且转化次数减少了3.5%
最后更糟糕的是
即使在实验结束之后
购物者回访网站的可能性也明显降低了
那么,用户的现状是怎样的呢?
移动网页的速度又如何呢?
研究表明 用户能够集中注意力的时间有限
仅为1秒钟
而如今,在移动设备上
网页的平均加载时间为7秒钟
这意味着在多出的6秒钟内
用户可以尝试访问其他网站
可能会彻底忘记手头的任务 还可能会产生失望情绪
我会具体解释一下
移动网络比桌面设备网络慢的原因
我们可以比较一下 移动设备和桌面设备网络可能的延迟时间
以笔记本电脑用户为例 比方说他们要在google.com上
执行搜索
用户输入查询内容后
用户的浏览器会连接到Google
然后Google的服务器会处理查询内容
最后Google会返回搜索结果 并通过笔记本电脑的浏览器显示出来
整个输入输出过程所花的时间 可能不到半秒钟
实际上,我们当中许多人
对这样的性能已经习以为常
但是在智能手机上
前面提到的输入输出过程 不太可能在半秒钟内完成
这是因为
用户在智能手机上输入查询内容时
客户端要先连接到手机网络
然后才能连接到服务器
手机网络的配置方式决定了
无论智能手机使用的是3G还是4G网络
都需要至少0.5秒钟的时间
来连接到Google等服务器
连接到服务器后 半秒钟就过去了
而Google还需要处理查询内容 返回搜索结果
最后才能让智能手机呈现相应的网页
这里最关键的一点是
您网站的潜在智能手机访问者至少
要等0.5秒才能连接到服务器
然后大约再过0.6秒
也就是总共过了1秒多钟后
访问者可能就已经无法集中精力了
因此我们来讨论一下 如何加快网站加载速度
在这段视频中 我将通过Google Store的例子
演示使用Google Analytics(分析)的一些方法
Google Store是一个电子商务网站 网址为www.googlestore.com
我们先进入Google Analytics(分析)
创建移动流量细分
第一步是“创建新细分”
就在上个月,Page Speed小组的同事
在Google Analytics(分析)中 发布了“网站速度”这一新功能
我们现在转到“网站速度网页计时”页面
设置好移动流量细分后
再选择“分布”标签
在“分布”标签下
您可以查看网站性能的简略视图
我们可以看到
Google Store网站 在移动设备上的平均网页加载时间
超出了6秒钟
我们还注意到 这个网站上46%的网页
在移动设备上需要3到7秒钟的时间加载
值得庆幸的是 我们有很多方面可以改进
还是在“网站速度网页计时”页面上
点击“分层图表”标签
在出现的页面上 默认排序依据是网页浏览量
因此我们看到的是 网站上访问量最高的网页
您可以查看各网页的相对加载速度
结果表明热门程度位居第三的网页
也就是销售YouTube水瓶和磁铁等 商品的Youtube类别网页
加载速度奇慢
这些网页的加载时间 是移动网页平均加载时间的3.5倍
而原本平均加载速度就不那么快
我们可以利用这项功能
列出要调查的加载速度慢的热门网页
现在我们转到“网站速度建议”
了解可以改善哪些方面
我们可以看到此页面针对YouTube网页
列出了9条网页速度建议
点击这些建议
系统会在新窗口中 打开“PageSpeed Insights”
测试评分过程会在您的眼前呈现
评分完成后 我们来看看移动网页的性能
不出所料,我们的YouTube网页
相较于满分100分的网页性能最佳做法
只得了55分
也就相当于不及格
由于这段视频介绍的是 如何快速修正移动网站性能方面的问题
因此我们将重点针对 最简单的、标红色感叹号的建议
进行修正
您可能对某些建议比较熟悉 而对另外一些建议则不太熟悉
不过您可以展开某条建议 了解更多详情
我真心希望您可以体会到
这些网页性能方面的建议
实施起来非常简单 而且最终很可能让您受益匪浅
我制作了一张包含两页内容的图表
希望着重为您介绍 便于实施的性能改进建议
并帮助您了解较难实施的建议
如果您想要详细查看相关内容 可以随时暂停视频
图表的上半部分列出了简单的建议
对于这些建议
开发者或技术能手 只需几小时就能完成实施
第一条建议是启用压缩
启用压缩就是压缩资源
以减少您的网络服务器与客户端之间
传输的数据量
您只需对服务器的配置文件 进行简单的设置更改
就可以启用压缩了
缩减资源大小
可通过公开提供的工具轻松实现
利用异步脚本主要是
复制和粘贴新代码段
来替换较旧的版本
要充分利用浏览器缓存
您只需向相关资源添加相应的HTTP标头
最后一条非常简单的速度建议是
尽量避免目标网页重定向
如果网页在重定向链中
则意味着要纠正来源网址 使其直接指向目标网页
而不是指向任何中间网页
我们重新看看智能手机上的延迟时间
就会发现纠正无关的重定向非常有用
每增加一次重定向 移动用户就要多花至少0.5秒钟的时间
等待网页加载
回头再看看另一条实施难度不大的建议
启用压缩只需 将代码复制到服务器配置文件即可
非常简单
欢迎参照(或直接复制)
我们提供的开放源代码主配置文件
来进行正确的
服务器安全和性能设置
图表第二页上的速度建议
对开发者来说难度有所增加
其中的许多修正操作
您都无法在几小时内完成
这些建议更多是关于 创意方面的完善和流程方面的改进
不过我还是想花点时间
谈谈优化图片的建议
优化图片涵盖了一系列的改进措施
其中包括无损压缩
专门针对您的移动网站
创建和剪裁图片等
优化图像并不像
图表上一页中的一些速度建议
那么简单
但是对速度影响甚大
图片占移动网络数据的65%
优化这些资源可缩短下载时间
最终提高加载网页的速度
介绍所有这些内容 主要是为了让您了解
如果系统针对您的某个高流量移动网页
列出了标有红色感叹号 且开发者难度较低的速度建议
那么针对这些建议进行修正操作
对您的访问者和业务将大有好处
不过,为了让您有更深入的了解
我们在WebPageTest.org上检验一下
在Web Page Test中 我们可以输入一个网页
比如YouTube类别网页 让它来分析该网页的速度
选择一个移动用户代理
比如iPhone或Android智能手机
Web Page Test对加载速度慢的网页进行测试后
我们就可以了解到相关原因
我和同事伊利亚·格瑞格里克 一起查看了这个页面
伊利亚主要关注网页性能
她惊讶地表示
天哪,这个瀑布图可不妙啊
瀑布图直观地表现出了
网页加载时间超过15秒钟的原因
蓝色柱形是
加载网页时下载内容所需的时间
这个网页需要近7秒钟
才开始呈现
照这样的性能来看
YouTube购物者访问我的网站时
要等7秒钟才开始看到一些内容
而且要等待15秒钟以上 才能全部加载整个网页
如果这些还不能促使您
执行一些快速改进措施
那么我们要提醒您
在“What Users Want From Mobile Sites Today” (目前用户对移动网站的期待)这项调查中
61%的用户表示
如果他们在某个移动网站上 不能立刻找到所需内容
他们就会迅速转到其他网站
正因为如此 将您的网页及其“PageSpeed Insights”
与竞争对手的相应网页做比较才如此有趣
我从小到大参加了很多体育比赛
而且又是家里三姐妹中最小的一个
这样的经历让我发现 如果竞争对手超过了自己
特别能激励自己进步
此外在Web Page Test中 您还可以下载胶片视图
了解移动网页的呈现情况
您可以随时将自己网页与同行中其他网页的
呈现情况胶片视图进行比较
最后我想提供一些实用资源的参考信息
我们提供了PageSpeed 其中包括PageSpeed insights等工具
以及相关文章
还有伊利亚以及Page Speed小组成员
制作的精彩视频
最后我想感谢WebPageTest.org
谢谢观看