[Khoe] Thành quả sau 6 tháng nỗ lực

Bon chen bỏ ra 1 ngày vọc Lighthouse và đây là kết quả

 

đỉnh rồi bác

 

Cũng lắt nhắt kinh, phải làm từng trang 1 và ko phải trang nào cũng được như thế

 

cls và lcp xanh thì bác chuẩn bị lên top cho xem

 

Đang thử đây bác, Lighthouse dễ ăn hơn cls và lcp nhiều

 

Spin bác dùng api bên nào vậy

 

spinrewriter.com

 

thank bác, e cũng dùng thằng này

 

Hóng bác Tony chia sẻ kết quả rank sau khi tối ưu lighthouse ạ

 

em xài wp bác, vì k phải coder nên em lựa chọn wp để tối ưu cho dễ

 

chưa thím ơi, Lighthouse thì xử khá nhanh, còn LCP với CLS để xanh được là chua lè chua lét. Site mình đang thử nghiệm lại xài boostrap với library khá nhiều thành ra mấy ngày rồi vẫn chưa xanh được, bù lại cũng có được mớ kn

 

boostrap, jquery, ... nhét mấy cái js xuống cuối cùng chỗ thẻ </html> khá hiệu quả đó em (anh đã dùng trên 1 số site từ khá lâu rồi, hiện giờ anh ko dùng boostrap/jquery nữa)
ngoài ra dùng mấy cái trick như bạn @quoc nguyen nói ở trên anh thấy hiệu quả đó (anh không làm các tricks đó vì site anh đủ nhanh rồi nhưng nhìn về mặt kỹ thuật thì OK)

 

Em đã nhét js xuống dưới hết rồi anh, nhưng css thì vẫn phải ở trên, nặng nhất là css của boostrap. Boostrap ver < 4 thì nó cho customize package chỉ lấy những gì mình xài nên nó nhẹ, còn em lại xài Boostrap 4 & 5 nên vẫn bị nặng. Nếu bỏ Boostrap thì khá mệt vì trình CSS của em chưa tự làm nổi responsive cho những trang phức tạp.

Trick load css của bạn @quoc nguyen em đã vọc nhiều (nó có trong tài liệu đề xuất của Lighthouse luôn), về cảm nhận mắt nhìn thì thấy nhanh hơn nhưng khi test trong Lighthouse / Page Speed lại cho điểm perfomance thấp hơn (khoảng 8-10 điểm). Ngoài ra trick này còn cho 1 hiệu ứng phụ: khi refresh nó load content trước, css sau nên ban đầu trang render ra content ko có css, sau khi css load xong thì page nó nháy 1 cái rồi apply css vô. Khoảng thời gian này dù nhanh như chớp mắt thôi nhưng gây cảm giá khá khó chịu.

Cái vòng tròn cuối cùng trong Lighthouse là PWA (Progressive Web App) cũng zui lắm, hôm nào quởn em chia sẻ cách làm cho nó xanh luôn

 

đúng em, ban đầu chưa có css thì nó load là HTML thuần túy không layout. Nếu không quá care về layout thì bỏ qua cái khó chịu đó đi

boostrap css anh dùng cái min thôi, gần 100KB và đúng là để trên header nhưng load khá nhanh. và nên cấu hình nén + cache css lại nữa.

nginx anh có dòng này:

Code:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
        add_header Cache-Control public;
    }

 

Em cũng có nén và cache luôn rồi anh. Như file boostrap.min.css gốc là 141kb, khi nó nén xong còn có 22.6kb và load mất 300ms vẫn khá lớn để đạt được mức xanh.

 

kkk đắng Anh thì download luôn boostrap.min.css về để server anh từ hồi năm nào không nhớ nữa Chắc 2015. Lúc đó có cỡ 100KB thôi.

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

@Tony Vu ủa mà sao em load đến 300ms lận nhỉ?
Bên anh nhiêu đây thôi (css và js anh tự host chứ không gọi từ cdn khác)

--- Double Post Merged, Oct 15, 2021 ---

À sorry em, cái hình trên là đã cache css và js rồi. Nhưng kể cả chưa cache thì bên anh vẫn load nhanh hơn em khá nhiều

 

@money anh nhanh hơn vì anh đang đo trên dev tool của Chrome, còn em đang đo trên PageSpeed. Nếu đo trên dev tool thì của em cũng dưới 100ms à anh.

 

cái này là thiết bị của a sao chính xác. đo pagespeed nó sẽ thống kê các khung điểm của mọi lượt truy cập trong 28 ngày.

 

đống đấy bác gom lại thành 1 file được, nếu xài cdn thì chơi kiểu này. Tiết kiệm được 1 tý nữa

Code:

https://cdn.jsdelivr.net/combine/npm/bootstrap@5/dist/css/bootstrap.min.css,npm/font-awesome@4/css/font-awesome.min.css,npm/bootstrap-material-design@4/dist/css/bootstrap-material-design.min.css,npm/bootstrap-cookie-alert@1/cookiealert.min.css