Tư vấn về tối ưu Largest Contentful Paint (LCP)

Chào ae,

Cả tuần nay mình mò mẩn và fix lỗi để giảm giá trị LCP, nhưng vẫn chưa ổn. Ae có thể chia sẻ tí kinh nghiệm tối ưu LCP ko?

Hiện tại, mình có site lên tốt và muốn tối ưu LCP chi site này trên mobile (vì desktop thì giá trị này good).
Tài liệu mình tham khảo: https://web.dev/optimize-lcp/

Chỉ số LCP với mobile hiện tại theo Google Search Console thuộc dạng "Cần cải thiện", cụ thể là hơn 2.5s


Theo PageSpeed Insights thì



Như thế, tạm kết luận site mình có thời gian phản hồi quá chậm và cần tối ưu ảnh, mình chưa thể dùng webp vì lượng ảnh cũng nhiều nên thực hiện việc này rất tốn thời gian. Do đó, mình tập trung tìm hiểu tối ưu tốc độ phản hồi trang web.

Thông tin sơ lược về web này:
1. Server Hetzner đặt tại Finland.
2. Mình đã cấu hình Rules trên Cloudflare để thực hiện page cache 7 ngày cho các html page và 30 days cho các static files (css, js, images,...), cụ thể:

Code:

Browser Cache TTL: 8 days, Cache Level: Cache Everything, Edge Cache TTL: 7 days

3. Trong Cloudflare, tại chức năng Speed, mình đã bật hết các chức năng có thể, trừ 2 tính năng: Polish và Mirage.
4. Về code, trước khi chạy production, mình bật chức năng debug của CodeIgniter thì tốc độ xử lý chỉ trong khoảng 200-300ms, nhưng bây giờ lượng bots lớn và người dùng nhiều hơn thì ko biết giá trị tăng lên ở mức nào do mình ko thể bật debug của CodeIgniter lúc này.

Mình đang tìm hiểu Workers của Cloudflare vì mình mong muốn cache html page trước khi người dùng và bots vào site luôn, khi đó bots hay người dùng vào site thì được phản hồi cached html nên chắc chắn sẽ nhanh hơn.

Nhờ ae tư vấn mình cần nghiên cứu gì thêm nữa để tối ưu giá trị LCP này.

Xin cám ơn ae,

 

Tốt nhất là bỏ featured image(ảnh đầu bài viết) hoặc lazy nó(lưu ý lazy thì nên để height mặc định của class bên ngoài kẻo ảnh hưởng tới CLS)

 

chắc site bác dùng nhiều js với ảnh, chứ site em có vài file css với 1-2 file svg, ảnh nhiều thì lazyload, chả bao giờ để ý cái này ấy

 

Ảnh ở phần FCP thì mình có và ko bỏ được, còn lazy-load thì mình có thể hiện ở những phần dưới màn hình hiển thị đầu tiên rồi.

 

LCP cũng chỉ tính ở màn hình đầu tiên, bác tối ưu mấy cái sau cũng vô ích

 

Bạn có nhầm FCP và LCP ko vậy? Nội dung 1 trang của mình tương đối dài, scroll chuột hơn gấp 6-10 lần màn hình hiển thị đầu tiên.

 

ko nhầm đâu bác, FCP hay LCP đều tính ở màn hình đầu tiên

 

bé @loyki nói quá chuẩn rồi, em ko làm như vậy thì ko cải thiện dc LCP đâu.

Hoặc sửa theme lại, cho 1 phần text lên đầu tiên, tăng độ cao header lên (chỉnh sao cho đẹp là được) --> mục đích chính cũng là cho cái ảnh đầu tiên nó lọt ra khỏi màn hình above the fold thôi.

 

Nội dung 1 trang của e dài, scroll chuột thì phải hơn 6-10 lần nội dung màn hình đầu tiên. Nên e tưởng LCP nó là phần nội dung dài ở dưới, ko tính cái ảnh ở màn hình đầu tiên.

Thanks anh, để e nghiên cứu thêm text thế nào để cái ảnh ở màn hình đầu tiên xuống phía dưới.

 

Em cho nó lazy load cái ảnh đó + set height cho nó như bé @loyki kia nói là cách nhanh nhất.

Còn em muốn convert tốt hơn (như tăng click rate chẳng hạn) thì làm như cách anh nói và đặt 1 cái ads ở phần header hoặc gần cái đoạn text mà em dự định đưa lên trên.

 

Lazy-load cái ảnh ở màn hình đầu tiên hở anh? Ôi, e tưởng lazy-load thì chỉ áp dụng cho những ảnh ở màn hình thứ 2 trở đi Thanks anh, làm cái này nhanh

 

đã lazy thì lazy all images cho khỏe, em lại còn đi nghe ông Google bảo đừng lazy "những cái ảnh đầu tiên" kkk

--- Double Post Merged, Oct 9, 2021, Original Post Date: Oct 9, 2021 ---

Đó giờ anh em auto vẫn bảo nhau là đừng có nghe G rồi mà

 

Thanks anh @money

Diệu kỳ quá, chỉ với việc thêm lazy-load image ở màn hình đầu tiên, giảm được vài trăm ms.


So sánh với ko có lazy-load image ở màn hình đầu tiên

 

Tuyệt vời rồi bác. Nhưng nếu bác có ảnh đầu tiên dung lượng lớn thì LCP vẫn cao đó, bác thêm thẻ preload cho image đầu tiên cho chắc nữa, sau này đỡ tối ưu ảnh

 

Thanks bác @loyki , mình mới đọc lại tài liệu về preload https://web.dev/preload-critical-assets/ và thêm preload cái ảnh tại màn hình đầu tiên, tốc độ cái thiện hơn tí, có lẽ vì trước đó mặc định trình duyệt load tài nguyên từ trên xuống theo thứ tự nên mấy .js được load trước cái ảnh ở màn hình đầu tiên và làm chậm LCP.

 

@command hehe cái tội đi nghe lời Google =))

 

Hix, 5 ngày đầu tuần đọc cả khối tài liệu với mục đích tối ưu LCP và không có hiệu quả gì, chỉ trong buổi chiều nay nhờ bác @loyki và anh @money mà điều chỉnh lại code và LCP của nhiều pages test với PageSpeed Insights giờ đã đẹp rồi.



Các bác @loyki và @money hay ae khác có chiêu gì để tổng điểm của trang mobile trên PageSpeed Insights đạt mức xanh ko? Tức trên 90 điểm ấy

 

share e cách lazy load với preload cái gì đấy với, site e cũng bị mà e ko biết tối ưu mấy cái speed này =))

 

Bài viết này hướng dẫn cụ thể về lazy load images https://web.dev/browser-level-image-lazy-loading/ bác tham khảo nhé

 

Check pagespeed rồi thấy lỗi nào thì fix lỗi đó thôi bác