前言 LCP是页面核心性能指标中一个比较重要的指标，但是LCP的优化方向真是又多又繁杂，本文主要根据个人5年的前端性能优化经验，从优化资源的传输和构建产物优化两部分来介绍优化LCP的方法。 优化资源传

背景 在实际的项目需求研发中，经常会得到测试或者业务同学反馈项目部分页面访问加载白屏时间比较长，或者页面呈现比较慢等体验问题。但是通过项目整体的评分数据分析又是比较正常的，这个时候我们不妨去看看所反馈

内容安全策略（content-security-policy）为你的网站保驾护航，可以有效减小XSS攻击以及把XSS攻击上报

实施优化方案之前，首先要知道为什么要这样优化。这就需要你上到框架原理、js、css，下到浏览器、js 引擎、计算机网络等原理都有不错的了解。所以性能优化真的涵盖了太多前端知识，甚至是绝大部分前端知识。

在现代 Web 开发中，前端性能优化变得越来越重要。良好的性能不仅提升用户体验，还能显著提高应用的用户留存率和转化率。本文将介绍性能优化的指导性的原则，性能优化的关键性能指标和一些常见的优化手段。

CLS (Cumulative Layout Shift) 是 Core Web Vitals 三个关键指标之一，用于衡量页面可见内容在加载过程中的意外布局偏移。CLS 反映了页面的视觉稳定性。

Core Web Vitals 是 Google 提出的用来衡量和优化网页用户体验的一组关键性能指标。这些指标旨在反映一个网站的实际用户体验，包括加载性能、交互性和视觉稳定性。

前端性能指标是衡量网页加载速度、交互流畅度和视觉稳定性的重要依据，对于优化用户体验至关重要。 FP (First Paint) First Paint（首次绘制）标志着浏览器开始在屏幕上渲染任何内容，

阅读须知 如果指标中定义标注了超链接，则建议直接阅读超链接资料进行指标的理解 所有指标请联系上面这幅图片去理解 常用指标 FP 定义: 从页面加载开始到第一个像素绘制到屏幕上的时间 计算方法: FCP