web 各个优化指标，提高你得网站性能，以及动画性能
| 名称 | 简写 | 含义 | 优化点 | 造成常见原因 | 如何改善 |
|---|---|---|---|---|---|
| Largest Contentful Paint | LCP | Web页主要内容的加载速度，衡量加载体验：为了提供良好的用户体验，LCP应该在页面首次开始加载后的2.5秒内发生。 | 1，img元素 2，image中的svg元素 3，video元素 4，通过url函数加载背景图片的元素 5，包含文本节点或者其他内连文本元素子级的块级元素 |
1，服务器响应时间慢 2，阻断渲染的js和css 3，资源加载时间慢 4，客户端渲染 |
1，优化服务器 2，缓存离线页面，缓存页面资源，减少浏览器对资源的请求 3，图片使用jpg或webp的格式，降低图片大小，`fetchpriority=“high”（这个是提高加载优先级的）属性添加给最重要的图像元素： |
| Cumulative Layout Shift | CLS | 累积布局偏移是指一个页面的布局在加载时的偏移程度 | 1，不要使用无尺寸元素 2，图像和视频等元素上始终需要包括width和height尺寸属性， |
||
| First Input Delay | FID | 衡量可交互性，为了提供良好的用户体验，页面的FID应当小于100毫秒。 | 1，缩小并压缩JavaScript文件 2，延迟加载首屏不需要的JavaScript 3，尽量减少未使用的polyfill（polyfill：用于实现浏览器并不支持的原生API的代码） |
||
| Interaction to Next Paint | INP | 用于衡量对页面上用户交互的整体响应能力 | 1，交互式元素的任何鼠标单击，在包括触摸屏的任何设备上点击交互元素。按物理键盘或屏幕键盘上的键。 2， |
LCP,FID,CLS评判标准
| 指标 | 优秀 | 一般 | 不好的 | 期望覆盖率 |
|---|---|---|---|---|
| LCP | <2.5S | <4s | >=4s | 75% |
| FID | <100MS | <300MS | >=300MS | 95~99% |
| CLS | <0.1S | <0.25S | >=0.25S | 75% |
推荐插件：Bulk Image Downloader，需要翻墙从谷歌应用商店安装。但是也可以搜百度安装文章来源地址https://www.toymoban.com/news/detail-535271.html
文章来源：https://www.toymoban.com/news/detail-535271.html
到了这里，关于web 各个优化指标，提高你得网站性能，以及动画性能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
