Lý do quan trọng nhất dùng Defer Parsing of JavaScript là để cải thiện tốc độ Website. Thường thì các đoạn mã JavaScript sẽ được đặt trong thẻ <head> </head>. Khi Website được tải về thì các đoạn mã code cũng sẽ được đọc từ trên xuống dưới. Vì vậy, nếu bạn có nhiều đoạn JavaScript hoặc nhiều mã code ở đây thì sẽ mất nhiều thời gian để tải nội dung trên trang (vì phải tải hết mã JavaScript trước). Do đó, việc tăng tốc Website sẽ được thực hiện khi Defer Parsing of JavaScript, vì lúc này site sẽ được tải mà không đợi mã JS code hoàn tất. Bài hướng dẫn này sẽ chỉ bạn 2 cách để defer parsing of JavaScript trong WordPress.
Bước 1: Phân tích website
Để biết bạn có cần làm việc này cho website WordPress không, bạn có thể dùng GTMetrix tool. Điểm trung bình lý tưởng trên GTMetrix cần đạt ít nhất 71%. Đây là kết quả từ việc kiểm tra một website WordPress.
Bước 2 – Defer Parsing of JavaScript trong WordPress Có nhiều lựa chọn để bạn thực hiện defer parsing of JS trên site WordPress của bạn.
Lựa chọn 1 – Deferring parsing of JavaScript bằng WordPress plugins
Một trong các cách dễ nhất để defer JS parsing trong WordPress là bằng cách dùng plugin WP Deferred JavaScript.
Một plugin khác có thể giúp bạn defer parsing of JavaScript là Speed Booster Pack, cũng có cung cấp vài tính năng để tối ưu WordPress
Sau khi cài đặt Speed Booster Pack bạn sẽ cần tới mục Settings plugin.
Chọn box Defer parsing of javascript files và nhấn Save Changes
Lựa chọn 2 – Deferring parsing of JavaScript qua functions.php
Để defer parsing of JS, mã này cần được dán vào cuối của file wp-includes/functions.php:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return “$url’ defer “;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
Bước 3: Kiểm tra thay đổi
Sử dụng cùng công cụ để kiểm tra tốc độ website. Đây là kết quả hiệu năng sau khi deferring JavaScript parsing:
Chúc mừng, bằng cách làm theo các bước sau đây, bạn đã tăng tốc hiệu năng của website nhanh hơn và cho trải nghiệm người dùng tốt hơn!