Để build 1 website thì không có gì khó khăn, nhưng để điểm số trên Google Speed đạt được mốc xanh thật không dễ dàng chút nào, đặc biệt là trên giao diện mobile.
Hôm nay mình sẽ hướng dẫn 1 cách giảm thiểu CSS không dùng trong website, giúp website load nhanh hơn và cải thiện 1 phần điểm số Google Speed.
Lưu ý: Bài viết này không tập trung vào mục đích đạt được điểm số tối ưu trên Google Speed, mà chỉ giúp các bạn có 1 hướng giải quyết vào việc tối ưu website.
Ý Tưởng
Ý tưởng ở đây không có gì quá đặc biệt. Đơn giản là dequeue một (nhiều) file CSS và enqueue lại file (các file) đó chỉ bao gồm phần CSS sử dụng.
Oke, tiếp theo các bạn sẽ nghĩ: “Làm thế nào biết CSS nào đang sử dụng hoặc không” thì mình đang sử dụng công cụ này để xuất ra những file chỉ bao gồm CSS đang sử dụng trong website.
Lưu ý: Mình đã sử dụng và nhận ra công cụ này không chính xác 100%, bởi có những CSS đang được dùng nhưng https://purifycss.online/ đã bỏ đi. Tuy nhiên phần lớn vẫn hoạt động tốt và giúp mình giảm bớt dung lượng những file CSS có kích thước lớn 500kB, 1MB thì vẫn đáng để sử dụng đúng không nào.
Các Bước Thực Hiện
Bước 1: Truy cập vào https://purifycss.online/ đề xuất các file CSS tối giản của trang web
Lưu ý: Disabled plugin cache hoặc plugin minify CSS trước khi làm để dễ dàng thấy được các file CSS được liệt kê.
Ví dụ ở đây mình nhập trang web của mình vào, nhấn clean up CSS. Đợi 1 lát, các bạn sẽ thấy 1 list các file CSS đã được tối ưu. Giờ lựa những file mà bạn nghĩ cần dequeue khỏi website và thay bằng file đã được tối ưu.
Ví dụ ở trên đây mình thấy block-library/style.min.css có dung lượng 56.83KB, nhưng đang sử dụng 17.36% và 82.64% là không sử dụng.
Bước 2: Lưu file CSS tối giản lên Host, tiến hành thay thế file cũ
Click vào “Show clean css code” sẽ thấy css minify. Copy vào tạo file CSS đó trên thư mục theme. Ví dụ ở đây có thể là theme-name/assets/css/block-library-style.min.css.
Tiếp theo, copy đoạn code này bỏ vào functions.php
function dequeue_all_styles() {
wp_deregister_style( 'wp-block-library' );
wp_enqueue_style('wp-block-library', get_stylesheet_directory_uri().'/assets/css/block-library-style.min.css');
}
add_action('wp_print_styles', 'dequeue_all_styles', 9999);Nếu các bạn không biết wp-block-library lấy ở đâu ra thì đó chính là ID của file được enqueue vào. Các bạn có thể dễ dàng tìm kiếm được bằng cách view source:
Xong, như vậy là mình đã thay thế file CSS tối giản bằng file CSS dư thừa ban đầu. Cứ tiếp tục làm tiếp với các file CSS tiếp theo. Nhớ vừa làm vừa check đảm bảo website không bị lỗi layout nha ^^.
Với cách làm trên các bạn có thể giảm dung lượng CSS mà website cần phải load, do đó thời gian load sẽ nhanh hơn và góp 1 phần cải thiện điểm số trên Google Speed.
Các bạn có đóng góp hay thắc mắc gì có thể để lại bình luận bên dưới.