Kỹ thuật tăng tốc Website WordPress bằng cách loại bỏ JS, CSS không cần thiết

Vấn đề mỗi khi chúng ta cài các Plugin mới là nó có thể sẽ chèm thêm đủ thứ hầm bà lằng vào trang Web như Font, CSS, JS khiến cho không chỉ các trang chủ mà cả các trang Category, Tag… đều phải load đống CSS, JS, Font đó…. trong khi chúng Tự nhủ: Mẹ thằng chủ Website ngu như bò, Tao có chạy chức năng gì liên quan tới Plugin đó đâu mà bắt tao gánh thêm cả mớ làm gì cho nặng nề!?

Mỗi file css, js, font có thể sẽ làm tăng Page Size của bạn lên tầm 50 – 100kb và tất nhiên nó cũng sẽ làm tăng Request điều này chắc chắn làm tăng thời gian tải trang + giảm điểm đánh giá rồi đúng không!?

P/S: Trước khi thực hiện hành động này, Tôi khuyên bạn nên phân tích kỹ về nhu cầu sử dụng các Plugin và Kỹ thuật này không dành cho tất cả mọi người. Nó có thể làm cho Website của bạn Bị Broken.

Let’s Go!

Phân tích nhu cầu sử dụng các Plugin

Tôi sẽ lấy ví dụ là Plugin tạo Form để tích hợp Sendy, Mailchimp… vào WordPress là Hustle từ WPMUDEV.

Tôi sẽ phân tích nhu cầu chính khi dùng Plugin này như sau:

1. Nhu cầu tạo Form để thu thập Email và chăm sóc khách hàng.
2. Chỉ chèn Form Email vào phần bài viết, trang Newsletter ID 69
3. Không có Form xuất hiện ở trang chủ, Category, Tag….

Xem các File CSS và JS bị Plugin chèn thêm vào Website

Cách thủ công nhất để xem Plugin Hustle nó chèn thêm những gì vào Website là View Source – Xem nguồn trang.

Tôi sẽ xem nguồn trang và thử gõ vào “hust” các bạn có thể thấy anh WPMUDEV đã thêm những thứ này vào trang Home mà Tôi còn chưa chèn shortcode nhé:

WPMUDEV đã thêm 5 file css và 1 file js vào toàn bộ các trang của WordPress chưa cần biết User đã sử dụng Shortcode hoặc đã sử dụng Form ở trang nào hay chưa. Như vậy ngay lập tức Website của Tôi sẽ phả tăng thêm khoảng 6 request và khi Tôi thử tải toàn bộ các Files JS, CSS và font về thì thấy Tổng dung lượng của các File này là 54kb

Hãy thử tưởng tượng bạn cài thêm 10-20 plugin, lượng css và js bị chèn thêm vào Website sẽ làm Page Size tăng thêm bao nhiêu!? Và tổng số Request sẽ tăng thêm bao nhiêu!?

Ok!

Tạm thời phân tích như vậy bây giờ chúng ta thử chuyển qua các bước tiếp theo là xoá các JS, CSS không cần thiết mà các Plugin chèn vào các trang không sử dụng.

Tìm kiếm ID file CSS và JS từ Plugin

Khi Xem nguồn Website và nhìn vào cấu trúc của Code nhúng CSS và JS bạn sẽ thấy như sau:

<link rel='stylesheet' id='hustle_icons-css' href='https://example.com/wp-content/plugins/wordpress-popup/assets/hustle-ui/css/hustle-icons.min.css?ver=4.6.4' media='all' />

<script src='https://example.com/wp-content/plugins/wordpress-popup/assets/hustle-ui/js/hustle-ui.min.js?ver=4.6.4' id='hui_scripts-js'></script>_

Trong đó có phần mình bôi đậm là ID của các File CSS và JS mà các Plugin hoặc Theme thêm vào.

VD với các File CSS, loạt ID sẽ kiểu như này:

id='hustle_icons-css'
id='hustle_global-css'
id='hustle_optin-css'

ID CSS cần lấy để chuẩn bị cho việc loại bỏ sẽ chỉ cần loại bỏ hậu tố -css phía sau đi. Kết Quả sẽ là:

hustle_icons
hustle_global
hustle_optin

Với các File JS, loạt ID sẽ như sau:

id='hui_scripts-js'
id='hustle_front-js'
id='optin_admin_fitie-js'

Các ID của File JS cần lấy chỉ cần bỏ hậu tố -js ở phía sau đi. Kết quả sẽ là:

hui_scripts
hustle_front
optin_admin_fitie

Loại bỏ JS, CSS cho các trang không sử dụng

Để loại bỏ JS và CSS khỏi các trang không sử dụng, Tôi dùng 2 hàm wp_desqueue_style và wp_desqueue_script.

Một ví dụ cụ thể Tôi đã đề cập phía trên:

1. Chỉ chèn Form vào trang Single Post (Trang đăng bài viết)
2. Trang newsletter ID trang: 23177
3. Vài Trang đặc biệt khác với các ID: 23045, 10002, 23041

Ngoài ra, một điểm cần chú ý là ông Hustle đưa toàn bộ File CSS xuống Footer nên nó có hơi khác 1 chút vì khi Add Action bạn sẽ phải Add Action và wp_footer

Hàm xoá CSS không dùng

function totrieu_remove_hustle_css() {
	if (!is_single() || !is_page( array( 23177, 23045, 10002, 23041) )){
		wp_dequeue_style( 'hustle_icons' );
		wp_deregister_style( 'hustle_icons' );
		wp_dequeue_style( 'hustle_global' );
		wp_dequeue_style( 'hustle_optin' );
		wp_dequeue_style( 'hustle_inline' );
		wp_deregister_style( 'hustle_inline' );
	}
} 
add_action('wp_footer', 'totrieu_remove_hustle_css_', 100);

Hàm phía trên sẽ check nếu không phải trang Single Post, hoặc các trang có ID được đề cập sẽ xoá hết file css để tránh phải tải các tài nguyên không cần thiết.

Nếu không phải Remove các file CSS từ Footer, các bạn thay lệnh add_action bằng lệnh sau:

add_action( 'wp_enqueue_scripts', 'totrieu_remove_hustle_css', 100);

Hàm xoá JS không dùng

function totrieu_remove_hustle_js() {
	if (!is_single() || !is_page( array( 23177, 23045, 10002, 23041) )){
		wp_dequeue_script( 'hui_scripts' );
		wp_dequeue_script( 'hustle_front' );
		wp_dequeue_script( 'optin_admin_fitie' );
	}
} 
add_action( 'wp_print_scripts', 'totrieu_remove_hustle_js', 100);

Bây giờ kiểm tra lại các bạn sẽ thấy Page Size giảm đáng kể, request cũng giảm luôn (nếu không combined css và js)

Lời kết

Tôi muốn nhắc lại:

Trước khi thực hiện hành động này, Tôi khuyên bạn nên phân tích kỹ về nhu cầu sử dụng các Plugin và Kỹ thuật này không dành cho tất cả mọi người. Nó có thể làm cho Website của bạn Bị Broken.

Hầu hết các Plugin hiện tại đều không chú ý tới các yếu tố mà Tôi đề cập phía trên nên vô hình chung khi chúng ta mục đích chỉ thêm 1 tính năng nhỏ vào Website, nhưng lại gây ra gánh nặng cho toàn Website mà không có tác giả Plugin nào đề cập tới.

Trong bài viết trước đó, Tôi có lưu ý về việc một Website khi thêm quá nhiều chức năng có thể sẽ gây ra sự nặng nề khiến Website bị thất thế so với đối thủ.

Hi vọng với chia sẻ nhỏ này bạn có thể sẽ có cái nhìn khác và phân tích kỹ hơn nhu cầu sử dụng, hành vi của Độc giả để có những quyết định khi thêm các tính năng mới vào Website.

Chúc Website của bạn đạt điểm tốc độ cao và có thêm nhiều truy cập!

Tô Triều