前端里面如何进行搜索引擎优化(SEO)

如何进行SEO优化:css

(1) 避免head标签js堵塞:html

  全部放在head标签里面的js和css都会堵塞渲染;若是这些css和js须要加载好久的话,那么页面就空白了;缓存

  解决办法:一是把script放到body后面,这也是不少网站采起的方法。闭包

       第二种是给script加defer或者async的属性,一旦script是defer或者async延迟的,那么这个script将会异步加载,但不会立刻执行,会在readystatechange变为Interactive后按顺序依次执行;(作了解)dom

(2) 减小head里面的css资源:异步

  css必须放在head标签里面,若是放在body里面会形成对layout好的dom进行重排形成页面闪烁;可是一旦放在head标签里面又会堵塞页面渲染;因此要尽量的减少css体积。async

(3) 压缩和缓存:优化

 

(4)延迟加载图片:网站

  

这里没有直接给src路径,而是在页面加载完成后用js操做src,减小了页面加载图片的时间,首先把整个页面结构呈现给用户;惰性加载图片也是差很少;当用户滑动页面到必定高度时(监听scroll事件),再动态的依次对图片进行处理;htm

(5) DNS解析优化:

  DNS查询须要花费大量时间来返回一个主机名的IP地址;

  在咱们的网站中,可能会加载到不少个域的东西,好比引入了百度地图啊之类的sdk和一些本身的子域名服务;第一次打开网站时要作不少次DNS查找;DNS预读取可以加快网页打开时间;

  

解决办法:在head中写上几个link标签,对标签中的地址提早解析DNS,这个解析是并行发生的,不会堵塞页面渲染;

6)html别嵌套太多层,加剧页面layout的压力;

7)css选择器的合理运用,减小匹配的计算量;

8)js中别滥用闭包,会加深做用域链,增长变量查找时间;

9)减小http请求等

相关文章
相关标签/搜索