Tự c++

WooC Commerce là một plugin không xa lạ với bất kỳ trình lập trình viên WordPress nào. Đây là một plugin bất lợi nhắc đến đầu tiên khi nhắc đến Trang web bán hàng wordpress nhờ khả năng đặt nhẹ nhàng các tính năng mạnh mẽ ngược lại khả năng sẵn có của nó và chỉ

Tuy nhiên, Là một người khá khô khan khi tải trang web của mình, người viết không thực sự hài lòng với tốc độ mà plugin WooC Commerce mang lại. Nếu bạn đang sử dụng WooC Commerce để bán hàng trên WordPress thì bạn có thể thấy một số tập lệnh phụ được tải xuống trên tất cả các trang trong trang web b. Nhưng để cải thiện tốc độ tải trang web, bạn chỉ nên tải các tập lệnh WooC Commerce đó 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 các bạn cách tối ưu hóa WooCommerce script thành style để cải thiện tốc độ tải website

Đầu tiên, bạn cần xem xét một số vấn đề sau

• Có thành phần nào trên trang web của bạn phụ thuộc vào tập lệnh WooC Commerce bên ngoài trang WooC Commerce chính (cửa hàng, giỏ hàng, thanh toán,…)?
• Bạn đã có những thử nghiệm về mã trên trang web thương mại điện tử của bạn chưa?
• Bạn có quyền chỉnh sửa chủ đề và mã trong trang web mã nguồn không?

Nếu bạn đã có đủ công cụ và kiến ​​thức cần thiết thì chúng ta bắt đầu bằng cách kiểm tra xem kịch bản nào cần bỏ bt từ vùng không có web Commerce

Bỏ qua những kịch bản WooC Commerce nào?

Bạn hãy mở trang web wordpress đã được đặt lại và kích hoạt woo-factorce của bạn lên và nhìn vào mã nguồn, bạn sẽ có nhiều tệp javaScript và css riêng cho woocommerce cũng như trình tạo meta và một kh

Script

• thương mại điện tử. tối thiểu. js
• Thủ tục thanh toán. js
• thêm vào giỏ hàng. tối thiểu. js
• jquery. bánh quy. tối thiểu. js
• mảnh giỏ hàng. tối thiểu. js
• jquery. blockUI. tối thiểu. js
• jquery. giữ chỗ. tối thiểu. js
• …

Phong cách

• thương mại điện tử. css
• bất kỳ kiểu hộp đèn nào (prettyphoto)
• Tùy chỉnh CSS cho WooC Commerce
• … can add CSS options to your setting

Như bạn đã thấy, đây chỉ là một danh sách đối sánh. Tất cả các kịch bản là sự thật 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 sử dụng trình tạo thẻ meta cho người dùng và rô bốt có hiểu biết về công nghệ biết nhiều về hệ thống giỏ hàng nhanh chóng mà

Vui lòng kiểm tra xem có bao nhiêu WooC Commerce được tải xuống thực sự bổ sung vào trang web thử nghiệm cụ thể của mình

Trước khi tối ưu hóa tập lệnh WooC Commerce

kết qua trước khi bạn ư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ỳ tập lệnh nào. Bạn có thể thấy trong kiểm tra này, trang web chiếm khoảng 1,6 MB có đủ 75 yêu cầu tải xuống đầy đủ. Trang web này không có trên máy chủ 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 tập lệnh WooC Commerce

kết qua sau khi bạn ưu hóa woocommerce script

Bạn có thể cho 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 ủy quyền, tổng số byte cũng giảm và trang web giờ chỉ. Thời gian tải giảm từ 7,2 giây xuống còn 5,8 giây, như vậy tổng thời gian tải xuống gần 1,4 giây

Thời gian tải vẫn không phải là tối ưu cho trang web này nhưng tốt hơn là việc không có bất kỳ tối ưu hóa và sửa đổi kịch bản nào. Điều tốt nhất mang lại chức năng thông thường của woocommerce là ở đó người dùng sẽ đánh giá cao công thức của một trang web nhanh hơn, cùng với đó hy vọng doanh thu sẽ tăng lên

Mã để tối ưu hóa tập lệnh WooC Commerce

Đoạn mã sau đây là những gì mình có trong kịch bản và phong cách WooCommece dequeue. Do đây là một chủ đề có chức năng cụ thể nên mình khuyên bạn nên thêm mã này vào tệp chức năng. php của chủ đề bạn đang sử dụng thông qua một plugin riêng biệt

Thêm đoạn mã sau vào chức năng chủ đề. 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 mã mới vào mã nguồn cho những trang không sử dụng WooC Commerce, bạn sẽ thấy tất cả các tập lệnh, kiểu dáng 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 tập lệnh như jQuery UI hoặc Fancybox, bạn có thể xóa hoặc ngắt chú thích các dòng dequeue các tập lệnh đó. Đoạn mã bên trên được lấy từ Gist Github

Please 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 tập lệnh WooC Commerce trên trang web của bạn ở ngoài cửa hàng và kiểm tra các trang, bạn có thể dễ dàng sửa đổi tập lệnh này để phù hợp với hợ cợn v. Ví dụ, nếu bạn muốn tải xuống tập lệnh WooC Commerce ở trang chủ của bạn thì sẽ thêm điều kiện !is_home

Tô Lài

Việc tối ưu tốc độ tải 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 mã đoạn bên trên sẽ giúp bạn tối ưu hóa kịch bản và phong cách WooC Commerce để cải thiện tốc độ tải trang cho web kích thước b