web 各个优化指标，提高你得网站性能，以及动画性能

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，需要翻墙从谷歌应用商店安装。但是也可以搜百度安装