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ư tải hoặc DOMContentLoaded hoạt động khô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ỉ cho thấy điểm đầu của trải nghiệm tải. Nếu trang hiển thị màn hình chờ hoặc hiển thị chỉ báo đang 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ố hiệu suất như Thời gian hiển thị nội dung đầu tiên (FMP) và 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ị ban đầu. Tuy nhiên, những chỉ số này rất phức tạp, khó giải thích và thường không chính xác. Điều này 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 nội dung 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 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 được Thời gian hiển thị nội dung lớn nhất từ 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 của mình, một ngưỡng tốt để đo lường là phân vị thứ 75 của lượt tải trang, được phân đoạn trên thiết bị di động và máy tính để bàn.
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, những loại phần tử được cân nhắc cho Thời gian hiển thị nội dung lớn nhất là:
- Các phần tử
<img>(thời gian trình bày khung hình đầu tiên được dùng cho nội dung ảnh động như ảnh GIF hoặc ảnh PNG động) - 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 trình bày khung hình đầu tiên của video được sử dụng, tùy vào thời gian nào sớm hơn) - Một phần tử có hình nền được tải bằng hàm
url()(trái ngược với tính năng chuyển màu CSS) - Phần tử cấp khối có chứa nút văn bản hoặc phần tử con văn bản cấp cùng dòng khác.
Lưu ý rằng việc hạn chế các phần tử trong tập hợp giới hạn này là có chủ ý để giữ cho mọi thứ đơn giản ngay từ đầu. Trong tương lai, chúng tôi có thể sẽ thêm các thành phần khác (như khả năng hỗ trợ đầy đủ <svg>) khi chúng tôi nghiên cứu thêm.
Ngoài việc chỉ xem xét một số yếu tố, phép đo LCP sử dụng phương pháp phỏng đoán để loại trừ một số yếu 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:
- Phần tử có độ mờ bằng 0, người dùng không nhìn thấy được
- Các thành phần che phủ khung nhìn đầy đủ, có thể được coi là nền thay vì 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 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.
Những phỏng đoán "có nội dung" này có thể khác với các phỏng đoán được sử dụng bởi Thời gian hiển thị nội dung đầu tiên (FCP). Những phỏng đoán này 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 và LCP khi nội dung chính được hiển thị vì vậy LCP được thiết kế để có tính chọn lọc hơn.
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ì những 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 từ kích thước hàm 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 thành phần, LCP không xem xét 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?
Trang web thường tải theo giai đoạn và do đó, có thể 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 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 đó. Lúc đó, trình duyệt sẽ gửi một mục largest-contentful-paint có thuộc tính element có khả năng tham chiếu đến <p> hoặc <h1>. Sau đó, sau khi hình ảnh chính tải xong, mục largest-contentful-paint thứ hai sẽ được gửi đi và thuộc tính element của mục này 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 kết xuất và hiển thị cho người dùng. Hình ảnh chưa tải không được coi là "đã hiển thị". 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 thành phần 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 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, 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 (điều này đặc biệt đúng với thao tác cuộn).
Để phân tích, bạn chỉ nên báo cáo PerformanceEntry được gửi gần đây nhất đến dịch vụ phân tích của mình.
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 những 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 các URL đó được hiển thị (vì điều này đã được hiển thị qua nhiều API web khác).
Đ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. Không phải trường hợp này mà chỉ xuất hiện do hạn chế bảo mật này.
Bạn nên đặt tiêu đề Timing-Allow-Origin bất cứ khi nào có thể để 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 trong việc tính toán và gửi các mục hiệu suất mới, 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 LCP đề xuất 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 hiển thị 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ử được kết xuất ban đầu trong khung nhìn, 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 của khung nhìn.
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 xảy ra trên một số trang web phổ biến:
Trong cả hai dòng thời gian trên, phần tử đều thay đổi nhiều nhất khi nội dung tải. Trong ví dụ đầu tiên, nội dung mới được thêm vào DOM và thay đổi phần tử nào lớn nhất. Trong ví dụ thứ hai, thay đổi bố cục và nội dung trước đó là lớn nhất sẽ bị xóa khỏi khung nhìn.
Mặc dù thường xảy ra trường hợp nội dung tải muộn 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 xảy ra trước khi trang tải hoàn toàn.
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 những nội dung khác xuất hiện dần dần. Trong ví dụ về trang kết quả tìm kiếm trên Google, phần tử lớn nhất là một đoạn văn bản xuất hiện trước khi hình ảnh hoặc biểu trưng tải xong. Vì tất cả các hình ảnh riêng lẻ đều nhỏ hơn đoạn này, nên đoạn này vẫn là phần tử lớn nhất trong suốt quá trình tải.
Cách đo 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 những công cụ sau đây:
Công cụ thực địa
- Báo cáo trải nghiệm người dùng trên Chrome
- PageSpeed Insights
- Search Console (báo cáo Các chỉ số quan trọng về trang web)
- Thư viện JavaScript
web-vitals
Công cụ cho phòng thí nghiệm
Đo lường LCP trong JavaScript
Để đo lường LCP trong JavaScript, bạn có thể sử dụng API Thời gian hiển thị nội dung lớn nhất. Ví dụ sau đây 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ên, mỗi mục largest-contentful-paint được ghi lại đại diện cho đề xuất LCP hiện tại. Nói 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 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 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ố.
Sự khác biệt giữa chỉ số và API
- API sẽ gửi các mục
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-paintsau khi trang chuyển sang chế độ nền, nhưng bạn nên bỏ qua những mục nhập đó khi tính LCP (chỉ có thể xem xét các phần tử nếu trang đó đã chạy ở nền trước toàn bộ thời gian). - API không báo cáo các mục
largest-contentful-paintkhi trang được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi, nhưng bạn nên đo lường LCP trong những trường hợp này vì người dùng trải nghiệm các mục này dưới dạng 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 số liệu vẫn xem xét vì chúng là một phần của 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 trong video được nhúng), thành phần này sẽ thể hiện sự khác biệt giữa CrUX và rum. Để đo lường LCP một cách chính xác, bạn nên xem xét các chỉ số này. Khung phụ có thể sử dụng API để báo cáo các mục nhập
largest-contentful-paintcủa chúng đến khung mẹ để tổng hợp. - API đo lường LCP từ khi bắt đầu điều hướng, nhưng LCP của các trang được kết xuất trước phải được đo lường từ
activationStartvì 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 có thể sử dụng thư viện JavaScript web-vitals để đo lường LCP, giúp xử lý những khác biệt này cho bạn (nếu có thể, xin lưu ý rằng vấn đề về iframe sẽ 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() để 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. Do đó, nhà phát triển có thể 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 phần tử, như mô tả trong bài viết về chỉ số tùy chỉnh.
Cách cải thiện LCP
Tài liệu hướng dẫn đầy đủ về cách tối ưu hoá LCP được cung cấp để hướng dẫn bạn về 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 trong 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
- Bài học rút ra từ hoạt động giám sát hiệu suất trên Chrome của Annie Sullivan tại performance.now() (2019)
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 định nghĩa của chính các chỉ số. Do đó, đôi khi, bạn phải thực hiện thay đổi và những thay đổi này có thể hiển thị dưới dạng sự cải thiện hoặ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ý vấn đề này, tất cả các thay đổi đối với cách 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 có ý kiến phản hồi về các chỉ số này, bạn có thể gửi ý kiến phản hồi trong nhóm Google quan trọng về phản hồi trên web.