Tải không đồng bộ async javascript trên WordPress (không dùng plugin)

> Tối ưu Wordpress >


Javascript là một trong những tác nhân làm giảm hiệu suất tải trang bởi theo cơ chế hoạt động của trình duyệt web, mỗi khi gặp phải javascript trong mã nguồn, nó sẽ phải tạm dừng việc tải các thành phần khác để tập trung vào tải đoạn script đó rồi mới bắt đầu thực thi nó.

asynchronous-javascript

Việc công nghệ tải không đồng bộ (async javascript) ra đời cho phép các trình duyệt web hiện đại mỗi khi gặp phải javascript sẽ vẫn tiếp tục tải song song các thành phần khác cùng với đoạn script này. Khi script tải xong thì mới thực thi. Như vậy, các thành phần khác sẽ không bị gián đoạn tải giữa chừng, giúp tăng tốc độ hiển thị nội dung, góp phần giữ chân khách ghé thăm.



Để bật tải không đồng bộ (async javascript) cho WordPress, bạn có thể sử dụng plugin như Async JS and CSS. Tuy nhiên, trong bài “Bí quyết giúp blog của tôi load nhanh”, như mình đã từng nói để tăng tốc WordPress, chúng ta cần hạn chế sử dụng tối đa các plugin không cần thiết. Do vậy, ở bài viết này, mình sẽ giới thiệu các bạn một giải pháp không dùng plugin.

Đầu tiên, mình có một câu hỏi nhỏ: “Các bạn thường dùng cách nào để chèn tệp .js vào mã nguồn WordPress?” Để có thể sử dụng async javascript thì điều quan trọng hàng đầu, đó là phải khai báo các tệp js đúng cách sao cho WordPress có thể hiểu được.

Chèn thẳng javascript ư? Cách này đúng nhưng không được khuyến khích cho lắm. Có một cách “chuẩn men” hơn, đó là khai báo trong functions.php.

Dưới đây mà minh họa chèn jquery vào WordPress.

function add_lazyloadxt_js() {
wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false);
}
add_action('wp_enqueue_scripts', 'add_lazyloadxt_js');

Khai báo như vậy thì WordPress mới có thể biết được là bạn đang dùng đoạn mã js có tên là “jquery.min.js” được tải từ “https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”.

Sau khi đảm bảo mọi đoạn mã js của bạn đã được khai báo đúng cách, lúc này bạn hãy thêm đoạn code sau vào cuối functions.php.

function async_js($tag) {
$excluded_scripts = array('jquery.min.js', 'jquery.js');
foreach ($excluded_scripts as $excluded_script)
if (true == strpos($tag, $excluded_script)) return $tag;
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter('script_loader_tag', 'async_js', 10);

Đoạn code trên hiểu đơn giản là bật tính năng tải không đồng bộ cho mọi đoạn mã js được khai báo trên WordPress, ngoại trừ những tệp có tên được bôi đỏ ở trên. Bạn có thể tùy chỉnh chúng nếu muốn. Mình thì thấy khi bật async js cho jquery hay bị lỗi bởi đây là tệp .js cơ sở nên mình cho nó vào mục loại trừ.

Ngoài cách trên, có một cách khác cũng không phải dùng đến plugin đó là sử dụng tính năng Rocket Loader™ của Cloudflare.

rocket-loader-cloudflare

Chỉ việc bật Automatic rồi để nó tự làm việc thôi. Rất đơn giản phải không nào? Bản thân ToiYeuWP cũng đang sử dụng tính năng này của Cloudflare cho nhanh gọn.

 





2
Bình luận

avatar
Hùng
Guest
Hùng

Chào bạn, mình muốn hỏi là đoạn “https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js” của tất cả các website đều giống nhau phải không ? mình copy cái của bạn là xài được luôn hay mình phải tự tìm trên website của mình cái đoạn phù hợp rồi thay vào ?