如何让你的网站在移动端健步如飞
- 2013-09-01 14:15:00
- sdszcn
- 转贴 1467
最近一项研究表明,80%的网民对移动端的浏览体验感到失望,同时当体验提升时,他们会在智能手机上花费更多的时间。
这不奇怪,因为64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。
移动端用户的下载速度
让我们来研究下究竟是什么影响了智能手机上的网页加载速度。
最明显的原因是智能机的网速。最佳情况下,移动端用户使用3g与4g上网。在美国,57%的用户使用3g上网,27%的用户使用4g。在加拿大,4g用户更少。而在英国,4g还是新鲜事物。Pcworld的研究表明,在美国,3g平均下载速度为2mbps,4g则为6.2mbps。ofcom的研究显示,在英国3g的下载速度为2.1mbps。北美和欧洲以外的连接速度一般较慢。1mpbs可换算为122kb每秒,或者0.12mb每秒,因此以上的数据可以转换如下:
- 244 KB/s 3G用户平均网速值 (0.24 MB/s)
- 756 KB/s 4G用户平均网速值(0.76 MB/s)
如果把上述值乘以移动用户等待时间4秒,这意味着网站对于3g用户来说最大为1mb,而4g用户为3mb。
然而下载速度并不是瓶颈,网络延迟及智能机的内存与cpu才是瓶颈。即使手机可以在4秒内下载完1mb,页面也要花费更长的时间去加载,因为手机需要接收并解析代码与图片。
在桌面端,下载文件只占显示网站时间的20%,其余时间花费在解析http请求,获取样式表,脚本文件及图片上。由于移动端的cpu,内存与缓存跟桌面端完全无法相提并论,这些在手机上会花费更长的时间。
怎样减少加载时间
构建一个快速的网站,就是一个做出艰难决定与砍掉非核心体验的过程。如果某一项需求价值不大,去掉之。这个原则适用于所有开发阶段,尤其是规划和编码时。
- 减少依赖文件 : 更少的文件意味着更少的http请求与更快的加载时间
- 降低图片大小: 适应与调整高分辨率图片,在额外的下载时间中占居榜首,占用了宝贵的内存与处理资源。
- 减轻客户端负担: 最佳实践是重新思考你的javascript,并使之降低到最小尺寸
怎样减少依赖文件
如果你想为移动端用户隐藏图片,display:none与visibility:hidden是不能阻止文件下载的。测试下面的代码:
1
2
3
4
5
6
7
|
<div style="display:none;">
<img src="logo-none.png" />
</div>
<div style="visibility:hidden;">
<img src="logo-hidden.png" />
</div>
|
你可以观察下面的瀑布图,图片容器设置display: none或visibility: hidden后仍然会被下载。
替代方案是利用css加载背景图片,之后利用media query媒体查询来通过条件隐藏图片。这个技术最初被Jason grigsby测试过,之后被tim kandlec进一步拓展。亚马逊独立的移动端页面使用了此种技术,根据设备来条件加载特定的图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<meta name="viewport" content="width=device-width">
<style>
@media (max-width:600px) {
.image {
display:none;
}
}
@media (min-width:601px) {
.image {
background-image: url(image1.jpg);
}
}
</style>
<div class="image"></div>
|
你可以看到图片不加载的瀑布图:
保持最小数量的<
- [产品经理] 怎么写好需求文档?
- [产品经理] 三个步骤教你如何做好产品设计
- [系统研发] 电商系统架构——系统鸟瞰图
- [产品经理] 十年老产品经理教你管理需求池
- [行业资讯] 特朗普约见硅谷大佬,Sheryl Sandberg, Jeff Bezos,Larry Page均到场
- [产品经理] 产品经理做APP从头到尾的所有工作流程详解!
- [系统研发] 微盟首度披露小程序研发进程 核心功能全面完成
- [行业资讯] 传统流量模式不在可行,互联网进入全新阶段
- [行业资讯] 【每周资讯】乐视倒闭倒计时;京东12G数据泄露;特朗普邀请硅谷科技大佬会谈
- [系统研发] PSR规范中文版(PHP代码标准)
- [随笔] 关于博客重开,原来日志丢了的问题...
- [产品经理] 三个步骤教你如何做好后台产品设计
- [系统研发] 如何让你的网站在移动端健步如飞
- [系统研发] JavaScript开发规范要求
- [行业资讯] 淘宝联盟“封杀”返利网:不再支持购物返现金模式
- [系统研发] 评站网系统(广告联盟测评网源码)-收工,asp的源码
- [随笔] 曾经的矮个芝麻博客
- [行业资讯] SEO之由浅入深(二)
- [行业资讯] SEO之从浅入深(一)
- [行业资讯] 被搜索引擎降权(排名下降)的10大因素
- [行业资讯] 网站要如何提高用户的粘度和忠诚度
- [行业资讯] seo之由浅入深(三)
- [系统研发] 大型高并发高负载web应用系统架构-数据库架构策略
- [系统研发] 2009年12月编程语言排行榜:开发语言的辉煌与没落
- [行业资讯] 2009年网赚骗子曝光:十大典型骗局