Hướng Dẫn Thêm Thuộc Tính Defer Và Async Để Render Blocking Javascript Trong WordPress

Các tập lệnh nằm trong phần đầu và phần thân của một trang có thể gây ra độ trễ tải trang khi trình duyệt cố gắng tải và thực thi (các) tập lệnh này ngay cả trước nội dung thực tế của trang.

Đây là lý do tại sao các tập lệnh này được gọi là kết xuất chặn javascripts.

Một cách để giải quyết vấn đề này là di chuyển tất cả các tập lệnh của bạn đến chân trang của trang, nhưng trong trường hợp không thể thực hiện được, một tùy chọn khác là thêm thuộc tính trì hoãn hoặc không đồng bộ hóa vào thẻ tập lệnh của bạn.

Hãy xem những thuộc tính này là gì và chúng có thể giúp bạn cải thiện thời gian tải trang như thế nào.

Thuộc Tính Async Và Defer Là Gì?

Dưới đây là tác dụng của các thuộc tính async và defer:

Thuộc tính Async: Thuộc tính async tải tập lệnh không đồng bộ. Nói cách khác, đảm bảo rằng tập lệnh tải không đồng bộ dọc theo các nội dung khác của trang, sau đó nó được thực thi.

Thuộc tính Defer: Thuộc tính defer trì hoãn việc tải tập lệnh. Nó đảm bảo rằng tập lệnh chỉ được thực thi sau khi tất cả nội dung của trang đã tải xong.

Cả hai thuộc tính này đều được hỗ trợ tốt trong tất cả các trình duyệt hiện đại bao gồm Firefox, Chrome và Internet explorer. Internet explorer đã thêm hỗ trợ cho các thuộc tính này kể từ IE10.

Một ví dụ về thẻ tập lệnh với các thuộc tính async và defer như sau:

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'></script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'></script>

Chức Năng Thêm Thuộc Tính ‘Async/Defer’ Vào Tập Lệnh Chặn Kết Xuất Của Bạn

Trong bài viết này, chúng ta sẽ xem xét ba phương pháp khác nhau để thêm các thuộc tính này vào javascripts chặn kết xuất của bạn. Các phương pháp này như sau:

• Phương pháp 1: Thêm trì hoãn/không đồng bộ hóa vào tất cả các tập lệnh mà không có ngoại lệ.
• Phương pháp 2: Thêm trì hoãn / không đồng bộ hóa cho tất cả các tập lệnh ngoại trừ một số ít.
• Phương pháp 3: Chỉ thêm trì hoãn /không đồng bộ hóa vào các tập lệnh chọn lọc. (Phương pháp linh hoạt nhất vì nó cho phép bạn thêm không đồng bộ vào một số tập lệnh và trì hoãn cho những tập lệnh khác.)

Bạn có thể sử dụng bất kỳ phương pháp nào phù hợp với nhu cầu của mình.

Phương pháp 1: Thêm Async hoặc Defer vào tất cả các tập lệnh

Nếu bạn muốn thêm thuộc tính async hoặc defer vào tất cả các tập lệnh mà không có ngoại lệ thì bạn có thể sử dụng đoạn mã sau.

Mở trang chức năng.php của chủ đề và thêm mã này vào cuối trang.

/*function to add async to all scripts*/
function js_async_attr($tag){

# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Ghi: Hàm trên sẽ thêm thuộc tính async vào tất cả các script. Thay thế, async=”async” bằng defer=”defer” nếu bạn muốn sử dụng thuộc tính defer để thay thế.

Phương pháp 2: Thêm Async hoặc Defer vào tất cả các tập lệnh ngoại trừ một vài

Phương thức trên đã thêm các thuộc tính async hoặc defer vào tất cả các tập lệnh. Thay vào đó, nếu bạn muốn thêm các thuộc tính này vào tất cả các tập lệnh với loại trừ một số tập lệnh, bạn có thể sử dụng mã này:

/*function to add async to all scripts*/
function js_async_attr($tag){

# Do not add async to these scripts
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js');
 
foreach($scripts_to_exclude as $exclude_script){
	if(true == strpos($tag, $exclude_script ) )
	return $tag;	
}

# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Ghi: Thay thế, async = “async” bằng defer = “defer” trong đoạn mã trên, nếu bạn muốn sử dụng defer để thay thế.

Thay thế script-name1.js, script-name2.js v.v. bằng tên của các tập lệnh mà bạn muốn loại trừ. Tham khảo phương pháp 3 dưới đây nếu bạn không biết làm thế nào để tìm tên kịch bản.

Phương pháp 3: Thêm Defer hoặc Async vào tập lệnh cụ thể

Tùy thuộc vào tập lệnh và những gì nó làm, bạn có thể muốn ‘trì hoãn’ chúng hoặc tải chúng không đồng bộ.

Như đã đề cập trước đó, các tập lệnh bị trì hoãn chỉ được thực thi sau khi một trang đã tải xong hoàn toàn, vì vậy nếu tập lệnh của bạn cần được thực thi trong quá trình tải trang, thuộc tính async sẽ phù hợp hơn.

Hãy ghi nhớ điều này, chức năng bên dưới sẽ cho phép bạn thêm thuộc tính trì hoãn hoặc không đồng bộ hóa vào các tập lệnh chọn lọc.

Hãy xem làm thế nào điều này có thể đạt được:

Bước 1: Bước đầu tiên là tìm và lập danh sách tất cả các tập lệnh chặn hiển thị mà bạn muốn thêm thuộc tính trì hoãn hoặc không đồng bộ hóa vào.

Một cách đơn giản để làm điều này là sử dụng công cụ Tốc độ trang của Google hoặc các công cụ tương tự khác như công cụ được cung cấp bởi GTmetrix.com

Truy cập bất kỳ công cụ nào trong số này và nhập URL vào bất kỳ trang bài đăng nào của bạn và nhấp vào ‘Phân tích’. Khi kết quả xuất hiện, hãy tạo một danh sách các tập lệnh được liệt kê trong javascript chặn kết xuất.

Tất nhiên, một cách khác là kiểm tra nguồn HTML của trang web của bạn và sau đó sử dụng ‘tìm’ (CTRL + F) để tìm kiếm tất cả các tệp .js xuất hiện trong màn hình đầu tiên.

Bước 2: Bước thứ hai là tìm tên tập lệnh duy nhất cho tất cả các tập lệnh mà bạn muốn trì hoãn hoặc không đồng bộ hóa.

Bạn có thể dễ dàng thực hiện việc này bằng cách sử dụng thông tin chi tiết về Google PageSpeed.

Chỉ cần kiểm tra các tập lệnh của bạn trong phần ‘Loại bỏ JavaScript chặn hiển thị‘. Bạn có thể sử dụng tên của tập lệnh làm tên duy nhất.

Chẳng hạn: Hãy lấy kịch bản sau:

'https://sitename.com/wp-content/plugins/thrive/js/compat.min.js?ver=1.500.18

Một tên duy nhất để xác định tập lệnh trên sẽ là compat.min.js.

Tham khảo hình ảnh bên dưới để làm rõ thêm:

Bạn cũng có thể tìm thấy tên tập lệnh bằng cách kiểm tra nguồn HTML của trang web:

Để thực hiện việc này, chỉ cần mở một trang bài đăng của blog trong trình duyệt của bạn và kiểm tra nguồn HTML của trang này (Bạn có thể xem nguồn HTML của một trang bằng cách nhấp vào ‘CTRL + U‘ trên bàn phím của bạn). Khi đó, hãy sử dụng chức năng Tìm kiếm của trình duyệt (CTRL + F) và tìm kiếm từ khóa, loại tập lệnh = ‘text / javascript’. Bây giờ bạn sẽ có thể xem tất cả các thẻ tập lệnh của mình. (tham khảo hình ảnh bên dưới)

Chỉ cần sao chép tên của thẻ tập lệnh và sử dụng nó làm tên tập lệnh.

Như thể hiện trong hình ảnh bên dưới, tên duy nhất cho tập lệnh là một chuỗi có thể được sử dụng để xác định duy nhất tập lệnh.

Bước 3: Mở tệp hàm.php của chủ đề bạn và thêm đoạn mã sau vào cuối tệp.

Biến $scripts_to_defer chứa một mảng các tập lệnh sẽ bị trì hoãn và biến $scripts_to_async chứa một mảng các tập lệnh sẽ được tải không đồng bộ.

Đảm bảo chỉnh sửa mã với tên tập lệnh của bạn.

/*function to add async and defer attributes*/
function defer_js_async($tag){

## 1: list of scripts to defer. (Edit with your script names)
$scripts_to_defer = array('script-name1.js', 'script-name2.js', 'script-name3.js');
## 2: list of scripts to async. (Edit with your script names)
$scripts_to_async = array('script-name1.js', 'script-name2.js', 'script-name3.js');
 
#defer scripts
foreach($scripts_to_defer as $defer_script){
	if(true == strpos($tag, $defer_script ) )
	return str_replace( ' src', ' defer="defer" src', $tag );	
}
#async scripts
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', 'defer_js_async', 10 );

Giải thích mã: Hàm này thêm các thuộc tính defer hoặc async vào các thẻ tập lệnh bằng cách thêm một bộ lọc vào script_loader_tag wordpress.

Chúng ta bắt đầu bằng cách lưu các tên duy nhất của các tập lệnh cần sử dụng defer và async trong một mảng và sau đó sử dụng một vòng lặp foreach để chạy qua các mảng này. Mỗi khi vòng lặp chạy, nó cố gắng tìm vị trí của tên tệp duy nhất trong các thẻ tập lệnh bằng cách sử dụng chức năng strpos (vị trí chuỗi). Nếu hàm strpos trả về TRUE (cho biết vị trí của chuỗi duy nhất đã được tìm thấy trong thẻ tập lệnh), một thuộc tính defer hoặc async được thêm vào bằng cách sử dụng hàm PHP str_replace (thay thế chuỗi). Nếu không, thẻ sẽ được trả về mà không có bất kỳ sửa đổi nào.

Ví dụ làm việc:

Giả sử bạn muốn thêm thuộc tính trì hoãn vào các tập lệnh sau:

<script src='http://sitename.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.2'></script>
<script src='http://sitename.com/wp-content/plugins/powerpress/player.min.js?ver=1429646074'></script>

Và thêm thuộc tính async vào các tập lệnh sau:

<script src='http://sitename.com/wp-includes/js/comment-reply.min.js?ver=4.2'></script>
<script src='http://sitename.com/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>

Một cái tên duy nhất để xác định hai tập lệnh đầu tiên sẽ là: contact-form-7 và powerpress /player.min.js. Tên duy nhất để xác định hai tập lệnh cuối cùng sẽ là: comment-reply.min.js và twentytwelve/js/navigation.js

Khi bạn nhận được các tên, bạn có thể thêm chúng vào đoạn mã trên như sau:

## 1: list of scripts to defer.
$scripts_to_defer = array('contact-form-7', 'powerpress/player.min.js');
## 2: list of scripts to async.
$scripts_to_async = array('twentytwelve/js/navigation.js', 'comment-reply.min.js');

Ghi: Đảm bảo bọc tên tập lệnh trong các dấu ngoặc đơn và phân tách chúng bằng dấu phẩy. Bạn có thể thêm bao nhiêu tên tùy thích bằng phương pháp này.

Nếu bạn không có bất kỳ kịch bản nào để trì hoãn thì bạn có thể để nó dưới dạng một mảng trống như sau và ngược lại:

## 1: list of scripts to defer.
$scripts_to_defer = array();
## 2: list of scripts to async.
$scripts_to_async = array('twentytwelve/js/navigation.js', 'comment-reply.min.js');

Sau khi hoàn tất, hãy lưu tệp .php chức năng và kiểm tra nguồn trang của bạn để đảm bảo rằng các thuộc tính trì hoãn và không đồng bộ hóa đã được thêm vào.Lưu ý quan trọng: Nếu bạn sử dụng plugin ‘WP Super Cache’, thì hãy đảm bảo xóa bộ nhớ cache sau khi thêm mã vào tệp .php chức năng của bạn. Kiểm tra lại bằng Google Pagespeed sau đó. Nếu bạn không xóa bộ nhớ đệm, các thay đổi của bạn sẽ không hiển thị trong ít nhất 5 đến 6 giờ nữa.Lưu ý quan trọng 2: Kiểm tra nguồn HTML (CTRL + U) của các trang để đảm bảo rằng các thuộc tính đó đã được thêm vào.