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?
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.
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 );
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.
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' );
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!