Tải không đồng bộ JavaScript trong WordPress không sử dụng plugin

asynchronous-javascript

Kĩ thuật tải không đồng bộ (Asynchronous) hiểu một cách đơn giản đó là kĩ thuật xử lí nhiều cái gì đó không đồng thời với nhau, mà cụ thể ở đây là JavaScript (JS). Khi người dùng gửi một yêu cầu hiển thị tới trang web của bạn, thay vì tải cả nội dung và các JS liên quan đồng thời thì nó sẽ ưu tiên tải nội dung trước sau đó mới tải JS sau. Điều này rất tốt để tăng tốc độ tải trang đồng thời rất phù hợp cho SEO. Ngược lại với Asynchronous là Synchronous.

Thường thì chúng ta không cần thực thi JS trước, chính vì vậy mà kĩ thuật tải không đồng bộ rất được khuyên dùng.

asynchronous-javascript

asynchronous-javascript

Trong bài viết này, mình sẽ hướng dẫn các bạn tải không đồng bộ JS mà không cần sử dụng plugin, nếu bạn nào ngại sử dụng code thì kéo xuống cuối bài nhé, mình cũng giới thiệu tới các bạn một số plugin có chức năng tương tự.

Phương pháp 1: Tải không đồng bộ toàn bộ JS của trang.

Nếu bạn muốn tải không đồng bộ toàn bộ JS của trang mà không loại trừ bất kì cái nào thì tất cả những gì mà bạn cần phải làm là thêm đoạn code sau vào file functions.php của theme hoặc child theme đang sử dụng.

function cswp_js_async_attr($tag){
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'cswp_js_async_attr', 10 );

Phương pháp 2: Tải không đồng bộ toàn bộ JS của trang nhưng loại trừ một số trường hợp.

Phương pháp này có chức năng tương tự như phương pháp một nhưng nó sẽ loại bỏ một số JS để tải đồng bộ mà bạn chỉ định sẵn. Tất nhiên là cũng thêm đoạn code sau vào file functions.php.

function cswp_js_async_attr($tag){
$scripts_to_exclude = array('script-1.js', 'script-2.js', 'script-3.js');
 foreach($scripts_to_exclude as $exclude_script){
	if(true == strpos($tag, $exclude_script ) )
	return $tag;	
}
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'cswp_js_async_attr', 10 );

Thay script-1.js, script-2.js,… bằng tên các JS tương ứng mà bạn cần loại trừ trên trang của bạn.

Phương pháp 3: Tải không đồng bộ một số JS

Tùy vào từng trường hợp cụ thể mà bạn chọn các JS để tải không đồng bộ cho phù hợp. Để biết các JS nào tải cùng trang của mình một cách đơn giản để làm điều này là sử dụng công cụ Page Speed của Google hoặc các công cụ khác tương tự như một trong những cung cấp bởi GTmetrix.com.

Đối với Google Page Speed, các bạn tìm đến “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên” đối với tiếng Việt hoặc “Eliminate render-blocking JavaScript and CSS in above-the-fold content” đối với tiếng Anh. Click vào Hiển thị khắc phục ngay bên dưới để biết tên các JS.

Một cách khác nữa là để kiểm tra mã nguồn HTML trang web của bạn và sau đó sử dụng ‘tìm’ (Ctrl + F) để tìm tất cả các file .js xuất hiện.

Sau khi xác định được các JS cần tải không đồng bộ, việc tiếp theo là mở file functions.php và thêm đoạn code sau vào.

function cswp_async_js($tag){
$scripts_to_async = array('script-1.js', 'script-2.js', 'script-3.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', 'cswp_async_js', 10 );

Tất nhiên là bạn cũng cần phải thay script-1.js, script-2.js,… bằng tên JS mà bạn vừa xác định được ở trên.

Còn đây là phần cho bạn nào lười code.

Một số plugin hỗ trợ tải không đồng bộ JavaScript.

  • Asynchronous Javascript
  • Async JavaScript
  • Async JS and CSS

Tổng kết

Trên đây mình đã hướng dẫn các bạn tải không đồng bộ JS trên WordPress, nếu 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 mọi người bằng cách sử dụng khung bình luận bên dưới nhé. Chúc các bạn may mắn 🙂

Bài viết này tự động lấy từ nguồn chiasewp.com, nếu các bạn muốn xem bài viết gốc, hãy truy cập vào chiasewp.com để được hỗ trợ từ tác giả bài viết nhé

Trân trọng!

Leave a Reply

avatar
  Subscribe  
Notify of