Largest Contentful Paint (LCP): Là gì và cách cải thiện

Largest Contentful Paint là gì?

Largest Contentful Paint (LCP) là một chỉ số hiệu suất web cốt lõi, đo thời gian cần thiết để phần nội dung hiển thị lớn nhất (thường là hình ảnh, video hoặc khối văn bản) hiển thị đầy đủ trên màn hình người dùng.

LCP là một trong ba Core Web Vitals mà Google sử dụng để đánh giá hiệu suất website. Hai chỉ số còn lại là:

• First Input Delay (FID): Đo tốc độ trang phản hồi khi người dùng tương tác.
• Cumulative Layout Shift (CLS): Đo mức độ bố cục trang bị xê dịch ngoài ý muốn trong khi tải.

Ba chỉ số này có mối liên hệ với nhau. Ví dụ, LCP cao có thể làm chậm các tương tác của người dùng, dẫn đến FID cao, vì trình duyệt có thể chưa phản hồi cho đến khi phần tử lớn nhất tải xong.

Lưu ý

Vào tháng 3 năm 2024, Google đã thay thế FID bằng Interaction to Next Paint (INP).

Largest Contentful Paint và First Contentful Paint khác nhau thế nào

LCP và First Contentful Paint (FCP) là hai chỉ số rất khác nhau.

LCP đo thời gian cần thiết để phần tử lớn nhất tải xong.

FCP đo thời gian cần thiết để phần tử hiển thị đầu tiên xuất hiện, bất kể kích thước.

LCP đáng tin cậy hơn khi xác định thời điểm một trang sẵn sàng cho tương tác. FCP có thể gây hiểu lầm vì phần tử xuất hiện đầu tiên có thể chỉ là chi tiết nhỏ, chẳng hạn biểu tượng nhỏ hoặc thẻ hình ảnh trống, chứ không phải nội dung chính.

Vì sao LCP quan trọng đối với hiệu suất website?

LCP quan trọng đối với hiệu suất website vì người dùng kỳ vọng website tải nhanh. Cải thiện LCP có thể giúp trang có cảm giác nhanh hơn và sẵn sàng cho tương tác sớm hơn.

Điểm LCP tốt hơn có thể giúp bạn đạt được:

• Thứ hạng cao hơn: LCP là một Core Web Vital, vì vậy cải thiện chỉ số này có thể giúp Google xếp hạng cao hơn
• Bounce Rate thấp hơn: Thời gian tải nhanh hơn giúp giảm khả năng người dùng rời đi sớm
• Conversion Rate cao hơn: Website nhanh hơn thường cải thiện kết quả chuyển đổi

Lưu ý

Chỉ cải thiện LCP không đảm bảo bạn sẽ đạt được những lợi ích này. Nhiều yếu tố ảnh hưởng đến thứ hạng, Bounce Rate và chuyển đổi.

Điểm LCP nào được xem là tốt?

Điểm LCP tốt là từ 2,5 giây trở xuống, đáp ứng tiêu chuẩn Core Web Vitals của Google.

Điểm LCP từ 2,5 đến 4 giây cho thấy cần cải thiện.

Điểm LCP trên 4 giây được xem là kém và cần có những thay đổi đáng kể.

Nguyên nhân nào khiến điểm LCP thấp?

Có bốn yếu tố chính có thể làm giảm điểm LCP:

• Thời gian phản hồi của máy chủ chậm: Phản hồi chậm từ máy chủ làm trì hoãn quá trình Rendering của nội dung lớn nhất
• JavaScript và CSS chặn Rendering: Một số thành phần trên trang, chẳng hạn như script và stylesheet, có thể trì hoãn thời điểm nội dung trang xuất hiện
• Thời gian tải tài nguyên chậm: Hình ảnh có độ phân giải cao và dung lượng lớn trên màn hình đầu tiên có thể làm chậm quá trình hiển thị nội dung chính
• Rendering phía client: Rendering phía client nặng, thường liên quan đến các tệp JavaScript lớn, có thể làm chậm thời gian tải ban đầu

Cách đo Largest Contentful Paint

Bạn có thể đo Largest Contentful Paint bằng các công cụ sau:

Công cụ Site Audit của Semrush

Chạy công cụ miễn phí của chúng tôi kiểm tra SEO website để nhanh chóng phát hiện các vấn đề về LCP.

Để đo LCP trên mọi trang của website, hãy dùng Semrush Site Audit.

Nhập domain của bạn, sau đó nhấp vào “Start Audit.”

Bạn có thể tùy chỉnh cài đặt kiểm tra bằng cách giới hạn số trang được kiểm tra. Công cụ kiểm tra Core Web Vitals trên 10 trang và bạn có thể chọn những trang cần kiểm tra.

Bạn cũng có thể chọn user agent, loại trừ URL cụ thể và áp dụng các bộ lọc khác.

Trong “Crawler settings,” hãy chọn phân tích phiên bản desktop hay mobile của website. Bạn có thể chọn crawler desktop hoặc mobile của Google, hoặc crawler của Semrush.

Sự khác biệt giữa thiết kế desktop và mobile của website có thể khiến dữ liệu thu được chênh lệch đôi chút.

Trong hầu hết trường hợp, hãy giữ nguyên cài đặt mặc định và nhấp vào “Start Site Audit.”

Sau khi Crawling, hãy mở báo cáo được tạo và nhấp vào “View details” trong mục “Core Web Vitals”.

Cuộn xuống mục “Metrics” để xem điểm LCP và các đề xuất cải thiện.

Google PageSpeed Insights

Truy cập PageSpeed Insights, nhập URL bạn muốn kiểm tra rồi nhấp vào “Analyze.”

Khi báo cáo xuất hiện, hãy tìm điểm LCP trong mục “Core Web Vitals assessment”.

Chuyển đổi giữa báo cáo mobile và desktop để xem LCP khác nhau thế nào trên hai phiên bản website.

PageSpeed Insights sẽ đưa ra các đề xuất phù hợp tùy theo loại báo cáo bạn xem.

Google Lighthouse

Google Lighthouse là công cụ mã nguồn mở miễn phí có thể giúp cải thiện hiệu suất website.

Cài đặt tiện ích, sau đó truy cập trang web, nhấp vào biểu tượng tiện ích rồi chọn “Generate report.”

Lighthouse sẽ phân tích trang và hiển thị báo cáo chi tiết. Bạn có thể tìm điểm LCP trong mục “Metrics”.

Bạn cũng có thể mở Lighthouse qua Chrome Dev Tools bằng cách nhấp chuột phải vào trang, chọn “Inspect,” nhấp vào “>>” ở bên phải rồi chọn “Lighthouse.”

Cách khắc phục vấn đề Largest Contentful Paint: 12 chiến lược

Nếu báo cáo ở bước trước cho thấy có vấn đề với LCP, hãy áp dụng các kỹ thuật sau để khắc phục.

1. Xác định phần tử LCP

Xác định phần tử LCP trên trang bạn cần cải thiện.

Sử dụng công cụ PageSpeed Insights để tìm phần tử này.

Nhập URL của trang và nhấp vào “Analyze.”

Sau khi công cụ tạo báo cáo, hãy cuộn đến mục “Diagnostics” rồi nhấp vào “Largest Contentful Paint element.”

Công cụ sẽ hiển thị phần tử LCP.

Phần tử LCP khác nhau tùy từng trang. Đôi khi đó là tiêu đề hoặc đoạn văn; đôi khi là hình ảnh hoặc ảnh poster của video.

Khi biết phần tử LCP, bạn có thể chọn cách tối ưu phù hợp.

2. Tối ưu hình ảnh

Hình ảnh có kích thước lớn, độ phân giải cao có thể tải chậm và ảnh hưởng đến LCP.

Thay đổi kích thước và nén hình ảnh bằng các công cụ nén ảnh trực tuyến như https://kraken.io/ Kraken hoặc Optimizilla.

Hãy cân nhắc dùng định dạng thân thiện với hiệu suất hơn như WebP. Định dạng này có thể giúp hình ảnh nhỏ hơn PNG hoặc JPG mà ít làm giảm chất lượng.

3. Tối ưu phông chữ

Trước khi văn bản xuất hiện trên trang, phông chữ được chọn cần tải xong.

Phông chữ bạn chọn và cách phân phối có thể ảnh hưởng đến LCP nếu phần tử LCP là văn bản.

Nếu phông chữ gây ra vấn đề với LCP, hãy thử các mẹo sau:

• Sử dụng phông chữ hệ thống không cần tải xuống
• Cân nhắc tự lưu trữ phông chữ để tránh các yêu cầu bên ngoài

Lưu ý

Hãy thử cả phông chữ tự lưu trữ lẫn phông chữ bên ngoài để xem loại nào hoạt động tốt hơn.

• Tạo các phông chữ subset để giảm kích thước tệp và tăng tốc độ tải
• Sử dụng “font-display: optional” để trình duyệt có thể hiển thị phông chữ dự phòng nếu phông chữ tùy chỉnh chưa tải xong

Lưu ý

Nhìn chung, các mẹo trên cũng là những thực hành tốt giúp cải thiện hiệu suất website.

4. Rút gọn tệp JavaScript, CSS và HTML

Rút gọn tệp JavaScript, CSS và HTML bằng cách xóa các dòng ngắt, khoảng trắng và chú thích không cần thiết.

Việc này giúp giảm kích thước tệp và tăng tốc độ tải.

Hãy sử dụng công cụ rút gọn code trực tuyến hoặc plugin như Minifier nếu bạn sử dụng hệ thống quản lý nội dung.

5. Xóa code JavaScript và CSS chặn Rendering

Các tài nguyên như code JavaScript và CSS có thể chặn quá trình Rendering trang, vì trình duyệt của người dùng cần tải các tệp này trước khi hiển thị trang.

Xác định các tài nguyên chặn Rendering bằng Semrush Site Audit hoặc các phương pháp tương tự.

Sau đó, xóa code không cần thiết.

Nếu script hoặc stylesheet không cần thiết cho Rendering ban đầu, hãy tải chúng sau.

6. Trì hoãn CSS không thiết yếu

Chia CSS thành hai nhóm: thiết yếu và không thiết yếu.

CSS thiết yếu định dạng nội dung hiển thị ngay khi trang tải xong (nội dung trong màn hình đầu tiên).

CSS không thiết yếu định dạng nội dung xuất hiện bên dưới màn hình đầu tiên.

Vì nội dung bên dưới màn hình đầu tiên không hiển thị ngay lập tức, bạn có thể trì hoãn CSS của nội dung đó. Trước tiên, chỉ tải CSS thiết yếu, sau đó tải CSS không thiết yếu khi nội dung quan trọng trong màn hình đầu tiên đã hiển thị.

7. Dùng tính năng tải trước cho tài nguyên thiết yếu

Tính năng tải trước yêu cầu trình duyệt ưu tiên và tải sớm những tài nguyên được chỉ định. Các tài nguyên này sẽ nằm trong bộ nhớ đệm của trình duyệt để sẵn sàng sử dụng khi cần.

Bằng cách tải trước các tài nguyên thiết yếu—chẳng hạn như CSS, phông chữ và hình ảnh trong màn hình đầu tiên—bạn có thể giảm độ trễ và cải thiện điểm LCP.

8. Nâng cấp dịch vụ lưu trữ web

Nâng cấp dịch vụ lưu trữ web có thể cải thiện thời gian phản hồi của máy chủ, từ đó nâng điểm LCP.

Nhiều website sử dụng dịch vụ lưu trữ dùng chung, trong đó nhiều trang web cùng sử dụng một máy chủ.

traffic tăng cao trên các website khác dùng chung máy chủ có thể làm chậm hiệu suất trang web của bạn.

Để đạt hiệu suất tối ưu, hãy chuyển sang dịch vụ lưu trữ riêng từ nhà cung cấp uy tín.

9. Bật bộ nhớ đệm trang

Bộ nhớ đệm lưu trữ dữ liệu tạm thời (gọi là “cache”), giúp những lần tải trang tiếp theo nhanh hơn.

Bộ nhớ đệm trang lưu bản sao HTML tĩnh của một trang sau lần tải đầu tiên, giảm các truy vấn cơ sở dữ liệu lặp lại truy vấn.

Cách này phù hợp nhất với những trang web không phụ thuộc vào nội dung động. Nếu trang của bạn không thường xuyên thay đổi, bộ nhớ đệm trang có thể giúp rút ngắn thời gian tải và cải thiện LCP.

10. Sử dụng mạng phân phối nội dung

Mạng phân phối nội dung (CDN) lưu bộ nhớ đệm nội dung trang web trên nhiều máy chủ khắp thế giới.

Khi người dùng yêu cầu truy cập trang của bạn, một máy chủ ở gần họ sẽ phân phối nội dung, giúp giảm độ trễ.

Một số dịch vụ CDN phổ biến gồm:

• Cloudflare
• Akamai
• KeyCDN

11. Hạn chế Rendering phía client

Rendering phía client sử dụng JavaScript trong trình duyệt để hiển thị nội dung. Thêm quá nhiều JavaScript có thể làm chậm quá trình Rendering và ảnh hưởng đến điểm LCP.

Để cải thiện hiệu suất, hãy giảm lượng JavaScript hoặc nén và rút gọn mã.

Hãy cân nhắc Rendering phía server hoặc một cách tiếp cận kết hợp để xử lý nội dung hiệu quả hơn.

12. Tránh dùng tính năng tải chậm cho hình ảnh trong màn hình đầu tiên

Tính năng tải chậm trì hoãn việc tải hình ảnh cho đến khi người dùng cuộn đến chúng.

Dù cách này có thể cải thiện tốc độ trang nói chung, nhưng có thể làm giảm LCP nếu phần tử LCP là hình ảnh trong màn hình đầu tiên.

Nếu trình duyệt trì hoãn việc tải phần tử quan trọng này, LCP có thể kém đi.

Chỉ áp dụng tính năng tải chậm cho các phần tử bên dưới màn hình đầu tiên.

Tối ưu LCP để khai thác tối đa tiềm năng website của bạn

Tối ưu LCP phù hợp với các nguyên tắc về trải nghiệm trang của Google và cải thiện mức độ hài lòng của người dùng. LCP tốt hơn cũng có thể giúp cải thiện thứ hạng trong kết quả tìm kiếm.

Kiểm tra trang web của bạn để tìm các vấn đề về LCP bằng bản kiểm tra SEO miễn phí. Sau đó, áp dụng các kỹ thuật trong hướng dẫn này để cải thiện thêm điểm LCP của bạn.