1. Tại sao cần áp dụng “Async” hoặc “Defer” javascript:

Khi test site perfomance với Gtmetrix hoặc Google pagespeed insights, các tool này sẽ có những cảnh báo về “Defer parsing of Javascript” during initial page load kèm theo danh sách các script js. Điều này có nghĩa là các script js này được load trong phần <head> của webpage và làm cho trình duyệt web cần dừng lại để download các script này về rồi mới tiếp tục parse đoạn tiếp theo của webpage. Như vậy, trong thời gian download và đọc script, trình duyệt sẽ dừng lại đợi & web visitor không có gì để xem.  

1.1 Critical and Non-critical Javascript:

Như vậy, để tối ưu trải nghiệm người duyệt web, chúng ta cần giảm tối đa thời gian download và parse javascript của web browser bằng cách kỹ thuật “Async” hoặc “Defer” javascript. Lúc này, nếu chúng ta defer/async toàn bộ các js có trong phần head, rất có thể site của bạn sẽ không hoạt động được nữa. Do vậy, chúng ta cần list ra tất cả các javascript được load trong initial page load & kiểm tra xem js nào thì bắt buộc phải inlined trong <head> và js nào có thể áp dụng kỹ thuật defer/async => đây chính là: sự phân loại của Critical Javascript & Non-critical javascript.

Chú ý: 

+ Kỹ thuật “Async”: Browser tải script cùng với các thành phần khác của webpage & xử lý script đó ngay khi việc download script được hoàn thành => trật tự xử lý script có thể sẽ bị thay đổi so với trật tự xử lý mặc định do thời gian download các scripts có thể khác nhau. 

+ Kỹ thuật “Defer”: Browser tải script cùng với các thành phần khác của webpage & chỉ xử lý script đó khi các thành phần khác đã được tải xong => trật tự xử lý script giống như mặc định. 

1.2 Cách phân loại critical and non-critical javascript: 

Sử dụng code dưới đây để list các scripts được WordPress xử lý trong webpage:

/*
* Getting script tags
* Thanks http://wordpress.stackexchange.com/questions/54064/how-do-i-get-the-handle-for-all-enqueued-scripts
*/

add_action( 'wp_print_scripts', 'wsds_detect_enqueued_scripts' );
function wsds_detect_enqueued_scripts() {
global $wp_scripts;
foreach( $wp_scripts-&gt;queue as $handle ) :
echo $handle . ' | ';
endforeach;
}

Đoạn code trên sẽ list các scripts được xử lý vào phần <Head>. Chúng ta view source code, copy lại list này rồi comment out đoạn code này để làm sạch <head>.

Sau khi đã có list các javascript, chúng ta sẽ tiến hành phân loại các script vào nhóm critical hoặc non-critical để quyết định phương thức load. 

* Nguyên tắc phân loại javascript: 

– Hết sức thận trọng với JQuery. Script này quan trọng, được sử dụng nhiều bởi các js khác và tốt nhất nên được load càng sớm càng tốt.

– Kỹ thuật “Defer”: Các script được gói (wrapped) trong khối jQuery ( document ) .ready (  function()  { }) nên áp dụng kỹ thuật “Defer”. Thường thì các javascript này được sử dụng để tương tác với người dùng như click, mouse hover, xử lý layout 

– Nên sử dụng kỹ thuật “Async” đối với các external javascript

Bonus: Công cụ: Javascript usage tool: Here

2. Các phương thức để Defer/Async Javascript với WordPress:

2.1 Sử dụng plugin:

Có rât nhiều plugin để thêm các chỉ thị “Async” hoặc “Defer” vào các scripts & báo cho web browser phương thức load phù hợp (cần kiểm tra Critical js có được loại bỏ không để tránh site broken).

2.2 Sử dụng code:

Để thêm các chỉ thị “Async” hoặc “Defer” vào các scripts, bạn có thể sử dụng filter “script_loader_tag” trong WordPress: 

add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );
function wsds_defer_scripts( $tag, $handle, $src ) {

// The handles of the enqueued scripts we want to defer
$defer_scripts = array(
'prismjs',
'admin-bar',
'et_monarch-ouibounce',
'et_monarch-custom-js',
'wpshout-js-cookie-demo',
'cookie',
'wpshout-no-broken-image',
'goodbye-captcha-public-script',
'devicepx',
'search-box-value',
'page-min-height',
'kamn-js-widget-easy-twitter-feed-widget',
'__ytprefs__',
'__ytprefsfitvids__',
'jquery-migrate',
'icegram',
'disqus',
);

if ( in_array( $handle, $defer_scripts ) ) {
return '&lt;script src="' . $src . '" defer="defer" type="text/javascript"&gt;&lt;/script&gt;' . "\n";
}

return $tag;
}

Source:

https://wpshout.com/make-site-faster-async-deferred-javascript-introducing-script_loader_tag/

https://www.wpfaster.org/code/how-to-defer-or-async-javascript-without-a-plugin

https://varvy.com/pagespeed/defer-loading-javascript.html