Các tùy chọn tối ưu hóa CSS trên trang WordPress trong thực tế

Video giới thiệu:

WordPress là hệ thống mở điều đó giúp CMS này có vô số theme & plugin hỗ trợ thuận lợi cho người dùng. Tuy nhiên nó cũng tạo ra nhược điểm là các thiết kế bên trong có thể chưa tối ưu.

Các lời khuyên về tối ưu tốc độ, hiệu suất cho CSS trước đây thường khuyên chúng ta gộp các file CSS trên toàn trang thành một file duy nhất và minify (giảm thiểu kích cỡ) của nó. Nhưng điều đó sẽ không còn là cách tối ưu nhất hiện nay khi các CSS có khả năng tải song song nhờ http/2, trang thường xuyên cập nhật & tầm mức quan trọng của cache trình duyệt trên các trang thường xuyên có người dùng quay trở lại.

Trong bài viết này tôi sẽ chỉ ra một thực hành có lợi hơn trên nhiều website:

  • Chọn theme tối ưu tốc độ sẵn hoặc được viết mã tốt: các theme này ngay từ đầu sẽ có CSS tối ưu cho bạn rồi. Các rắc rối CSS từ theme không hề nhỏ nên bạn phải cân nhắc điều này. Khi dùng web một thời gian tương đối dài, việc đổi theme sẽ phức tạp hơn so với đổi một plugin nào đó rất nhiều. Nếu theme không tốt, việc chỉnh sửa CSS của nó cần kỹ năng tốt mà không phải người quản trị web nào cũng làm được. Đề xuất: sử dụng theme GeneratePress;
  • Chọn plugin chất lượng: những plugin này thường được viết tốt hơn. Hiệu suất là một tiêu chí quan trọng trong các plugin chất lượng cao. Tham khảo thêm: các plugin ưa thích của Speed Family;
  • Không gộp các file CSS ngoài: trong nhiều trường hợp để các file CSS tách riêng và không gộp chúng sẽ tốt hơn. Có hai lợi ích căn bản: (1) tốc độ tạo mới cache HTML khi người dùng truy cập, preload cache tốt hơn hẳn do plugin cache không phải mất thời gian tổng hợp lại CSS. (2) việc các file CSS không thay đổi tên, không phải tạo file tổng hợp mới khi bạn chỉ có một chỉnh sửa nhỏ về giao diện trên toàn trang có thể giúp đa số các file CSS đã được cache sẵn trên trình duyệt của người dùng đã từng vào website trước đây;
  • Minify không có tác dụng đáng kể: giảm một vài KB trong file CSS không có tác dụng đáng kể trong việc tăng tốc độ trang, so với bất lợi mà nó phải nhận giống như khi gộp CSS ngoài;
  • Không gộp CSS nội tuyến: trên các theme và plugin được viết mã tốt, CSS nội tuyến thường là chủ động thêm vào để tối ưu cho trang, việc gộp chúng thành file ngoài có thể làm trang chậm đi;
  • Tạo Critical CSS: CSS quan trọng trên trang giúp nội dung thuộc màn hình đầu tiên tải nhanh hơn. Các file còn lại nên tải không đồng bộ. Tùy chọn này khi làm tốt giúp loại bỏ vấn đề CSS chặn hiển thị. Nhiều plugin cache ngày nay cho phép bạn tạo critical CSS tương đối dễ dàng, đoạn mã này sẽ được nội tuyến vào trang HTML để tốc độ render trang là nhanh nhất có thể;
  • Loại bỏ CSS không sử dụng: CSS không sử dụng khó loại bỏ hơn nhiều việc tạo critical CSS. Không nhiều plugin cache xử lý tốt vấn đề này, các dịch vụ có phí thì thường có giá cao. Để xử lý cái này một cách hiệu quả thì bạn nên chọn theme và plugin chất lượng, vì đây là nguyên nhân chính của việc chèn CSS vô tội vạ. Ngoài ra có thể sử dụng các plugin giúp loại bỏ CSS không dùng như Perfmatters hoặc Gonzales, dù đây không phải là biện pháp hoàn hảo, vì nó chỉ loại bỏ CSS không dùng ở dạng cả file, còn CSS không dùng mà nằm trong file thì nó không loại bỏ được;
  • Plugin FlyingPress có tính năng loại bỏ CSS nằm một phần trong file, nhìn chung nó hoạt động tốt trên các trang đơn giản nhưng trang phức tạp có thể gây lỗi giao diện, do vậy bạn nên kiểm tra lại cẩn thận;
  • Để thời gian cache trình duyệt cho CSS đủ lâu: 3 tháng là được, bạn để lâu hơn càng tốt (tìm hiểu thêm HTTP caching). Ngày nay các theme & plugin đều thêm query string để thể hiện các bản cập nhật cho file CSS, JS nên bạn không lo vấn đề có cập nhật mà trang lại sử dụng cache cũ trên trình duyệt của khách đã từng ghé thăm trước đây;
  • Bật mã nguồn của trang, tải thử để xem các cài đặt có như ý bạn không: một ví dụ điển hình là thời gian cache phía trình duyệt không được thiết lập như ý thông qua plugin LiteSpeed cache trên nền máy chủ OpenLiteSpeed mà rất nhiều người hiện đang dùng.

Làm thế nào bạn biết website của bạn có http/2 hay không. Bạn chỉ cần truy cập vào công cụ này để kiểm tra: tools.keycdn.com/http2-test


Vậy tổng hợp CSS có lợi trong các trường hợp nào?

Nếu rơi vào đồng thời các trường hợp sau, việc tổng hợp CSS thành một file duy nhất có thể có lợi hơn:

  • File CSS tổng hợp có dung lượng không quá lớn, mốc tốt là dưới 100KB;
  • Bạn vẫn triển khai critical CSS;
  • Website của bạn lâu lâu mới tác động khiến CSS thay đổi, mốc tốt là 1 tháng;

Cuối cùng bạn nên kiểm tra các thiết lập của mình, so sánh nó để biết các tùy chọn nào là tốt hơn, vì khó có tùy chọn nào đúng trong mọi trường hợp.

PS: trang Speed Family đã bỏ gộp & minify CSS cũng như JS.