Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin

Nếu bạn đã từng kiểm tra thử tốc độ load blog/ website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js và .css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi.

Tải không đồng bộ JavaScript trong WordPress mà không cần dùng plugin.

tai-khong-dong-bo-javascript-trong-wordpress

Nếu bạn đã từng kiểm tra thử tốc độ load blog/ website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScriptCSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js.css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi. Và Google thì không thích điều đó.

Tham khảo thêm:

Google cho rằng việc phần text hiển thị chậm sẽ ảnh hưởng đến trải nghiệm người dùng vì nội dung là thứ quan trọng nhất mà họ cần. Do đó, nếu blog/ website của bạn cũng đang gặp phải cảnh báo này, tốt nhất là nên tìm cách khắc phục nó. Và hướng giải quyết hiệu quả cho vấn đề này chính là kỹ thuật tải không đồng bộ hay còn gọi là Asynchronous (Async).

Tải không đồng bộ (Asynchronous) là gì?

Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.

Trong WordPress, các bạn có thể tải không đồng bộ JavaScript một cách đơn giản thông qua việc sử dụng plugin. Một số plugin hỗ trợ tải không đồng bộ JavaScript phổ biến mà các bạn có thể tham khảo bao gồm:

Nhiều plugin tạo cache như WP Rocket, W3 Total Cache… cũng hỗ trợ sẵn tính năng này.

Tuy nhiên, nếu bạn không phải là “tín đồ” của plugin thì bài viết này là dành cho bạn. Ngay bây giờ, tôi sẽ hướng dẫn cho các bạn cách thiết lập tải không đồng bộ JavaScript mà không cần sử dụng plugin.

Tải không đồng bộ JavaScript mà không cần dùng plugin

Tất cả những gì mà các bạn cần làm là thêm đoạn code sau đây vào file functions.php của theme hoặc child theme mà bạn đang sử dụng.

Lưu ý:

  • Thay script-1.js, script-2.js… bằng tên các JavaScript tương ứng trên website của bạn. Nếu số lượng script ít hơn, các bạn có thể xóa bớt đi và ngược lại, hãy bổ sung thêm theo cấu trúc sẵn có.
  • Một số JavaScript sẽ gặp lỗi nếu bị tải không đồng bộ (nhất là js/jquery/jquery.js). Do đó các bạn nên loại bỏ những script này ra khỏi danh sách.

Các lấy tên của script, các bạn có thể xem trong ví dụ minh họa bên dưới.

ten-cua-javascript

Sau khi hoàn tất, lưu lại và xóa cache (nếu có) rồi xem kết quả (kiểm tra bằng Google PageSpeed Insights). Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang áp dụng kỹ thuật Asynchronous trên blog/ website của mình? Bạn biết phương pháp khác đơn giản hơn để tải không đồng bộ JavaScript trong WordPress? Hãy chia sẻ nó với chúng tôi bằng các sử dụng khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)


Bài liên quan