移动手机站的前端页面SEO优化技巧
随着移动互联网的发展，移动手机站也越发的普遍了，作为一名专业的SEO，我们也要多关注移动页面的性能优化，如今浏览器能够实现的特性也越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化移动端手机站的前端页面就变得越来越重要了。
开发人员普遍会将他们的代码习惯优先于用户体验，但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。
前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能，今天我要在马海祥博客上跟大家讲的这个主题就是要告诉你一些前端性能优化的最佳技巧。
一、移动手机站页面为什么要进行SEO优化？
纵观目前移动网络的现状：移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计：
71%的用户期望移动页面跟pc页面一样快，74%的用户能容忍的响应时间为5秒，所以我们必须保证移动端页面有足够的速度（具体可查看马海祥博客《提高网站在移动端打开速度的方法技巧》的相关介绍）。
据马海祥了解，移动端页面的打开速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面本身。
目前主流的移动网络制式为3G，今年我们还看到了4G网络制式在快速发展，这再一次提升了移动页面的加载速度。
而移动设备本身，截止到目前，以iphong6、三星、Note4等设备为首，智能设备已经变得比以往屏幕更大，CPU、GPU、内存更靠谱。
而与其同时，浏览器产商也为提升页面的速度做出了不可磨灭的努力，如今网络制式供应商，手机制造商，浏览器产商如此给力，我们呢？我们能为移动端页面做些什么呢？
我们能做得是对移动端页面本身优化，这也是我们专业价值的体现，所以我们必须做移动端页面性能优化。
二、移动手机站页面前端优化的四个阶段
在说这个前，我要先提一下pc常用的优化手段：代码优化（css、html、js优化）；减少HTTP请求（雪碧图，文件合并…）；减少DOM节点；无阻塞（内联CSS，JS置后…）；缓存技术等，这些手段大部分适用于移动端，这都是一些耳熟能详的手段，今天这里就讲了，有兴趣可以参考马海祥博客《百度移动搜索优化：手机站优化指南》的相关介绍。
今天要讲的主要是一些适用于移动端的优化手段，现在进入正题。
首先，我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段，如下图所示：
每个阶段的主要工作如上图所示，而我们的优化目标是：
下面我们来针对上面的几个阶段细说一下都有哪些优化手段。
首先，来看看加载中有哪些优化手段：
1、预加载
对于图片的预加载，我之前在马海祥博客《实现网页图片预加载效果的3种技术方法》一文中已经跟大家详细的介绍过了，这里我简单的跟大家说下预加载的两种方式：
A、显性加载
类似这种用户能明显感知的，我把它称为“显性加载”，互动页面都建议加上这种加载方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。
B、隐性加载
这种在加载第一张图片的时候已经预先加载了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性加载，这种方式的好处是节省流量之余又能使得体验增强。
2、按需加载
按需加载是不可或缺的优化手段，主要有以下两种方式：
对于这种方式，在首屏加载的时候把首屏的内容加载尽量，而位于首屏之外的元素都只在出现在首屏时才加载，很大程度地节省了流量，提升了首次加载时间。
上图这种叫响应式加载方式是利用js或者css判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。
3、压缩图片
对于图片的压缩，我也在马海祥博客上多次提到过了，这里我首先要说的是jpg文件：
对于移动端的Jpg文件，有这样的结论：
a、使用大尺寸大有损压缩比的jpg
b、使用jpegtran进行无损压缩
而对于png格式的图片，我之前在马海祥博客《从PNG格式和透明度来看PC端和手机端该用哪种Png图片》也跟大家详细的介绍过，这里我主要说的是：
a、多彩图片使用png24
b、低彩图片使用png8
c、推荐使用pngquant
4、尽量避免重定向
为什么要尽量避免重定向呢？具体的原因如下图所示：
这是一个同一网速下的测试结果，重定向之所以会比较慢，是因为它重复了域名查找，tcp链接，发送请求。
5、使用其他方式代替图片
对于图片代替的技术，目前有两种方式，
第一种是：依靠css3绘制图片
第二种：使用iconfont代替图片
但iconfont不一定比图片好，这里做了个实验：
对于大图片，iconfont并不比雪碧图好，建议单侧小尺寸图标才使用iconfont
然后，针对脚本执行中有哪些优化手段，这里只提两点：
（1）、尽量避免DataURI
DataUri在移动端并不如它在pc端吃香，因为经测试，DataURI要比简单的外链资源慢6倍，生成的代码文件相对图片文件体积没有减少反而增大，而且浏览器在对这种base64解码过程中需要消耗内存和cpu，这个在移动端坏处特别明显。
（2）、点击事件优化
在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件，Click之所以慢是因为mousedown导致的，如下图所示：
三、渲染阶段中有哪些优化手段
然后，针对渲染阶段中有哪些优化手段，这里也只提两点：
1、动画优化
对于动画的优化，简单来说，有以下3种：
（1）、尽量使用css3动画
优点：不占用js主线程；可利用硬件加速；浏览器可对动画做优化。
缺点：不支持中间状态监听。
（2）、适当使用canvas动画
优点：可规避渲染树的计算渲染更快
缺点：开发成本高；维护较麻烦；
通过对css3动画和canvas动画对比：
得到结论：5个元素以内使用css3动画，5个以上使用canvas动画。
（3）、合理使用RAF(requestAnimationFrame)
优点：能解决脚本问题引起的丢帧，卡顿问题；支持中间状态监听。
缺点：兼容问题。
通过RAF动画与settimeout动画对比：
得到结论：不需要兼容android 4.3浏览器的情况下，请使用RAF制作脚本动画。
2、高频事件优化
类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：
（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。
（2）、增加响应变化的时间间隔，减少重绘次数。
最后，针对合成/绘制只提一个优化手段：GPU加速。
触发GPU加速的方式有：CSS3 transitions；CSS3 3D transforms；WebGL 3D绘制；Video等，使用GPU加速前有对比实验，如下图所示：
GPU加速实际上是大幅减少了合成/绘制时间，从而大大地提高了页面速度，但GPU加速也有自己的缺点：过多的GPU层会带来性能开销，主要原因是使用GPU加速其实是利用了GPU层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。
马海祥博客点评：
本文针对页面呈现的四个阶段提出了比较典型的优化手段，到最后，马海祥再提醒读者一下：其实优化是双刃剑，按需加载提升速度，但可能导致大量重绘；Touch响应快，但很多场景不适合；GPU加速效率高，但内存开销大；Loading会让整体体验流畅，但容易造成用户流失；图片压缩让带宽成本降低，但可能会导致视觉效果变差；类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。
本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于https://www.mahaixiang.cn/ydseo/1163.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
-
移动端页面开发过程中经常碰到的一些问题
对于前端开发者来说移动端存在着很多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题，那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作，就目前的状况来看，手机页……【查看全文】
阅读：17731关键词： 移动端 日期：2016-05-20 -
移动端网站SEO优化排名的一些注意细节
俗话说，有搜索的地方就有SEO优化，移动端的SEO优化也逐渐的进入火热化，对于移动端的SEO优化，大家都是处于同一个阶段，就看谁花在这上面的心思更多一些了，在优化移动端网页的时候，越来越多的问题开始出现，在暴露移动端薄弱的同时，也让刚刚进入SEO行业的新人们跟前……【查看全文】
-
百度移动搜索开放适配服务的3种方法
为了提升用户的移动搜索结果浏览体验，百度移动搜索对具有对应手机站的PC站提供“开放适配”服务。如果您同时拥有PC站和手机站，且二者能够在内容上对应，您可向百度“提交”PC页―手机页的对应关系，若对应关系准确，将有助于百度在移动搜索中将原PC页结果替换为对应的……【查看全文】
-
手机网站制作的常用方法及优化技巧
手机网站是指用WML(无线标记语言)编写的专门用于手机浏览的网站，通常以文字信息和简单的图片信息为主。实际上，随着向手机智能化方向发展，安装了操作系统和浏览器的手机的功能和电脑是很相似，使用这种手机可以通过GPRS上网可浏览几乎所有的www网站，无论网站是不是专……【查看全文】
-
移动端手机站做站内优化的要点
随着移动流量的与日俱增，移动搜索引擎的功能越来越丰富，意味着更多移动特性可以施展，同时也意味着对HTML5网站的要求更趋规范和严格，这对于负责移动站点优化的负责人来说是个极大的挑战，我一般将站内优化的生命周期概括为三个词，实验、评估、调整，因此我的站内优……【查看全文】
-
关于移动端手机站的12个SEO优化方法
手机站和PC端站点不一样，PC端站点百度明确给出关键词跟描述标签对优化起不到任何效果了，但手机端的关键词和描述标签是对手机站点有效果的，所以百度移动搜索也给出了建议，最好要把三大标签做好优化。网站结构要用合理的树形结构，最好采用树形和扁平相结合；清晰的……【查看全文】
-
搜索引擎喜欢什么样的移动页面优化方式？
智能手机和平板电脑的普及，产生了越来越多的移动端客户流量，尽管基于手机和平板电脑的网络浏览器种类繁多，功能也都越来越完善，但限于较小的终端屏幕以及网络流量的问题，移动设备并不适合直接浏览各种基于桌面电脑登陆的网站，因此，做为网站站长来说，有必要为自己……【查看全文】
-
详解移动端设备页面尺寸设计原理
现在移动设备越来越多，使用手机上网的人也越来越多，移动设备也成为访问互联网的常见终端设置，以前我们在编写管理系统的时候，客户端只需要考虑PC机桌面设备，现在则必须要考虑到移动终端设备了。移动终端设备的屏幕分辨率很多都不一样，手机就分很多种大小的，然后还……【查看全文】
-
移动端制作手机版专题页面的优化要点
专题网页的设计通常是短平快，在特定时间达到一些运营需求，而响应式设计通常需要考虑更多不同分辨率下的响应效果，花费的设计和开发时间成本可能是双倍的，而且专题设计具有很强的形式感，响应式设计的流体布局，必然会对视觉造成限制，所以对于专题来说做成响应式的网……【查看全文】
-
Wap手机站的SEO优化要点及注意事项
随着智能手机的普及，Wap手机网站也逐渐多了起来，移动搜索也成了网站SEO优化的新战场，移动端的SEO优化随着移动智能终端的普及而显得尤为重要，甚至许多手机企业网站的建设也显得刻不容缓，所谓抢得先机即为赢得商机。作为中文手机搜索引擎百度移动搜索，每天用户使用……【查看全文】
-
新手如何做移动端网站的SEO优化
如今，移动互联网的使用人数在不断的增加，网站通过移动搜索来的流量也越来越多，但不可否认的是，现阶段许多PC端网站copy成简单的移动版本的wap网站，基本没有做优化，所以需要我们重视移动端网站的SEO优化，因移动与PC端的显示媒介不同，所以在选择目标关键词时会有差……【查看全文】
-
制作移动端手机网站过程中的SEO优化方法技巧
由于是手机用户，用户浏览网页的时间是零碎的，不可能耐心点击很多的页面，因此，要想做好一个移动端网站的优化，就需要尽可能在制作移动端手机网站的过程中精简移动网站设计，并要合理的做好移动端网站的SEO优化，网页设计要尽可能的设计简单，手机端可视区域小，布局……【查看全文】
-
2014年中国移动搜索行业发展研究报告
随着智能手机普及，极大地推动移动互联网快速发展，用户上网行为随之发生迁移和改变，包括在互联网时代占据主要入口地位的搜索，用户搜索行为逐渐从传统PC搜索向移动搜索转移，移动搜索已经成为移动互联网时代的重要入口之一，相比传统PC搜索，用户在使用移动搜索时，往……【查看全文】
-
移动端网页界面常用的六种导航模式
标签式导航：最常用、最不易出错，请第一时间考虑它。抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中。列表式导航：作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类。平铺式导航：如果你的内容是随意浏览，无需来……【查看全文】
-
谷歌(Google)手机站优化指南及建站原则
所谓简单快捷，就是要在手机有限的屏幕上以最简单最实用最快捷的形式展示给用户最需要的东西，让用户方便。谷歌的建议是：（1）、优先提供用户最需要的内容和功能；（2）、减法，减法，减法（这一点其实就是在强调手机网站要去掉一切可以去掉的内容、功能、板块、按钮等……【查看全文】
-
我对网站移动端建设的一些看法
如今，国内移动互联网用户数量仍在日益增长，各个互联网大佬也都在抢占移动资源，移动互联网资源正在高速发展中逐步繁荣，而其中移动搜索这一块当然也将是重点，不管你网站的移动端是使用手机站点或网站APP，都要明确一点：网站内容才是网站运营的根基，网站内容的专业……【查看全文】
-
提高网站在移动端打开速度的方法技巧
最近一项研究表明：80%的网民对移动端的浏览体验感到失望，同时，当体验提升时，他们会在智能手机上花费更多的时间，由于64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒，为了满足移动用户的高期望，你需要对网站针对移动……【查看全文】
-
优化手机网站的三大SEO策略
手机浏览器的搜索引擎采用多项指标决定网页排名，站点的整体性能、易用性、下载速度和屏幕效果等都是影响排名的因素。因此，相比那些专为小屏幕设计、只包含了简单信息的网站，一个全面优化、涵盖了所有功能和关键信息的网站的排名，显然会靠前很多。假如某网站使用了一……【查看全文】
-
如何优化一个移动端手机网站
随着移动设备的普及，也引发了一大批移动端网站的建设，但随之而来的问题也就出现了，作为一名专业的SEO人员，我们又该如何优化移动端手机网站呢？最近，也看到有很多做SEO的博友都在讨论移动端的网站怎么去做SEO优化？怎么做好手机网站优化？怎么把我们网站关键词排名……【查看全文】
-
PC站建立移动端网站的三大方法模式
移动端网站作为移动互联网最主要的入口，能随时展现自身、与目标用户便捷沟通，同时方便手机用户随时随地查询和浏览，有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册，无论何时何地，遇见何人，你只要打开手机即可以让对方浏览到产品和服务信息，不会错过任……【查看全文】
分类目录
运营数据中常见的数据陷阱
高阅读量文章标题的解析和套路写法
数据分析师该如何做好数据运营？
自媒体为什么只在中国盛行？
产品经理的“七宗罪”
“马海祥博客”“医院seo”“seo思维”百度排名终于到首位了
如何写一份详细的网站SEO优化方案
详解APP从设计到切图的工作流程
自媒体行业的人是否会有未来？
自媒体人该如何推广自己的自媒体互联网更多>>
自然语言处理的单词嵌入及表征方法
本这篇文章里，综述了在自然语言处理（NLP）上应用深度神经网络得到的一些效果极其显著的成果，但我写这篇文章……
关于大型网站架构的负载均衡技术详解
负载均衡是将负载（工作任务，访问请求）进行平衡、分摊到多个操作单元（服务器，组件）上进行执行，是解决高……
基于贝叶斯推断应用原理的过滤垃圾邮件研究
随着电子邮件的应用与普及，垃圾邮件的泛滥也越来越多地受到人们的关注。而目前正确识别垃圾邮件的技术难度非……
图解Dedecms网站后台文章采集功能的使用方法步骤 
简约页面设计风格的相关技巧有哪些？ 
网站CSS代码优化的7个原则 SEO优化 更多>>
|
|
-
做企业SEO推广过程中经常会遇到的一
做SEO已经很多年了，这期间也积累了很多的合作…… -
淘宝新手该如何从零开始学习淘宝S
淘宝SEO就是淘宝搜索优化，在了解淘宝搜索引擎…… -
大型门户网站常用的SEO思路
一般的网站SEO优化需要考虑的就是排名、流量、…… -
惊雷算法3.0即将上线：持续打击刷点
近日，百度搜索平台官方发布最新消息，声称即…… -
关于二级域名的10个热点问答
二级域名是指顶级域名之下的域名，在国际顶级…… -
从不同的角度来看SEO优化思维
在写这篇文章之前，我也做过SEO培训，不能说自…… -
Bing官方搜索引擎优化指南给我们的启
目前，在中国做seo的在大多数时候，我们都是以…… -
百度“天网算法”：严打盗取用户隐
近日，百度网页搜索发现部分站点存在盗取用户……