啥是 LCP

最大内容绘制。
image.png

旧指标

  • load 和 DOMContentLoaded 不一定和用户看到屏幕对应
  • FCP 只能捕捉到加载的最开始
  • 过去也推荐 FMP first meaningful paint 和 SI speed index，来获取fp之后的加载性能，但过于复杂（赞同）和容易出错，没办法主要内容合适加载完成。
  • 所以简单点，最大块的内容渲染完，基本主体内容就加载完了。

判断条件

和 lcp api 有关。

LCP - Largest Contentful Paint - 图2 元素
LCP - Largest Contentful Paint - 图3元素内的元素

元素（使用海报图像）通过url()函数加载背景图片的元素 （与CSS渐变相反 ）包含文本节点或其他内联级文本元素子级的块级元素。

实现方法

最简单的还是加载 库

  1. // 定义变量
  2. let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
  3. // 监听变量
  4. document.addEventListener('visibilitychange', (event) => {
  5.   firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
  6. }, {once: true});
  8. // send
  9. function sendToAnalytics(data) {
  10.   const body = JSON.stringify(data);
  11.   // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  12.   (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  13.       fetch('/analytics', {body, method: 'POST', keepalive: true});
  14. }
  16. try {
  17.   // 创建一个变量
  18.   let lcp;
  20.   function updateLCP(entry) {
  21.     // Only include an LCP entry if the page wasn't hidden prior to
  22.     // the entry being dispatched. This typically happens when a page is
  23.     // loaded in a background tab.
  24.     if (entry.startTime < firstHiddenTime) {
  25.       // NOTE: the `startTime` value is a getter that returns the entry's
  26.       // `renderTime` value, if available, or its `loadTime` value otherwise.
  27.       // The `renderTime` value may not be available if the element is an image
  28.       // that's loaded cross-origin without the `Timing-Allow-Origin` header.
  29.       lcp = entry.startTime;
  30.     }
  31.   }
  33.   // Create a PerformanceObserver that calls `updateLCP` for each entry.
  34.   const po = new PerformanceObserver((entryList, po) => {
  35.     entryList.getEntries().forEach((entry) => updateLCP(entry, po));
  36.   });
  38.   // 监听 largest-contentful-paint
  39.   po.observe({
  40.     type: 'largest-contentful-paint',
  41.     buffered: true,
  42.   });
  44.   // Log the final LCP score once the
  45.   // page's lifecycle state changes to hidden.
  46.   addEventListener('visibilitychange', function fn(event) {
  47.     if (document.visibilityState === 'hidden') {
  48.       removeEventListener('visibilitychange', fn, true);
  50.       // Force any pending records to be dispatched and disconnect the observer.
  51.       po.takeRecords().forEach((entry) => updateLCP(entry, po));
  52.       po.disconnect();
  54.       // If LCP is set, report it to an analytics endpoint.
  55.       if (lcp) {
  56.         sendToAnalytics({lcp});
  57.       }
  58.     }
  59.   }, true);
  60. } catch (e) {
  61.   // Do nothing if the browser doesn't support this API.
  62. }

参考资料