Chỉ số Largest Contentful Paint (LCP) báo cáo thời gian kết xuất của phần tử nội dung có kích cỡ lớn nhất (largest content element) hiển thị trong viewport (khung nhìn trình duyệt).
Core Web Vitals là một phần của yếu tố xếp hạng mới của Google: Trải nghiệm trang sẽ được triển khai vào năm 2021.
Nhưng yếu tố nào trên trang của bạn là LCP?
Core Web Vitals
Core Web Vitals đo tốc độ, tính tương tác và tính ổn định của một trang web.
LCP là thước đo mức độ nhanh chóng của nội dung hoặc phần tử chính của trang web hiển thị trên thiết bị. Nếu trang web của bạn được thiết lập với cấu hình Google Search Console, bạn có thể tìm hiểu xem Googlebot nghĩ gì về LCP của bạn, cũng như FID và CLS trong báo cáo Core Web Vitals.
LCP trên 4 giây là hoạt động kém
Nếu LCP của bạn trên 4 giây, nó sẽ được báo cáo là URL kém.
Nếu LCP của bạn kém như trong báo cáo GSC thì bạn nên tìm giải pháp fix ngay nó đi vì sẽ ảnh hưởng khá lớn đến website của bạn trong năm 2021.
Google sẽ cung cấp cho bạn các URL mẫu đại diện cho nguyên mẫu trang có vấn đề.Vì vậy, bước tiếp theo của bạn là đánh giá LCP của trang xem liệu có thể được cải thiện hay không. Để làm được điều đó, trước tiên bạn phải xác định phần tử HTML là LCP.Bạn có thể sử dụng Công cụ dành cho nhà phát triển của Chrome để thực hiện việc này.
Sử dụng Công cụ dành cho nhà phát triển trên Chrome để xác định LCP
Sử dụng Tab Performance để chạy và kiểm tra phần tử HTML nào là LCP
- Trên MacOS, bạn có thể mở Chrome Dev Tools trong Trình duyệt Chrome bằngCMD SHIFT C
- Hãy chắc chắn chọn loại thiết bị, bên dưới tôi đã chọn iPhone X, bạn cũng có thể chọn Responsive và đặt kích thước.
- Sau đó Click vàoTab Performancenhư hình bên dưới
Khi click vào mũi tên reload bạn chờ đợi 1 lát sẽ có thông tin LCP và một số thông tin hữu ích khác để bạn tối ưu website của mình
Bây giờ bạn có thể xác định vị trí phần tử HTML đang được đo lường bởi LCP
Khi xác định được LCP bạn có thể tối ưu chúng để không bị Google cảnh báo trong Google Webmaster tools nữa rồi. Cũng bằng công cụ này bạn cũng có thể xem được Cumulative Layout Shift CLS một cách đơn giản.
Nếu có bất cứ thắc mắc nào về Core Web Vitals bạn có thể để lại câu hỏi ở dưới phần bình luận, chúng tôi sẽ giải đáp thắc mắc của bạn sớm nhất có thể.
Xin cảm ơn.