Largest Contentful Paint (LCP)

Philip Walton

Barry Pollard

Trước đây, các nhà phát triển web gặp khó khăn trong việc đo lường tốc độ tải và hiển thị nội dung chính của trang web cho người dùng. Các chỉ số cũ như load hoặc DOMContentLoaded không hoạt động tốt vì chúng không nhất thiết tương ứng với những gì người dùng nhìn thấy trên màn hình. Ngoài ra, các chỉ số hiệu suất mới hơn, lấy người dùng làm trung tâm như Thời gian hiển thị nội dung đầu tiên (FCP) chỉ ghi lại thời điểm bắt đầu trải nghiệm tải. Nếu một trang hiển thị màn hình chờ hoặc chỉ báo đang tải, thì khoảnh khắc này không liên quan nhiều đến người dùng.

Trước đây, chúng tôi đã đề xuất các chỉ số hiệu suất như Thời gian hiển thị nội dung có ý nghĩa đầu tiên (FMP) và Chỉ số tốc độ (SI) (cả hai đều có trong Lighthouse) để giúp ghi lại nhiều trải nghiệm tải hơn sau lần sơn đầu tiên. Tuy nhiên, các chỉ số này phức tạp, khó giải thích và thường không chính xác, nghĩa là chúng vẫn không xác định được thời điểm nội dung chính của trang đã tải.

Dựa trên các cuộc thảo luận trong Nhóm công tác về hiệu suất web W3C và nghiên cứu tại Google, chúng tôi nhận thấy rằng cách chính xác hơn để đo lường thời điểm tải nội dung chính của trang là xem thời điểm phần tử lớn nhất được hiển thị.

LCP là gì?

LCP báo cáo thời gian kết xuất của hình ảnh, khối văn bản hoặc video lớn nhất hiển thị trong khung nhìn, so với thời điểm đầu tiên người dùng chuyển đến trang.

Điểm LCP tốt là bao nhiêu?

Để cung cấp trải nghiệm tốt cho người dùng, các trang web nên cố gắng có Thời gian hiển thị nội dung lớn nhất trong vòng 2,5 giây. Để đảm bảo bạn đang đạt được mục tiêu này cho hầu hết người dùng, ngưỡng phù hợp để đo lường là phân vị thứ 75 của số lượt tải trang, được phân đoạn trên thiết bị di động và máy tính.

Những yếu tố nào được xem xét?

Như hiện được chỉ định trong API Thời gian hiển thị nội dung lớn nhất, các loại phần tử được xem xét cho Thời gian hiển thị nội dung lớn nhất là:

• Phần tử <img> (thời gian hiển thị khung hình đầu tiên được dùng cho nội dung động như GIF hoặc PNG động)
• Các phần tử <image> bên trong phần tử <svg>
• Các phần tử <video> (thời gian tải hình ảnh áp phích hoặc thời gian hiển thị khung hình đầu tiên cho video được sử dụng – tuỳ theo thời gian nào đến sớm hơn)
• Một phần tử có hình nền được tải bằng hàm url(), (thay vì dải màu CSS)
• Các phần tử cấp khối chứa các nút văn bản hoặc các phần tử con của phần tử văn bản cấp cùng dòng.

Xin lưu ý rằng việc giới hạn các phần tử trong nhóm giới hạn này là có chủ ý để giữ mọi thứ đơn giản ngay từ đầu. Các phần tử bổ sung (chẳng hạn như hỗ trợ đầy đủ <svg>) có thể được thêm vào trong tương lai khi chúng tôi tiến hành nghiên cứu thêm.

Bên cạnh việc chỉ xem xét một số phần tử, các phép đo LCP sử dụng phương pháp phỏng đoán để loại trừ một số phần tử nhất định mà người dùng có thể sẽ thấy là "không có nội dung". Đối với các trình duyệt dựa trên Chromium, các trình duyệt này bao gồm:

• Các phần tử có độ mờ bằng 0 mà người dùng không nhìn thấy
• Các phần tử bao phủ toàn bộ khung nhìn, có thể được coi là nền chứ không phải nội dung
• Hình ảnh giữ chỗ hoặc các hình ảnh khác có entropy thấp có thể không phản ánh đúng nội dung của trang

Các trình duyệt có thể tiếp tục cải thiện các phương pháp phỏng đoán này để đảm bảo chúng tôi đáp ứng được kỳ vọng của người dùng về phần tử có nội dung lớn nhất.

Các phương pháp phỏng đoán "có nội dung" này có thể khác với các phương pháp phỏng đoán mà Hiển thị nội dung đầu tiên (FCP) sử dụng. FCP có thể xem xét một số phần tử trong số này, chẳng hạn như hình ảnh phần giữ chỗ hoặc hình ảnh toàn khung nhìn, ngay cả khi các phần tử đó không đủ điều kiện để trở thành đề xuất LCP. Mặc dù cả hai đều có từ "nội dung" trong tên, nhưng mục đích của các chỉ số này lại khác nhau. FCP đo lường khi bất kỳ nội dung nào được hiển thị trên màn hình và LCP khi nội dung chính được hiển thị sao cho LCP được có ý định lựa chọn nhiều hơn.

Kích thước của một phần tử được xác định như thế nào?

Kích thước của phần tử được báo cáo cho LCP thường là kích thước mà người dùng nhìn thấy trong khung nhìn. Nếu phần tử mở rộng ra ngoài khung nhìn hoặc nếu bất kỳ phần tử nào bị cắt bớt hoặc có phần tràn không hiển thị, thì các phần đó không được tính vào kích thước của phần tử.

Đối với các thành phần hình ảnh đã được đổi kích thước so với kích thước nội tại, thì kích thước được báo cáo sẽ là kích thước hiển thị hoặc kích thước nội tại, tuỳ theo kích thước nào nhỏ hơn.

Đối với các phần tử văn bản, LCP chỉ xem xét hình chữ nhật nhỏ nhất có thể chứa tất cả các nút văn bản.

Đối với tất cả phần tử, LCP không tính đến lề, khoảng đệm hoặc đường viền được áp dụng thông qua CSS.

LCP được báo cáo khi nào?

Các trang web thường tải theo giai đoạn và do đó, phần tử lớn nhất trên trang có thể thay đổi.

Để xử lý khả năng thay đổi này, trình duyệt sẽ gửi một PerformanceEntry thuộc loại largest-contentful-paint xác định phần tử có nội dung lớn nhất ngay khi trình duyệt vẽ khung đầu tiên. Tuy nhiên, sau khi kết xuất các khung hình tiếp theo, lớp này sẽ gửi một PerformanceEntry khác bất cứ khi nào phần tử nội dung lớn nhất thay đổi.

Ví dụ: trên một trang có văn bản và hình ảnh chính, ban đầu trình duyệt có thể chỉ hiển thị văn bản. Lúc đó, trình duyệt sẽ gửi một mục nhập largest-contentful-paint có thuộc tính element có thể tham chiếu đến <p> hoặc <h1>. Sau đó, khi hình ảnh chính tải xong, một mục nhập largest-contentful-paint thứ hai sẽ được gửi và thuộc tính element của mục nhập đó sẽ tham chiếu đến <img>.

Một phần tử chỉ có thể được coi là phần tử có nội dung lớn nhất sau khi phần tử đó đã kết xuất và hiển thị cho người dùng. Những hình ảnh chưa tải sẽ không được coi là "đã kết xuất". Cả các nút văn bản đều không sử dụng phông chữ web trong khoảng thời gian chặn phông chữ. Trong những trường hợp như vậy, một phần tử nhỏ hơn có thể được báo cáo là phần tử có nội dung lớn nhất, nhưng ngay khi phần tử lớn hơn kết thúc quá trình kết xuất, một PerformanceEntry khác sẽ được tạo.

Ngoài hình ảnh và phông chữ tải muộn, một trang có thể thêm các phần tử mới vào DOM khi có nội dung mới. Nếu bất kỳ phần tử mới nào trong số này lớn hơn phần tử nội dung lớn nhất trước đó, thì PerformanceEntry mới cũng sẽ được báo cáo.

Nếu phần tử có nội dung lớn nhất bị xoá khỏi khung nhìn hoặc thậm chí khỏi DOM, thì phần tử đó vẫn là phần tử có nội dung lớn nhất trừ phi phần tử lớn hơn được hiển thị.

Trình duyệt sẽ ngừng báo cáo các mục nhập mới ngay khi người dùng tương tác với trang (thông qua thao tác nhấn, cuộn hoặc nhấn phím), vì hoạt động tương tác của người dùng thường thay đổi nội dung hiển thị với người dùng (đặc biệt là khi cuộn).

Để phân tích, bạn chỉ nên báo cáo PerformanceEntry được gửi gần đây nhất cho dịch vụ phân tích.

Thời gian tải so với thời gian kết xuất

Vì lý do bảo mật, dấu thời gian kết xuất của hình ảnh sẽ không hiển thị đối với hình ảnh trên nhiều nguồn gốc thiếu tiêu đề Timing-Allow-Origin. Thay vào đó, chỉ thời gian tải của chúng được hiển thị (vì điều này đã được hiển thị thông qua nhiều API web khác).

Điều này có thể dẫn đến tình huống dường như không thể xảy ra, trong đó LCP được API web báo cáo là sớm hơn FCP. Tuy nhiên, điều này không đúng mà chỉ xuất hiện do quy định hạn chế bảo mật này.

Bạn nên luôn đặt tiêu đề Timing-Allow-Origin khi có thể để các chỉ số của bạn chính xác hơn.

Các thay đổi về kích thước và bố cục phần tử được xử lý như thế nào?

Để giảm thiểu hao tổn hiệu suất khi tính toán và gửi các mục hiệu suất mới, các thay đổi đối với kích thước hoặc vị trí của một phần tử sẽ không tạo ra các đề xuất LCP mới. Chỉ kích thước và vị trí ban đầu của phần tử trong khung nhìn mới được xem xét.

Điều này có nghĩa là hình ảnh ban đầu được kết xuất ngoài màn hình rồi sau đó chuyển đổi trên màn hình có thể không được báo cáo. Điều này cũng có nghĩa là các phần tử ban đầu được hiển thị trong khung nhìn nhưng sau đó bị đẩy xuống, nằm ngoài khung nhìn sẽ vẫn báo cáo kích thước ban đầu trong khung nhìn.

Ví dụ

Sau đây là một số ví dụ về thời điểm xảy ra Thời gian hiển thị nội dung lớn nhất trên một số trang web phổ biến:

Trong cả hai tiến trình trên, phần tử lớn nhất sẽ thay đổi khi nội dung tải. Trong ví dụ đầu tiên, nội dung mới được thêm vào DOM và điều đó sẽ thay đổi phần tử nào lớn nhất. Trong ví dụ thứ hai, các thay đổi về bố cục và nội dung trước đó là lớn nhất sẽ bị xoá khỏi khung nhìn.

Mặc dù nội dung tải trễ thường lớn hơn nội dung đã có trên trang, nhưng điều đó chưa chắc đúng. Hai ví dụ tiếp theo cho thấy LCP xảy ra trước khi trang tải xong.

Trong ví dụ đầu tiên, biểu trưng Instagram được tải tương đối sớm và vẫn là thành phần lớn nhất ngay cả khi các nội dung khác xuất hiện dần. Trong ví dụ về trang kết quả của Google Tìm kiếm, phần tử lớn nhất là một đoạn văn bản được hiển thị trước khi bất kỳ hình ảnh hoặc biểu trưng nào tải xong. Vì tất cả các hình ảnh riêng lẻ đều nhỏ hơn đoạn này, đoạn văn bản vẫn là phần tử lớn nhất trong suốt quá trình tải.

Cách đo lường LCP

LCP có thể được đo lường trong phòng thí nghiệm hoặc tại thực địa và có sẵn trong các công cụ sau:

Công cụ tại hiện trường

• Báo cáo trải nghiệm người dùng trên Chrome
• PageSpeed Insights
• Search Console (báo cáo Chỉ số quan trọng chính của trang web)
• Thư viện JavaScript web-vitals

Công cụ của Labs

• Công cụ của Chrome cho nhà phát triển
• Lighthouse
• PageSpeed Insights
• WebPageTest

Đo lường LCP trong JavaScript

Để đo lường LCP trong JavaScript, bạn có thể sử dụng API Nội dung lớn nhất hiển thị. Ví dụ sau cho biết cách tạo PerformanceObserver để theo dõi các mục nhập largest-contentful-paint và ghi nhật ký các mục đó vào bảng điều khiển.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Trong ví dụ trên, mỗi mục largest-contentful-paint được ghi lại đại diện cho đề xuất LCP hiện tại. Nhìn chung, giá trị startTime của mục nhập cuối cùng được phát ra là giá trị LCP. Tuy nhiên, điều đó không phải lúc nào cũng đúng. Không phải mục nhập largest-contentful-paint nào cũng hợp lệ để đo lường LCP.

Phần sau đây liệt kê sự khác biệt giữa nội dung mà API báo cáo và cách tính chỉ số này.

Sự khác biệt giữa chỉ số và API

• API sẽ gửi mục nhập largest-contentful-paint cho các trang được tải trong thẻ nền, nhưng các trang đó sẽ bị bỏ qua khi tính LCP.
• API sẽ tiếp tục gửi các mục nhập largest-contentful-paint sau khi một trang chạy ở chế độ nền, nhưng các mục nhập đó sẽ bị bỏ qua khi tính LCP (các phần tử chỉ có thể được xem xét nếu trang chạy ở chế độ nền trong toàn bộ thời gian).
• API không báo cáo các mục nhập largest-contentful-paint khi trang được khôi phục từ bộ nhớ đệm quay lại/chuyển tiếp, nhưng bạn nên đo lường LCP trong những trường hợp này vì người dùng sẽ trải nghiệm các lượt truy cập trang riêng biệt.
• API không xem xét các phần tử trong iframe nhưng chỉ số này hoạt động như một phần của trải nghiệm người dùng trên trang. Trong các trang có LCP trong iframe (ví dụ: hình ảnh áp phích trên video được nhúng), điều này sẽ hiển thị dưới dạng sự khác biệt giữa CrUX và RUM. Để đo lường chính xác LCP, bạn nên cân nhắc những yếu tố này. Khung con có thể sử dụng API để báo cáo các mục nhập largest-contentful-paint của chúng cho khung mẹ để tổng hợp.
• API đo lường LCP từ khi bắt đầu điều hướng, nhưng đối với các trang được kết xuất trước, LCP phải được đo từ activationStart vì thời gian này tương ứng với thời gian LCP mà người dùng đã trải nghiệm.

Thay vì ghi nhớ tất cả những điểm khác biệt nhỏ này, nhà phát triển có thể sử dụng thư viện JavaScript web-vitals để đo lường LCP. Thư viện này sẽ xử lý những điểm khác biệt này cho bạn (nếu có thể – lưu ý rằng vấn đề về iframe không được đề cập):

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

Hãy tham khảo mã nguồn của onLCP() để biết ví dụ đầy đủ về cách đo lường LCP trong JavaScript.

Điều gì sẽ xảy ra nếu phần tử lớn nhất không phải là phần tử quan trọng nhất?

Trong một số trường hợp, phần tử (hoặc các phần tử) quan trọng nhất trên trang không giống với phần tử lớn nhất và nhà phát triển có thể quan tâm đến việc đo lường thời gian hiển thị của các phần tử khác này thay thế. Bạn có thể thực hiện việc này bằng cách sử dụng Element Timing API (API Thời gian của phần tử), như mô tả trong bài viết về chỉ số tuỳ chỉnh.

Cách cải thiện LCP

Chúng tôi có hướng dẫn đầy đủ về cách tối ưu hoá LCP để hướng dẫn bạn thực hiện quy trình xác định thời gian LCP trong thực tế và sử dụng dữ liệu trong phòng thí nghiệm để xem chi tiết và tối ưu hoá thời gian đó.

Tài nguyên khác

• Bài học rút ra từ việc theo dõi hiệu suất trong Chrome của Annie Sullivan tại performance.now() (2019)

Nhật ký thay đổi

Đôi khi, chúng tôi phát hiện lỗi trong các API dùng để đo lường chỉ số và đôi khi là trong định nghĩa của chính các chỉ số đó. Do đó, đôi khi bạn phải thực hiện các thay đổi và những thay đổi này có thể xuất hiện dưới dạng điểm cải thiện hoặc điểm hồi quy trong các báo cáo và trang tổng quan nội bộ.

Để giúp bạn quản lý việc này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa của các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.

Nếu có ý kiến phản hồi về các chỉ số này, bạn có thể gửi ý kiến đó trong nhóm Google web-vitals-feedback.