[Khoe] Thành quả sau 6 tháng nỗ lự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

 

À hiểu rồi, anh quên mất em đang nói về Page Speed.

Cái đó khó em ơi. Anh cũng bị 300ms mà. Nhưng không phải là em cần 300ms để load cái css đó đâu. Mà em sẽ nhanh hơn "tối đa" được 300ms nếu em cải thiện được nó (Potential Savings thôi chứ không phải chắc chắn). Đây là điểm Mobile của anh (Desktop thì 99 - site này anh không cache)

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

Giỡn hoài em, không đo = máy của mình thì đo bằng gì?

Bản thân Page speed nó cũng tổng hợp từ nhiều nguồn và điểm nó tính là điểm trung bình trong 28 ngày. Giờ điểm mình đang thấp, mình sửa để tối ưu. Khi mình sửa xong thì mình vẫn phải test và đo "ngay tại thời điểm mình sửa" để biết việc sửa đó có tốt hay không chứ. Việc đo này là dựa trên thiết bị của chính mình để có căn cứ mà so sánh. Rồi sau đó Page speed nó sẽ chấm điểm lại.

 

@loyki thật ra thì PageSpeed cũng chỉ tương đối, chạy chục lần nó ra chục kết quả khác nhau, xê xích nhau chút đỉnh. Thằng Lighthouse còn tệ hơn, đang lần này điểm SEO 98, chạy lại phát nó báo điểm SEO còn 88, kéo xuống thì nó kêu ko load được file robots.txt. Chạy lại lần nữa lại 99

@firefox cái cú pháp CDN bác đưa giờ mình mới biết, để thử luôn . Vụ gom lại thành 1 file thì mình có biết nhưng thấy giải pháp đó hơi tốn công, để một time sau dễ quên khó bảo trì nên mình sẽ ưu tiên sau.

@money em đã hiểu vụ 300ms . Để em tiếp tục. Cuộc chiến giành >= 90 điểm trên mobile cũng nhiều cái hay ho anh ợ !