Xóa nền ảnh 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 Show
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 tốc độ tải được cảm nhận 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 này hữu ích 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 hiển thị của khối văn bản hoặc hình ảnh lớn nhất hiển thị trong chế độ xem, liên quan đến thời điểm trang bắt đầu tải lần đầu tiên Đ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à
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 (e. g. 1, 2) có thể được thêm vào trong tương lai khi tiến hành nhiều nghiên cứu hơnKích thước của một 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 điều kiện cụ thể. 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 6 thuộc loại 0 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. Nhưng sau đó, sau khi hiển thị các khung tiếp theo, nó sẽ gửi một 6 khác bất cứ khi nào phần tử nội dung lớn nhất thay đổiVí 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 0 có thuộc tính 3 có thể tham chiếu đến một 4 hoặc 5. Sau đó, sau khi hình ảnh anh hùng tải xong, mục nhập 0 thứ hai sẽ được gửi đi và thuộc tính 3 của nó sẽ tham chiếu đến 9Đ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 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ị, phần tử đó sẽ được báo cáo qua một đối tượng 6 khácNgoà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 6 mới cũng sẽ được báo cáoNế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 0 mới được gửi đi. Tuy nhiên, do các mẫu giao diện người dùng phổ biến, chẳng hạn như băng chuyền hình ảnh thường loại bỏ các phần tử DOM, nên số liệu đã được cập nhật để phản ánh chính xác hơn trải nghiệm của người dùng. Xem CHANGELOG để biết thêm chi tiếtTrì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 6 được gửi gần đây nhất cho dịch vụ phân tích của mìnhthận trọng Vì người dùng có thể mở các trang trong tab nền, nên có thể 0 mục nhập sẽ không được gửi cho đến khi người dùng tập trung vào tab, quá trình này có thể muộn hơn nhiều so với khi họ tải tab lần đầu. Các công cụ đo lường LCP của Google không báo cáo chỉ số này nếu trang được tải ở chế độ nền vì nó không phản ánh thời gian tải do người dùng cảm nhậnThờ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 đề 94. 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ị qua nhiều API web khác)Ví dụ sử dụng 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 đề 94 để số liệu của bạn chính xác hơnCá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 chế độ xem sau đó bị đẩy xuống, ngoài chế độ xem sẽ vẫn báo cáo kích thước trong chế độ xem 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 tải xong bất kỳ hình ảnh hoặc logo nào. 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ử 1 và phần tử 1 hiện không được coi là ứng cử viên LCP. Ứng cử viên LCP đầu tiên là văn bản trong khung thứ haiCách đo LCP #LCP có thể được đo trong phòng thí nghiệm hoặc tại hiện trường và nó có sẵn trong các công cụ sau Công cụ hiện trường #
Dụng cụ thí nghiệm #
Đ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 × Source Để đ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 99 lắng nghe các mục nhập của 0 và ghi chúng vào bảng điều khiển 0Cảnh báo Mã này cho biết cách ghi nhật ký 0 mục nhập vào bảng điều khiển, nhưng việc đo lường LCP trong JavaScript phức tạp hơn. Xem bên dưới để biết chi tiếtTrong ví dụ trên, mỗi mục nhập 0 đã ghi đại diện cho ứng cử viên LCP hiện tại. Nói chung, giá trị 03 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 tất cả _______ mục nhập đều hợp lệ để đo LCPPhầ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 #
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 98 để đo lường LCP, giúp xử lý những khác biệt này cho bạn (nếu có thể)
Bạn có thể tham khảo mã nguồn của 10 để biết ví dụ đầy đủ về cách đo lường LCP trong JavaScriptTrong 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 hạn chế của thư viện 98 để biết chi tiếtĐ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 API Thời gian phần tử, như được mô tả trong bài viết về chỉ số tùy chỉnh Cách cải thiện LCP #LCP chủ yếu bị ảnh hưởng bởi bốn yếu tố
Để 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
Tài nguyên bổ sung #
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 |