Tối ưu tốc độ plugin woocommerce | dành website bán hàng

woocommerce là plugin tốt nhất và không thể thiếu nếu như bạn muốn sử dụng WordPress tạo lập một website bán hàng, WordPress là một trong những thứ nổi tiếng là tạo lập một website blog, nhưng khi có plugin woocommerce thì WordPress không chỉ được còn gắn liền với khái niệm blog = WordPress giờ nhờ có woocommerce thì WordPress đã có thể dễ dàng tạo lập một website bán hàng, một cách dễ dàng.

woocommerce là một plugin miễn phí rất tuyệt vời tuy nhiên nó rất nặng nền làm website của bạn chậm đi rất nhiều bài viết này mình sẽ hướng dẫn các bạn cách tối ưu tăng tốc website đang sử dụng plugin woocommerce.

Nếu website của bạn đang tạo ra doanh thu 20 triệu VNĐ / ngày, thì sự chậm trễ 100 mili giây có thể khiến bạn mất 575 triệu VNĐ doanh thu hàng năm. – đừng để bị mất tiền vì tốc độ website chậm.

Tải điều kiện woocommerce

woocommerce tải thêm khá nhiều file css và file javascript tuy nhiên những file này chỉ có tác dụng với những trang shop page, sản phẩm, giỏ hàng, thanh toán… những trang mà woocommerce phụ trách nhưng nó vẫn load ở một số trang như blog, trang chủ của bạn.

Đặc biệt là trang chủ – trang chủ khi bạn dùng woocommerce thì là một câu chuyện hoàn toàn khác, nếu bạn không có sử dụng một tập lệnh file nào của woocommerce thì hãy tải điều kiện nhé.

Nếu website của bạn của bạn không viết blog và trang chủ của bạn có sử dụng các tập lệnh của woocommerce thì không nên cho đoạn code này vào. nếu website của bạn đáp ứng được nhiều điều kiện mình vừa nói ở trên thì hãy cho đoạn code này vào nhé.

Nếu trang chủ có sử dụng chỉ ít tập lệnh thì mình sẽ hướng dẫn.

add_action('wp_enqueue_scripts', 'wptangtoc_tai_dieu_kien_tang_toc_woocommerce', 99);
function wptangtoc_tai_dieu_kien_tang_toc_woocommerce() {
	if(function_exists('is_woocommerce')) {
		if(!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page() && !is_product() && !is_product_category() && !is_shop()) {
			//dieu kien xoa woocommerce css
			wp_dequeue_style('woocommerce-general');
			wp_dequeue_style('woocommerce-layout');
			wp_dequeue_style('woocommerce-smallscreen');
			wp_dequeue_style('woocommerce_frontend_styles');
			wp_dequeue_style('woocommerce_fancybox_styles');
			wp_dequeue_style('woocommerce_chosen_styles');
			wp_dequeue_style('woocommerce_prettyPhoto_css');
			wp_dequeue_style('woocommerce-inline');

			//dieu kien xoa WooCommerce Scripts javascript
			wp_dequeue_script('wc_price_slider');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-add-to-cart');
			wp_dequeue_script('wc-checkout');
			wp_dequeue_script('wc-add-to-cart-variation');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-cart');
			wp_dequeue_script('wc-chosen');
			wp_dequeue_script('woocommerce');
			wp_dequeue_script('prettyPhoto');
			wp_dequeue_script('prettyPhoto-init');
			wp_dequeue_script('jquery-blockui');
			wp_dequeue_script('jquery-placeholder');
			wp_dequeue_script('fancybox');
			wp_dequeue_script('jqueryui');

			//xoa no-js Script + Body Class
			add_filter('body_class', function($classes) {
				remove_action('wp_footer', 'wc_no_js');
				$classes = array_diff($classes, array('woocommerce-no-js'));
				return array_values($classes);
			},10, 1);
		}
	}
}

bạn đưa đoạn code này vào file functions.php của bạn tuy nhiên có trường hợp đặc biệt này xảy ra nếu trang chủ của bạn có sử dụng một số ít tệp lệnh nào đó thì bạn chỉ cần xóa dòng tập lệnh đó đi của bạn là xong.

Hãy cứ thử nếu bạn lỗi không sử dụng được tính năng nào trên trang chủ thì bạn cứ loại bỏ một số dòng theo nhu cầu cá nhân của bạn.

Chắc phần chuyên mục viết blog thì không có gì phải cần chú ý với đoạn code tối ưu woocommerce này đâu.

Tối ưu ajax cart woocommerce

Tính năng này là một tính năng mình cảm thấy rất tuyệt vời khi woocommerce sinh ra nó.

Đây là một tính năng hiểu ngắn gọn đơn giản là nó sinh ra phục vụ khi bạn sử dụng cache html page để tăng tốc website, nhưng khi khách hàng thêm sản phẩm vào giỏ hàng mà bạn sử dụng overlay giỏ hàng thì sẽ không được chính xác kết quả những sản phẩm mà khách hàng đã từng thêm vào giỏ hàng.

Tuy nhiên tính năng này cực hay nhưng cực kì là nặng nề, tính năng này rất hay nhưng có làm chậm website của bạn rất nhiều.

Tập lệnh: wc-ajax=get_refreshed_fragments khiến nhiều anh em mới bắt đầu tối ưu tốc độ load luôn luôn đặt câu hỏi thế quái nào nó nặng thế và thời gian load dài thế, khi sử dụng share hosting hay máy chủ yếu thì cài này thời gian nó chạy rất dài, máy chủ khỏe thì thời gian này cũng ngắn thôi.

add_action('wp_enqueue_scripts', 'wptangtoc_clear_ajax_dieu_kien_gio_hang', 99);
function wptangtoc_clear_ajax_dieu_kien_gio_hang() {
	if(function_exists('is_woocommerce')) {
		wp_dequeue_script('wc-cart-fragments');
		wp_deregister_script('wc-cart-fragments');
	}
}

Bạn cho đoạn code này vào file functions.php đoạn code này để tải điều kiện gọi ajax giỏ hàng nó chỉ gọi những tính năng này khi ở những trang mà woocommerce phục trách như trang sản phẩm, trang giỏ hàng, trang thanh toán, trang danh mục sản phẩm…

Trong trường hợp nếu website của bạn chỉ có nhu cầu một sản phẩm hoặc ít sản phẩm, hành vi người dùng không thêm vào giỏ hàng mà click vào mua ngay thôi thì đây là tính năng vô bổ mà không giúp ích gì, bạn cần xóa nó đi để cải thiện tốc độ load website.

add_action('wp_enqueue_scripts', 'wptangtoc_clear_ajax_gio_hang', 99);
function wptangtoc_clear_ajax_gio_hang() {
		wp_dequeue_script('wc-cart-fragments');
		wp_deregister_script('wc-cart-fragments');
}

bạn đưa đoạn code này vào file functions.php của bạn.

Nếu mô hình nhu cầu kinh doanh của bạn là bán sản phẩm giá rẻ, sản phẩm tiêu dùng thường xuyên, dùng giỏ hàng dạng overlay và người thêm sản phẩm vào nhiều thì không nên sử dụng mấy thủ thuật này trong website của bạn, để đảm bảo sự chuẩn xác khi người dùng thêm sản phẩm vào giỏ hàng của bạn.

Tắt trạng thái WooCommerce meta box

Theo mặc định, WooCommerce có một hộp meta trạng thái (tiện ích con thông báo) tải trong bảng điều khiển WordPress. Cái này theo mình khá là vô bổ thứ này không được sử dụng vì không có nhiều thông tin. nếu bạn không sử dụng và không bao giờ quan tâm đến nó nó thì hãy loại bỏ.

Trong trường hợp này, nếu bạn không sử dụng nó, tốt hơn là nên tắt nó để tăng tốc khu vực quản trị.

add_action('wp_dashboard_setup', 'wptangtoc_tat_woocommerce_status')
function wptangtoc_tat_woocommerce_status() {
	remove_meta_box('woocommerce_dashboard_status', 'dashboard', 'normal');
}

Tối ưu widgets woocommerce

khi bạn cài đặt và sử dụng plugin woocommerce thì woocommerce tích hợp rất nhiều widgets cho vào trong website của bạn, tuy nhiên không phải ai cũng dùng hết những các widget đó được, hay bạn sử dụng những widget giải pháp bên thứ 3 plugin hay themes gì đó đã giải quyết tốt vấn đề đó của bạn.

add_action('widgets_init', 'wptangtoc_tat_woocommerce_widgets', 99);
function wptangtoc_tat_woocommerce_widgets() {
	unregister_widget('WC_Widget_Products');
	unregister_widget('WC_Widget_Product_Categories');
	unregister_widget('WC_Widget_Product_Tag_Cloud');
	unregister_widget('WC_Widget_Cart');
	unregister_widget('WC_Widget_Layered_Nav');
	unregister_widget('WC_Widget_Layered_Nav_Filters');
	unregister_widget('WC_Widget_Price_Filter');
	unregister_widget('WC_Widget_Product_Search');
	unregister_widget('WC_Widget_Recently_Viewed');
	unregister_widget('WC_Widget_Recent_Reviews');
	unregister_widget('WC_Widget_Top_Rated_Products');
	unregister_widget('WC_Widget_Rating_Filter');
}

bạn cho đoạn code này vào file functions.php bạn phải cân nhắc xem bạn đang sử dụng những widgets nào của woocommerce, nếu bạn đang sử dụng nó nhớ hãy xóa dòng đó đi trong đoạn code của bạn rồi hãy thêm vào nhé.

Xóa Gutenberg của woocommerce

Trình biên tập WordPress mới Gutenberg được tích hợp sẵn trong WordPress 5,0. woocommerce cũng tải một file css để hỗ trợ Gutenberg.

Tuy nhiên mình thấy Gutenberg của woocommerce rất ít người sử dụng và không tận dụng được sức mạnh của nó.

bạn có thể loại bỏ nó để tăng tốc độ load website WordPress, nếu bạn muốn chuyển loại bỏ toàn bộ Hủy bỏ các Gutenberg toàn tập chuyển về classic editor bạn có thể tham khảo, trong bài viết mình có hướng dẫn củ thể của WordPress bình thường và cả Gutenberg block woocommerce.

Để loại bỏ Gutenberg block woocommerce, bạn có thể sử dụng đoạn code này.

add_filter('use_block_editor_for_post_type', '__return_false', 10);
add_action( 'wp_enqueue_scripts', 'wptangtoc_woocommerce_remove_block_css', 100 );
function wptangtoc_woocommerce_remove_block_css() {
wp_dequeue_style( 'wc-block-style' );
}

Đoạn code này bạn cho vào file functions.php của bạn.

Nâng cấp giới hạn PHP

WordPress mặc định sẽ cài đặt cấu hình bộ nhớ PHP là 32 MB. Nếu nó gặp phải bất kỳ lỗi nào, nó sẽ tự động cố gắng tăng giới hạn này lên 40 MB hay 64 MB.

Với website blog cơ bản thì 32MB giới hạn thì đã là đủ dùng rồi, nhưng với WooCommerce thì không đủ.

Trong hầu hết các trường hợp, giới hạn bộ nhớ này sẽ không đủ cho một trang WooCommerce. Bạn thậm chí có thể nhận được thông báo lỗi : “Allowed memory size of xxxxxx bytes exhausted”

Bạn nên tăng giới hạn của bộ nhớ php lên thành 256MB, có trường hợp bạn may mắn dùng share hosting vào đúng nhà share hosting có tâm họ đặt sẵn của bạn lên cao 256MB ( chắc chỉ có nhà cung cấp share hosting cao cấp và uy tín mới làm điều đó thôi) bình thường thì họ không giảm xuống là may mắn lắm rồi tận chí có khi họ chơi khô máu sẽ giảm xuống – đây cũng là một thứ để mình kiểm tra xem đánh giá sự có tâm và uy tín của nhà cung cấp share hosting đó như thế nào).

Để nâng cấp giới hạn bộ nhớ php của bạn lên.

define( 'WP_MEMORY_LIMIT', '256M' );

bạn chỉ cần đưa đoạn code này vào file wp-config.php của bạn, cho nó xuống cuối file nhé.

Tiếp theo bước 2: Tăng giới hạn bộ nhớ PHP trong cPanel

Nếu máy chủ của bạn đang sử dụng cPanel, bạn có thể tăng giới hạn bộ nhớ PHP ở hai khu vực khác nhau.

Đầu tiên là dưới phần phần mềm. Nhấp vào “Chọn phiên bản PHP”. Nhấp vào “Chuyển sang Tùy chọn PHP”. Sau đó, bạn có thể nhấp vào “memory_limit” để thay đổi giá trị của nó.

Khu vực thứ hai cũng nằm dưới phần phần mềm. Nhấp vào công cụ “MultiPHP INI Editor”. Điều này cho phép bạn sửa đổi php.ini tệp. Chỉ cần cuộn xuống nơi có nội dung “memory_limit” và nhập giá trị cao hơn.

Nếu bạn không sử dụng cpanel, bạn là người quản trị viên máy chủ thì bạn tìm để mục php.ini của bạn để chỉnh sửa lại: memory_limit

Phần kết:

với woocommerce sử dụng rất nhiều truy vấn cơ sở dữ liệu bạn cần phải quan tâm kỹ càng đến Object cache, bộ nhớ cache nào cũng quan trọng trong tăng tốc độ load website khi bạn dùng woocommerce hãy chút ý thật kỹ Object cache.

webhost bình thường blog thì sẽ ưu tiên nhiều ram hơn là nhiều cpu, nhưng với woocommerce thì sẽ ưu tiên cpu hơn. cấu hình như vậy để đảm bảo hoạt động tốt nhất cho website bán hàng sử dụng woocommerce.

Đây là những kỹ thuật cơ bản sẽ giúp bạn tăng tốc website bán hàng của bạn.

Có rất nhiều kỹ thuật tăng tốc cho website bán hàng sử dụng woocommerce, bạn có thể tham khảo các kỹ thuật trong blog của wp tăng tốc để áp dụng nhé.

Chúc bạn thành công!! 😄 😄