网站的几个性能指标和优化(简易)
来源:https://m.sohu.com/a/201865334_509523/
关于页面相应时间,有一条著名的“2-5-8原则”。当用户访问一个页面:
- 在2秒内得到响应时,会感觉系统响应很快;
- 在2-5秒之间得到响应时,会感觉系统的响应速度还可以;
- 在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但可以接受;
- 而超过8秒后仍然无法得到响应时,用户会感觉系统糟透了,进而选择离开这个站点,或者发起第二次请求。
对于一个网站如果希望抓住用户,网站的速度以及稳定性是非常重要的。
从各式各样的前端监控平台中,你都可以获得页面很多的性能指标。本文将介绍几个几个比较关键的指标,并给出相应的优化思路。
开始渲染时间
该时间点表示浏览器开始绘制页面,在此之前页面都是白屏,所以也称为白屏时间。
该时间点可用公式:
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获取,在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值。开始渲染时间越快,用户就能更快的看见页面。
对于该时间点的优化有:
- 优化服务器响应时间,服务器端尽早输出
- 减少html文件大小
- 减少头部资源,脚本尽量放在body中
DOM Ready
该时间点表示dom解析已经完成,资源还没有加载完成, 这个时候用户与页面的交互已经可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To )可以表示。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结构的复杂度,节点尽可能少,嵌套不要太深;
- 优化关键呈现路径;
首屏时间
该时间点表示用户看到第一屏页面的时间,这个时间点很重要但是很难获取,一般都只能通过模拟获取一个近似时间。一般模拟方法有:
- 不断获取屏幕截图,当截图不再变化时,可以视为首屏时间。可参考webPagetest的Speed Index算法;
- 一般影响首屏的主要因素是图片的加载,通过页面加载完后判断图片是否在首屏内,找出加载最慢的一张即可视为首屏时间。
针对该时间点的优化有:
- 页面首屏的显示尽量不要依赖于js代码,js尽量放到domReady后执行或加载;
- 首屏外的图片延迟加载;
- 首屏结构尽量简单,首屏外的css可延迟加载;
该时间点是window.事件触发的时间,表示原始文档和所有引用的内容已经加载完成,用户最明显的感觉就是浏览器tab上loading状态结束。
该时间点的优化方式有:
- 减少资源的请求数和文件大小;
- 将非初始化脚本放到之后执行;
- 无需同步的脚本异步加载
为了优化整站性能,页面的时候可以考虑做一些预加载,把其它页面需要用到的资源预先加载进来。
网站的几个性能指标和优化(简易)相关推荐
- 网站(前端、后端)性能(架构)优化手段
网站的性能测试 性能测试是性能优化的前提,也是性能优化结果的检查和度量标准.温馨提示:本文内容有点长,请耐心看完或者先收藏. 性能测试的常用指标: 响应时间 并发数目 吞吐量.常用的吞吐量指标: ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- 商丘网络推广浅析如何分析竞争对手的网站,制定更优秀的优化方案?
众所周知,商丘网络推广有句俗语称"知己知彼,方能百战百胜",在网站优化中也同样使用.优化人员做好竞争对手的网站分析时,为网站找到更合适高效的优化方法才能更精准的提高网站关键词排名. ...
- 网站抓取频率对排名优化有着怎样的意义?
在网络优化行业中,每个优化公司都希望自己接手的网站可以把排名做得再好一点,分析数据的迭代要清晰简洁,妥善处理每一次的链接变化和内容更新等.在当下的优化工作中,想要提升网站排名就是要时刻关注网站的抓取频 ...
- 速度优化_网站打开速度慢?如何优化?
网站打开速度直接影响用户的第一道体验,打开速度偏慢,用户可能就没耐心继续等下去了,造成大量用户流失,今天我们谈谈如何优化网站打开速度: 网站打开速度慢?如何优化? 服务器配置 服务器要安全.稳定性良好 ...
- 图片优化_网站里的图片应该如何优化
我们一直都在做网站关键词.内页关键词.标签等.但很多朋友都忽略了网站里的图片如何优化.近年来百度图片识别.360图片识别都在不断升级功能上已经很完善了,所以我们应该对网站图片进行优化,应该做seo的朋 ...
- 网站SEO域名、URL路径优化
网站SEO域名.URL路径优化http://www.seodt.org/498.html 对SEO新手来说,觉得网站站内优化没有多大必要性,SEO基础教程太原SEO数据处理技术团队与大家进行分享一下, ...
- 网站长尾关键词的挖掘与优化
网站长尾关键词是SEO优化的一个重要部分,一个合格的站长,当然有一份自己网站的长尾关键词,这是基础流量建设必须的,不管是哪种优化方法,网站的长尾关键词都必不可少,黑帽学院在这里就说下网站长尾关键词的挖 ...
- 网站要怎么样进行站外优化才会提升关键词排名?
SEO网站优化包括许多方面,对于网站,SEO网站优化非常重要,我们必须注意该网站的建设,同时在车站做得好,包括外链的建设,交换友谊链接,以及问题和答案平台推广等,因此它可以支持整体网站的流量和质量.由 ...
最新文章
- Windows 10 RedStone2值得期待的五大功能猜想
- sklearn模型的训练(上)
- SAP CRM WebClient UI的cross component navigation跳转
- day8网络编程,面向对象1
- 线程间到底共享了哪些进程资源?
- 重装华为服务器系统教程视频教程,服务器系统重装步骤
- arm-linux-gcc: No such file or directory
- foreach+php+四维数组,怎么在PHP中利用foreach对多维数组进行遍历
- 随手记_C++语法中的一些注意事项
- linux的yum命令无法使用在哪里下载_Centos Linux下载rpm软件包(基础环境篇)-从零到无 - 飞翔的小胖猪...
- laravel访问路由在nginx服务器上无法处理
- Windows Shell 编程学习总结
- php跨域请求post请求失败,nginx + php 跨域问题,GET可以跨域成功,POST失败
- day31管家婆项目训练笔记
- 纯CSS3实现360度旋转特效
- BlackBerry 模拟器上网
- 关于蓝桥杯大赛,你应该了解的那些事!
- swift 时间选择器第三方。公历转农历,农历转公历。
- 软件测试python掌握到什么程度_软件测试学习到什么程度能顺利工作?
- Linux协议栈--NAPI机制
热门文章
- Nginx 正向代理与反向代理区别
- YunYang1994/tensorflow-yolov3 ValueError: cannot reshape array of size 43095 into shape (6) 解决办法
- Yolo-v2_ Windows平台下如何配置darknet-yolov2?(安装CUDA)
- 搭建认证服务器 - Spring Security Oauth2.0 集成 Jwt 之 【密码认证流程】 总结
- spring项目中加载配置文件
- 如何将Git上的项目克隆到idea中
- serverless 框架_Serverless计算这么强大
- python定时器 是线程吗_python线程定时器Timer(32)
- python怎么实现检验_python 怎么实现数据串进行 BCC 校验 (Block Check Character/ 信息组校验码)?...
- 下列哪个适合做链栈_很多朋友在问:多层实木生态板和颗粒板哪个更适合做衣柜呢?...