教你对Web网站及前端性能监控方法

2018年8月3日09:16:47 发表评论 23 阅读

整个监控体系的流程大体是这样的:

1.前端统计->嵌入和非嵌入的。(js收集或工具,插件监控)

2.真实环境的统计信息 vs 多点的定时监控 (手机用户log或全国机房定时收集性能数据)

3,后端日志数据可视化。选择什么方法,主要看自己的业务需求场景和成本考虑。简单的搭建一个简易的监控系统,其实硬件成本就是一台apache或者nginx的机器就好了。

教你对Web网站及前端性能监控方法

Web网站及前端性能监控方法

分成3个部分:

收集。收集分为2个方面。

1,定时使用不同网络环境不同地区的机器,用浏览器或者一些模拟浏览器的工具检查监控页面的各项指标,再保存日志。(优点,性能指标准确,缺点,样本太少)

2,js前端收集用户性能指标(需要阙值,否则无用数据太多)(优点,样本足够丰富而且是真实用户数据,缺点,性能指标不准确,一些指标或者根本无法收集,比如dns时间,比如首屏准确时间,最多拿到一个估算值)其中说一下,最关键得,我们如何测试用户客户端的网速和首屏时间。

看到上面有回答说了,首屏时间等于head的加载时间,我知道的几家公司首屏都是按照这个收集,或者说再对页面的所有image进行监控,算出占位是否在首屏线以上,再用图片onload时间作为首屏时间(我就这样收集的,但是其实还是不太准)如果是使用浏览器api或者模拟浏览器的话,可以根据浏览器首屏几个区域的渲染结果当首屏时间来收集,这是最准的。

网速,使用前端js收集用户网速,一般都是ajax下载个已知大小文件,然后算网速,很多测速网站都是这种做法,对页面损耗太大了,还有一种做法是,daniellmb/downlinkMax · GitHub 参考navigator.connection的用法,再对应转换用户网络情况。还有一种做法是我们一个页面的输出加载时间结束后,会有一个document ready的事件,这个时候我们认为整个html文档已经下载完毕了,之后我们再用这个经过的时间和html的质量做除法同样可以得到网速,html文档大小/下载总时间 但是这个值说实话也不是特别准。。

日志分析和转换。日志收集上来之后在apache或者nginx日志中是需要经过2次过滤的,一次是找出标记的比如一个gif图的所有日志,之后再根据你的日志规则,找出你的性能相关日志,之后再转换成方便可读的源数据,比如json格式的。

求一个稳定均值,之后再进行数据可视化。所有性能数据拿到之后,我们需要找到一个可以衡量性能的综合值,就比如说拿页面loaded的时间来说,可能有些用户网速极差,有些用户网速又好,导致数据大了之后,曲线非常不稳定,这个时候我们就需要采用一些方法对性能数据进行降噪,方法也比较简单,设置一个阙值,把非常快和非常慢的数据排除,再求一个均值,这个均值应该就是你最后可视化时需要的一个性能指标了。最后,对数据进行可视化,最好做个web平台界面,可以对数据分段可视化,并且图的效果越酷越好啦,很多做大数据的前端都很擅长这个。。就不多说了。。到底采用什么方法,因为业务不一样,公司预算不一样,你的应用的访问量也不一样,都会应该根据实际情况来做决定,比如你的页面pv一天为1000w,那你得性能日志,一天也就有至少1000w条了,明显不科学,每天这么保存,成本巨大,所以收集的时候也需要做一些过滤,具体过滤多少,收集多少,还是根据实际pv来做决定吧。。。

1.监控了哪些性能的指标?PV,UV,网络查询时间(延迟),白屏时间,可交互时间,页面js异常监控,用户行为统计

2、如何去监控这些指标?PV,UV,网络查询时间(延迟):一般通过web服务器的log文件分析白屏时间:写在页面最顶部,开始计时的js代码,到开始渲染之间的时间差可交互时间:监听页面的ready事件页面js异常监控:监控window.error 如果用了前端工程化工具,可以给代码段添加try...catch...捕获用户行为统计:这个比较有意思,用户点击某个按钮或类似行为的统计,可以知道网站那个地方比较有吸引力

3、这些指标的阈值应该是多少阈值这个得看页面功能和逻辑,不太好说,精益优化就行了,一般和代码的执行效率有很大关系可参考 百度图片检索结果页 基本覆盖了以上

举例说明Wordpress如何进行优化与监控

你的WordPress博客(网站)是否处于最佳运行状态(性能如何)?页面加载速度有多快?反应是不是很迟缓?你网站的性能是确保访问者拥有良好浏览体验的重要因素之一,所以,我个人认为,在如何提升WordPress性能与速度方面多花一些时间是值得的。本文下面为大家就如何提升WordPress运行效率列出了几点建议/技巧以供参考,希望对大家有用。

在深入本文之前,建议大家先测试一下自己的WordPress网站的当前运行性能,这样可以确立一个基准数据,然后与做了优化之后的测试数据作为对比,看看到底是哪些方面的因素在影响着你的WordPress性能。

如何测试一个网站的性能
1.我使用谷歌的网页优化工具 PageSpeed Tools 来测试并优化自己的网页,力求获得85分(满分为100分)以上的好成绩。除了可以在线测试网站速度之外,PageSpeed Tools 同时提供了相关浏览器插件可以使用,如Chrome扩展PageSpeed Insights For Chrome 和 Firefox扩展PageSpeed Insights for Firefox,都能够做同样的事情。PageSpeed Tools 通过分析你网站的运行情况,并基于一套高性能网页评定标准,为你提供网页优化建议。

2.你也可以使用一款叫做YSlow的Firefox扩展来检测你网站的页面加载速度。YSlow扩展与网页开发工具Firebug整合,因此,在Firefox上,如果要使用YSlow,你需要先安装Firebug 这款扩展然后才能够安装YSlow扩展。下面是一个例子,显示了被检测网站页面下载所需要的时间为23.042秒,显然并非理想的结果,应该需要做一些优化了。

3.在WordPress中,我们可以通过一条PHP代码来显示页面加载所需要的数据库查询次数及消耗的时间,只需将下面这条代码放置到主题文件footer.php中适当的位置即可:

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.
这条PHP代码显示的意思可以解释为:打开当前页面需要多少秒,同时进行了多少次的数据库查询。

4. 或使用在线网站测速工具 website speed tester 也可以查看页面加载完成所需要的时间。

5. 或访问网站 numion.com ,使用它提供的“秒表”来测试下载一个网页所需要的时间。

常用WordPress优化技巧

确保网站安全的第一步,将WordPress升级到最新版本

安装缓存插件 W3 Total Cache

尽量减少不必要的 PHP 查询,例如,将 <?php get_bloginfo('wpurl'); ?>这样的动态PHP语句替换成静态式的PHP语句,也就是你的WordPress网站绝对地址

从网页底部加载javascripts ,通常是CSS在头部(header),而javascript在底部(footer)
卸载无用或不必要的插件

优化并修复数据库

使用质量可靠的主题,建议从WordPress主题库下载安装

使用安全可靠的托管主机,如本博客所用的HostGator主机

有条件的话,使用口碑好的独立主机提供商

将页面文件大小控制在100kb之内,在同一页面上不要使用过多无用的图片或视频文件,建议始终将图片压缩后再使用

将多个小的CSS文件合并成一个大的CSS文件 (加载一个50kb的CSS文件总比加载5个10kb的CSS文件速度快)

合并javascripts
不要总是将script代码放到到header.php文件里头,使用外部script文件,这样让浏览器可以缓存script,减少读取script的次数

hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: