Largest Contentful Paint (LCP)

Hỗ trợ trình duyệt

  • 77
  • 79
  • 122
  • x

Nguồn

Thời gian hiển thị nội dung lớn nhất (LCP) là một chỉ số Chỉ số quan trọng chính của trang web ổn định để đo lường tốc độ tải dự kiến. Thuộc tính này đánh dấu thời điểm trong tiến trình tải trang khi nội dung chính của trang có khả năng đã tải. LCP nhanh giúp người dùng yên tâm rằng trang đó hữu ích.

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

Trước đây, chúng tôi từng đề xuất các chỉ số về hiệu suất như Thời gian hiển thị nội dung đầu tiên (FMP)Chỉ số tốc độ (SI) (cả hai đều có trong Lighthouse) để giúp ghi lại thêm trải nghiệm tải sau lần hiển thị đầu tiên. Tuy nhiên, các chỉ số này rất 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 được tải.

Dựa trên các cuộc thảo luận tại Nhóm hoạt động về hiệu suất web của W3C và nghiên cứu thực hiện 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 một trang là xem xét thời điểm hiển thị phần tử lớn nhất.

LCP là gì?

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

Điểm LCP tốt là gì?

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

Giá trị LCP tốt là từ 2,5 giây trở xuống, giá trị kém lớn hơn 4,0 giây và bất kỳ mức độ nào còn lại cần cải thiện
Giá trị LCP tốt là từ 2,5 giây trở xuống.

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

Như đã 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 để có Thời gian hiển thị nội dung lớn nhất là:

Việc hạn chế các phần tử trong tập hợp giới hạn này là nhằm giảm bớt độ phức tạp. Trong tương lai, chúng tôi có thể thêm các thành phần khác (như tính năng hỗ trợ <svg> đầy đủ) khi chúng tôi nghiên cứu thêm.

Ngoài việc chỉ xem xét một số phần tử, 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ể cho là "không có nội dung". Đối với 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, khiến người dùng không nhìn thấy các phần tử đó.
  • Các phần tử che phủ khung nhìn đầy đủ, có thể là các phần tử nền.
  • Hình ảnh giữ chỗ hoặc các hình ảnh khác có entropy thấp có khả năng không phản ánh nội dung thực sự của trang.

Các trình duyệt có thể sẽ 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ử nội dung lớn nhất.

Các phỏng đoán "có nội dung" này khác với các phỏng đoán mà FCP sử dụng, 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 khung nhìn đầy đủ, ngay cả khi chúng không đủ điều kiện là ứng viên LCP. Mặc dù cả hai đều sử dụng từ "có nội dung" trong tên, nhưng mục đích của các chỉ số này là khác nhau. FCP đo lường khi bất kỳ nội dung nào được hiển thị lên màn hình, trong khi LCP đo lường khi nội dung chính được hiển thị.

Kích thước của một phần tử được xác định bằng cách 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ó overflow không hiển thị, thì các phần đó sẽ 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 từ kích thước nội tại, kích thước được báo cáo là kích thước hiển thị hoặc kích thước hàm 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ả các phần tử, LCP không xem xét lề, khoảng đệm hoặc đường viền được áp dụng bằng CSS.

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

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 trong quá trình tả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 sau khi trình duyệt vẽ khung đầu tiên. Sau khi kết xuất các khung tiếp theo, hệ thống 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 rồi trình duyệt sẽ gửi một mục largest-contentful-paint có thuộc tính element tham chiếu đến <p> hoặc <h1>. Sau khi hình ảnh chính tải xong, mục largest-contentful-paint thứ hai sẽ được gửi, với thuộc tính element 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ử đó được kết xuất và người dùng nhìn thấy. Hình ảnh chưa tải không được coi là "đã kết xuất". Các nút văn bản 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 sau khi phần tử lớn hơn kết thúc hiển thị, một PerformanceEntry khác sẽ được tạo.

Ngoài việc tải muộn về hình ảnh và phông chữ, 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ử có nội dung lớn nhất trước đó, thì PerformanceEntry mới sẽ được tạ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, 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ì tương tác của người dùng thường thay đổi nội dung mà người dùng nhìn thấy (đặc biệt là khi cuộn).

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

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ị cho hình ảnh trên nhiều nguồn gốc thiếu tiêu đề Timing-Allow-Origin. Thay vào đó, bạn chỉ có thể sử dụng thời gian tải của các API này (những API khác đã hiển thị).

Điều này có thể dẫn đến một tình huống dường như không thể xảy ra, đó là LCP được các API web báo cáo sớm hơn FCP. Điều này chỉ là do giới hạn bảo mật này và không thể hiện điều gì đang thực sự xảy ra.

Khi có thể, bạn nên đặt tiêu đề Timing-Allow-Origin để làm cho các chỉ số 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 chi phí hiệu suất cho việc tính toán và gửi các mục hiệu suất mới ở mức thấp, việc thay đổi kích thước hoặc vị trí của một phần tử sẽ không tạo ra ứng viên 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 chuyển tiếp 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 kết xuất trong khung nhìn, sau đó bị đẩy ra khỏi khung nhìn vẫn báo cáo kích thước khung nhìn ban đầu của chúng.

Ví dụ

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

Dòng thời gian Thời gian hiển thị nội dung lớn nhất từ cnn.com
Tiến trình LCP từ cnn.com.
Dòng thời gian của Thời gian hiển thị nội dung lớn nhất từ techcrunch.com
Tiến trình LCP từ techcrunch.com.

Trong cả hai tiến trình này, phần tử lớn nhất (được làm nổi bật bằng màu xanh lục) 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, thay đổi phần tử nào lớn nhất. Trong ví dụ thứ hai, bố cục thay đổi, việc xoá phần tử nội dung lớn nhất trước đó khỏi khung nhìn.

Mặc dù nội dung tải muộn thường lớn hơn nội dung đã có trên trang, nhưng điều này không nhất thiết. Hai ví dụ tiếp theo cho thấy LCP diễn ra trước khi trang tải hoàn toàn.

Dòng thời gian của Thời gian hiển thị nội dung lớn nhất trên instagram.com
Tiến trình LCP từ instagram.com.
Dòng thời gian Thời gian hiển thị nội dung lớn nhất từ google.com
Tiến trình LCP từ google.com.

Trong ví dụ đầu tiên, biểu trưng Instagram 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 được thêm vào. 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 xuất hiện trước khi bất kỳ hình ảnh hoặc biểu trưng nào tải xong. Vì mỗi hình ảnh riêng lẻ nhỏ hơn đoạn này, nên hình ảnh này vẫn là phần tử lớn nhất trong suốt quá trình tải.

Cách đo LCP

Bạn có thể đo LCP trong phòng thí nghiệm hoặc tại thực tế và LCP này có sẵn trong các công cụ sau đây:

Công cụ thực địa

Công cụ cho phòng thí nghiệm

Đo lường LCP trong JavaScript

Để đo lường LCP trong JavaScript, hãy sử dụng API Nội dung lớn nhất hiển thị. Ví dụ sau cho biết cách tạo một PerformanceObserver để theo dõi các mục nhập largest-contentful-paint và ghi lại 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ước, 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 gần đây nhất được phát ra là giá trị LCP. Tuy nhiên, không phải mục nhập largest-contentful-paint nào cũng hợp lệ để đo LCP.

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

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

  • API sẽ gửi các mục nhập largest-contentful-paint đối với các trang được tải trong thẻ nền, nhưng bạn nên bỏ qua các trang đó 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 bạn nên bỏ qua các mục nhập đó khi tính toán LCP. Chỉ có thể xem xét các phần tử nếu trang đó ở nền trước toàn bộ thời gian.
  • API này không báo cáo các mục largest-contentful-paint khi trang được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi, nhưng LCP nên được đo lường trong những trường hợp này vì người dùng trải nghiệm chúng dưới dạng lượt truy cập trang khác biệt.
  • API không xem xét các phần tử trong iframe, nhưng chỉ số này thì có vì chúng thuộc trải nghiệm người dùng trên trang. Trên các trang có LCP trong iframe (ví dụ: hình ảnh áp phích trên video nhúng), điều này sẽ thể hiện sự khác biệt giữa CrUX và rum. Để đo LCP đúng cách, bạn phải bao gồm các iframe. Các khung phụ 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. Đối với các trang được kết xuất trước, hãy đo lường LCP từ activationStart, vì thời gian đó 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 nên sử dụng thư viện JavaScript web-vitals để đo lường LCP, giúp xử lý hầu hết các điểm khác biệt này cho bạn. (Không bao gồm vấn đề về iframe.)

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() để xem ví dụ đầy đủ về cách đo lường LCP trong JavaScript.

Nếu phần tử lớn nhất không phải là quan trọng nhất thì sao?

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à có thể nhà phát triển sẽ quan tâm hơn đến việc đo lường thời gian kết xuất của những phần tử khác này. Bạn có thể sử dụng 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

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

Tài nguyên khác

Nhật ký thay đổi

Đôi khi, lỗi được phát hiện trong các API dùng để đo lường chỉ số và đôi khi trong phần đị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ể hiển thị dưới dạng mức độ cải thiện hoặc mức độ hồi quy trong báo cáo nội bộ và trang tổng quan của bạn.

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

Nếu bạn muốn gửi ý kiến phản hồi về các chỉ số này, hãy gửi ý kiến phản hồi trong nhóm Google có ý kiến phản hồi trên web.