Tip: Hướng dẫn cách loại bỏ Javascript ở các trang không cần dùng đến

Chào các bạn, tiếp tục series tối ưu hóa website trên Google Pagespeed Insight. Hôm nay mình sẽ đem đến cho các bạn một bí kíp để loại bỏ các file Javascript không cần dùng đến ở một số trang thay vì dùng trên tất cả các trang trên website WordPress.

Tại sao nên loại bỏ Javascript ở các trang không cần thiết?

Như các bạn đã biết, website của chúng ta thường khá nặng khi được thiết kế xong. Bởi vì, những người thiết kế web họ không thể vừa thiết kế vừa tối ưu giúp mình được. Nên khả năng cao website của chúng ta sẽ chưa tối ưu lắm về các file Javascript. Tôi đã gặp nhiều khách hàng đến sử dụng dịch vụ tối ưu hóa website tại Web MTP, điểm chung là tất cả các website của họ đều không tối ưu Javascript.

Ngoài nén Javascript ra thì các bạn cũng có thể tối ưu bằng cách loại bỏ Javascript trên mỗi trang mà chúng ta tự thiết lập.

Nhận biết website đang sử dụng bao nhiêu file Javascript

Để có thể nhận biết được các file Javascript mà website đang sử dụng, các bạn sử dụng đoạn code bên dưới bằng cách dán nó vào functions.php của Theme Child và ra ngoài trang chủ xem

function se_inspect_scripts() {
global $wp_scripts;
echo "<h2>Enqueued JS Scripts</h2><ul>";
foreach( $wp_scripts->queue as $handle ) :
echo "<li>" . $handle . "</li>";
endforeach;
echo "</ul>";
}
add_action( 'wp_print_scripts', 'se_inspect_scripts' );

Sau khi dán và lưu, các bạn truy cập vào trang chủ của website sẽ nhận được kết quả tương tự như sau:

loại bỏ Javascript — Sau khi thực thi code trên và load lại trang, bạn sẽ thấy danh sách tên các script hiện đang có trên website

Đây là danh sách 11 file Javascript đang dùng trên trang chủ website của bạn, thường chúng ta tối ưu website sẽ dựa vào trang chủ để in ra điểm trên Google Pagespeed. Vậy sau khi danh sách Javascript được in ra trên màn hình thì việc tiếp theo chúng ta sẽ xác định file Javascript nào chúng ta không cần dùng đến trên trang chủ và file nào cần dùng trên trang chủ.

Ở đây mình đang dùng theme Restaurant and Cafe. Nhưng trang chủ của mình không cần đến một vài Javascript bên dưới:

restaurant-and-cafe-custom
wmtp-ajax-script
wmtp-buy-combo-js
wmtp-buy-combo-ajax
slick-js
owl-carousel
v4-shims

Nên mình sẽ bỏ đi các file Javascript này trên trang chủ bằng đoạn code sau:

add_action( 'wp_enqueue_scripts', 'wmtp_child_script', 99 );
function wmtp_child_script() {
if( is_front_page() ) {
wp_dequeue_script( 'restaurant-and-cafe-custom' );
wp_dequeue_script( 'wmtp-ajax-script' );
wp_dequeue_script( 'wmtp-buy-combo-js' );
wp_dequeue_script( 'wmtp-buy-combo-ajax' );
wp_dequeue_script( 'slick-js' );
wp_dequeue_script( 'owl-carousel' );
wp_dequeue_script( 'v4-shims' );
}
}

Mình sẽ giải thích một chút về 2 hàm quan trọng:

is_front_page() : Hàm này được nằm trong if thì nghĩa là “Nếu đây là trang chủ thì….”
wp_dequeue_script() : hàm này được áp dụng để loại bỏ tên được đặt trong WordPress của file Javascript.

2 phần này gộp lại sẽ là “Nếu đây là trang chủ thì loại bỏ tên file Javascript được chỉ định”.

Đoạn code này còn dùng được không?

Cho đến phiên bản WordPress hiện tại thì đoạn code trên vẫn chưa thay đổi hay cập nhật gì khác. Nếu có phần nào không đúng hoặc chưa hiểu lắm, các bạn có thể để lại bình để được giải đáp nhanh nhất nhé. Chúng tôi sẵn sàng sửa đổi bài viết theo ý kiến của các bạn nếu cần thiết.