LargestContentfulPaint

Mô tả

Thời điểm quan trọng mà API này cung cấp là chỉ số Largest Contentful Paint (LCP). Nó cung cấp thời gian hiển thị của hình ảnh hoặc khối văn bản lớn nhất hiển thị trong vùng nhìn, được ghi từ khi trang bắt đầu tải. Các phần tử sau được xem xét khi xác định LCP:

• Các phần tử <img>.
• Các phần tử <image> bên trong SVG.
• Hình ảnh poster của các phần tử <video>.
• Các phần tử có background-image.
• Các nhóm nút văn bản như <p>.

Để đo thời gian hiển thị của các phần tử khác, hãy dùng API PerformanceElementTiming.

Các thời điểm vẽ quan trọng bổ sung được cung cấp bởi API PerformancePaintTiming:

• First Paint (FP): Thời điểm bất kỳ nội dung nào được hiển thị. Lưu ý rằng việc đánh dấu lần vẽ đầu tiên là tùy chọn, không phải tất cả tác nhân người dùng đều báo cáo nó.
• First Contentful Paint (FCP): Thời điểm bit đầu tiên của văn bản hoặc hình ảnh DOM được hiển thị.

LargestContentfulPaint kế thừa từ PerformanceEntry.

Để đo chính xác thời gian hiển thị của tài nguyên từ nguồn gốc chéo, hãy đặt tiêu đề Timing-Allow-Origin.

Xem Thời gian hiển thị hình ảnh nguồn gốc chéo và Dùng startTime thay vì renderTime để biết thêm chi tiết.

Thuộc tính phiên bản

Giao diện này trực tiếp định nghĩa các thuộc tính sau:

LargestContentfulPaint.element Read only

Phần tử hiện là lần vẽ nội dung lớn nhất.

LargestContentfulPaint.renderTime Read only

Thời điểm phần tử được hiển thị trên màn hình. Có thể là giá trị được làm thô nếu phần tử là hình ảnh từ nguồn gốc chéo được tải mà không có tiêu đề Timing-Allow-Origin.

LargestContentfulPaint.loadTime Read only

Thời điểm phần tử được tải.

LargestContentfulPaint.size Read only

Kích thước nội tại của phần tử được trả về dưới dạng diện tích (rộng * cao).

LargestContentfulPaint.id Read only

ID của phần tử. Thuộc tính này trả về chuỗi rỗng khi không có ID.

LargestContentfulPaint.paintTime

Trả về dấu thời gian khi giai đoạn hiển thị kết thúc và giai đoạn vẽ bắt đầu.

LargestContentfulPaint.presentationTime

Trả về dấu thời gian khi các điểm ảnh được vẽ thực sự xuất hiện trên màn hình.

LargestContentfulPaint.url Read only

Nếu phần tử là hình ảnh, URL yêu cầu của hình ảnh đó.

Nó cũng mở rộng các thuộc tính PerformanceEntry sau, giới hạn và ràng buộc chúng như được mô tả:

PerformanceEntry.entryType Read only Experimental

Trả về "largest-contentful-paint".

PerformanceEntry.name Read only Experimental

Luôn trả về chuỗi rỗng.

PerformanceEntry.startTime Read only Experimental

Trả về giá trị của renderTime của mục này.

PerformanceEntry.duration Read only Experimental

Trả về 0, vì duration không áp dụng cho giao diện này.

Phương thức phiên bản

Giao diện này cũng kế thừa các phương thức từ PerformanceEntry.

LargestContentfulPaint.toJSON()

Trả về biểu diễn JSON của đối tượng LargestContentfulPaint.

Ví dụ

Quan sát lần vẽ nội dung lớn nhất

Trong ví dụ sau, một PerformanceObserver được đăng ký để lấy lần vẽ nội dung lớn nhất trong khi trang đang tải. Cờ buffered được dùng để truy cập dữ liệu trước khi tạo observer.

API LCP phân tích tất cả nội dung tìm thấy (bao gồm nội dung bị xóa khỏi DOM). Khi tìm thấy nội dung lớn hơn, nó tạo một mục mới. Nó dừng tìm kiếm nội dung lớn hơn khi xảy ra sự kiện cuộn hoặc nhập liệu, vì các sự kiện này có thể giới thiệu nội dung mới trên trang web. Do đó LCP là mục hiệu suất cuối cùng được báo cáo bởi observer.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Dùng ứng viên LCP mới nhất
  console.log("LCP:", lastEntry.startTime);
  console.log(lastEntry);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

Quan sát thời gian vẽ và trình bày riêng biệt

Các thuộc tính paintTime và presentationTime cho phép bạn lấy thời gian cụ thể khi giai đoạn vẽ bắt đầu và khi các điểm ảnh được vẽ xuất hiện trên màn hình. paintTime có khả năng tương thích rộng rãi, trong khi presentationTime phụ thuộc vào triển khai.

Ví dụ này dựa trên ví dụ observer trước đó, cho thấy cách kiểm tra hỗ trợ cho paintTime và presentationTime rồi lấy các giá trị đó nếu có. Trong các trình duyệt không hỗ trợ, mã lấy renderTime hoặc loadTime, tùy thuộc vào cái nào được hỗ trợ.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Dùng ứng viên LCP mới nhất
  if (lastEntry.presentationTime) {
    console.log(
      "LCP paintTime:",
      lastEntry.paintTime,
      "LCP presentationTime:",
      lastEntry.presentationTime,
    );
  } else if (lastEntry.paintTime) {
    console.log("LCP paintTime:", lastEntry.paintTime);
  } else if (lastEntry.renderTime) {
    console.log("LCP renderTime:", lastEntry.renderTime);
  } else {
    console.log("LCP loadTime:", lastEntry.loadTime);
  }
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Largest Contentful Paint
• First Contentful Paint
• First Paint