马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > SEO优化 > 移动端SEO > 移动端网站的HTML5前端性能优化指南

移动端网站的HTML5前端性能优化指南

时间:2015-10-10   文章来源:马海祥博客   访问次数:

HTML5是一种最新发布网页构架的普遍模型,是构建对程序、对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上。

移动端网站的HTML5前端性能优化指南-马海祥博客

HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系统用户请求、执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技术,是HTML5核心,需要通过JavaScript有许多方法可以用来检测HTML5的支持能力。

对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面马海祥就带大家来看看移动手机平台的HTML5前端优化,或许对你有帮助和启发。

一、HTML5前端性能优化概述

移动端网站的HTML5前端性能优化指南-马海祥博客

当今移动互联网已经占到整个网络流量的一半,而随着HTML5标准的出台,作为前端工程师们很有必要研究一下如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:

1、PC优化手段在Mobile侧同样适用。

2、在Mobile侧我们提出三秒种渲染完成首屏指标。

3、基于第二点,首屏加载3秒完成或使用Loading。

4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。

5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。

6、基于第五点,要合理处理代码减少渲染损耗。

7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。

8、加载完成后用户交互使用时也需注意性能。

二、加载优化

对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的(具体可查看马海祥博客《移动手机站的前端页面SEO优化技巧》的相关介绍)。

1、减少HTTP请求

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,马海祥建议的优化要点为以下2点:

(1)、合并CSS、JavaScript

(2)、合并小图片,使用雪碧图

2、缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。

(1)、缓存一切可缓存的资源

(2)、使用长Cache(使用时间戳更新Cache)

(3)、使用外联式引用CSS、JavaScript

3、压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。

(1)、压缩(例如,多余的空格、换行符和缩进)

(2)、启用GZip

4、无阻塞

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载

5、使用首屏加载

首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。

6、按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量(具体可查看马海祥博客《移动端网站提升页面加载性能的优化技巧》的相关介绍)。

(1)、LazyLoad

(2)、滚屏加载

(3)、通过Media Query加载

另外,马海祥提醒大家一点:按需加载会导致大量重绘,影响渲染性能。

7、预加载

大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。

(1)、可感知Loading(如进入空间游戏的Loading)

(2)、不可感知的Loading(如提前加载下一页)

(3)、对用户行为分析,可以在当前页加载下一页资源,提升速度。

8、压缩图片

图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。

(1)、使用智图

(2)、使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)

(3)、使用Srcset

(4)、选择合适的图片(webP优于JPG;PNG8优于GIF)

(5)、选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)

另外,马海祥提醒大家一点:过度压缩图片大小影响图片显示效果。

9、减少Cookie

Cookie会影响加载速度,所以静态资源域名不使用Cookie。

10、避免重定向

重定向会影响加载速度,所以在服务器正确设置避免重定向。

11、异步加载第三方资源

第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。

三、脚本执行优化

脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,JavaScript写在尾部或异步。

2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。

3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。

4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。

四、CSS优化

1、尽量避免写在HTML标签中写Style属性。

2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。

3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则(具体可查看马海祥博客《看看那些能提高效率却容易被人忽略的CSS细节》的相关介绍)。

4、正确使用Display的属性,Display属性会影响页面的渲染,因此马海祥建议各位站长要合理使用。

(1)、display:inline后不应该再使用width、height、margin、padding以及float

(2)、display:inline-block后不应该再使用float

(3)、display:block后不应该再使用vertical-align

(4)、display:table-*后不应该再使用margin或者float

5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。

6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用。

7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。

8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。

9、标准化各种浏览器前缀

(1)、无前缀应放在最后。

(2)、CSS动画只用(-webkit- 无前缀)两种即可。

(3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。

10、避免让选择符看起来像正则表达式。

高级选择器执行耗时长且不易读懂,避免使用。

五、JavaScript执行优化

1、减少重绘和回流

(1)、避免不必要的Dom操作

(2)、尽量改变Class而不是Style,使用classList代替className

(3)、避免使用document.write

(4)、减少drawImage

2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。

3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。

4、尽量使用事件代理,避免批量绑定事件。

5、尽量使用ID选择器,ID选择器是最快的。

6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。

六、渲染优化

HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。

1、HTML使用Viewport

Viewport可以加速页面的渲染,请使用以下代码:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

2、减少Dom节点

Dom节点太多影响页面的渲染,应尽量减少Dom节点。

3、动画优化

(1)、尽量使用CSS3动画。

(2)、合理使用requestAnimationFrame动画代替setTimeout。

(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。

4、高频事件优化

Touchmove、Scroll事件可导致多次渲染。

(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。

(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速

CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

另外,过渡使用会引发手机过耗电增加。

马海祥博客点评:

HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容,保证内容的一致性是解决HTML5痛点的唯一办法,这个时候大家再去理解“凡是适合在移动端展现的网站”就不是站在高点去理解了,就应该站在最低点,怎么展示符合移动界面,同时满足一部分移动用户的使用体验和需求。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1315.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 移动端   HTML5   前端优化  

上一篇:移动端SEO优化与PC端SEO优化的不同点
下一篇:根据访问设备自动识别展示手机站或PC站的方法

您可能还会对以下这些文章感兴趣!

  • 手机网站制作的常用方法及优化技巧

    手机网站是指用WML(无线标记语言)编写的专门用于手机浏览的网站,通常以文字信息和简单的图片信息为主。实际上,随着向手机智能化方向发展,安装了操作系统和浏览器的手机的功能和电脑是很相似,使用这种手机可以通过GPRS上网可浏览几乎所有的www网站,无论网站是不是专……【查看全文

    阅读:4273关键词: 手机网站   网站制作   优化方法   优化技巧   日期:2014-10-04
  • PC网站自动适配手机网页的方法技巧

    随着智能手机的不断发展,移动搜索的比例也在不断增加,而传统的PC站点在手机端的用户体验度较差,这就容易流失大量的用户,所以做一个对应的手机站就理所当然,如今手机站已经逐渐成为一种潮流,基本上有点规模的PC站点都会制作相应的手机站,可是在很多方面依然存在一……【查看全文

    阅读:23001关键词: 网站   手机网页   pc站   日期:2015-12-03
  • 移动端SEO优化与PC端SEO优化的不同点

    随着移动互联网的快速发展,用户从PC端向移动端迁移的大趋势更加明显,但这也使得移动手机网站的SEO优化工作还处于探索阶段,很多SEO和站长也都有了一些疑问,移动端需要做SEO优化吗?移动端该怎么做SEO优化?我们都知道,移动端与PC端搜索引擎排名算法是不一样,但是优……【查看全文

    阅读:931关键词: 移动端seo   seo优化   seo   日期:2015-09-10
  • 如何优化移动页面中的head标签代码更利于搜索引擎识别

    对于手机网站的首页或者频道首页的网页代码中的keywords、description最好加上与PC端有所区别的meta标签和关键词,在每个页面的关键字及描述像做传统PC端网站一样,做好针对性的填写工作,对搜索结果的展现(摘要)以及优化工作大有帮助,另外确保在手机网站或者PC端网站……【查看全文

    阅读:1326关键词: 页面优化   搜索引擎   日期:2015-08-08
  • 移动端网站SEO优化排名的一些注意细节

    俗话说,有搜索的地方就有SEO优化,移动端的SEO优化也逐渐的进入火热化,对于移动端的SEO优化,大家都是处于同一个阶段,就看谁花在这上面的心思更多一些了,在优化移动端网页的时候,越来越多的问题开始出现,在暴露移动端薄弱的同时,也让刚刚进入SEO行业的新人们跟前……【查看全文

    阅读:1980关键词: 移动端   seo优化   seo排名   日期:2015-11-17
  • 提高网站在移动端打开速度的方法技巧

    最近一项研究表明:80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间,由于64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒,为了满足移动用户的高期望,你需要对网站针对移动……【查看全文

    阅读:7817关键词: 网站   移动端   网站速度   日期:2015-03-12
  • 移动端手机站做站内优化的要点

    随着移动流量的与日俱增,移动搜索引擎的功能越来越丰富,意味着更多移动特性可以施展,同时也意味着对HTML5网站的要求更趋规范和严格,这对于负责移动站点优化的负责人来说是个极大的挑战,我一般将站内优化的生命周期概括为三个词,实验、评估、调整,因此我的站内优……【查看全文

    阅读:1849关键词: 移动端   手机站   站内优化   日期:2015-11-10
  • PC站建立移动端网站的三大方法模式

    移动端网站作为移动互联网最主要的入口,能随时展现自身、与目标用户便捷沟通,同时方便手机用户随时随地查询和浏览,有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册,无论何时何地,遇见何人,你只要打开手机即可以让对方浏览到产品和服务信息,不会错过任……【查看全文

    阅读:3004关键词: 移动端网站   移动端   pc站   日期:2016-12-07
  • 百度移动搜索优化:手机站优化指南

    本文旨在为手机站站长提供官方、明确的搜索引擎优化标准,使站长合理、可持续的提升手机站流量,获得长久、稳定的发展,同时促进整个移动互联网的良性发展。其中移动搜索会优先收录的手机站点为:A、拥有手机用户迫切需要内容资源的手机站点。B、符合手机建站规范的站点……【查看全文

    阅读:2206关键词: 移动搜索优化   移动搜索   手机站优化   优化指南   日期:2014-08-18
  • 移动设备前端开发中viewport的理论及使用技巧

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备,viewport并非只是ios上的独有属性,在android、winp……【查看全文

    阅读:219关键词: 移动设备   前端开发   日期:2016-04-03
↓ 点击查看更多 ↓

互联网更多>>

  • 互联网思维究竟是一种什么样的思维? 互联网思维究竟是一种什么样的思维? 但凡做企业的,不管是创业的还是在互联网冲击下转型升级的传统行业企业家,“互联网思维”已经成为了大家共同……
  • 移动互联网是什么意思? 移动互联网是什么意思? 移动互联网就是将移动通信和互联网二者结合起来成为一体,是指互联网的技术、平台、商业模式和应用与移动通信……
  • 计算机的开机启动原理 计算机的开机启动原理 计算机从打开电源到开始操作,整个启动可以说是一个非常复杂的过程。总体来说,计算机的整个启动过程分成四个……

SEO优化 更多>>

医疗行业开展品牌推广急需解决的10大问题 如何以一个用户的角度来做企业门户网站