Cách xóa các tệp CSS và JavaScript không dùng tới trong WordPress

Cải thiện tốc độ tải website là điều mà bất kỳ developer nào hay các chủ trang web cũng đều lưu tâm đến. Việc xóa các tệp CSS hay Javascript mà không sử dụng tới cũng là một trong những cách giúp website của bạn tải nhanh hơn. Việc này làm cũng không quá khó, hãy cùng xem cách làm nhé.

Phân tích và tìm các file CSS / JavaScript không dùng tới

Trước khi loại bỏ các file CSS hay JavaScript không dùng tới, chúng ta nên kiểm tra và phân tích sơ bộ chúng. Ở đây, mình sẽ dùng một cách đơn giản và thuận tiện nhất là dùng Coverage Tab trong Chrome DevTools để kiểm tra.

Bạn mở Chrome DevTools bằng cách nhấn Ctrl+Shift+I hoặc nhấn chuột phải và chọn Inspect. Tiếp theo, chọn nút ba chấm > More tools > Coverage.

Phân tích và tìm các file CSS / JavaScript không sử dụng

Sau đó nhấn vào nút reload có biểu tượng mũi tên quay tròn nhé.

Nhấn vào nút reload và các file CSS / JS không cần tới sẽ được hiển thị.

Trình duyệt Chrome sẽ kiểm tra trang web của bạn và xuất ra một báo cáo tương tự như sau:

Báo cáo về các file CSS / Javascirpt không cần dùng tới trong WordPress.

Bạn chú ý vào phần Usage Visualization sẽ thấy tỷ lệ tương quan giữa các đoạn CSS và JS được sử dụng và không sử dụng trong file đó: màu đỏ là số bytes không sử dụng tới, màu xanh là số bytes có sử dụng.

Bạn có thể nhấn vào từng file để xem chính xác đoạn mã nào không được dùng tới. Các đoạn mã đó được đánh dấu màu đỏ nhé.

Các đoạn CSS và JS không cần dùng tới trong WordPress sẽ được đánh dấu màu đỏ.

Loại bỏ các file CSS và JS không sử dụng tới

Trong bài viết này, mình sẽ đưa ra 2 cách để bạn chọn lựa đó là dùng plugin và xóa thủ công.

Cách 1: Dùng plugin để loại bỏ các file CSS và JS không sử dụng tới

Ở đây mình đề xuất dùng Asset CleanUp. Plugin này miễn phí và có trên wordpress.org.

Sử dụng plugin này khá đơn giản thôi. Sau khi cài đặt và kích hoạt plugin, bạn tìm đến menu Asset CleanUp > CSS/JS Manager để kiểm tra các trang và các thành phần trên website của bạn bằng cách chọn tab tương ứng.

Ví dụ như trong ảnh này mình đang kiểm tra trang chủ website của mình chẳng hạn, thì mình chọn tab là Homepage.

Kiểm tra các file CSS và Javascript không dùng tới trong trang chủ.

Bạn nhấn nút Front Page hoặc Sample Page ở phần nội dung bên trong tab Homepage và chờ vài giây để plugin tải thông tin.

Sau đó, bạn sẽ được thấy một danh sách các file CSS và JS mà trang chủ của bạn sẽ tải với tổng số file hiển thị ở mục Total enqueued files và các file được phân loại theo nhóm nên khá dễ nhìn.

Xóa các file CSS và Javascript không dùng tới trong trang chủ.

Bạn có thể mở rộng để xem chi tiết từng nhóm file hoặc xem chi tiết thông tin từng file và chọn Unload on this page để dừng việc tải từng file trong danh sách này nhé.

Chỉ cần vài thao tác như vậy thôi là bạn đã hoàn thành rồi đó.

Cách 2: Xóa thủ công bằng cách tự tạo plugin mới

Ở cách này, chúng ta cần lưu ý và có thể sẽ dùng tới các hàm sau:

  • wp_deregister_script($handle): Xóa đoạn script đã register, xem cụ thể tại đây;
  • wp_dequeue_script($handle): Xóa đoạn script trước đó đã enqueue, xem cụ thể tại đây;
  • wp_deregister_style($handle): Xóa stylesheet đã register, xem cụ thể tại đây;
  • wp_dequeue_style($handle): Xóa stylesheet trước đó đã enqueue, xem cụ thể tại đây;
  • __return_false()
  • __return_empty_array()

Ngoài ra, bạn cũng có thể sẽ cần đến conditional tags của WordPress để xóa các tệp CSS và JS thừa ở một trang nhất định nào đó hoặc là cho các custom post được chỉ định. Việc này sẽ giúp bạn chủ động kiểm soát được cách tải các tệp CSS và JS khi cần.

Bây giờ, cùng tạo plugin đơn giản để xóa tệp CSS và JS nhé.

Trong folder wp-content > plugins, bạn tạo một folder mới tên là remove-resources bên trong chứa một file .php tên là remove-resources.php với nội dung như dưới đây.

Tạo plugin để xóa các file CSS và Javascript không cần dùng tới trong WordPress.
<?php
/*
 * Plugin Name: Remove Resources
 * Version: 1
 * Description: remove unused CSS JS files
 * Author: elightup
*/

Để xóa các file CSS hay JS không sử dụng tới, chúng ta sẽ dùng hàm __return_false() hoặc __return_empty_array(). Còn để xóa các đoạn script thì bạn sẽ dùng wp_dequeue_script.

Ví dụ ở đây, mình sẽ xóa styles và scripts của Jetpacks và BBPress bằng việc thêm đoạn code dưới đây vào file remove-resources.php:

// Remove styles of plugin
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
add_filter( 'bbp_default_styles', '__return_empty_array' );

// Remove bbPress scripts on non-bbPress pages
add_filter( 'bbp_default_scripts', function ( $scripts )
{
    return is_bbpress() ? $scripts : [ ];
} );

// Jetpack scripts
add_action( 'wp_enqueue_scripts', function ()
{
    wp_dequeue_script( 'devicepx' );
}, 20 );

Bạn lưu file remove-resources.php và nhớ kích hoạt plugin bạn vừa tạo để plugin chạy nhé.

Kích hoạt plugin dùng để xóa các file CSS / JS không dùng tới trong WordPress

Vậy là bạn đã xóa thành công các file CSS / JS không cần dùng tới rồi đấy.

Lời cuối

Bạn thấy cách làm này có ích cho website của bạn chứ? Nếu thấy có ích hoặc bạn vẫn đang phân vân điều gì đó, hãy để lại comment dưới bài viết này nhé. Ngoài các file CSS và JS, bạn cũng nên xóa bỏ các scripts và style không cần dùng tới trong plugin. Nếu bạn đang sử dụng Beaver Builder, bài viết này sẽ hướng dẫn bạn xóa đi các scripts không dùng tới. Và cuối cùng, đừng quên theo dõi các bài hướng dẫn tiếp theo của mình nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *