移动排名优化已成为搜索引擎营销的新趋势。移动网站参与移动排名并成为获得流量的重量级参与者。排名中必不可少的因素是响应速度。显然,与PC相比,移动最终用户的耐心相对较低,并且网站的移动版本的加载速度已成为SEO更加关注的问题。
这就要说到移动端网站如何进行优化了,从HTML来看,适当减少DOM元素使用,把CSS文件放置在head中,JavaScript 需放置在body标签前面,why?相信很多SEO不能理解,SEO进行详解其原因所在。
解析样式时,有的浏览器(FF)会停止脚本运行,而有的(Webkit)则会在脚本访问样式属性但可能受未加载样式影响时停止脚本运行
脚本解析中可能请求样式,如果样式还未解析完毕就会出错
脚本执行将暂停文档的解析和资源的下载
样式表不参与 DOM 修改,所以不会为了解析样式停止文档解析
浏览器要避免重绘,在没有拿到全部样式前不会开始渲染
因此,将二者放在适当的位置,能够极大提高渲染效率。
脚本延迟加载
可将脚本添加 defer 和 async 属性。两个属性的共通点在于,脚本的加载和文档的解析是同步进行的,而区别在于:async 一旦加载完毕,立即停止文档解析并执行脚本;defer 等待文档解析完毕后再执行。
合理使用内联
脚本和样式,应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面,可以考虑使用内联样式从而减少 里输出图片数据。
减少iframe
iframe 本身有许多优点,比如可以并行下载脚本,适合加载慢内容(如广告),同时浏览器可以对其进行安全控制。
减少使用 iframe 的主要考虑是:iframe 会阻碍页面加载,同时也没有语义。
CSS
选择器
选择器效率排行如下:
ID选择器
类选择器
标签选择器
相邻选择器
子选择器
后代选择器
通配符选择器
属性选择器
伪类选择器
效率与优先级并不是对等关系,优先级高的不一定效率高。如 #id.class 合用比 单个 #id 的优先级高,但效率却比值慢。
选择器书写建议是:
避免使用通配符
不使用标签名或类名修饰ID规则:如果规则使用ID选择器作为关键选择器,不要给规则添加标签名。因为ID本身就是唯一的,添加标签名会不必要地降低匹配效率
不使用标签名修饰类:相较于标签,类更具独特性
尽量选择最具体的方式:造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式,可以减少规则去匹配标签的时间
关于后代选择器和子选择器:避免使用后代选择器,非要用的话建议用子选择器代替,但子选择器也要慎用,标签规则永远不要包含子选择器
利用可继承性:没必要在一般内容上声明样式
文章作者:SEO文章标题:移动端前端代码优化丨排名VS体验本文地址: 复制链接