TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Napraw powolne ładowanie strony za pomocą WooCommerce wc-ajax=get_refreshed_fragments

4

WooCommerce to jedna z popularnych wtyczek, dzięki którym Twoja witryna WordPress stanie się sklepem internetowym. Większość popularnych motywów oferuje zintegrowaną funkcję sklepu za pomocą wtyczki WooCommerce. Na niektórych naszych stronach korzystamy również z WooCommerce. Ostatnio, gdy sprawdzaliśmy szybkość strony w GTmetrix i pingdom, okazało się, że ładowanie komponentu „wc-ajax=get_refreshed_fragments" trwało około sekundy. Po analizie okazało się, że w większości innych przypadków trwa to nawet od 5 do 10 sekund. strona do załadowania.Jeśli masz problem z szybkością strony z wywołaniami WooCommerce Ajax, oto rozwiązania, które rozwiążą ten problem dla różnych scenariuszy.

Napraw problem AJAX WooCommerce

W tym artykule omówiliśmy następujące tematy dotyczące WooCommerce wc-ajax=get_refreshed_fragments:

  1. Co to jest wc-ajax=get_refreshed_fragments?
  2. Problem z ładowaniem strony z wywołaniami Ajax administratora
  3. Jak naprawić powolne ładowanie strony w WooCommerce za pomocą administratora Ajax?
    1. Wyłącz tylko fragmentację koszyka na stronie głównej witryny
    2. Wyłącz tylko fragmentację koszyka na stronie głównej i postach
    3. Wyłącz wszystkie style i skrypty WooCommerce na wszystkich stronach z wyjątkiem stron sklepu
  4. Używanie wtyczki do zatrzymania połączenia Ajax administratora WooCommerce
  5. Testowanie szybkości strony
  6. Zatrzymywanie interfejsu API bicia serca WordPress

1 Co to jest wc-ajax=get_refreshed_fragments?

Minęło trochę czasu, zanim zrozumieliśmy, że odświeżone fragmenty na wykresie szybkości strony są wywoływane z wtyczki WooCommerce. Ponieważ nasza strona była hostowana na SiteGround Cloud VPS, wpływ był mniejszy, a połączenie WooCommerce Ajax trwało około sekundy. Jeśli korzystasz z hostingu współdzielonego, takiego jak Bluehost, możesz zauważyć dłuższe opóźnienie ładowania strony od 3 do 10 sekund.

Poniżej zrzut ekranu z pingdomu pokazujący długi czas oczekiwania na załadowanie „wc-ajax=get_refreshed_fragments” na stronie. Możesz również zobaczyć, że ten skrypt zostanie wymieniony pod problemem blokowania renderowania w narzędziu Google PageSpeed ​​Insights i znaleźć go pod wykresem kaskadowym w GTmetrix.

Problem z ładowaniem strony Ajax WooCommerce

Zasadniczo WooCommerce próbuje zebrać szczegóły koszyka, wywołując skrypt i zajmuje dużo czasu, aby wykonać zadanie. Wtyczka pobiera niebuforowane szczegóły koszyka na każdej stronie, aby pokazać najnowsze pozycje koszyka, dzwoniąc do administratora Ajax. Możesz zobaczyć skrypt podobny do poniższego na każdej stronie Twojej witryny:

<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>

To jest w środowisku localhost i powinieneś zobaczyć kod z własnym adresem URL.

Napraw powolne ładowanie strony za pomocą WooCommerce wc-ajax=get_refreshed_fragments

Fragmenty Ajax WooCommerce w źródle strony

2 wywołania administracyjne Ajax i ładowanie strony

WooCommerce używa tego wywołania Ajax administratora fragmentacji koszyka, aby zaktualizować pozycje i sumę w koszyku bez odświeżania strony. Wywołanie administratora Ajax na każdej stronie znacznie opóźni czas ładowania strony, a także zużyje wysokie zasoby serwera. Innym problemem jest to, że wtyczka wykonuje tę akcję nawet na stronie, na której nie ma koszyka ani szczegółów dotyczących produktu.

Powyższy zrzut ekranu pokazuje, że problem występuje na stronie „O nas”, gdzie nie ma dostępnych komponentów WooCommerce. Tak więc usunięcie koszyka na stronie nie pomoże w poprawie szybkości ładowania strony. To, czego potrzebujemy, to wyłączenie aktualizacji koszyka, gdy nie ma koszyków ani wyświetlanych produktów.


Powiązany artykuł WooCommerce:

3 Jak naprawić problem za pomocą wc-ajax=get_refreshed_fragments?

Problem należy rozwiązać, usuwając z kolejki skrypt, modyfikując plik functions.php motywu. Możesz modyfikować functions.php za pomocą panelu administracyjnego WordPress lub za pomocą FTP. Zamiast modyfikować plik functions.php, utwórz motyw potomny i dodaj dodatkowe funkcje w motywie potomnym. Pomoże to zachować zmiany po aktualizacji motywu. Istnieją trzy opcje usuwania z kolejki skryptu fragmentacji koszyka WooCommerce Ajax.

  • Wyłącz tylko fragmentację koszyka na stronie głównej witryny
  • Wyłącz tylko fragmentację koszyka na stronie głównej i postach
  • Wyłącz wszystkie style i skrypty WooCommerce na wszystkich stronach z wyjątkiem stron sklepu.

Omówmy szczegółowo wszystkie trzy opcje, zrób tylko jedną rzecz, której potrzebujesz.

3.1. Wyłącz fragmentację koszyka na pierwszej stronie

W panelu administracyjnym WordPress przejdź do „Wygląd> Edytor” i znajdź 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'); }

W edytorze powinien wyglądać jak poniżej, po wklejeniu kodu kliknij „Aktualizuj plik”, aby zapisać zmiany.

Napraw powolne ładowanie strony za pomocą WooCommerce wc-ajax=get_refreshed_fragments

Modyfikowanie funkcji motywu Plik PHP

Jeśli chcesz korzystać z FTP, zaloguj się do swojego serwera za pomocą konta FTP. Przejdź do „/wp-content/your-theme/” 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 zaktualizowaniu pliku przejdź do menu „WooCommerce > Ustawienia” i przejdź do sekcji „Wyświetlanie” w zakładce „Produkty”. Zaznacz pole wyboru obok opcji „Przekieruj na stronę koszyka po pomyślnym dodaniu”.

Napraw powolne ładowanie strony za pomocą WooCommerce wc-ajax=get_refreshed_fragments

Włącz przekierowanie do strony koszyka

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

3.2. Wyłącz fragmentację 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 we wszystkich postach, spróbuj dodać poniższy kod w pliku function.php twojego 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'); }

3.3. Wyłączanie wszystkich stylów i skryptów WooCommerce w całej witrynie

WooCommerce to wtyczka intensywnie korzystająca z zasobów, która może zająć zasoby serwera do załadowania wszystkich odpowiednich arkuszy stylów i skryptów. Jeśli masz kilka produktów z setkami tysięcy postów na blogu, warto usunąć z kolejki lub wyłączyć wszystkie istotne elementy WooCommerce w postach na blogu. Innymi słowy, możesz zezwolić tylko na skrypty WooCommerce na odpowiednich stronach sklepu, aby wszystkie inne strony ładowały się szybciej.

Dodaj poniższy kod do pliku functions.php w oparciu o istotę Github. Kod najpierw sprawdzi, czy wtyczka WooCommerce istnieje w Twojej witrynie, a następnie wyłączy style i skrypty na wszystkich stronach z wyjątkiem stron produktów, koszyka i kasy. Pomoże to usunąć wywołania „wc-ajax=get_refreshed_fragments” ze wszystkich postów/stron z wyjątkiem stron związanych z WooCommerce.

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

Ostrzeżenie: Pamiętaj, aby dodać tylko jeden blok kodu z powyższych trzech opcji. Nie dodawaj wielu lub wszystkich kodów w pliku functions.php. Po wyłączeniu skryptów z boku, wyłącz również opcję „Włącz przyciski Ajax dodawania do koszyka w archiwach” dostępną w sekcji „Wyświetlanie” menu „WooCommerce > Ustawienia”.

4 Używanie wtyczek do zatrzymania wywołań Ajax administratora WooCommerce

Jeśli nie jesteś zaznajomiony z modyfikowaniem pliku motywu lub tworzeniem motywu potomnego, istnieją wtyczki, które wykonają pracę za Ciebie. Pierwszą opcją jest użycie wtyczki premium WP Rocket. Możesz kupić WP Rocket, zainstalować i aktywować wtyczkę z panelu administracyjnego WordPress. Ta wtyczka nie ma żadnych specjalnych ustawień dla WooCommerce. Wystarczy aktywować wtyczkę, aby wyłączyć fragmentację koszyka WooCommerce na wszystkich stronach Twojej witryny. Działa z logiką sprawdzania, czy twoja strona zawiera wywołanie fragmentu Ajax w kodzie źródłowym.

Jeśli tak, to podczas ładowania strony sprawdzi, czy koszyk jest pusty. Gdy oba te warunki zostaną spełnione, WP Rocket będzie tymczasowo buforować stronę i wyświetlać ją, gdy strona zostanie załadowana następnym razem. Jeśli znajdziesz jakiś problem, możesz użyć wtyczki pomocniczej, aby wyłączyć buforowanie fragmentów Ajax.

Wtyczki takie jak W3 Total Cache oferują również pamięć podręczną fragmentów jako rozszerzenie premium. Aby uzyskać funkcje premium, musisz jednak zapłacić 99 USD rocznej subskrypcji. Zamiast tego WP Rocket kosztuje 49 USD rocznie z łatwą konfiguracją, a także możesz uzyskać 10% zniżki, subskrybując ich biuletyn.

5 Testowanie szybkości strony

Jeśli ręcznie dodałeś kod, upewnij się, że wyczyściłeś pamięć podręczną wtyczki buforującej i wyczyść pamięć podręczną lakieru na serwerze, jeśli jest dostępna. Podobnie wyczyść wszystkie poziomy buforowania, jeśli zainstalowałeś wtyczkę WP Rocket. Następnie sprawdź Google PageSpeed ​​Insights i nie powinieneś widzieć skryptu „wc-ajax=get_refreshed_fragments” w sekcji JavaScript blokującego renderowanie. Możesz również łatwo uzyskać wynik 100 na urządzeniach mobilnych i stacjonarnych, gdy czas blokowania wynosi 0 ms.

Napraw powolne ładowanie strony za pomocą WooCommerce wc-ajax=get_refreshed_fragments

Wyłącz style i skrypty WooCommerce

Również w przypadku pingdom skrypt WooCommerce wywołujący „wc-ajax=get_refreshed_fragments” nie powinien być widoczny w sekcji „Żądania plików”. Twój wynik szybkości strony powinien zostać zwiększony w szczególności po wyłączeniu skryptu WooCommerce Ajax.

6 Zatrzymywanie API pulsu WordPress

Wtyczka WooCommerce dodaje wiele atrakcyjnych widżetów pulpitu nawigacyjnego pokazujących sprzedaż na żywo i statystyki. Jednak będzie to kosztować dużo, zwiększając szybkość ładowania witryny. Widżety pulpitu nawigacyjnego dynamicznie aktualizują zawartość za pomocą wywołań administratora Ajax, podobnie jak fragmentacja koszyka w WooCommerce. Odbywa się to za pomocą standardowego API WordPress zwanego Heartbeat API.

Generalnie nie zalecamy umieszczania tych dynamicznych widżetów na pulpicie nawigacyjnym. Możesz po prostu wyłączyć wywołania admin-ajax lub interfejs API pulsu WordPress, aby zmniejszyć obciążenie serwera i poprawić szybkość ładowania strony w witrynie WordPress. Wtyczki takie jak WP Rocket mogą pomóc wyłączyć interfejs API bicia serca z panelu administracyjnego.

Ostatnie słowa

WooCommerce to jeden z łatwych sposobów na zbudowanie sklepu internetowego w WordPressie. Ale sklepy internetowe potrzebują pewnych podstawowych funkcji, takich jak dynamiczna aktualizacja koszyka. Z naszego doświadczenia wynika, że ​​90% użytkowników WooCommerce sprzedaje proste towary cyfrowe. Ich sklep jest jedynie dodatkiem do dużego bloga lub witryny z treścią. W takim przypadku zdecydowanie zalecamy wyłączenie wywołań Ajax administratora, aby wszystkie inne strony w witrynie ładowały się szybciej bez wpływu na wygodę użytkownika.

Jeśli masz pełnoprawny sklep, będziesz potrzebować funkcji fragmentacji koszyka, aby dynamicznie aktualizować pozycje koszyka bez odświeżania strony. W takim przypadku upewnij się, że masz wysokiej jakości serwer hostingowy wraz z wtyczkami do buforowania, takimi jak WP Rocket lub W3 Total Cache, które mają opcję premium do buforowania fragmentów stron w celu poprawy szybkości strony.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. AkceptujęWięcej szczegółów