性能优化-LCP

测试智商的网站 4周前 (08-11) 阅读数 8420 #软件测试

性能优化-LCP

性能优化- 提升 LCP（Largest Contentful Paint 最大内容绘制）

简介

LCP 就是网页中最大的一部分加载完成的时间（从用户感知页面到基本加载完成的时间,也称为最大内容绘制）

LCP 是 Core Web Vitals 的三个关键指标之一，Core Web Vitals 是 Google 用于评估网页用户体验的标准之一。为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化

Google将LCP看做提高搜索引擎排名的参数之一

测量方式

Lighthouse

LCP通常在Google浏览器的这个部分可以看到

代码测量

纯html页面

接下来我们就手写代码手动测量一下网页的LCP部分

// 初始化 LCP 存储
let lcp = 0;

// 使用 PerformanceObserver 来监听 largest-contentful-paint
const observer=new PerformanceObserver((entryList) => {
    const entries=entryList.getEntries();
    console.log(entries,'entries');
    entries.forEach((entry) => {
       if (entry.entryType === 'largest-contentful-paint') {
           if(entry.startTime > lcp){
            lcp = entry.startTime;
            console.log('LCP值为+'+lcp);
            document.getElementById('lcp').textContent = lcp.toFixed(2) + 'ms';
           } 
        }
    })
})

// 观察 largest-contentful-paint 事件
observer.observe({ type: 'largest-contentful-paint', buffered: true });

在vue2之中使用

<template>
  <div>
    <p>LCP: {{ lcp }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lcp: 0, // 用于存储 LCP 的最大值
    };
  },
  mounted() {
    // 使用 PerformanceObserver 来观察 LCP
    const observer = new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach((entry) => {
        if (entry.entryType === 'largest-contentful-paint') {
          // 更新 LCP 值为最大的 LCP
          if (entry.startTime > this.lcp) {
            this.lcp = entry.startTime;
            console.log(`LCP: ${this.lcp}`);
          }
        }
      });
    });

    // 观察 largest-contentful-paint 事件
    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  },
};
</script>