Khu vực bình luận là một thứ không thể thiếu trong những website hiện đại giúp người dùng tương tác với người viết bài một cách dễ dàng.
Tuy nhiên hệ thống bình luận của bạn không được cấu hình chuẩn, nó có thể thực sự làm chậm trang website của bạn. Đặc biệt là những website có lượng traffic lớn và lượng bình luận lớn.
Hôm nay mình sẽ chia sẻ những chiến lược tắng tốc khu vực bình luận cho website WordPress.
Mục lục
Lazy load ảnh
Lazy load ảnh là một kỹ thuật giúp bạn tăng tốc độ load website.
Để khu vực bình luận trở lên hiệu quả và trách nghiệm hơn thì những quản trị viên WordPress sẽ tích hợp sẵn tính năng gravatar.
Nếu bạn đang sử dụng gravatar thì bạn cần phải sử dụng lazy load ảnh, chỉ đơn giản vì thông thường phong cách thiết kế của thế giới rồi, khu vực bình luận sẽ để xuống gần cuối trang web của bạn.
Nên chính vì vậy bạn cần phải sử dụng lazy load image.
Lazy load ảnh là gì, hướng dẫn sử dụng lazy load ảnh
Nếu bạn có phong cách thiết kế dị cho khu vực bình luận ở trên đầu thì thôi, bỏ qua chiến lược này.
Khi bạn sử dụng lazy load image thì bạn đã tối ưu hoàn tất gravatar, nếu bạn sử dụng lazy load không nên lưu trữ gravatar tại webhost của bạn, trừ trường hơp khu vực bình luận của bạn không giống ai ở ngay trên đầu màn hình hiển thị.
Sử dụng hệ thống bình luận load nhanh nhất
Hiện tại thì kinh nghiệm của mình thấy thì chỉ có 2 hệ thông bình luận có tốc độ load website tốt nhất hiện này là
- Hệ thống bình luận mặc định của WordPress
- Hệ thông bình luận wpDiscuz
Còn những hệ thống khác thì mình có sử dụng và kiểm tra thì rất là nặng nề đặc biệt là hệ thống bình luận của facebook tích hợp vào cho WordPress thì nặng thôi rồi mà mình thấy nhiều người vẫn đang sử dụng.
Còn nếu bạn muốn sử dụng hệ thống bình luận wpDiscuz bạn chỉ cần tải plugin wpDiscuz về và cài đặt đặc biệt với hệ thống bình luận này bạn cần phải cấu hình đúng thì tốc độ mới tốt, không cấu hình đúng thì tốc độ tệ hại lắm.
Hướng dẫn cấu hình hệ thống bình luận wpDiscuz
Bạn có thể tham khảo bài viết này của anh Gijo Varghese anh này là những cao thủ tối ưu tốc độ WordPress
Hiện tại website WP Tăng Tốc của mình vẫn đang sử dụng hệ thống bình luận của WordPress.
lại bỏ Javascript hoặc tải điều kiện Javascript của hệ thống trả lời bình luận của WordPress
Mình sẽ hướng dẫn tối ưu javascript hệ thống bình luận của mặc định của WordPress và mình đang sử dụng chiến thuật này.
add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_javascript_binh_luan', 100 );
function wptangtoc_deregister_javascript_binh_luan() {
wp_deregister_script( 'comment-reply' );
}bạn chỉ cần đưa đoạn code này vào file functions.php
Mục đích đoạn code này là mình sẽ loại bỏ javascript comment-reply, comment-reply được WordPress sinh ra để giúp bạn trả lời lại bình người dùng chống đẹp mắt chuyển cảnh các thứ nhưng thực sự không cần thiết.
Bạn loại bỏ javascript bạn vẫn trả lời bình luận như bình thường mỗi tối chuyển cảnh nó không còn đẹp cho lắm.
Mình cần loại bỏ vì website WordPress không phải là facebook hay mạng xã hội cần trả lời lại bình luận nhiều cần phải chuyển cảnh trả lời bình luận, người thường trả lời bình luận là tác giả của website ít khi là người dùng.
Trong trường hợp bạn không vẫn cứ thích chuyển cảnh khi trả lời.
bạn có thể áp dụng tải điều kiện comment-reply.js mình sẽ hướng dẫn.
Lưu ý là bạn đã sử dụng đoạn code tải điều kiện ở dưới này thì không sử dụng đoạn code xóa bỏ file ở trên phần trên mình có chia sẻ nhé
function wptangtoc_toi_uu_binh_luan_tra_loi_WordPress() {
if( is_singular() && comments_open() && get_comments_number() > 0 && get_option( 'thread_comments' ) === '1' ) {
wp_enqueue_script( 'comment-reply' );
} else {
wp_dequeue_script( 'comment-reply' );
}
}
add_action( 'wp_print_scripts', 'wptangtoc_toi_uu_binh_luan_tra_loi_WordPress', 100 );
Bạn cho đoạn code này vào file functions.php đoạn code ở trên mục đích là tải điều kiện những cái nào bài viết trong đó đã người bình luận rồi thì mới được hoạt động như vậy sẽ tối ưu hơn.
nếu tối ưu hơn thì bạn cần phải nghiên cứu chiến lược lazy load javascript nữa.
Bạn có thể sử dụng plugin: Lazy Load for Comments nếu bạn đang sử dụng hệ thống bình luận mặc định của WordPress.
Bạn có thể sử dụng plugin: Disqus Conditional Load nếu bạn đang sử dụng hệ thống bình luận Disqus.
2 plugin này không chỉ lazy load javascript mà nó lazy load giúp bạn cả hệ thống mình luận luôn và tối ưu khá tốt.
Tặng kèm khuyến cáo thêm: như mình có khuyến khích các bạn không nên sử dụng facebook bình luận nhưng mình biết là vẫn đang có nhiều người sử dụng thì bạn có thể sử dụng plugin này để tăng tốc bình luận của facebook nhé: lazy facebook comments
Hiện tại kỹ thuật mình có chia sẻ tại thời điểm bài viết này năm 2020 thì nó còn sơ khai vẫn trong đà phát triển, khi bạn sử dụng lazy load javascript tại webhost thường dễ bị lỗi. Tuy nhiên cứ thử đi
Bạn có thể tìm và sử dụng plugin flying page, hiện tại plugin tại thời điểm mình viết bài này nó là duy nhất và tốt nhất để lazy load javascript.
Xóa bỏ bình luận WordPress
Đây là trong trường hợp website của bạn gần như không có ai bình luận.
Bạn cũng nên tắt khu vực bình luận của bạn đi, nếu website của bạn không ai bình luận mà bạn không xóa tắt bình luận đi nó sẽ tải những thứ không cần thiết cho website của bạn làm giảm tốc độ website của bạn và giảm được một số rủi ro nâng cao bảo mật cho website của bạn một chút.
Hướng dẫn cách tắt bình luận của WordPress
Mình sẽ chia sẻ cách xóa toàn tập từ a đến z bình luận của WordPress.
function wptangtoc_tat_binh_luan_WordPress (){
$post_types = get_post_types(array('public' => true), 'names');
if(!empty($post_types)) {
foreach($post_types as $post_type) {
if(post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
}
add_filter('comments_array', function() { return array(); }, 20, 2);
add_filter('comments_open', function() { return false; }, 20, 2);
add_filter('pings_open', function() { return false; }, 20, 2);
if(is_admin()) {
add_action('admin_menu', 'wptangtoc_admin_menu_remove_comments', 9999);
add_action('admin_print_styles-index.php', 'wptangtoc_an_dashboard_comments_css');
add_action('admin_print_styles-profile.php', 'wptangtoc_an_profile_comments_css');
add_action('wp_dashboard_setup', 'wptangtoc_remove_recent_comments_meta');
add_filter('pre_option_default_pingback_flag', '__return_zero');
}
else {
add_filter('comments_template', 'wptangtoc_template_file_trong', 20);
wp_deregister_script('comment-reply');
add_filter('feed_links_show_comments_feed', '__return_false');
}
}
add_action('wp_loaded', 'wptangtoc_tat_binh_luan_WordPress');
function wptangtoc_an_dashboard_comments_css(){
echo "<style>
#dashboard_right_now .comment-count, #dashboard_right_now .comment-mod-count, #latest-comments, #welcome-panel .welcome-comments {
display: none !important;
}
</style>";
}
function wptangtoc_an_profile_comments_css(){
echo "<style>
.user-comment-shortcuts-wrap {
display: none !important;
}
</style>";
}
function wptangtoc_remove_recent_comments_meta(){
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
}
function wptangtoc_template_file_trong() {
return dirname(__FILE__) . '/comments-template.php'; // hãy tạo lập một file php rỗng với tên comments-template.php đặt ngang hàng file function.php tức là trong file themes WordPress của bạn
}
function wptangtoc_admin_menu_remove_comments() {
global $pagenow;
remove_menu_page('edit-comments.php');
remove_submenu_page('options-general.php', 'options-discussion.php');
if($pagenow == 'comment.php' || $pagenow == 'edit-comments.php') {
wp_die(__('Bình luận đã bị vô hiệu hóa.', 'wptangtoc'), '', array('response' => 403));
}
if($pagenow == 'options-discussion.php') {
wp_die(__('Bình luận đã bị vô hiệu hóa.', 'wptangtoc'), '', array('response' => 403));
}
}
Bước 1: Bạn chỉ cần đưa đoạn code này vào function.php của bạn
Bước 2: Tạo lập một file dạng php tên là : comments-template.php trong đó chỉ chỉ cần là rỗng không có gì, nhưng cũng cần phải mở mở lệnh php nhé, chỉ cần cho mỗi đoạn này <?php rồi bạn cho nó vào ngang hàng với file function.php của bạn ( nghĩa là đưa nó vào trong file themes của bạn, bạn dùng themes nào thì đưa file đó vào đấy)
Như vậy là xong.
Cách 2: để bạn có thể đơn giản nhất công việc này nhất có thể mình đã tạo một plugin để tắt toàn bộ mình luận của WordPress, bạn có thể sử dụng plugin này của mình để tắt toàn bộ bình luận
Tải Plugin
Rồi bạn cài đặt plugin qua file zip rồi kích hoat nó lên như vậy là xong.
Phân vùng render bằng thuộc tính css content-visibility
content-visibility là một trong những kỹ thuật rất mới thuộc tính năng mới bắt đầu có từ phiên bản google chrome 85 trở lên.
Nếu bạn áp dụng hiện tại bài viết này cũng khá ít người được hưởng lợi nhưng thôi không sao cứ làm đi, để trong tương lai bạn sẽ được hưởng thành quả.
content-visibility là một chủ đề rất rộng, mình cũng đã nghiên cứu qua thì mình sẽ tóm tắt qua về thuộc tính css này.
Thuộc tính content-visibility hiểu nó gần giống với thuộc tính display mà chúng ta vẫn thường xuyên sử dụng.
display: là hiển thị, content-visibility là render
content-visibility: thì có khá nhiều thuộc tính tuy nhiên mình sẽ dùng auto để trình duyệt sẽ tự động render một cách tối nhất.
content-visibility: auto
bây giờ bạn dùng công cụ Google Chrome Developers để biết chính xác thẻ dom cha của khu vực bình luận của bạn là gì.
thông thường kinh nghiệm của mình thì website WordPress sẽ dùng id comments, còn class thì có thể mỗi một themes bạn sử dụng thì sẽ khác. của mình class là entry-comments và id là comments
#comments{content-visibility: auto}bạn hãy đưa đoạn css này vào file style.css
về chủ đề content-visibility là một chủ đề rất rộng và mới hy vọng trong tương lai mình sẽ sớm chia sẻ về chủ đề content-visibility đây là một thuộc tính css cực kì mạnh mẽ và rất hay.
Bạn có thể tìm hiểu về content-visibility
Bạn sử dụng chiến thuật này nó có cải thiện cho bạn về tốc độ nhưng trên cơ sở là khá ít không nhiều như các chiến lược mình để cập ở trên, vào trường hợp trình duyệt người dùng không hỗ trợ content visibility thì cũng không được hưởng lợi gì, khi rất nhiều người dùng cập nhật trình duyệt của họ lên thì content visibility là một chiến lược tuyệt vời.
Hiện tại ngày 30-10-2020 thì 62% trình duyệt người dùng hỗ trợ content visibility bạn cũng cần cân nhắc triển khai.
Giới hạn hiển thị bình luận
Khi bạn giới hạn hiển thị bình luận tốc độ website của bạn sẽ load nhanh hơn khá đang kể, nếu bạn cho hiển thì càng nhiều thì cơ sở dữ liệu của bạn làm việc càng vất vả đi tìm kiếm những thông tin người dùng bình luận user các kiểu trong wp-comments.
Giới hạn hiển thị bình luận cũng là một chiến lược hợp lý khi người dùng muốn đọc bình luận thì người dùng có thể ấn tiếp sang trang sau để người dùng đọc bình luận.
Đến facebook một mạng xã hội bậc nhất hiện nay và có nhiều máy chủ mạnh tuy nhiên họ vẫn dùng chiến lược giới hạn hiển thị, khi người dùng muốn đọc thêm họ phải ấn nút xem thêm. ( nếu người dùng muốn họ sẽ tự ấn xem thêm, họ không muốn họ sẽ dễ dàng lướt qua, bạn không giới hạn số lượng hiển thị mà người dùng không muốn đó cũng là một dạng spam người dùng và tốn tài nguyên máy chủ và chậm website của bạn)
Giới hạn bao nhiêu thì tùy vào nhu cầu của riêng mỗi người, theo cá nhân mình thì con số chuẩn nhất là 7 hiển thị.
Con số 7 này là một con số tâm lý học và chuẩn ux , 7 lần đủ để tạo niềm tin người dùng.
mình giải thích qua vậy thôi chứ giải thích chi tiết qua thì thành bài viết chương trình tâm lý học rồi.
Cách giới hạn hiển thị bình luận: bạn chỉ truy cập vào: cài đặt => Thảo Luận
Tóm tắt:
Bình luận là một tính năng cốt lõi của hầu hết các blog website thời hiện đại ngày nay, nhưng phần bình luận đang thực sự có thể kéo dài tốc độ tải trang web của bạn xuống rất nhiều.
Bạn có thể tăng tốc trang web WordPress của mình bằng cách tối ưu hóa khu vực bình luận của WordPress bằng một số phương pháp mình có chia sẻ trong bài viết này.
Tối ưu hóa khu vực bình luận cũng là một trong những phần nhỏ trong tối ưu tốc độ wordpres.
Chúc bạn thành công !!
Để lại một bình luận