LCP 加载时间优化

37 阅读1分钟

LCP加载时间

加载LCP资源本身所需要的时间

加载时间优化方法 这里很好理解,直接上优化方法:

  1. 使用缓存
    浏览器缓存: 静态资源强缓存
  2. 图片资源压缩、裁剪、格式转换WebP
    例如:........aa.png?x-oss-process=image/resize,w_75…
  3. DNS预解析

dns与解析是与页面加载并行处理的,且不影响到页面加载的性能。浏览器会在加载网页时对网页中的域名进行解析缓存,减少用户等待时间,提高用户体验。

<link rel="dns-prefetch" href="https://baidu.com" />

4.preconnect

preconnect允许浏览器在一个HTTP请求正式发给服务器前预先执行一些操作,这包括DNS预解析,TLS协商,TCP握手,这消除了往返延迟并为用户节省了时间。

<link rel="preconnect" href="https://baidu.com" />

5.preload

preload加载的资源是在浏览器渲染机制之前进行处理的

<link rel="preload" href="image.jpg" as="image" />

6.prefetch

preftech是一种利用浏览器的空闲时间加载页面将来kennel用到的资源的一种机制;通常可以用于加载非首页的其他页面所需要的资源,以便加快后续页面的首屏速度。

<link rel="prefetch" href="image.jpg">