Sơn có nội dung lớn nhất (LCP): Hướng dẫn kỹ thuật hoàn chỉnh và tiêu chuẩn tối ưu hóa

Thời gian hiển thị nội dung lớn nhất (LCP) là một trong ba chỉ số Core Web Vitals của Google, được thiết lập để đo tốc độ tải trang được cảm nhận.LCP theo dõi thời gian trôi qua kể từ khi người dùng bắt đầu tải trang web cho đến khi hình ảnh, khung áp phích video hoặc khối văn bản lớn nhất trong khung nhìn hiển thị ban đầu được vẽ hoàn toàn trên màn hình.

Bởi vì người dùng đánh giá tốc độ trang web dựa trên tốc độ hiển thị và đọc được nội dung chính nên LCP được coi là thước đo hiệu suất tải quan trọng nhất.Do đó, Google kết hợp LCP vào tín hiệu xếp hạng trải nghiệm trang chính thức của mình cho tìm kiếm không phải trả tiền.

Trả lời-Tóm tắt đầu tiên

Thời gian hiển thị nội dung lớn nhất (LCP) là chỉ số Quan trọng về trang web cốt lõi, đo lường tốc độ tải trang được cảm nhận theo thời gian khi khối văn bản hoặc phần tử hình ảnh hiển thị lớn nhất trong khung nhìn kết thúc hiển thị.Điểm LCP đạt là 2,5 giây trở xuống cho ít nhất 75% số lượt truy cập trang trong dữ liệu trường người dùng thực (CrUX).Độ trễ LCP bao gồm bốn phần phụ riêng biệt: Thời gian đến byte đầu tiên (TTFB), Độ trễ tải tài nguyên, Thời lượng tải tài nguyên và Độ trễ kết xuất phần tử.Tối ưu hóa LCP yêu cầu tải trước nội dung chính, triển khai bộ nhớ đệm biên, nén hình ảnh sang định dạng WebP/AVIF và loại bỏ CSS và JavaScript chặn kết xuất.

Thang điểm xếp hạng LCP & Ngưỡng các chỉ số quan trọng về trang web cốt lõi

Để cung cấp trải nghiệm nhanh chóng và hấp dẫn cho người dùng, các trang web phải đáp ứng ngưỡng Core Web Vitals đã thiết lập của Google cho Thời gian hiển thị nội dung lớn nhất:

Để đạt được điểm đậu trong bài đánh giá Các chỉ số quan trọng về trang web, trang web phải đạt được điểm LCP trong danh mục Tốt ($\le 2,5\text{ giây}$) cho ít nhất 75% số lượt truy cập trang, được đánh giá trên các nhóm thuần tập trên máy tính để bàn và thiết bị di động trong dữ liệu thực tế.

Những phần tử DOM nào đủ điều kiện để đánh giá LCP?

Theo thông số kỹ thuật chính thức về Nội dung có nội dung lớn nhất của W3C, trình duyệt sẽ giám sát các phần tử DOM hiển thị cụ thể nằm trong khung nhìn ban đầu:

• Phần tử <img> tiêu chuẩn (bao gồm hình ảnh được hiển thị bên trong thẻ <picture> phản hồi).
• Các phần tử <image> được nhúng bên trong vùng chứa vectơ <svg>.
• Hình ảnh áp phích video (thuộc tính poster trên phần tử <video>).
• Các phần tử có hình nền CSS được tải thông qua hàm url().
• Vùng chứa HTML cấp khối chứa các nút văn bản hoặc phần tử văn bản nội tuyến con (chẳng hạn như <h1> đến <h6> tiêu đề, đoạn <p> hoặc khối <div>).

Giải cấu trúc LCP: Bốn phần phụ

Để chẩn đoán và tối ưu hóa một cách hiệu quả điểm số Thời gian hiển thị nội dung lớn nhất chậm, các kỹ sư hiệu suất chia độ trễ LCP thành bốn phần phụ riêng biệt:

1. Thời gian đến byte đầu tiên (TTFB): Thời gian trôi qua kể từ khi người dùng yêu cầu trang cho đến khi trình duyệt nhận được byte đầu tiên của phản hồi tài liệu HTML từ máy chủ.Mục tiêu: $< 800\text {ms} $ ($40%$ ngân sách LCP).
2. Độ trễ tải tài nguyên: Độ trễ tính từ thời điểm tài liệu HTML hoàn tất việc nhận byte phản hồi đến khi trình duyệt phát hiện và bắt đầu tìm nạp tài nguyên LCP (chẳng hạn như hình ảnh anh hùng).Mục tiêu: $< 200\text {ms} $ ($10%$ của ngân sách LCP).
3. Thời lượng tải tài nguyên: Khoảng thời gian cần thiết để trình duyệt tải xuống nội dung hình ảnh hoặc phông chữ LCP trên mạng.Mục tiêu: $< 800\text {ms} $ ($40%$ ngân sách LCP).
4. Độ trễ kết xuất phần tử: Khoảng thời gian từ khi tài nguyên LCP hoàn tất tải xuống đến khi trình duyệt hoàn tất tính toán bố cục và hiển thị phần tử lên màn hình.Mục tiêu: $< 200\text {ms} $ ($10%$ của ngân sách LCP).

Về mặt toán học, tổng độ trễ LCP là tổng của bốn phần phụ sau:

$$\text {LCP} = \text {TTFB} + \text{Độ trễ tải tài nguyên} + \text{Thời lượng tải tài nguyên} + \text{Độ trễ hiển thị phần tử}$$

Các kỹ thuật đã được chứng minh để tối ưu hóa LCP

1. Loại bỏ độ trễ tải tài nguyên: Thêm <link rel="preload" as="image" href="..."> hoặc fetchpriority="high" vào thẻ hình ảnh chính của bạn để trình duyệt bắt đầu tải xuống hình ảnh ngay lập tức trong quá trình phân tích cú pháp HTML.
2. Tối ưu hóa phản hồi của máy chủ (TTFB): Triển khai bộ nhớ đệm biên thông qua CDN, tối ưu hóa hiệu suất truy vấn cơ sở dữ liệu và sử dụng ghép kênh đẩy máy chủ HTTP/2 hoặc HTTP/3.
3. Nén & Hiện đại hóa Hình ảnh: Cung cấp hình ảnh chính bằng định dạng WebP hoặc AVIF hiện đại với kích thước srcset đáp ứng phù hợp với kích thước màn hình thiết bị di động và máy tính để bàn.
4. Giảm tài nguyên chặn hiển thị: Nội tuyến CSS quan trọng vào thẻ <head> và trì hoãn JavaScript không quan trọng bằng cách sử dụng thuộc tính tập lệnh defer hoặc async.
5. Tối ưu hóa tải phông chữ trên web: Sử dụng font-display: swap hoặc font-display: optional trong quy tắc CSS @font-face để đảm bảo các khối văn bản vẫn hiển thị ngay lập tức trong khi phông chữ web hoàn tất tải xuống qua mạng.

LCP so với Nội dung đầu tiên (FCP) so với Chỉ số tốc độ

Mặc dù LCP, FCP và Chỉ số tốc độ đều đo lường hiệu suất tải nhưng chúng nắm bắt các khía cạnh khác nhau của tiến trình tải trang:

• Số lần hiển thị nội dung đầu tiên (FCP): Đo lường thời điểm phần tử DOM đầu tiên (chẳng hạn như màu nền, vòng quay hoặc văn bản tiêu đề) hoàn tất hiển thị trên màn hình.
• Sơn nội dung lớn nhất (LCP): Đo lường thời điểm thành phần nội dung hình ảnh chính (biểu ngữ chính hoặc khối đoạn văn chính) hoàn tất hiển thị.
• Chỉ số tốc độ: Đo tốc độ lấp đầy khung nhìn của nội dung trực quan theo thời gian trong quá trình ghi tiến trình trực quan.

LCP được đánh giá cao nhất trong số các chỉ số tải trong thuật toán tính điểm Lighthouse của Google (hiện chiếm 25% tổng điểm hiệu suất) vì nó phù hợp nhất với nhận thức của người dùng thực về việc hoàn thành tải trang.

Giám sát LCP liên tục với SimpleOps

SimpleOps tự động hóa tính năng theo dõi Nội dung lớn nhất bằng cách thu thập các kết quả kiểm tra phòng thí nghiệm tổng hợp của Lighthouse và số liệu tập dữ liệu trường Báo cáo trải nghiệm người dùng Chrome (CrUX) trong một trang tổng quan giám sát thống nhất.SimpleOps gửi cảnh báo chủ động tức thì bất cứ khi nào LCP phân vị thứ 75 của trang web của bạn vi phạm ngân sách hiệu suất 2,5 giây, trao quyền cho nhóm của bạn để bảo vệ chuyển đổi và thứ hạng tìm kiếm.