Jak poprawić prędkość ładowania się sklepu opartego o WooCommerce?

WooCommerce to jedna z popularnych wtyczek, dzięki której Twoja witryna WordPress stanie się sklepem internetowym. Większość popularnych motywów oferuje zintegrowaną funkcję sklepu za pomocą wtyczki WooCommerce. Z testów na podstawie kontroli prędkości strony na GTmetrix i pingdom, można często wywnioskować, że element “wc-ajax=get_refreshed_fragments” zajmuje około sekundy, aby się załadować. Jeśli masz problem z prędkością strony z wywołaniami Ajaxowymi WooCommerce, oto rozwiązania, które pomogą Ci rozwiązać ten problem dla różnych scenariuszy.

Czym jest wc-ajax=get_refreshed_fragments ?

Poniżej znajduje się zrzut ekranu z pingdom pokazujący długi czas oczekiwania na załadowanie “wc-ajax=get_refreshed_fragments” na stronie. Możesz również zobaczyć, że ten skrypt będzie wymieniony jako problem blokujący renderowanie w narzędziu Google PageSpeed Insights i znaleźć go pod wykresem wodospadowym w GTmetrix.

Zasadniczo WooCommerce próbuje zebrać szczegóły koszyka, wywołując skrypt i to zajmuje dużo czasu. Wtyczka pobiera niezbuforowane szczegóły koszyka na każdej stronie, aby pokazać najnowsze pozycje koszyka poprzez wywołanie admin Ajax.

Na stronach gdzie występuje skrypt, możesz w źródle znaleźć go np. w następującej formie:

<script type='text/javascript'>
/* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http:\/\/localhost\/shop\/cart\/","is_cart":"","cart_redirect_after_add":"yes"}; /* ]]> */
</script>

Odwołania admin ajax i ładowanie się strony.

WooCommerce używa tej fragmentacji koszyka admin Ajax call, aby zaktualizować przedmioty i sumę w koszyku bez odświeżania strony. Wywołanie admin Ajax na każdej stronie znacznie opóźni czas ładowania strony, a także zużyje duże zasoby serwera. Innym problemem jest to, że wtyczka wykonuje to działanie nawet na stronie, na której nie ma koszyka lub szczegółów związanych z produktem.

Przykładowo problem istnieje na stronie “O nas”, gdzie nie ma dostępnych komponentów WooCommerce. Tak więc, usunięcie koszyka na stronie nie pomoże w poprawieniu prędkości ładowania strony. To, czego potrzebujemy, to wyłączenie aktualizacji koszyka, gdzie nie ma żadnych koszyków ani produktów wyświetlanych.

Jak naprawić problem z wc-ajax=get_refreshed_fragments?

Problem należy naprawić poprzez wyłączenie skryptu przez modyfikację pliku functions.php Twojego motywu.

Możesz zmodyfikować functions.php poprzez panel administracyjny WordPressa lub używając FTP.

Zamiast modyfikować plik functions.php głównego motywu, możesz utworzyć motyw child i dodać tam dodatkowe funkcje. Pomoże to zachować zmiany, gdy zaktualizujesz główny motyw.

Istnieją trzy opcje wyłączenia skryptu fragmentacji koszyka WooCommerce Ajax.

• Wyłączenie tylko fragmentacji koszyka na stronie głównej
• Wyłączenie tylko fragmentacji koszyka na stronie głównej i postach
• Wyłączenie wszystkich stylów i skryptów WooCommerce na wszystkich stronach z wyjątkiem stron sklepu.

Omówmy szczegółowo wszystkie trzy opcje, ale pamiętaj, aby wykonać tylko jedną z nich.

Wyłączenie tylko fragmentacji koszyka na stronie głównej

Zaloguj się do panelu administracyjnego WordPress, przejdź w menu po lewej stronie do “Wygląd > Edytor plików motywu” i zlokalizuj plik functions.php. Dodaj następujący kod na końcu pliku.

/** Disable Ajax Call from WooCommerce */
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11); 
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }

Powinien on wyglądać jak poniżej w edytorze, po wklejeniu kodu kliknij na “Update File lub Zaktualizuj” aby zapisać zmiany.

Jeśli chcesz użyć FTP, to zaloguj się na swój serwer za pomocą konta FTP. Przejdź do “/wp-content/twoj-motyw/” i znajdź plik “functions.php”. Edytuj i dodaj powyższy kod na końcu pliku i prześlij zmodyfikowany plik z powrotem na serwer.

Po aktualizacji pliku przejdź do menu “WooCommerce > Ustawienia” i przejdź zakładki “Produkty”. Włącz pole wyboru przy opcji “Przekieruj do koszyka po dodaniu produktu”.

Pomoże to klientowi przejść do głównej strony koszyka zamiast czekać przez długi czas po dodaniu przedmiotu do koszyka. W przeciwnym razie, choć przedmiot jest dodany, Twój koszyk może nie pokazywać zaktualizowanych szczegółów, gdy jesteś na tej samej stronie, ponieważ skrypt fragmentacji koszyka jest wyłączony.

Wyłączenie tylko fragmentacji koszyka na stronie głównej i postach

Powyższy kod wyłączy skrypt fragmentu koszyka tylko na statycznej stronie głównej. Jeśli chcesz wyłączyć skrypt na wszystkich postach, spróbuj dodać poniższy kod w pliku function.php swojego motywu.

/** Disable Ajax Call from WooCommerce on front page and posts*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script('wc-cart-fragments');
}

Wyłączenie wszystkich stylów i skryptów WooCommerce na wszystkich stronach z wyjątkiem stron sklepu.

W sytuacji gdy chcesz uzyskać najlepszy wynik w i nie potrzebujesz elementów sklepu na innych podstronach, czy w postach, możesz skorzystać z poniższego skryptu dodając go do functions.php na tej samej zasadzie co opisano wyżej.

/** Disable All WooCommerce  Styles and Scripts Except Shop Pages*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
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' );
# Scripts
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' );
}
}
}