Cách rút gọn mã CSS/JS giúp cải thiện tốc độ tải web

Nhiều website bất động sản tải chậm không phải vì thiếu CDN hay hosting yếu, mà vì “gánh” quá nhiều CSS/JS: theme nặng, slider nặng, tracking chồng chéo, và cả những đoạn CSS/JS không còn dùng nhưng vẫn được tải ở mọi trang. Kết quả: trang mở lâu, cuộn giật, bấm filter trễ — đặc biệt trên mobile. Bài này Bdsweb kể theo micro-story rồi đi vào các bước tối ưu theo kiểu How-to: làm gì trước, làm gì sau để giảm tải CSS/JS mà không làm vỡ giao diện.

Một câu chuyện ngắn (rất thường gặp)

Một web dự án BĐS nhìn đẹp, nhưng mở trên điện thoại tầm trung thì “đơ” khi cuộn. Đo kiểm mới thấy: trang đang tải 2–3MB JS và gần 1MB CSS, trong đó có một nửa là thứ không dùng trên trang dự án. Chỉ cần rút gọn + trì hoãn tải đúng cách, thao tác trở nên mượt hơn rõ rệt. Đây là lý do tối ưu CSS/JS thường cho hiệu quả mạnh hơn bạn tưởng.

Để tối ưu đồng bộ hiệu năng (ảnh, cache, server, JS/CSS), bạn có thể tham khảo: Bảo mật & hiệu năng website bất động sản.

1) Trước khi rút gọn: đo đúng thứ cần đo

• INP: phản hồi khi bấm (JS nặng thường làm xấu INP)
• LCP: nội dung lớn nhất hiển thị (CSS/JS chặn render làm xấu LCP)
• CLS: bố cục nhảy (JS/CSS tải muộn dễ gây nhảy)

Mục tiêu của tối ưu CSS/JS không chỉ là “file nhỏ hơn”, mà là: render nhanh hơn và tương tác mượt hơn.

2) Rút gọn CSS: làm sao giảm mà không vỡ giao diện?

2.1 Minify CSS (rút gọn ký tự)

• Xoá khoảng trắng, comment
• Giảm kích thước file, tải nhanh hơn

2.2 Loại bỏ CSS không dùng (unused CSS) – hiệu quả lớn nhất

Theme thường mang CSS cho nhiều page template, nhưng web BĐS chỉ dùng một phần. Hãy:

• Rà CSS theo từng loại trang: trang chủ, listing, dự án, blog
• Loại phần không dùng hoặc tách theo trang

2.3 Tách CSS theo trang (page-level CSS)

• Trang listing cần CSS card/filter
• Trang dự án cần CSS gallery/mặt bằng
• Blog cần CSS typography

Không cần tải tất cả ở mọi trang.

2.4 Critical CSS (CSS “cần ngay” cho phần đầu trang)

• Inline phần CSS tối thiểu để hiển thị above-the-fold
• Phần CSS còn lại tải sau (không chặn render)

3) Rút gọn JS: giảm “độ nặng” và giảm “độ trễ”

3.1 Minify JS

• Rút gọn ký tự, giảm dung lượng tải
• Giữ nguyên logic, ít rủi ro

3.2 Defer/Async cho script không quan trọng

• defer: tải song song, chạy sau khi HTML parse xong (phù hợp đa số script)
• async: tải và chạy ngay khi xong (dễ gây lệch thứ tự, dùng cẩn trọng)

3.3 Code splitting (tách JS theo tính năng)

Đây là “đòn mạnh” cho web BĐS:

• JS filter/search chỉ tải ở listing
• JS gallery/lightbox chỉ tải ở trang dự án
• JS map chỉ tải khi người dùng bật map

3.4 Trì hoãn script bên thứ ba (third-party)

• Chat, heatmap, widget… nên trì hoãn
• Ưu tiên tải trang và hiển thị nội dung trước

3.5 Loại bỏ thư viện nặng và trùng lặp

• Tránh dùng 2 thư viện slider cùng lúc
• Chọn 1 thư viện nhẹ và dùng nhất quán
• Gỡ những script “cài rồi để đó”

4) Tối ưu theo từng loại trang web BĐS (đúng chỗ, đúng thứ tự)

4.1 Trang chủ

• Giảm slider nặng, hạn chế animation không cần thiết
• Critical CSS cho hero + CTA
• Trì hoãn chat/heatmap

4.2 Trang listing (danh sách dự án)

• JS lọc/sort phải tối ưu, tránh render lại quá nhiều
• Map chỉ tải khi bật
• Giảm số thư viện UI

4.3 Trang chi tiết dự án

• Gallery/lightbox tách riêng, chỉ tải khi cần
• Video không autoplay
• Chỉ giữ script phục vụ CTA/form

4.4 Blog

• Giữ typography nhẹ
• Tránh nhúng quá nhiều widget gây nặng trang

5) “Đừng tối ưu mù”: kiểm tra 6 điểm sau mỗi lần rút gọn

• Giao diện có vỡ không? (desktop + mobile)
• CTA và form còn hoạt động không?
• Filter/search có lỗi không?
• Tracking cơ bản có chạy không? (submit form, click-to-call)
• INP có cải thiện không?
• LCP/CLS có tốt hơn không?

6) 9 lỗi thường gặp khi rút gọn CSS/JS

• Xoá nhầm CSS đang dùng (vỡ layout)
• Gộp/minify sai thứ tự JS (lỗi chức năng)
• Đặt async bừa khiến script chạy sai thứ tự
• Không version file → cache giữ bản cũ, giao diện lỗi
• Không tách script theo trang nên vẫn tải “cả bộ”
• Giữ quá nhiều tracking/heatmap cùng lúc
• Map tải mặc định gây nặng
• Không test mobile 4G
• Không có kế hoạch rollback khi deploy

Checklist rút gọn CSS/JS cho website bất động sản

• [ ] Minify CSS/JS
• [ ] Loại bỏ unused CSS
• [ ] Tách CSS/JS theo trang (listing, dự án, blog)
• [ ] Áp dụng critical CSS cho above-the-fold
• [ ] Defer script không quan trọng, async dùng có kiểm soát
• [ ] Trì hoãn third-party scripts (chat/heatmap/widget)
• [ ] Map/gallery chỉ tải khi cần
• [ ] Version file để tránh lỗi cache sau cập nhật
• [ ] Đo INP/LCP/CLS trước & sau, test mobile

Rút gọn CSS/JS là một trong những cách nhanh nhất để làm website BĐS “mượt” hơn trên mobile: giảm render-blocking, giảm script thừa và tách đúng theo trang. Hãy bắt đầu bằng minify, rồi ưu tiên loại bỏ unused CSS, trì hoãn third-party scripts và chỉ tải map/gallery khi cần. Đừng quên đo lại INP/LCP/CLS sau mỗi đợt tối ưu để chắc chắn bạn đang cải thiện thật.