SEO移动端网站页面前端优化技巧

分类：移动端SEO   时间：2018-07-06 作者：成都seo 围观：819次

　　移动端的便携性和普及性以及移动端设备的飞速发展使得现在网络逐渐向移动端设备转移，甚至有不少行业的用户群体主要都集中在移动端，这使得各个需要做网络推广的企业商户不得不重视移动端手机网站的建设，而随着用户对以及行业的需求，移动端网站的炫酷程度已经丝毫不逊色于PC端。作为网络优化推广工作者，SEO移动端网站页面优化要怎么做呢?
 

　　首先，我们在对移动端网站网页前端进行优化前应该先搞明白我们优化的方向是什么?

　　1、据有效数据统计百分之七十一的用户都期望移动端的网页打开速度能赶上PC端，百分之七十四的用户能忍受网站打开的相应时间为5秒。从这一点可以看出，我们做SEO移动端网站页面优化的时候，网页打开速度是优化的一个重要部分。

　　2、考虑到移动端设备的屏幕尺寸问题，从用户易点击易浏览角度考虑，移动端网站页面的结构布局和功能性是优化的第二个重要部分。

　　对于以上两点移动端前端进行优化，下面的技巧不容错过：

　　1、页面预加载

　　A、显性加载

　　类似这种用户能明显感知的，我把它称为“显性加载”，互动页面都建议加上这种加载方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。

　　B、隐性加载

　　这种在加载第一张图片的时候已经预先加载了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性加载，这种方式的好处是节省流量之余又能使得体验增强。

　　2、按需加载

　　按需加载是不可或缺的优化手段，主要有以下两种方式：

　　对于这种方式，在首屏加载的时候把首屏的内容加载尽量，而位于首屏之外的元素都只在出现在首屏时才加载，很大程度地节省了流量，提升了首次加载时间。

　　上图这种叫响应式加载方式是利用js或者css判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。

　　3、压缩图片

　　对于图片的压缩主要是针对jpg和peng两种图片格式的压缩

　　a、使用大尺寸大有损压缩比的jpg

　　b、使用jpegtran进行无损压缩

　　c、多彩图片使用png24

　　d、低彩图片使用png8

　　e、推荐使用pngquant

　　4、尽量避免重定向

　　为什么要尽量避免重定向呢?

　　这是一个同一网速下的测试结果，重定向之所以会比较慢，是因为它重复了域名查找，tcp链接，发送请求。

　　然后，针对脚本执行中有哪些优化手段，这里只提两点：

　　(1)、尽量避免DataURI

　　DataUri在移动端并不如它在pc端吃香，因为经测试，DataURI要比简单的外链资源慢6倍，生成的代码文件相对图片文件体积没有减少反而增大，而且浏览器在对这种base64解码过程中需要消耗内存和cpu，这个在移动端坏处特别明显。

　　注：DATA-URI 是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI.

　　(2)、点击事件优化

　　在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件，Click之所以慢是因为mousedown导致的。

　　注：mousedown定义和用法

　　1、当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

　　2、与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

　　3、mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。
 

 

　　本文主要针对移动端SEO网站页面性能优化技巧进行了讲解，都是一些基础优化细节。但优化是双刃剑，按需加载提升速度，但可能导致大量重绘;Touch响应快，但很多场景不适合;GPU加速效率高，但内存开销大;Loading会让整体体验流畅，但容易造成用户流失;图片压缩让带宽成本降低，但可能会导致视觉效果变差;类似这样的矛盾点还有很多，我们做网站优化，审时度势的进行合理选择优化方式远比盲目的就行多项优化来的更为实际和有效。