Giám sát thực thi javascript

Sơn có nội dung lớn nhất (LCP)

Ngày 8 tháng 8 năm 2019 — Cập nhật ngày 19 tháng 10 năm 2022

Có sẵn trong. Tiếng Anh, Español, Português, Русский, 中文, 日本語, và 한국어

Xuất hiện trong. Các chỉ số quan trọng chính về trang web . Số liệu

Philip Walton

TwitterGitHubTrang chủ

Trên trang này

Hình ảnh có nội dung lớn nhất (LCP) là một chỉ số quan trọng, lấy người dùng làm trung tâm để đo lường vì nó đánh dấu thời điểm trong dòng thời gian tải trang khi nội dung chính của trang có thể đã được tải—LCP nhanh giúp trấn an người dùng rằng trang đang được tải.

Trước đây, các nhà phát triển web luôn 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 đối với người dùng

Các số liệu cũ hơn như tải hoặc DOMContentLoaded không tốt vì chúng 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ủa họ. Và các chỉ số hiệu suất mới hơn, lấy người dùng làm trung tâm như First Contentful Paint (FCP) chỉ nắm bắt được phần đầu của trải nghiệm tải. Nếu một trang hiển thị màn hình giật gân hoặc hiển thị chỉ báo tải, thời điểm này không liên quan lắm đến người dùng

Trước đây, chúng tôi đã đề xuất các chỉ số hiệu suất như Lần sơn đầu tiên có ý nghĩa (FMP) và Chỉ số tốc độ (SI) (cả hai đều có sẵn trong Lighthouse) để giúp nắm bắt thêm trải nghiệm tải sau lần sơn đầu tiên, nhưng các chỉ số này rất phức tạp, khó giải thích

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

LCP là gì?

Số liệu Tô màu có nội dung lớn nhất (LCP) báo cáo thời gian kết xuất của phần hiển thị lớn nhất trong chế độ xem, liên quan đến thời điểm trang

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

Để cung cấp trải nghiệm người dùng tốt, các trang web nên cố gắng có Nội dung lớn nhất trong số 2. 5 giây hoặc ít hơn. Để đảm bảo bạn đang đạ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 trăm tải trang thứ 75, được phân đoạn trên thiết bị di động và máy tính để bàn

Để tìm hiểu thêm về nghiên cứu và phương pháp đằng sau khuyến nghị này, hãy xem. Xác định ngưỡng chỉ số Core Web Vitals

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

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

• import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  9 yếu tố
• Phần tử

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  0 bên trong phần tử

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  1

• import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  2 yếu tố (hình ảnh áp phích được sử dụng)
• Một phần tử có hình nền được tải qua hàm

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  3 (trái ngược với độ dốc CSS)
• Các phần tử cấp khối có chứa các nút văn bản hoặc các phần tử con cấp văn bản nội tuyến khác

Quan trọng

Hình ảnh chiếm toàn bộ khung nhìn không được coi là ứng cử viên LCP

Lưu ý, 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. Các yếu tố bổ sung (như

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

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

Kích thước của thành phần được báo cáo cho Largest Contentful Paint thường là kích thước mà người dùng có thể nhìn thấy trong chế độ xem. Nếu phần tử mở rộng ra bên ngoài khung nhìn hoặc nếu bất kỳ phần tử nào bị cắt bớt hoặc bị tràn không nhìn thấy được, 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 phần tử hình ảnh đã được thay đổi kích thước so với kích thước nội tại của chúng, kích thước được báo cáo là kích thước hiển thị hoặc kích thước nội tại, tùy theo kích thước nào nhỏ hơn. Ví dụ: hình ảnh được thu nhỏ xuống nhỏ hơn nhiều so với kích thước thực của chúng sẽ chỉ báo cáo kích thước mà chúng được hiển thị, trong khi hình ảnh được kéo dài hoặc mở rộng thành kích thước lớn hơn sẽ chỉ báo cáo kích thước thực của chúng

Đối với các phần tử văn bản, chỉ xem xét kích thước của các nút văn bản của chúng (hình chữ nhật nhỏ nhất bao gồm tất cả các nút văn bản)

Đối với tất cả các phần tử, bất kỳ lề, phần đệm hoặc đường viền nào được áp dụng qua CSS đều không được xem xét

Việc xác định các nút văn bản nào thuộc về phần tử nào đôi khi có thể phức tạp, đặc biệt đối với các phần tử có phần tử con bao gồm các phần tử nội tuyến và nút văn bản thuần túy cũng như các phần tử cấp khối. Điểm mấu chốt là mọi nút văn bản thuộc về (và chỉ thuộc về) phần tử tổ tiên cấp khối gần nhất của nó. Trong. mỗi nút văn bản thuộc về phần tử tạo khối chứa nó

Khi nào lớn nhất mãn sơn báo cáo?

Các trang web thường tải theo từng giai đoạn và kết quả là 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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

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—tại thời điểm đó, trình duyệt sẽ gửi một mục nhập

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

Điều quan trọng cần lưu ý là 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 hiển thị và hiển thị cho người dùng. Hình ảnh chưa được tải không được coi là "kết xuất". Các nút văn bản cũng không sử dụng phông chữ web trong quá trình. 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ị, phần tử đó sẽ được báo cáo qua một đối tượng

import {onLCP} from 'web-vitals';

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

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ì một

import {onLCP} from 'web-vitals';

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

Nếu một phần tử hiện là phần tử có nội dung lớn nhất bị xóa khỏi chế độ xem (hoặc thậm chí bị xóa khỏi DOM), thì phần tử đó sẽ vẫn là phần tử có nội dung lớn nhất trừ khi phần tử lớn hơn được hiển thị

Trước Chrome 88, các phần tử bị xóa không được coi là phần tử có nội dung lớn nhất và việc xóa ứng viên hiện tại sẽ kích hoạt một mục nhập

import {onLCP} from 'web-vitals';

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

Trình duyệt sẽ ngừng báo cáo các mục mới ngay khi người dùng tương tác với trang (thông qua một lần 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 những gì người dùng nhìn thấy (điều này đặc biệt đúng với thao tác cuộn)

Vì mục đích phân tích, bạn chỉ nên báo cáo

import {onLCP} from 'web-vitals';

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

thận trọng

Vì người dùng có thể mở các trang trong tab nền, nên có thể

import {onLCP} from 'web-vitals';

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

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

Vì lý do bảo mật, dấu thời gian hiển thị của hình ảnh không được hiển thị đối với các hình ảnh có nhiều nguồn gốc thiếu tiêu đề

import {onLCP} from 'web-vitals';

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

Phần dưới đây cho thấy cách xử lý các phần tử không có thời gian kết xuất. Tuy nhiên, khi có thể, bạn luôn nên đặt tiêu đề

import {onLCP} from 'web-vitals';

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

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

Để giữ cho chi phí hoạt động của việc tính toán và gửi các mục nhập hiệu suất mới ở mức thấp, các thay đổi đối với kích thước hoặc vị trí của một phần tử không tạo ra các ứng cử viên LCP mới. Chỉ xem xét kích thước và vị trí ban đầu của phần tử trong khung nhìn

Điều này có nghĩa là hình ảnh ban đầu được hiển thị ngoài màn hình và sau đó chuyển tiếp trên màn hình có thể không được báo cáo. Điều đó cũng có nghĩa là các phần tử được hiển thị ban đầu trong khung nhìn, sau đó bị đẩy xuống, ra khỏi khung nhìn sẽ vẫn báo cáo kích thước trong 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 Nội dung vẽ 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ử lớn nhất thay đổi khi tải nội dung. 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à lớn nhất. Trong ví dụ thứ hai, bố cục thay đổi và nội dung lớn nhất trước đây bị xóa khỏi chế độ xem

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 đó không nhất thiết phải như vậy. Hai ví dụ tiếp theo cho thấy Bức tranh có nội dung lớn nhất xảy ra trước khi trang tải đầy đủ

Trong ví dụ đầu tiên, logo Instagram được tải tương đối sớm và nó vẫn là thành phần lớn nhất ngay cả khi nội dung khác được hiển thị dần dần. Trong ví dụ về trang kết quả tìm kiếm của Google, 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 logo 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 nên nó vẫn là phần tử lớn nhất trong suốt quá trình tải

Trong khung đầu tiên của dòng thời gian Instagram, bạn có thể nhận thấy logo máy ảnh không có hộp màu xanh lá cây xung quanh. Đó là bởi vì đó là phần tử

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

Cách đo lường LCP

LCP có thể được đo hoặc và nó có sẵn trong các công cụ sau

công cụ hiện trường

• Báo cáo trải nghiệm người dùng Chrome
• Thông tin chi tiết về tốc độ trang
• Search Console (báo cáo Core Web Vitals)
• Thư viện JavaScript

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  98

dụng cụ thí nghiệm

• Chrome DevTools
• ngọn hải đăng
• Thông tin chi tiết về tốc độ trang
• Trang WebKiểm tra

Đo lường LCP trong JavaScript

Hỗ trợ trình duyệt. chrome 77, Được hỗ trợ 77 firefox, Không được hỗ trợ × edge 79, Supported 79 safari, Not supported ×

Để đo lường LCP trong JavaScript, bạn có thể sử dụng API Paint có nội dung lớn nhất. Ví dụ sau đây cho thấy cách tạo một

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

Cảnh báo

Mã này cho biết cách ghi nhật ký

import {onLCP} from 'web-vitals';

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

Trong ví dụ trên, mỗi mục nhập

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

Phần sau đây liệt kê sự khác biệt giữa những gì API báo cáo và cách tính toán số liệu

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

• API sẽ gửi

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  0 mục nhập cho các trang được tải trong tab nền, nhưng các trang đó sẽ bị bỏ qua khi tính toán LCP
• API sẽ tiếp tục gửi

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  0 mục nhập sau khi một trang đã được tạo nền, nhưng những mục nhập đó sẽ bị bỏ qua khi tính toán LCP (các yếu tố chỉ có thể được xem xét nếu trang đó ở nền trước trong toàn bộ thời gian)
• API không báo cáo

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  0 mục nhập khi trang được khôi phục từ , nhưng LCP phải được đo lường trong những trường hợp này do người dùng trải nghiệm chúng dưới dạng 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 số liệu lại xem xét vì chúng là 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ẽ. Để đo LCP đúng cách, bạn nên xem xét chúng. Các khung con có thể sử dụng API để báo cáo các mục nhập

  import {onLCP} from 'web-vitals';
  
  // Measure and log LCP as soon as it's available.
  onLCP(console.log);

  0 của chúng cho khung chính để tổng hợp

Thay vì ghi nhớ tất cả những khác biệt tinh tế này, nhà phát triển có thể sử dụng thư viện JavaScript

import {onLCP} from 'web-vitals';

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

import {onLCP} from 'web-vitals';

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

Bạn có thể tham khảo mã nguồn của

import {onLCP} from 'web-vitals';

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

Trong một số trường hợp (chẳng hạn như iframe có nhiều nguồn gốc), không thể đo lường LCP trong JavaScript. Xem phần của thư viện

import {onLCP} from 'web-vitals';

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

Điều gì sẽ xảy ra nếu yếu tố lớn nhất không phải là yếu 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à thay vào đó, nhà phát triển có thể quan tâm hơn đến việc đo thời gian hiển thị của các phần tử khác này. Điều này có thể thực hiện được bằng cách sử dụng Element Timing API, như được mô tả trong bài viết về

Cách cải thiện LCP

LCP chủ yếu bị ảnh hưởng bởi bốn yếu tố

• Thời gian phản hồi của máy chủ chậm
• JavaScript và CSS chặn hiển thị
• Thời gian tải tài nguyên
• Kết xuất phía máy khách

Để tìm hiểu sâu về cách cải thiện LCP, hãy xem Tối ưu hóa LCP. Để biết hướng dẫn bổ sung về các kỹ thuật thực hiện riêng lẻ cũng có thể cải thiện LCP, hãy xem

• Áp dụng tải tức thì với mẫu PRPL
• Tối ưu hóa đường dẫn kết xuất quan trọng
• (đối với các trang web do khách hàng kết xuất)

tài nguyên bổ sung

• Bài học rút ra từ giám sát hiệu suất trong Chrome của Annie Sullivan tại hiệu suất. bây giờ() (2019)

THAY ĐỔI

Đôi khi, các lỗi được phát hiện trong các API được sử dụng để đo lường các chỉ số và đôi khi trong các định nghĩa của chính các chỉ số đó. Do đó, đôi khi 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 cải tiế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ý điều này, tất cả các thay đổi đối với việc triển khai hoặc định nghĩa của các số liệu này sẽ được hiển thị trong CHANGELOG này