前言
一个页面包含着许多内容，像文字、图片、视频等等，页面加载的速度受着页面内容多少、复杂影响，而其中主要内容，最大元素的渲染对加载的速度影响最大。
页面最大内容元素对页面的影响，我们用 LCP 来衡量。
LCP
LCP（Largest Contentful Paint），字面意思为最大内容绘制。LCP 指的是根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或者文本块完成渲染的相对时间。
对于 LCP 的指标值，小于等于 2.5s为合格，大于 2.5s 而小于 4s 表示需要优化，而大于 4s 是严重影响页面加载。
所以 LCP 是用来衡量可视口内最大内容元素的加载速度、加载体验，为了提供良好的用户体验，网站应该努力在开始加载页面的前 2.5 秒内进行最大内容渲染。
那么为什么只是衡量可可视口内的元素呢？
是因为使计算和分发新性能条目的性能开销保持在较低的水平，只有元素在可视区域的初始化大小和位置会纳入考量范围。也就是说，最初在屏幕外完成渲染，然后过滤到屏幕上的图像可能不会得到报告。
那么针对 LCP ，只选择最大内容会选择可视区域内的最大元素。
LCP 优化
服务器
浏览器从服务器接收内容所需的时间越长，用户在屏幕上所渲染内容的时间就越长。更快的服务器将直接影响包括 LCP 各项指标的加载值。
使用 CDN，CDN 会选择就近的一个服务器给你返回资源，避免请求产生太长网络路径导致加载缓慢。
使用缓存，对于不经常改变、静态资源缓存起来，减少浏览器对资源的请求。
Javascript和css
浏览器渲染内容之前需要先解析 DOM 树，解析过程中，如果遇到任何外部样式表或同步 js脚本，都会暂停解析。所以脚本跟样式都是阻塞渲染的资源，这些资源都会导致 FCP 延迟，从而导致 LCP 延迟。所以延迟加载非必要的 JS 和 CSS ，从而提高网页主要内容加载速度。
对 CSS 和 JavaScript 文件进行压缩、延迟加载首屏无需使用的 JavaScript、内联关键的 CSS 等来减小阻断时间。
资源加载速度
对图片进行优化。转化图片的格式为 JPG 或者 WEBP 等等的格式，降低图片的大小。对重要的资源进行预加载，比如为 style 标签添加rel="preload"属性使用 Gzip 和Brotli 压缩页面资源，降低传输时间。
客户端渲染
减少不必要的DOM和视频图片预加载，精简 js，将不重要的脚本放在页脚。还可以使用服务器渲染，用服务器将主要内容首先在服务器渲染为 HTML ， 客户端将所有 js 及所需数据合到到相同的 DOM 内容中。
