Categories Tối ưu CSS

Bạn có thể bỏ gộp & minify CSS trong WordPress nếu muốn

Tính năng gộp CSS từng rất quan trọng trong tăng tốc website, công dụng chính của nó là giảm số lượng kết nối (có thể lên đến 20 – 30), và có thể là minify (giảm thiểu dung lượng) nữa khi cần.

Gộp CSS là gì? Gộp/Combine CSS là tính năng phổ biến trong các plugin cache như LiteSpeed cache, Swift Performance, hay WP Rocket hoặc proxy nổi tiếng Cloudflare. Cũng có plugin miễn phí chuyên biệt làm việc này rất tốt như Autoptimize. Nhiệm vụ chính của gộp file là nó gom tất cả các file CSS trên trang và tổng hợp lại thành một file CSS duy nhất.

Minify CSS là gì? Minify CSS là biện pháp loại bỏ khoảng trống, các ký tự dư thừa trong file CSS (ví dụ các chú thích). Tuy nhiên công dụng tăng tốc của nó rất nhỏ (tổng thể thường chỉ giảm được vài KB so với các file gốc là nhiều trong đa số trường hợp), ngoài ra tôi cho rằng các kiểu nén gzipbrotli của server- trình duyệt đã hỗ trợ giảm cái này rất nhiều rồi.

Giờ đây với sự có mặt của http2 với khả năng tải đồng thời thì gộp CSS không còn là yêu cầu bắt buộc nữa.

Nhược điểm của gộp file CSS:

  • Dù không hay gặp, nhưng gộp CSS đôi khi gây ra lỗi hiển thị giao diện;
  • Gộp CSS làm tăng thời gian tạo cache, gồm cả tạo cache trong khi người dùng truy cập và khi prebuild cache (xây dựng trước cache, Swift Performance là plugin cache có chất lượng rất tốt, nhưng gặp vấn đề về xây dựng trước cache);
  • Gộp CSS làm giảm tác dụng của cache phía trình duyệt, vì mỗi lần purge cache (xóa cache cũ để tạo cache mới), file CSS gộp sẽ thay đổi tên. Trong khi các file CSS riêng thì hiếm khi đổi tên (trừ khi plugin hoặc theme cập nhật).

Ưu điểm của việc không gộp:

  • Không gây lỗi hiển thị khi dùng với plugin cache;
  • Giảm thời gian tạo cache đáng kể, nhất là trên các trang có cấu trúc CSS phức tạp;
  • Tăng tác dụng của cache phía trình duyệt, vì tên các file không gộp vẫn giữ nguyên khi bạn purge cache.

Về ảnh hưởng đến tốc độ, nói chung, trong một số trường hợp, gộp CSS cho tốc độ tốt hơn không gộp một chút, tuy nhiên vì ảnh hưởng của cache phía trình duyệt và khả năng gây lỗi giao diện nên tôi cho rằng hai cái này tương đương nhau, tuỳ vào tình hình thực tế kiểm tra trên website mà bạn quyết định có nên gộp hay là không.


Thực hành tốt nhất

  • Bỏ gộp CSS;
  • Bỏ minify CSS;
  • Tải không đồng bộ CSS;
  • Tạo critical CSS cho website;

Các plugin cache hàng đầu đều có khả năng làm nhiệm vụ này. Swift Performance và FlyingPress thậm chí còn có tính năng loại bỏ CSS không dùng.


Trong điều kiện lý tưởng

Lý tưởng nhất thì theme của bạn được tối ưu hóa sẵn, trường hợp đó bạn không cần động gì đến CSS luôn (ví dụ với theme GeneratePress).

Cơ mà hiếm có website nào được như vậy, vì điều này không chỉ phụ thuộc vào mỗi theme mà thôi, nó còn liên quan đến hàng tá plugin mà bạn cài trên website.


Lợi ích khác của việc không gộp CSS

Nếu tiến hành tăng tốc, một nhiệm vụ quan trọng là phát hiện các CSS không dùng, vấn đề này thường không nghiêm trọng với các trang có cấu trúc thống nhất, nhưng với các trang có bố cục thay đổi thì việc xuất hiện các CSS không dùng thường hay xảy đến.

Nếu bạn gộp ngay từ ban đầu rồi kiểm tra sẽ khó phát hiện các file CSS không dùng, để tách ra bạn dễ dàng biết được điều đó, và có thể dùng các plugin như Perfmatters hoặc Gonzales để loại bỏ các CSS không cần thiết trên post, page cụ thể.

Back to Top