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

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

Nếu bạn đã từng kiểm tra thử tốc độ load 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. Và Google thì không thích điều đó.

Tham khảo thêm:

• Loại bỏ Query String trong WordPress không cần dùng plugin
• Minify HTML, JavaScript và CSS mà không cần plugin

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 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:

• Async JavaScript (download)
• Async JS and CSS (download)

Nhiều plugin tạo cache như WP Rocket, W3 Total Cache, LiteSpeed 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. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nhằm tránh nó bị xóa mất khi cập nhật theme:

//* Asynchronous JS without plugin
function async_js($tag){
$scripts_to_async = array('script-1.js', 'script-2.js', 'script-3.js', 'script-4.js', 'script-5.js');
foreach($scripts_to_async as $async_script){
	if(true == strpos($tag, $async_script ) )
	return str_replace( ' src', ' async="async" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'async_js', 10 );

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.

Sau khi hoàn tất, lưu lại và xóa cache (nếu có) rồi kiểm tra kết quả 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 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 theo dõi 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 nhé. Cảm ơn rất nhiều. :)