在做网站的SEO优化过程中,前端性能优化是必要的

五分彩计划群 www.z5sr.cn 1、开始渲染时间

该时间点表示浏览器开始绘制页面,在此之前页面都是白屏,所以也称为白屏时间。

该时间点可用公式Time To Start Render = TTFB(Time To First Byte) + TTDD(Time To Document Download) + TTHE(Time To Head End)表示。其中TTFB表示浏览器发起请求到服务器返回第一个字节的时间,TTDD表示从服务器加载HTML文档的时间,TTHE表示文档头部解析完成所需要的时间。在高级浏览器中有对应的属性可以获取该时间点。Chrome可通过chrome.loadTimes().firstPaintTime获取,IE9+可以通过performance.timing.msFirstPaint获取,在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值??间秩臼奔湓娇?,用户就能更快的看见页面。
SEO141.jpg

对于该时间点的优化有:

优化服务器响应时间,服务器端尽早输出

减少html文件大小

减少头部资源,脚本尽量放在body 中

2、DOM Ready

该时间点表示dom解析已经完成,资源还没有加载完成, 这个时候用户与页面的交互已经可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以表示。TTSR上面已经介绍过了,TTDC表示DOM树创建所耗时间。TTST表示BODY中所有静态脚本加载和执行的时间。在高级浏览器中有DOMContentLoaded事件对应。

详细规范可以查看W3C的HTML5规范。从MDN文档上可以看出该事件主要是指dom文档加载解析完成,看上去很简单,但是DOMContentLoaded事件的触发与css,js息息相关,现在有专门的名词Critical Rendering Path(关键呈现路径)来描述。

在不支持DOMContentLoaded事件的浏览器中可以通过模拟获取近似值,主要的模拟方法有:

低版本webkit内核浏览器可以通过轮询document.readyState来实现

ie中可通过setTimeout不断调用documentElement的doScroll方法,直到其可用来实现

具体实现方法可以参考主流框架(jquery等)的实现。 DOM Ready时间点意味着用户与页面可以进行交互了,因此越早越好,对于该时间点的优化有:

减少dom结构的复杂度,节点尽可能少,嵌套不要太深

优化关键呈现路径

3、首屏时间

该时间点表示用户看到第一屏页面的时间,这个时间点很重要但是很难获取,一般都只能通过模拟获取一个近似时间。一般模拟方法有:

不断获取屏幕截图,当截图不再变化时,可以视为首屏时间??刹慰紈ebPagetest的Speed Index算法;

一般影响首屏的主要因素是图片的加载,通过页面加载完后判断图片是否在首屏内,找出加载最慢的一张即可视为首屏时间。

针对该时间点的优化有:

页面首屏的显示尽量不要依赖于js代码,js尽量放到domReady后执行或加载

首屏外的图片延迟加载

首屏结构尽量简单,首屏外的css可延迟加载

4、onload

该时间点是window.onload事件触发的时间,表示原始文档和所有引用的内容已经加载完成,用户最明显的感觉就是浏览器tab上loading状态结束。

该时间点的优化方式有:

减少资源的请求数和文件大小

将非初始化脚本放到onLoad之后执行

无需同步的脚本异步加载

为了优化整站性能,页面onload的时候可以考虑做一些预加载,把其它页面需要用到的资源预先加载进来。

标签:seo优化, 网站seo, 网站seo优化公司, 百度seo优化公司, 百度seo公司, 企业网站seo方案, 百度优化公司

添加新评论

  • 俺发现你还真是踩云的人。找不到谱。 2018-12-08
  • 是计划,不是批准;是统计,不要浪费。为的是“发展经济,保障供给”! 2018-12-08
  • 关于益寿丹 竹林日记(0073) 2018-09-18
  • 让每一所乡村学校都“美”得有特点、“优”得有亮点 2018-09-18
  • 毕业当援疆 去祖国最需要的地方 2018-09-17
  • 口音让他露马脚 背负3条人命公安部B级逃犯被武汉细心民警揪出 2018-09-12
  • 迈迈与易起投战略合作签约仪式在京举行 2018-09-12
  • 绍兴印染布质量比对成果发布 部分指标国际领先 2018-08-29
  • 蠢货!计划不是自下而上制订的。首先是国家战略计划,简称国家计划,其中与经济有关的,叫国民经济计划。5年计划,和一年一次的计划会议制订的计划,都是由国家计委主持制 2018-08-29
  • 这支神奇冰岛队里都是邻居 扑出梅西点球的门将还是导演 2018-08-26
  • 习近平总书记深入大凉山腹地考察脱贫攻坚 2018-08-15
  • 被你们说棕子说馋了,放在冰箱里准备端午吃的几个棕子煮上了下午吃,过两天再买,太不计划经济了,呵呵。 2018-08-15
  • 事实告诉中国,与外界有限交流,是保障国民经济安全的不二法门。换句话说,必须独立自主、自力更生、艰苦奋斗、勤俭建国。那种疯狂消耗型需求经济不适合中国。 2018-08-12
  • 今年全军院校将招生三万余名 2018-08-11
  • 索尼4K屏旗舰降至冰点 售价仅2499元 2018-07-29
  • 681| 370| 609| 760| 219| 858| 984| 356| 820| 772|