移动网站SEO技巧之页面优化
发布日期: 作者:张子凡
一、移动网站前端为什么需要SEO优化？
从子凡自己的个人使用来看，很多的网站用户体验都是极其差的，虽然现在普遍都是智能手机的时代，但是对于一般的手机来说，大部分人的手机运行内存都还存在1G，浏览一个手机网页可能会将整个手机或者浏览器的卡死，这里子凡就不深入去普及手机的性能了。移动端页面的打开速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面本身。我们无法改变用户所使用的设备，所以我们能做得是对移动端页面本身优化，这也是我们专业价值的体现，所以我们必须做移动端页面性能优化。二、移动网站SEO优化从哪里入手？
不得不说移动网站的优化与PC端常用的优化手段：代码优化（css、html、js优化）；减少HTTP请求…，减少DOM节点；内联CSS，JS置后…，缓存技术等，而这些手段大部分依然适用于移动端，这些都是大家耳熟能详的页面优化手段。移动网站一定要确保网站加载的速度，页面一定要做到没有冗余，按需加载，比如一些文章中图片较多的时候，就需要使用一些技术手段来实现按需加载，没有在当前屏幕的图片就应该不用加载，这样既可以提升网站的加载速度，也可以为用户节省必要的流量。同样图片在移动站点上也有必要做一些压缩。
移动端网站尽量避免重定向；在是编写CSS样式的时候，尽可能少的使用图片，子凡认为能用CSS代码实现的效果就不用图片或者js等特效，这样能在一定程度上达到优化的效果。
三、网页渲染应该注意写什么？
针对渲染阶段中有哪些优化手段，这里也只提两点：1、动画优化，对于动画的优化，简单来说，有以下3种：
（1）、尽量使用css3动画
优点：不占用js主线程；可利用硬件加速；浏览器可对动画做优化。
缺点：不支持中间状态监听。
（2）、适当使用canvas动画
优点：可规避渲染树的计算渲染更快
缺点：开发成本高；维护较麻烦；
2、高频事件优化
类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：
（1）、使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染。
（2）、增加响应变化的时间间隔，减少重绘次数。
最后，针对合成/绘制只提一个优化手段：GPU加速。
写在最后：以上子凡就详细的写了三个大的优化方向，我个人认为前亮点尤其重要，也是大家在做移动网站优化时最需要注意的，至于第三点嘛，其实这个第三点子凡觉得很多的开发中其实并不用做得那么多，一般的网站也做不到这样高的效果，移动端网站子凡还是比较追求简单，实用，页面特效不必过多，必要的一些焦点特效或者切换等就差不多了。
再做一个总结吧：其实优化是双刃剑，按需加载提升速度，但可能导致大量重绘；Touch响应快，但很多场景不适合；GPU加速效率高，但内存开销大；Loading会让整体体验流畅，但容易造成用户流失；图片压缩让带宽成本降低，但可能会导致视觉效果变差；类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。
特别声明
本文为 张子凡 原创发布，仅代表作者观点，不代表冬镜博客网的观点或立场，冬镜博客网仅提供信息发布平台，合作供稿、侵权删除、反馈建议请联系520@520xx.cc
