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

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 JS trước đây thường khuyên chúng ta gộp các file JS 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 file JS 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 vài 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ó JS tối ưu cho bạn rồi. Các rắc rối JS 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 JS 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;
  • 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;
  • Không gộp các file JS ngoài: trong nhiều trường hợp để các file JS 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 JS. (2) việc các file JS 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 (ví dụ như cài thêm plugin) có thể giúp đa số các file JS đã đượ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 JS 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 JS ngoài;
  • Không gộp JS nội tuyến: trên các theme và plugin được viết mã tốt, JS 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 JS cục bộ cho các JS của bên thứ ba có thể đem lại tác động lớn: JS của bên thứ ba có thể có những ảnh hưởng rất nghiêm trọng đến tốc độ trang, ví dụ như các mã JS của YouTube, Facebook, các mã Analytics, vân vân. Nguyên nhân là vì nó thường yêu cầu tải sớm (gây chặn hiển), và thời gian cache trình duyệt ngắn (thường là dưới 7 ngày). Có hai cách khắc phục chính: (1) bạn localhost các file JS bên ngoài, qua đó bạn có khả năng chủ động defer JS và thay đổi thời gian cache trình duyệt của nó; (2) bạn sử dụng các plugin có khả năng trì hoãn JS sau một khoảng thời gian nhất định hoặc khi có tương tác của người dùng mới tải, plugin tốt để hỗ trợ bạn làm điều này là Flying Scripts. Plugin này còn có khả năng giúp bạn tránh lỗi thời gian thực thi JS quá lớn;
  • Thử defer jQuery: thường chúng ta sẽ không defer jQuery để phòng đoạn mã này được dùng sớm trong quá trình tải trang. Tuy nhiên một số trang bạn cứ thử xem có được không.
  • Loại bỏ JS không sử dụng: JS không sử dụng khó loại bỏ hơn nhiều. Hiện 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 JS vô tội vạ. Ngoài ra có thể sử dụng các plugin giúp loại bỏ JS 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ỏ JS không dùng ở dạng cả file, còn JS không dùng mà nằm một phần trong file (ví dụ 30% JS trong một file nào đó là không dùng) thì nó không loại bỏ được;
  • Để thời gian cache trình duyệt cho JS đủ 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 JS 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 JS thành một file duy nhất có thể có lợi hơn:

  • File JS tổng hợp có dung lượng không quá lớn, mốc tốt là dưới 100KB;
  • Website của bạn lâu lâu mới tác động khiến JS 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.