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

Cài addon page loading time trên chrome mà test em ạ. Test theo cảm giác ko chính xác. Load lage tầm 3s là ổn.

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

Anh chỉ cache ra file là xong. Không xài bất kỳ cái gì khác.

 

cache này có phải là tự cronjob hoặc xài script tương tự để tự tạo cache file html và sau đó trong script thì check file cache html này có tồn tại hay chưa để phản hồi cho users phải ko anh?

E cũng có ý định này, nhưng chưa làm vì nghĩ chạy cái task này cho posts và tags để tự mình cache ra file html ko biết có hiệu quả và chi phí thời gian tốn có tương xứng với kết quả hay ko? Vì sites e toàn tính bằng M posts và M tags thôi, nên hơi ngán vụ chủ động cache tương tự thế này.

 

Che ID Adsense lại đi bác!

 

Đúng rồi. Code có vài dòng là xong, em muốn biết tương xứng hay không thì làm thử là biết chứ gì. Cùng lắm thì mất 10 phút cuộc đời nếu thất bại.

Dùng lệnh df -i để biết em đang có bao nhiêu inodes trên server. Thường 1 file/folder/document/... sẽ chiếm 1 inode. Từ đó tính ra số file tối đa em có thể chứa (đương nhiên là phải tính dung lượng nữa). 1 site trung bình tầm 20M tags + post, mỗi tags/post lưu thành 1 file html thì 1 srever 4TB có thể chứa được khoảng 10 site như vậy.

Do site em đang đặt adsense --> khó mà giảm page loading time. Test nhanh/chậm thì phải bỏ ads ra.

DOMContentLoaded của em < 1s, nên nếu bỏ ads ra thì chắc load cũng khá nhanh.

 

A muốn Loading time giảm thì delay tất cả js(trừ jquery), delay cái là load mượt ngay

 

Delay nó hiện ads chậm lắm em, anh không muốn làm vậy.
Anh thấy 1 vài site nó tối ưu ads, đặt ads script theo kiểu async cũng khá hay mà lười tìm hiểu. Với anh thì site có ads mà content load xong trong vòng 2s, full page load gồm cả ads load trong 5-7s là ổn.

 

JS thì thêm defer vào, nó sẽ tải js nhưng ko execute ngay mà chờ html xong hết mới execute. Sẽ ko block render mà lại ko cần move js xuống cuối body.
CSS thì có 1 trick như này để load nhanh:
<link rel="preload" href="link_file.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />

 

Thanks a @money e sẽ nghiên cứu thêm vấn đề vào mấy sites tới, đoạn code cache này thì thực hiện nhanh, vấn đề cache chủ động để khi bots hoặc người vào site thì dữ liệu lấy từ cache sẽ lâu, như e hiện tại có thực hiện cache chủ động nhiều query lại (MySQL và ES) và lưu vào DB, để khi đó, số lượng query ít nhất có thể khi bots hay user truy cập. Để cache chủ động này thì thời gian hơi lâu, trung bình 1 site với tầm 2M posts và hơn 10M tags, script chạy multiprocessors rồi mà vẫn mất tầm 7-10 ngày.

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

Thanks bác @quoc nguyen , mình thường để link css ở đầu của phần head và trong debug phần Network thì file css được load đầu tiên trong các trình duyệt rồi, thêm lệnh này thì có tác dụng hơn gì ko ta?

 

Khác với JS khi browser nó down CSS thì nó sẽ ngừng hết mọi thứ khác, down xong file CSS rồi mới tính tiếp nên làm chậm trang. Cách bên trên giúp browser vừa down css vừa làm các việc khác.

 

ae nghiên cứu thằng thegioididong ấy, KPI của nó có phần tốc độ nên bọn nó có vài cách tối ưu rất hay. Mở Ctrl+U lên, thoạt nhìn sẽ tưởng rằng nó dùng công nghệ cùi bắp, sinh viên năm 3 viết, điểm speed thì không cao, nhưng khá là nhiều trick trong đấy rất đáng để học hỏi

 

Thanks bác @quoc nguyen , để thử nghiệm thêm option onload.

Ý bác @firefox là thegioididong sử dụng inline style css để giảm 1 request cho CSS và sử dụng async defer với Javascript nhằm giảm thời gian tải trang với users à?

 

dạ , ngoài ra còn các thứ linh tinh như image wh, lazyload, caching,... hoặc đơn giản là đập tiền vào mua server mạnh
Như cái hình của bác Nai post phía trên, nếu mình cần cái ảnh nhỏ nhơn kích thước thật thì làm thumb nhỏ thôi, kéo nguyên cái ảnh 1 bự về và không lazy nó sẽ kéo kha khá thời gian tải trang, vân vân và vân vân

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

vẫn lộ bác ơi, dòng nào có chữ xóa bớt vài ký tự đi

 

Hihi, quên để ý, bác @Nai

 

edit xóa cách mò đi bác, bác ây không onl nên chưa edit ảnh được. bác vẽ đường thế thì hươu chạy hết, hehe

 

Có bác nào giống mình LCP như trường hợp dưới ko?

LCP khi chạy với máy mình và mạng mình thì LCP ko bao giờ trên 1.5s (như trong hình là 1.3s).


Nhưng sau 28 ngày trong GSC thông số LCP trung bình là 2.6s (ko dưới 2.5s được, tức chưa được mức Good). Users site mình toàn cầu nên dĩ nhiên có những users mạng yếu (hoặc mobile yếu), nhưng mà yếu hơn cả mạng Việt Nam rất xa thì lạ quá. Chờ cả tháng để GSC cập nhật thông số mới mà vẫn chưa đạt mức Good nữa, hix.

Còn cách nào tối ưu LCP ko các bác?

Pê ếch: màn hình đầu tiên của mobile được tối ưu nên ảnh được đẩy xuống dưới màn hình thứ 2 và có lazyload rồi.