Hướng dẫn tối ưu hóa WooCommerce script và style để cải thiện tốc độ tải trang

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 trang web của bạn. Nhưng để cải thiện tốc độ tải trang, 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à style để cải thiện tốc độ tải trang.

Đầ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 trang web 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 trang web 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 đã thoải mái chỉnh sửa theme và code trong file?

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?

woocommerce-param-junkBạ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 (xem ảnh chụp màn hình).

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

woo-scripts

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:

pre-woocommerce-optimization-stats

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:

post-woocommerce-optimization-stats

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

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

Đoạn code bên trên được lấy từ Gist.

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 trông thấy. Nếu bạn cần các script như jQuery UI hoặc Fancybox thì bạn có thể chú thích ra các dòng dequeue những script đó.

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

Tùy vào cách sử dụng WooCommerce, sẽ khôn ngoan hơn khi bạn có cái nhìn nghiêm khắc hơn trong việc tối ưu hóa đầu ra. Là một người khá khắt khe trong việc tải trang web của mình và nếu các plugin gom tất cả style và script trên toàn thế giới cho mình, mình muốn script và style càng sạch càng tốt và rất thích khi WooCommerce có thể tiếp tục tối ưu hóa đầu ra. Mình hiểu rằng có nhiều trường hợp sử dụng nó vô nghĩa.

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

×