页面加载性能之优化LCP

影响LCP的四个因素如下:

• 较慢的服务器响应时间
• 渲染阻塞的js和css
• 较慢的资源加载时间
• 客户端渲染

较慢的服务器响应时间

浏览器获取文档的时间越长，用户看到页面的时间也会越长。较快的服务器响应时间，可以直接改善每一个页面加载相关的指标，包括LCP。

可以使用 TTFB(Time to First Byte) 来测试服务器响应时间，你可以通过以下手段来优化 TTFB 这个指标。

• 优化服务器
• 使用CDN
• 缓存资源
• html页面优先使用缓存
• 提前建立第三方连接

优化服务器

你是否在服务器上运行一些昂贵的查询，占用了服务器一定的时间？或者服务器上做了一些复杂的操作，导致页面内容返回延后？分析和提升服务端代码的效率可以直接改善浏览器从服务端获取数据的时间。

比起仅仅是提供静态页面而言，很多服务端的web框架都会动态创建页面。换句话说，比起直接返回一个现存的html文件，这些框架会执行一些逻辑来创建页面。这就取决于数据库查询时间，或者UI框架创建组件的时间（比如: React）。大部分web框架都有提供性能指导，开发者可以根据指导来提升处理速度。

使用CDN

CDN全称Content Delivery Network，是一个分布在不同地域的服务器集群。如果浏览器去请求数据，CDN会选择就近的一个服务器给你返回，避免请求产生太长网络路径，甚至跨国。

缓存资源

如果你的html是静态的，每一次请求都不会变，可以服务端缓存下来，不用每次重新创建页面。通过缓存一份生成好的html到硬盘，服务端缓存可以有效的降低TTFB，最小化资源的使用。

• 配置反向代理，在应用服务器之前配置一个缓存服务器，专门提供缓存内容。
• 配置和管理云服务商提供的缓存特性
• 使用CDN来提供内容缓存，这样用户可以更近的获取到内容

html页面优先使用缓存

service worker可以实现这样一个功能，优先使用缓存页面，如果页面有更新，会将新页面缓存下来，下次启动则使用新缓存。

下图是使用service worker的一个对比:

提前建立第三方连接

发往第三方服务的请求也会影响LCP，特别是当页面关键内容依赖它们的时候。使用 rel="preconnect" 告知浏览器你的资源连接需要尽可能地快。

也可以使用 dns-prefetch 让dns解析更快。

考虑到浏览器兼容性， dns-prefetch 可以作为 preconnect 的一个fallback。

preconnect一般只配置一个，dns-prefetch可以配置多个，所以一般把最关键的资源配置成preconnect，比如js或者css所在的cdn域名

渲染阻塞的js和css

在浏览器渲染任何内容之前，需要解析html，并生成dom树。html解析器会被任何样式文件 以及同步脚本