XIn chào các bạn, để đổi gió thì tuần này mình muốn chia sẻ với các bạn một video nói về kinh nghiệm cải thiện hiệu quả tải website trên trình duyệt.
Như các bạn làm website cũng biết nhiều kỹ thuật optimize như cấu hình server, bật cache, cấu hình load balancing, dùng CDN v.v… đòi hỏi nhiều thời gian, công sức và có kiến thức tốt về server. Tuy nhiên hôm nay mình sẽ chia sẻ với các bạn một kinh nghiệm optimize các thành phần trên HTML để tăng tốc độ render của trang, để trang web chạy “nhanh như chó”, lộn, nhanh như gió.
Trong video mình cũng share một plugin do chính mình viết, giúp áp dụng kỹ thuật ngay trong video này vào các website bằng WordPress.
Các bạn có thể xem các videos mình đăng vào chủ nhật hàng tuần ở channel này:
Trang Facebook cá nhân của mình:
Rất mong nhận được comment đóng góp ý kiến của các bạn.
Plugin cho WordPress ở đây nhé
https://wordpress.org/plugins/shins-pageload-magic/
cảm ơn anh plugin của anh + litespeed cache đúng là chạy ngon thật – cảm ơn bác nhé
Vòng vo méo hiểu cc gì hết
Chấm cái để còn học hỏi phương pháp của bác !
Cám ơn.
chào bạn, bạn có thể hướng dẫn các thủ thuật liên quan đến cache trên sever được không? hiện tại mình không phân biệt được và không nghĩ là mình đã dùng đủ các loại cache cho sever. cám ơn bạn rất nhiều về video.
Một vấn đề nữa của cách này, đó là phần text sử dụng custom web font (@font-face) sẽ bị biến mất rồi hiện lại (Flash of Unstlyed/Invisible Text). Web techsign.in cũng đang bị
Khi áp dụng cách này, webfont sẽ loads async, nên mặc định thì sẽ fallback về font của hệ thống. Khi webfont css được tải về, browser sẽ mất thời gian để render lại và lúc này text sẽ bị chớp nhá 1 lúc.
Trên các devices chậm thì vấn đề này sẽ khó chịu hơn (tùy số lượng font).
Để xử lý vấn đề này thì có thể dùng lib `FontFaceObserver`, căn bản là chờ font xử lý ok hết rồi mới apply style lại.
Xem chi tiết ở: https://www.filamentgroup.com/lab/font-events.html (cùng tác giả của loadCSS :D)
Rất cảm ơn bạn đã chia sẻ plugin này cho cộng đồng :D, mình cài thấy chạy mượt nhưng khi log out khỏi tài khoản web thì web ko tải được file style.css hay sao mà mất bố cục web luôn. ai giống mình không?
Video rất bổ ích 😀
Tuy nhiên trick này hình như có hạn chế trên Android native browser cũ do `onload` không work với `link` element, nên cần phải dùng javascript để workaround
Chủ yếu vẫn là người lập trình hiểu về cốt lõi về việc "CSS is a rendering blocking resource by default".
Bạn nào muốn tìm hiểu sâu hơn về vấn đề này có thể xem thêm thư viện loadCSS (https://github.com/filamentgroup/loadCSS).
Thư viện này đụng khá nhiều issues trong việc xử lý cross-browsers nên rất đáng tham khảo 🙂
Hay quá a ơi, em newbie
Anh ơi cho em xin link plugin
Hình như có cái quạt máy. Với lại cho thêm tí treble đi thím 😀
Còn một cách để tăng tốc nữa là bạn nào có điều kiện thì xài http2, modern browsers sẽ tải file parrallel, lúc đó không cần quá bận tâm đến việc nhiều file css/js hay là sprite css nữa.
mình check thử techsignin trên google speed test thấy đỏ lừ mà, chắc chỉ nó chỉ mang lại cảm giác "nhanh" chứ vẫn phải tải ảnh, js các thứ nên chậm
Chào Shin,
Website mình dùng wordpress & cài woocommerce để show sản phẩm. Nhưng mình debug thì thấy tốc độ load homepage lâu nhất liên quan đến xử lý php show list product. Shin có kinh nghiệm về hướng optimize vấn đề này ko Shin nhỉ?
Thanks
Cám ơn chú, nhờ chú mà trang anh load nhanh thật
– Admin Techsign.in – 😆