Loại bỏ Jetpack CSS không cần thiết ra khỏi website WordPress giúp giảm page-size và tăng tốc độ load.
Như các bạn đã biết, Jetpack là một trong những plugin đa năng giúp tích hợp rất nhiều tính năng hữu ích vào website WordPress. WP Căn bản đã có hẳn 1 serie để hướng dẫn cách sử dụng plugin Jetpack với những module phổ biến nhất. Và cũng chính vì đa năng nên Jetpack khá cồng kềnh, nặng nề, đặc biệt là khi bạn không biết cách tắt những module không dùng đến. Mà kể cả khi bạn tắt bớt những module không sử dụng thì Jetpack vẫn làm dung lượng CSS của website tăng lên khá nhiều. Tại sao vậy?
Tham khảo thêm:
- Tổng quan về cài đặt và sử dụng Jetpack plugin
- Ngăn Jetpack tạo thêm các bản ghi trong table options của database
Tại sao bạn cần loại bỏ Jetpack CSS?
Không chỉ trang bị các file CSS riêng rẽ cho từng module, Jetpack còn gộp chúng vào chung một file và load trực tiếp trên front-end. Do đó, ngay cả khi bạn đã tắt module thì CSS của nó vẫn hiện diện trên website. Vì vậy, tất nhiên rồi, việc của chúng ta bây giờ là ngay lập tức loại bỏ file CSS “bự con” này của Jetpack giúp giảm page-size, số request và làm website load nhanh hơn.
Làm thế nào để loại bỏ Jetpack CSS?
Đối với Jetpack 6.9 trở về sau
Rất đơn giản! Tất cả những gì bạn cần làm là chèn đoạn code sau đây vào cuối file functions.php của theme (hoặc child theme) mà bạn đang sử dụng.
| add_filter( 'jetpack_sharing_counts', '__return_false', 99 ); | |
| add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 ); |
Đối với Jetpack 6.8.1 trở về trước
Nếu bạn đang sử dụng Jetpack phiên bản cũ (từ 6.8.1 trở về trước), hãy thay thế bằng code sau đây. Nhớ xóa bớt dòng code tương tứng với từng module mà bạn đang sử dụng để giữ lại chúng.
| // First, make sure Jetpack doesn't concatenate all its CSS | |
| add_filter( 'jetpack_implode_frontend_css', '__return_false' ); | |
| // Then, remove each CSS file, one at a time | |
| function jeherve_remove_all_jp_css() { | |
| wp_deregister_style( 'AtD_style' ); // After the Deadline | |
| wp_deregister_style( 'jetpack_likes' ); // Likes | |
| wp_deregister_style( 'jetpack_related-posts' ); //Related Posts | |
| wp_deregister_style( 'jetpack-carousel' ); // Carousel | |
| wp_deregister_style( 'grunion.css' ); // Grunion contact form | |
| wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll | |
| wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll – Twentyten Theme | |
| wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll – Twentyeleven Theme | |
| wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll – Twentytwelve Theme | |
| wp_deregister_style( 'noticons' ); // Notes | |
| wp_deregister_style( 'post-by-email' ); // Post by Email | |
| wp_deregister_style( 'publicize' ); // Publicize | |
| wp_deregister_style( 'sharedaddy' ); // Sharedaddy | |
| wp_deregister_style( 'sharing' ); // Sharedaddy Sharing | |
| wp_deregister_style( 'stats_reports_css' ); // Stats | |
| wp_deregister_style( 'jetpack-widgets' ); // Widgets | |
| wp_deregister_style( 'jetpack-slideshow' ); // Slideshows | |
| wp_deregister_style( 'presentations' ); // Presentation shortcode | |
| wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions | |
| wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries | |
| wp_deregister_style( 'widget-conditions' ); // Widget Visibility | |
| wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget | |
| wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget | |
| wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget | |
| wp_deregister_style( 'jetpack-widgets' ); // Widgets | |
| } | |
| add_action('wp_print_styles', 'jeherve_remove_all_jp_css' ); |
Nếu bạn không biết làm thế nào để mở file functions.php hoặc đơn giản là sợ làm lỗi theme thì có thể tham khảo bài viết “Tạo file functions.php để chèn code tùy biến WordPress“.
Cuối cùng, xóa cache website (và cache CSS, JS nếu có) rồi kiểm tra kết quả bằng các công cụ như GTmetrix hay Pingdom (xem page-size). Thật đơn giản phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
cảm ơn tác giả
Hay quá, cảm ơn bác Hiếu đã chia sẻ!
đọc đi đọc lại mà không hiểu sao mình cần loại bỏ Jetpack CSS, nếu mình không loại bỏ Jetpack CSS thì được không bạn?mình vẫn không hiểu lắm về vấn đề này, mong bạn chỉ giáo ạ
Được bạn nhé. Nhưng nếu như vậy thì web sẽ nặng hơn và load chậm hơn một chút. :P
AD cho em hỏi vào đâu để xem phiên bản Jetpack ạ
Bạn vào Plugins => Installed Plugins nhé. Bên dưới phần mô tả của plugin có ghi version đấy bạn.
dạ vâng em cảm ơn nhé
Đến giờ em vẫn xài, có vài chức năng miễn phí của nó quá ngon. Vd: xác minh tin nhắn khi đăng nhập
Ngày xưa mình xài nó có tính năng thông báo bình luận gửi đến mail, không biết nay còn ngon không ?
Dùng wp thì được bài bữa dữa liệu nhiều lên khó thì load rất chậm . Nên hơi nản
Quan trọng vẫn là cách tối ưu dữ liệu thôi bạn. Biết cách thì vẫn load ầm ầm. :)
Đúng tuy nhiên để chọc sâu vào core của nó thấy hơi oải. 1 page mà query hơn 20 câu khắm lắm
Cảm ơn bài viết của bạn. Khá hữu ích
Vài biết cũng khá lâu rồi, không biết phiên bản hiện tại có còn tồn động code thừa nữa ko anh? Anh Hiếu cập nhật để mọi người khỏi bị lạc hậu nha ^_^
Mình đã cập nhật bài viết để phân biệt giữa các phiên bản Jetpack khác nhau rồi đấy bạn.
Đôi lúc mình loại bỏ cái nó dính luôn những css đang sử dụng làm web bị lỗi luôn. Hix nhưng cũng cảm ơn bài viết
Xin chào Hiếu.
Mình thấy bạn sử dụng tính năng related post của jetpack.
Mình thấy tốc độ thấy phần này của bạn chỉ chiếm có 43ms. (https://wpcanban.com/wordpress/thu-thuat-wordpress/loai-bo-jetpack-css-khoi-website-wordpress.html?relatedposts=1)
Mình kiểm tra của mình thì phần related post này chiếm tới 3s.
Không biết bạn tối ưu phần này như thế nào và bạn đang sử dụng bản jetpack pro hay bản thường vậy?
Mình cảm ơn!
Mình dùng Jetpack Personal, nhưng đây là module miễn phí mà, nên như nhau cả thôi. Tốc độ load hơn nhau ở cách tối ưu mã nguồn web và hosting.