随着移动互联网的发展,我们越发要关注移动页面的性能优化,我们能做得是对移动端页面本身优化,这也是我们专业价值的体现,所以我们必须做移动端页面性能优化(具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍)。
1、控制加载时间与网页大小
跳出前等待时间的用户比例;
加载时间:单页面5S以内;
网页大小:单页面50K以内;
优化加载时间和网页大小:重点在前端优化;
减少HTTP请求:减少重定向,合并图片,懒加载;
减少传输数据大小:压缩图像,开启GZIP……;
考虑到移动设备和移动互联网的特点,马海祥建议在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间(具体可查看马海祥博客《提高网站在移动端打开速度的方法技巧》的相关介绍)。
2、减少访问请求数
从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等。
资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。
静态资源(Css、Js、Image)懒加载;
异步执行inline脚本;
避免重复的资源请求;
缩小cooike;
设置连接方式为keep-alive;
减少DNS查询;
移动端可见区域是有限的,采用延迟加载方式;
开启服务器压缩(gzip方式)。
3、优化图片处理
图片走CDN;
少用动态gif图;
图片不适宜过多及过大;
避免使用bmp图片;
图片压缩;
零碎图片使用css Sprite技术一次性下载。
4、优化HTML
减少HTML标签,减少不必要的嵌套;
废弃table标签;
减少DOM深度;
压缩HTML,去掉注释,空格换行等信息。
5、优化JS
使用临时变量或者数组存储document.images及document.forms等集合数据;
慎用with语法;
使用AJAX缓存;
避免eval及Function语法;
避免使用inlineScript;
异步、底部加载js;
合并压缩js;
字符串连接使用数组的join方式。
