网站性能指标 - FMP
对于前端童鞋来说，优化是一个永恒的话题。上线并不是网站开发的终点，如何吸引用户、提升用户体验，应该成为我们 F2E 的追求目标。
如果你对优化还不了解，建议先阅读如下两篇文章：
- 网站优化实战
- 网站优化，这些工具你一定用得着
当然，衡量网站性能的指标有很多，今天我们就来看一个「令人费解而又头疼」的指标 - FMP。
First Meaningful Paint 是指页面的首要内容出现在屏幕上的时间。
一、FMP 之怪现象
目前尚无标准化的 FMP 定义，因此也没有性能条目类型。 部分原因在于很难以通用的方式确定「有效」对于所有页面意味着什么。但是，一般来说，在单个页面或单个应用中，最好是将 FMP 视为主角元素呈现在屏幕上的时刻。
所以，我们经常会面临这样的问题：
FCP 在可接受范围，但是 FMP 却完全失控。
也可能是这样的问题：
或许还有这样的问题：
为什么结构类似的站点，FMP 加载却千差万别。要了解 FMP 我们需要知道它的计算规则，下面让我们一层层抽丝剥茧。
二、刨根问底
究竟是什么导致 FMP 的时机差距如此之大？或许我们可以从 FMP 定义来说起。
When FMP and FCP are the same time in seconds, they share the same identical score. If FMP is slower than FCP, say when there's iframe content loading, then the FMP score will be lower than the FCP score.
什么意思呢，我们先来看一张官方图片：
如果 FCP 是 1.5s，FMP 是 3s，那么 FCP 分数将会是 99，但是 FMP 分数将是 75。
除了上述影响外，我们还需要关注 Lighthouse V3 的记分规则：
虽然 FMP 权重仅为 1 ，很遗憾，因为如上规则的存在，我们站点无法到达满分
网站性能指标 - FMP相关推荐
- 「前端那些事儿」⑤ 定位性能指标FMP
什么是FMP? 可能大家对「白屏时间」这个名词并不陌生,他是「刀耕火种」年代,我们收集的页面性能指标之一,随着前端工程的复杂化,白屏时间已经没有什么实质性的意义了,取而代之的就是 FMP. 先来介绍几 ...
- WebP 方案分析与实践
对于网站来说,图片始终扮演着重要角色.图片大小直接影响网站速度.流量.运营成本以及用户体验.因此,减少图片大小成为网站优化最重要的一个环节. 如果你对优化还不甚了解,推荐阅读如下文章: 1.网站优化实 ...
- 欺诈网站都注重用户体验！你，还在等什么？！
一.背景介绍 小编是北京 OneAPM 公司 Browser Insight(后文称 Bi)的运营人员,这款产品主要用处是针对网站前端页面进行性能优化,以提升用户体验,所以每天小编都要做很多运营工作, ...
- 电商网站全链路压测实战
1.背景 在电商及互联网应用时代,用户和流量已成为应用核心竞争力,而随着数字化营销逐渐走进各个领域,线上的秒杀抢购.热点营销等活动也成为企业的必备营销手段,营销带来的大规模流量浪涌对系统来说是个巨大的 ...
- 如何快速压测电商网站？
1.背景 在电商及互联网应用时代,用户和流量已成为应用核心竞争力,而随着数字化营销逐渐走进各个领域,线上的秒杀抢购.热点营销等活动也成为企业的必备营销手段,营销带来的大规模流量浪涌对系统来说是个巨大的 ...
- 读书笔记-大型网站技术架构
1. 大型网站架构演化 1.1 大型网站软件系统的特点 大型互联网应用系统的特点 -高并发,大流量 -高可用 -海量数据 -用户分布广泛,网络情况复杂 -完全环境恶劣 -需求快速变更,发布频繁 -渐进 ...
- 电商服务器性能测试,如何测试分析电商网站的性能瓶颈（一）
1. 背景 在电商及互联网应用时代,用户和流量已成为应用核心竞争力,而随着数字化营销逐渐走进各个领域,线上的秒杀抢购.热点营销等活动也成为企业的必备营销手段,营销带来的大规模流量浪涌对系统来说是个巨大 ...
- 13款网站在线性能测试工具
1. Google PageSpeed Insights 首先介绍的这款网站速度和性能测试工具出自 Google,通过分析网页内容来为开发者提供提升网站加载速的建议.PageSpeed 的测试包含移动 ...
- 推荐测试网站的性能测试工具这最佳的12款
网站的加载速度在一定程度上来说是决定网站能否成功的关键.如果您是网站所有者,一定知道网站速度的重要性.因为没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度很慢,将流失大量的访客,甚 ...
最新文章
- 配置zendframework开始工作（加入环境变量）
- SQLServer查询死锁
- html_5_小作业2_世纪佳缘注册页面
- 【Hibernate】Hibernate实体关系映射——主键相同的一对一关系
- 数据库-数据库的备份与恢复
- Ansible入门及组件介绍
- python读word文档doc公文标题_python – 从word doc中提取标题文本
- arcmap添加WMTS服务
- leetcode619. 只出现一次的最大数字（SQL)
- python优雅编程_Python优雅地可视化数据
- “Redirect to SMB”漏洞影响所有版本的Windows
- vue中使用html2canvas方法，设置背景，字体重叠问题解决方法
- 自己试着在阿里云布了个服务器
- 计算机在中医方剂中的应用,计算机中医应用(精).docx
- 五个优秀的视频格式转换工具
- css音量调节,CSS3 音量调节旋钮
- MySQL实现分数排名问题
- java国王毒酒答案,500桶48小时国王囚犯答案解析-奥数500桶酒其中1桶是毒酒试题及答案【附原题】完整打包下载-东坡下载...
- 【Hexo + Next主题】左侧栏友链一行多个显示
- Http系列---Http status code 状态码