LCP

LCP là gì

LCP (Largest Contentful Paint) là chỉ số đo lường thời gian cần thiết để phần tử nội dung lớn nhất (như hình ảnh, video hoặc khối văn bản) hiển thị trong khung nhìn (viewport).

LCP phản ánh tốc độ tải trang theo cảm nhận thực tế của người dùng, cho biết khi nào nội dung chính của Mini App đã sẵn sàng để sử dụng.

Điểm LCP tốt là bao nhiêu?

Để có thể mang lại trải nghiệm tốt cho người dùng, các Mini App nên đạt được điểm số LCP là 2,5 giây trở xuống.

Cách tính LCP

LCP sẽ được tự động tính khi mở một Mini App. Bạn có thể sử dụng các công cụ có sẵn như Lighthouse để tham khảo chỉ số Lighthouse, tuy nhiên các công cụ đó chỉ mang giá trị tham khảo để giúp bạn cải thiện hiệu suất, các thông số giữa các công cụ đó và trải nghiệm thực tế khi mở Mini App sẽ có thể khác nhau. Ngoài ra do Mini App có đặc thù là được hiển thị trên V-App và có các màn hình Consent, nên việc tính toán sẽ được thay đổi so với Google Web Vitals cho phù hợp với nghiệp vụ của Mini App.

Những phần tử nào được xem xét?

Các loại phần tử được xem xét cho LCP là: img, svg, video, các thẻ chứa nội dụng văn bản và ảnh nền (background image).

Một số phần tử có thể coi là "không có nội dung" sẽ không được tính LCP như:

• Các phần tử có độ mờ (opacity) bằng 0, không hiển thị với người dùng
• Các phần tử có kích thước chiều rộng (width) * chiều dài (height) bằng 0
• Các phần tử bao phủ toàn bộ khung nhìn, có thể được coi là ảnh nền thay vì nội dung

Khi nào LCP được gửi

Do nội dung của Mini App sẽ được hiển thị theo giai đoạn, tuỳ thuộc vào logic và cách gọi API của từng app.

Để có thể đáp ứng được sự thay đổi này, Mini App Framework sẽ luôn lắng nghe sự thay đổi nội dung của trang nhưng vẫn đảm bảo không ảnh hưởng hiệu suất của Mini App. Một phần tử chỉ có thể được coi là phần tử nội dung lớn nhất sau khi phần tử đó hiển thị và người dùng có thể nhìn thấy, bất kỳ khi nào một nội dung mới được tải sẽ được dùng để so sánh với phần tử lớn nhất trước đó.

Nếu phần tử nội dung lớn nhất bị xoá khỏi khung nhìn (view port) hoặc thậm chí là khỏi DOM, thì phần tử đó vẫn là phần tử nội dung lớn nhất, trừ phi một phần tử lớn hơn được hiển thị.

Mini App sẽ ngừng theo dõi các phần tử mới ngay khi người dùng tương tác với trang (thông qua thao tác nhấn hoặc chuyển trang), vì hoạt động tương tác của người dùng thường thay đổi nội dung hiển thị với người dùng.

Lưu ý: Cách tính LCP vẫn sẽ luôn được cập nhật để có thể đảm bảo tính chính xác, phù hợp với nghiệp vụ của Mini App và đảm bảo được trải nghiệm của người dùng.

Cách xem LCP

Để có thể xem được LCP trên V-App, bạn có thể vào DevAssistant, chọn phiên bản của Mini App mà bạn muốn kiểm tra.

Nhấn vào Option Menu (góc trên cùng bên phải). Chọn Enable Debugging.

Xem trên Console

Vào mục Console, bạn có thể thấy LCP được hiển thị, một vài trường hợp bạn cần có tương tác như click vào một phần tử nào đó mới thấy được LCP.

Có nhiều thông tin được log ra, tuy nhiên bạn có thể tập trung vào các giá trị của:

• consent_time: thời gian hiển thị Consent, sẽ không có nếu Mini App không có Consent.
• element: phần tử được tính LCP
• value: giá trị của LCP
• xpath: xpath của phần tử tính LCP, bạn có thể dùng giá trị này để query tới phần tử đó bằng javascript

Xem trên Performance

Trong Console có thể có nhiều log từ phía Mini App hoặc System, dẫn đến bạn có thể khó tìm log của LCP. Để có thể theo dõi thêm nhiều thông tin hiệu suất khác bao gồm LCP, bạn có thể vào tab Performance.

Bạn cũng có thể nhấn vào View Small để có thể thao tác trên Mini App mà không bị nội dung của Debug che mất.

Cách cải thiện LCP

• Đảm bảo tài nguyên ảnh hưởng tới LCP bắt đầu tải sớm nhất trong Mini App.
• Nếu các phần tử có nội dung lớn và được lấy từ API, bạn nên ưu tiên load API này càng sớm càng tốt.
• Hạn chế Consent ở trang đầu tiên, mặc dù Mini App sẽ không tính Consent time vào trong LCP, tuy nhiên việc tính toán LCP cũng có thể bị ảnh hưởng, và quá trình lấy auth code + exchange token sau đó mới gọi API để hiển thị App cũng sẽ làm điểm LCP và trải nghiệm người dùng không tốt.
• Nếu dữ liệu không cần thông tin của user, bạn có thể load trước thành phần này thay vì đợi thao tác liên quan tới Consent (lấy auth code, exchange token).
• Tối ưu hoá BE để các API trả về nội dung hiển thị nhanh nhất có thể.
• Tối ưu hoá hình ảnh, giảm kích thước ảnh (sử dụng các công cụ như TinyPNG), sử dụng CDN và các định dạng nén ảnh như WebP, AVIF,...
• Sử dụng rel=preload, rel=preconnect và rel=dns-prefetch để có thể thiết lập kết nối tới các tài nguyên càng sớm càng tốt.
• Hạn chế load font và CSS không cần thiết, ưu tiên sử dụng font Inter giống V-App để tránh việc tải lại Font.
• Thường xuyên theo dõi LCP để đảm bảo hiệu suất luôn ở mức ổn định.