WooCommerce là một plugin không hề xa lạ với bất kỳ lập trình viên WordPress nào. Đây là một plugin được nhắc đến đầu tiên khi nhắc đến website bán hàng WordPress bởi khả năng cài đặt dể dàng các tính năng mạnh mẽ được tích hợp sẵn của nó chỉ bằng vài click chuột.
Tuy nhiên, Là một người khá khắt khe trong việc tải website của mình, người viết không thực sự hài lòng với tốc độ mà plugin WooCommerce mang lại. Nếu bạn đang sử dụng WooCommerce để bán hàng trên WordPress thì bạn có thể thấy một số script phụ đang được tải trên tất cả các trang trong website của bạn. Nhưng để cải thiện tốc độ tải website, bạn chỉ nên tải các script WooCommerce đó trên trang bán hàng mà thôi. Trong bài viết hôm nay, mình sẽ hướng dẫn cho bạn cách tối ưu hóa WooCommerce script vào style để cải thiện tốc độ tải website.
Đầu tiên, bạn cần xem xét một vài vấn đề sau:
- Có thành phần nào trên website của bạn phụ thuộc vào script WooCommerce ngoài trang WooCommerce chính (cửa hàng, giỏ hàng, thanh toán, …)? Đó có thể là thành phần giỏ hàng ở header hoặc có thể là một số widget sidebar tìm thấy trên website của bạn.
- Bạn đã có những thử nghiệm về code trên trang web thương mại điện tử của bạn?
- Bạn có quyền chỉnh sửa theme và code trong mã nguồn website?
Nếu bạn đã có đủ các công cụ và kiến thức cần thiết thì chúng ta bắt đầu bằng việc kiểm tra xem script nào cần bỏ bớt từ vùng không sử dụng WooCommerce của trang web.
Cần bỏ những script WooCommerce nào?
Bạn hãy mở trang web WordPress đã được cài đặt và kích hoạt WooCommerce của bạn lên và nhìn vào source code, bạn sẽ thấy nhiều file JavaScript và CSS riêng cho WooCommerce cũng như thẻ meta generator và một khối toàn bộ WooCommerce params.
Script:
- woocommerce.min.js
- checkout.js
- add-to-cart.min.js
- jquery.cookie.min.js
- cart-fragments.min.js
- jquery.blockUI.min.js
- jquery.placeholder.min.js
- …
Style:
- woocommerce.css
- Style lightbox bất kỳ (prettyphoto)
- Tùy chỉnh CSS cho WooCommerce
- … có thể thêm CSS tùy thuộc vào thiết lập của bạn.
Như bạn thấy thì đây chỉ là một danh sách tương đối. Tất cả các script thật sự có thể thêm thời gian tải đáng kể cho trang web của bạn. Một trang web chậm hơn dẫn đến việc ít khách ghé thăm và sau cùng có doanh thu ít đi. Đồng thời, một số chủ web không thích việc thẻ meta generator cho người dùng và robots có hiểu biết về công nghệ biết nhiều về hệ thống giỏ hàng mà họ đang sử dụng.
Hãy kiểm tra xem bao nhiêu WooCommerce tải được thực sự thêm vào trang web thử nghiệm cụ thể của mình.
Trước khi tối ưu hóa WooCommerce script:
Mình chạy trang web của mình thông qua webpagetest.org để xem kết quả mà không cần tối ưu hóa bất kỳ script nào. Bạn có thể thấy trong kiểm tra này, trang web khoảng 1,6 MB có 75 yêu cầu tải đầy đủ. Trang web này không ở trên một host mạnh nên thời gian tải bây giờ là dưới mức trung bình.
Sau khi tối ưu hóa WooCommerce script:
Bạn có thể thấy rằng sau khi tối ưu hóa thì các yêu cầu đã giảm từ 75 xuống còn 9 trong tổng số 66 yêu cầu tải đầy đủ, tổng số byte cũng giảm và trang web giờ chỉ còn khoảng 1,5 MB. Thời gian tải giảm từ 7,2 giây xuống còn 5,8 giây, vậy là tổng thời gian tải giảm gần 1,4 giây.
Thời gian tải vẫn không là tối ưu cho trang web này nhưng tốt hơn so với việc không có bất kỳ tối ưu hóa và sửa đổi script nào. Điều tốt nhất mang lại cho chức năng thông thường của WooCommerce là người dùng sẽ được thưởng thức một trang web nhanh hơn, cùng với đó là hy vọng doanh thu sẽ tăng lên.
Code để tối ưu hóa WooCommerce script
Đoạn code sau đây là những gì mình có trong dequeue WooCommece style và script. Do đây là một theme có chức năng cụ thể nên mình khuyên bạn thêm code này vào file functions.php của theme bạn đang sử dụng qua một plugin riêng biệt.
Thêm đoạn code sau vào theme functions.php
/**
* Optimize WooCommerce Scripts
* Remove WooCommerce Generator tag, styles, and scripts from non WooCommerce pages.
*/
add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );
function child_manage_woocommerce_styles() {
//remove generator meta tag
remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
//first check that woo exists to prevent fatal errors
if ( function_exists( 'is_woocommerce' ) )
{
//dequeue scripts and styles
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() )
{
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_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
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' );
}
}
}Sau khi đã thêm code mới vào source code cho những trang không dùng WooCommerce, bạn sẽ thấy tất cả các script, style và thẻ meta biến mất, web cũng tải nhanh hơn rất nhiều. Nếu bạn cần các script như jQuery UI hoặc Fancybox thì bạn có thể xóa hoặc ngắt chú thích các dòng dequeue những script đó.Đoạn code bên trên được lấy từ Gist Github.
Hãy thông báo các câu lệnh điều kiện mà chúng ta đang sử dụng: ! is_woocommerce() && ! is_cart() && ! is_checkout(). Nếu bạn muốn tải script WooCommerce trên trang web của bạn ở ngoài cửa hàng và kiểm tra các trang thì bạn có thể dễ dàng sửa đổi script này cho phù hợp với việc bạn cần. Ví dụ, nếu bạn muốn tải script WooCommerce ở trang chủ của bạn thì sẽ thêm điều kiện !is_home.
Tóm lại
Việc tối ưu tốc độ load trang web thương mại điện tử là vô cùng cần thiết. Hy vọng qua bài viết này, cùng với đoạn code bên trên sẽ giúp bạn tối ưu hóa WooCommerce script và style để cải thiện tốc độ tải trang cho trang web của bạn.
