移动端网站的SEO技巧 手机端网站的页面优化

如今浏览器能够实现的特性也越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化移动端手机站的前端页面就变得越来越重要了。子凡已经在泪雪博客写过两篇关于移动SEO优化相关的博客了，涉及内容也有不少关于前端页面优化的要点，那么这里子凡单独的整理一篇关于移动网站前端页面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会让整体体验流畅，但容易造成用户流失；图片压缩让带宽成本降低，但可能会导致视觉效果变差；类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。