Hướng dẫn sử dụng plugin Async JavaScript để trì hoãn tải JS trong WordPress

Tác giả Frank Goossens (futtta) có nhiều plugin hỗ trợ tăng tốc WordPress, trong đó nổi tiếng nhất có lẽ là Autoptimize (có thể bạn cũng đang dùng đấy ạ!). Nhưng chỉ dùng mỗi plugin đó thì hơi phí, ông còn nhiều plugin khác rất thú vị, làm các nhiệm vụ chuyên sâu hơn nữa trong vấn đề cải thiện tốc độ trang. Và hôm nay chúng ta sẽ làm quen với một trong các plugin như vậy, nó có tên Async JavaScript, để biết cách trì hoãn và/hoặc tải không đồng bộ JS.

Bản thân plugin Autoptimize tuy cũng có chức năng giúp async (tải không đồng bộ) JS, nhưng nó không hỗ trợ defer (trì hoãn), và các cài đặt chuyên sâu với JS và jQuery:

Autoptimize không hỗ trợ defer

Nói về “trì hoãn/tải không đồng bộ” JS, đây là một trong các biện pháp căn bản cùng với critical CSSlazy load ảnh giúp tăng tốc độ website cực kỳ hiệu quả (một ưu điểm nữa là chúng đều có giải pháp miễn phí chất lượng cao). Về cơ bản những ứng dụng kiểm tra tốc độ website như Google PageSpeed Insights dựa rất nhiều vào các thông số này để đánh giá tốc độ trang. Nói cách khác tốc độ website của bạn đối với Google là tốc độ load dành cho màn hình đầu tiên (above the fold) chứ không phải toàn bộ trang.

Vài thông tin quan trọng cần đọc trước: Plugin Async JavaScript hay được dùng kết hợp với plugin Autoptimize của cùng tác giả. Trong trường hợp đó, tùy chọn cuối cùng ở mục 10 giúp bạn tối ưu sự phối hợp giữa hai plugin này.

OK, giờ chúng ta đi vào phần chính.

Chuyện cài đặt plugin tôi sẽ bỏ qua, vì rất dễ dàng. Tôi sẽ vào thẳng phần chức năng của plugin.

bật async cho JS

  • Enable Async JavaScript? nghĩa là bạn bật plugin Async JavaScript (danh từ)
  • Also enable Async JavaScript for logged in user? nghĩa là bạn bật plugin này cho người dùng đăng nhập, bao gồm cả Admin
  • Also enable Async JavaScript on cart/ checkout pages? nghĩa là bạn bật plugin này trên cả trang giỏ hàng (cart) và trang thanh toán (checkout). Nói chung, trong phần lớn trường hợp việc này có nhiều rủi ro, vì không người bán hàng online nào muốn xảy ra điều gì bất thường khi khách hàng tiến đến những bước cuối cùng đưa tiền vào tài khoản của mình cả. Do vậy tôi khuyên bạn không nên tick chọn tính năng này, trừ khi cực kỳ chắc chắn

1. Cài đặt nhanh

cài đặt nhanh JS

Đây là phần cài đặt nhanh, ở đây bạn có 4 lựa chọn sau:

  • Apply Async: áp dụng tải không đồng bộ trên tất cả các file JS, bao gồm cả jQuery
  • Apply Defer: áp dụng trì hoãn tải trên tất cả các file JS, bao gồm cả jQuery
  • Apply Async (jQuery excluded): áp dụng tải không đồng bộ với tất cả file JS trên trang, ngoại trừ jQuery
  • Apply Defer (jQuery excluded): áp dụng tải trì hoãn tải với tất cả file JS trên trang, ngoại trừ jQuery

Lưu ý: Khi sử dụng các tùy chọn nó sẽ ghi đè lên các thiết lập hiện có với Async JavaScript.

2. Lựa chọn phương thức

lựa chọn phương thức trì hoãn tải JavaScript

Ở đây bạn sẽ chủ động chọn phương thức xử lý với JavaScript là trì hoãn tải hoặc tải không đồng bộ.

3. Xử lý riêng với jQuery – một file JS đặc biệt và quan trọng

xử lý jQuery

Ở đây tác giả nói rằng:

Thường thì nếu jQuery tải không đồng bộ (async) hoặc trì hoãn (defer) nó có thể phá vỡ một số hàm của jQuery, đặc biệt là với các đoạn mã nội tuyến (inline) yêu cầu jQuery tải trước khi mã nội tuyến đó khởi chạy. Đôi khi việc lựa chọn async hoặc defer sẽ vẫn hoạt động bình thườngnhưng với các trường hợp khác bạn có thể cần phải loại trừ jQuery khỏi cài đặt async và defer.

Ở đây bạn có 3 lựa chọn:

  • Tải không đồng bộ jQuery / Async
  • Trì hoãn tải jQuery / Defer
  • Tải jQuery theo cách bình thường (tức là không tải không đồng bộ, cũng như không trì hoãn tải) / Exclude / loại trừ

Lưu ý: các chức năng từ mục 4 đến mục 9 nếu bạn muốn dùng, mà đồng thời lại đang dùng plugin gộp file JS nào đó (ví dụ Autoptimize) thì bạn cần sử dùng tính năng “loại bỏ gộp file” cụ thể mà bạn muốn tùy chỉnh. Nếu không thì nó cũng không có tác dụng gì.

Khi bạn muốn tùy chỉnh sâu như thế, một plugin khác giúp tối ưu hóa tốc độ tốt hơn nữa có thể rất hữu dụng là: https://wordpress.org/plugins/wp-asset-clean-up/ Nó giúp bạn tắt các CSS, JSS trên các trang không cần thiết. Nhưng muốn tận dùng tối đa chức năng này, bạn không được gộp file và tất nhiên bạn phải có hiểu biết tốt về WordPress.

4. Tải không đồng bộ JavaScript

tải không đồng bộ JavaScript

Ở đây bạn có quyền lựa chọn đích danh, cụ thể từng file JavaScript mà bạn muốn tải không đồng bộ (async). Nếu có nhiều file, bạn ngăn cách nó bằng dấu phẩy. Ví dụ jquery.js,jquery-ui.js

5. Trì hoãn tải JavaScript

trì hoãn tải JavaScript

Tương tự như ở phần trên. Ở đây bạn có quyền lựa chọn đích danh các file JavaScript mà bạn muốn trì hoãn tải (defer). Nếu có nhiều file, bạn ngăn cách nó bằng dấu phẩy. Ví dụ jquery.js,jquery-ui.js

6. Loại trừ các file JavaScript “không cần trì hoãn tải” cũng như “không tải không đồng bộ”

file JavaScript cần loại trừ

Ở đây bạn có quyền lựa chọn đích danh các file JavaScript mà bạn không muốn trì hoãn tải (defer) cũng như không muốn tải không đồng bộ (async) / tức là file JS tải theo cách thông thường. Nếu có nhiều file, bạn ngăn cách nó bằng dấu phẩy. Ví dụ jquery.js,jquery-ui.js

7. Loại trừ plugin

loại trừ plugin

Chức năng này giúp bạn loại bỏ các file JS của plugin không được defer, cũng như không được async. Bạn có khả năng chọn nhiều plugin cùng lúc.

Lưu ý là chỉ các file JS nằm trong plugin là sẽ được loại trừ trong phần này, còn các file JS tải từ bên ngoài sẽ không bị ảnh hưởng. Ví dụ: nếu plugin được cài đặt ở đường dẫn /wp-content/plugins/some-plugin/ thế thì file JS nằm trong đường dẫn này sẽ được loại trừ. Nếu plugin tải JS từ những nơi khác thì phương thức toàn cục (global method) sẽ được sử dụng cho file JS tải bên ngoài đó (ví dụ async hoặc defer).

8. Loại trừ giao diện

loại trừ giao diện

Ở đây cho phép bạn loại trừ các đoạn mã JS trong giao diện nhất định không tải theo cả 2 kiểu async và defer.

Tương tự như plugin, chỉ các file JS nằm trong phần cài đặt theme ở /wp-content/themes/some-theme/ mới bị ảnh hưởng. Nếu giao diện tải file JS ở bên ngoài thư mục trên (nhưng vẫn thuộc hosting của bạn) thì các cài đặt toàn cục sẽ được áp dụng cho file JS đó.

9. Tải không đồng bộ cho plugin

tải không đồng bộ cho plugin

Mặc dù không được khuyến khích, một số theme và plugin có thể tải file JavaScript mà không sử dụng hàm wp_enqueue_script. Trong một số trường hợp đây là điều cần thiết cho chức năng của theme và plugin.

Nếu các giao diện / plugin này cung cấp một hook có thể được sử dụng để thao tác cách tải tệp JavaScript thì Async Javascript có thể cung cấp hỗ trợ cho các giao diện / plugin này.

Nếu bạn có bất kỳ giao diện / plugin nào mà Async JavaScript hỗ trợ thì nó sẽ được liệt kê bên dưới.

10. Phối hợp với Autoptimize

phối hợp với Autoptimize

Riêng khung ở cuối (hình trên) liên quan đến chuyện phối hợp giữa plugin Async JavaScript và Autoptimize. Nếu bạn dùng cả hai plugin thì bạn nên tick chọn Enable Autoptimize Support, phần jQuery chọn Defer, tác giả nói rằng lựa chọn như vậy sẽ tốt hơn.

Lưu ý: nếu tính năng 10 gặp vấn đề (chẳng hạn bạn muốn defer jQuery nhưng kiểm tra trên mã thì không thấy thuộc tính này) thì khả năng cao do mục 1 bạn không nhấn bật (enable) plugin Async JavaScript.

11. Khắc phục hiện tượng defer jQuery làm hỏng chức năng một số trang

Tôi nhận thấy việc defer jQuery gây ảnh hưởng đến chức năng của một số trang mà cần tải jQuery theo cách thông thường. Giờ chúng ta phải làm thế nào? Vì nếu bỏ defer thì lại ảnh hưởng đến hiệu suất. Cách làm là:

Bỏ defer trên những trang cần tải jQuery theo cách thông thường còn những trang còn lại vẫn áp dụng defer.

Cách làm đó là chúng ta sẽ vô hiệu hóa plugin Async JavaScript trên những trang cần tải theo cách thông thường, còn những trang khác thì vẫn kích hoạt. Plugin giúp bạn làm việc này có tên: Plugin Organizer, bạn vào sửa trang cần vô hiệu hóa Async JavaScript, kéo xuống phía dưới và lựa chọn như sau:

vô hiệu hóa plugin trên trang cụ thể

Nếu hướng dẫn này vẫn làm bạn cảm thấy mù mờ?

OK, tôi rất hiểu chuyện đó, với những ai chưa từng học qua về web, nội dung ở trên chắc chắn không dễ tiêu hóa.

Thực ra thì tác giả cũng rất khéo khi thiết kế plugin này cho nhiều cấp độ người dùng. Nếu bạn không hiểu rõ về cơ chế, đơn giản chỉ cần tập trung vào tùy chọn ở phần Quick Settings / Cài đặt nhanh với 4 lựa chọn mà tôi đã nêu ở phần trên.

Về vấn đề hiệu suất, tốc độ:

  • Defer tất cả, gồm cả jQuery nếu không ảnh hưởng gì đến chức năng, giao diện sẽ cho kết quả tốt nhất về mặt thời gian tải trang
  • Tuy nhiên loại trừ jQuery sẽ là lựa chọn hay hơn trong nhiều trường hợp, nhất là với các trang có giao diện phức tạp sử dụng JS nội tuyến trong quá trình tải
  • An toàn nhất là lựa chọn Async với việc tải jQuery bình thường (lựa chọn Apply Async (jQuery excluded)). Tuy nhiên nếu vậy thì bạn không cần dùng plugin này vì Autoptimize là đủ rồi!

Với những ai hiểu biết sâu hơn, bạn có thể sử dụng các tùy chọn nâng cao bên dưới. Các trang có thiết kế, chức năng phức tạp chắc chắn cần đến các tùy chọn này. Những trang đơn giản kiểu blog (như trang Kiến càng) có thể chỉ cần lựa chọn đơn giản từ cài đặt nhanh.

Cách kiểm tra file JS của bạn đang defer hay async

Trên trình duyệt Chrome, bạn vào bài viết nào đó trên website (ở trạng thái không đăng nhập), rồi chuột phải chọn xem nguồn trang. Nó sẽ mở một tab mới chứa đầy đủ mã website của bạn. Tiếp bạn nhấn tổ hợp phím Ctrl + F và gõ .js vào, nó sẽ hightlight những file JS, để bạn kiểm tra thuộc tính:

defer file JS 2 defer file JS 1

Như ở trên tôi đã defer cả file JS tổng hợp do Autoptimize (…946391.js) tạo ra, cũng như file jQuery (jquery.js).

Ngoài ra bạn có thể nhận thấy file mà plugin không tác động được (dù bạn có chọn defer hay async thì nó vẫn tải theo cách bình thường), thí dụ như file sau đây của theme:

file JS không can thiệp được

Cuối cùng, dù chọn bất cứ cài đặt nào, sau khi nhấn Save, bạn nên xóa cache plugin, rồi xóa cache trình duyệt để kiểm tra lại website thật kỹ. Can thiệp vào cách tải JS trên trang có chức năng phong phú có thể có những ảnh hưởng khó lường.

Xin chào, và hẹn gặp lại bạn ở bài viết khác mà tôi dự định dịch, giải thích rõ ràng hơn câu chuyện: Vậy rốt cục tải không đồng bộ và trì hoãn tải là như thế nào? Giống và khác nhau ra sao? Rất hấp dẫn nếu bạn muốn hiểu sâu về vấn đề tải JavaScript.

Leave a Comment