美文网首页运营@运营打杂
关于前端SEO要点(二)

关于前端SEO要点(二)

作者: 福兮_ | 来源:发表于2018-06-16 23:08 被阅读5次

背景:前端SEO并不难理解,对资深SEO来说,前端SEO性能优化方案也有掌握的必要。

一、页面级优化

1、js、css文件压缩、合并、外链到页面正确的位置。css置顶,js置底。

2、css sprites雪碧图将多个图片拼成一个图

3、inline images通过编码的字符串将图片内嵌到网页文本中

4、提高ajax响应速度

5、延迟加载,对一些无需最初加载的内容通过脚本延迟加载

6、减少dom元素数量,网页中元素过多对网页的加载和脚本的执行都是沉重的负担。

7、根据域名划分内容。静态动态资源分开(CDN)

8、减少iframe使用

9、减少请求次数

10、避免空的图片src

11、图片压缩、懒加载等

12、避免图片缩放,如果需要小图,就直接使用小图片。

13、使用favicon.ion

14、合理设置HTTP缓存

二、代码优化

15、减少cookie大小,提升请求响应速度

16、去除重复脚本

17、减少dom访问、操作

18、DOM的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。

19、使用事件委托

20、减少作用域链查找

21、[避免使用eval

22、字符串拼接’+=’效率不如使用数组join方法

23、不要一条条地改变样式,而要通过改变class,或者csstext属性,一次性地改变样式。

24、尽量使用离线DOM,而不是真实的网面DOM,来改变元素样式。比如,操作Document Fragment对象,完成后再把这个对象加入DOM。再比如,使用 cloneNode() 方法,在克隆的节点上进行操作,然后再用克隆的节点替换原始节点。

25、先将元素设为display: none(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。

26、position属性为absolute或fixed的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响。

27、使用虚拟DOM的脚本库,比如React等。

28、只在必要的时候,才将元素的display属性为可见,因为不可见的元素不影响重排和重绘。另外,visibility : hidden的元素只对重绘有影响,不影响重排。

29、[endif]使用window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染

30、[endif]网页动画能够做到每秒60帧,就会跟显示器同步刷新,达到最佳的视觉效果。

31、待补充...

相关文章

  • 关于前端SEO要点(二)

    背景:前端SEO并不难理解,对资深SEO来说,前端SEO性能优化方案也有掌握的必要。 一、页面级优化 1、js、c...

  • 关于前端SEO要点(一)

    背景:很多SEOer认为,网站运营只需要懂SEO技能,但一个资深SEO必须对搜索引擎原理,前后端的工作协调有全面的...

  • 关于前端SEO优化

    合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,...

  • 前端SEO

    权重 title -> description -> keywords 逐级递减 title 不同的页面要有不同的...

  • 前端SEO

    1. 标题 title title值强调重点搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确...

  • 前端SEO

    1、HTML语义化。 使用alt属性加以说明 合理的设计title、description和keywords ti...

  • 前端面试知识点

    前端基础知识 1、关于html 1、html语义化标签得理解、结构化的理解;能否写出简洁的html结构;SEO优化...

  • 前端SEO优化

    1.合理的title、description、keywords:搜索引擎对于三项的权重逐个减小; 2.重要的内容一...

  • 前端SEO优化

    一、搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很...

  • 前端SEO技巧

    转载于https://www.cnblogs.com/EnSnail/p/5671345.html前几天在慕课网上...

网友评论

    本文标题:关于前端SEO要点(二)

    本文链接:https://www.haomeiwen.com/subject/wdgleftx.html