TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Виправте повільне завантаження сторінки за допомогою WooCommerce wc-ajax = get_refreshed_fragments

3

WooCommerce – один з популярних плагінів для перетворення вашого сайту WordPress в інтернет -магазин. Більшість популярних тем пропонують вбудовану функцію магазину за допомогою плагіна WooCommerce. Ми також використовуємо WooCommerce на деяких наших сайтах. Нещодавно, коли ми перевіряли швидкість сторінки на GTmetrix та pingdom, ми виявили, що на завантаження компонента "wc-ajax = get_refreshed_fragments" потрібно близько секунди. Після аналізу ми виявили, що в більшості інших випадків це навіть займає від 5 до 10 секунд Якщо у вас виникають проблеми зі швидкістю сторінки з викликами WooCommerce Ajax, то ось рішення для вирішення проблеми для різних сценаріїв.

Виправте проблему WooCommerce AJAX

У цій статті ми розглянули такі теми про WooCommerce wc-ajax = get_refreshed_fragments:

  1. Що таке wc-ajax = get_refreshed_fragments?
  2. Проблема із завантаженням сторінки з викликами адміністратора Ajax
  3. Як виправити повільне завантаження сторінок у WooCommerce за допомогою адміністратора Ajax?
    1. Вимкніть лише фрагментацію кошика на першій сторінці вашого сайту
    2. Деактивуйте лише фрагментацію кошика на першій сторінці та в публікаціях
    3. Вимкніть усі стилі та сценарії WooCommerce на всіх сторінках, крім сторінок магазину
  4. Використання плагіна для припинення виклику адміністратора WooCommerce Ajax
  5. Перевірка швидкості сторінки
  6. Зупинка WordPress heartbeat API

1 Що таке wc-ajax = get_refreshed_fragments?

Нам знадобився деякий час, щоб зрозуміти, що насправді оновлені фрагменти в діаграмі швидкості сторінки викликаються з плагіна WooCommerce. Оскільки наш сайт розміщувався на SiteGround Cloud VPS, вплив було меншим, і виклик WooCommerce Ajax зайняв близько секунди. Якщо ви розміщуєте на спільному хостингу, наприклад Bluehost, ви можете помітити більшу затримку завантаження сторінки десь від 3 до 10 секунд.

Нижче наведено скріншот з pingdom, який показує тривалий час очікування завантаження "wc-ajax = get_refreshed_fragments" на сторінці. Ви також можете побачити, що цей скрипт буде внесений до списку проблем із блокуванням візуалізації в інструменті Google PageSpeed ​​Insights і знайти його під діаграмою водоспадів у GTmetrix.

Проблема завантаження сторінки WooCommerce Ajax

В основному WooCommerce намагається зібрати дані кошика за допомогою виклику сценарію і займає багато часу, щоб виконати завдання. Плагін отримує дані про кошик, які не зберігаються у кеші, на кожній сторінці, щоб показати найновіші товари кошика, зателефонувавши адміністратору Ajax. Ви можете побачити такий сценарій нижче на кожній сторінці свого сайту:

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

Це в середовищі localhost, і ви повинні побачити код із власною URL -адресою.

Виправте повільне завантаження сторінки за допомогою WooCommerce wc-ajax = get_refreshed_fragments

Фрагменти WooCommerce Ajax на джерелі сторінки

2 Виклики адміністратора Ajax та завантаження сторінок

WooCommerce використовує цей виклик адміністратора Ajax для фрагментації кошика, щоб оновити товари та їх загальну кількість у кошику, не оновлюючи сторінку. Виклик адміністратора Ajax на кожній сторінці значно затримає час завантаження сторінки, а також споживатиме великі ресурси сервера. Інша проблема полягає в тому, що плагін виконує цю дію навіть на сторінці, де немає кошика для покупок або відомостей про товар.

На наведеному вище знімку екрана показано, що проблема існує на сторінці "Про нас", де немає доступних компонентів WooCommerce. Отже, видалення кошика для покупок на сторінці не допоможе покращити швидкість завантаження сторінки. Нам потрібно відключити оновлення кошика там, де немає кошиків або товарів.


Пов’язана стаття WooCommerce:

3 Як виправити проблему за допомогою wc-ajax = get_refreshed_fragments?

Проблему потрібно вирішити, відклавши сценарій у чергу, змінивши файл functions.php вашої теми. Ви можете змінити functions.php через панель адміністратора WordPress або за допомогою FTP. Замість того, щоб змінювати файл functions.php, створіть дочірню тему та додайте додаткові функції у дочірню тему. Це допоможе вам зберегти зміни під час оновлення теми. Існує три варіанти видалення сценарію фрагментації кошика WooCommerce Ajax.

  • Вимкніть лише фрагментацію кошика на першій сторінці вашого сайту
  • Деактивуйте лише фрагментацію кошика на першій сторінці та в публікаціях
  • Вимкніть усі стилі та сценарії WooCommerce на всіх сторінках, крім сторінок магазину.

Давайте детально обговоримо всі три варіанти, зробіть лише одне, що потрібно для вас.

3.1. Вимкнути фрагментацію кошика на першій сторінці

На панелі адміністратора WordPress перейдіть до «Зовнішній вигляд> Редактор» і знайдіть файл functions.php. Додайте наступний код в кінці файлу.

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

Це має виглядати так, як показано нижче в редакторі. Після вставки коду натисніть «Оновити файл», щоб зберегти зміни.

Виправте повільне завантаження сторінки за допомогою WooCommerce wc-ajax = get_refreshed_fragments

Зміна файлових функцій PHP -файлу

Якщо ви хочете використовувати FTP, увійдіть на свій сервер за допомогою облікового запису FTP. Перейдіть до "/wp-content/your-theme/" і знайдіть файл "functions.php". Відредагуйте та додайте вищезазначений код у кінці файлу та завантажте змінений файл назад на сервер.

Після оновлення файлу перейдіть до меню «WooCommerce> Налаштування» та перейдіть до розділу «Дисплей» на вкладці «Продукти». Поставте прапорець біля опції «Переспрямувати на сторінку кошика після успішного додавання».

Виправте повільне завантаження сторінки за допомогою WooCommerce wc-ajax = get_refreshed_fragments

Увімкніть переспрямування на сторінку кошика

Це допоможе клієнту перейти на головну сторінку кошика замість того, щоб довго чекати після того, як товар буде додано до кошика. В іншому випадку, хоча товар додано, у вашому кошику для покупок можуть не відображатися оновлені дані, якщо ви перебуваєте на тій самій сторінці, де відключено сценарій фрагментації кошика.

3.2. Вимкнути фрагментацію кошика на першій сторінці та в дописах

Наведений вище код вимкне сценарій фрагменту кошика лише на статичній першій сторінці. Якщо ви хочете вимкнути сценарій для всіх повідомлень, спробуйте додати код нижче у файл function.php вашої теми.

/** 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. Вимкнення всіх стилів і сценаріїв WooCommerce для всього сайту

WooCommerce – це ресурсоємний плагін, який може забирати ресурси вашого сервера для завантаження всіх відповідних таблиць стилів та сценаріїв. Якщо у вас є кілька продуктів із сотнями тисяч публікацій у блозі, то має сенс вилучити або вимкнути всі відповідні матеріали WooCommerce у публікаціях блогу. Іншими словами, ви можете дозволити лише сценарії WooCommerce на відповідних сторінках магазину, щоб усі інші сторінки завантажувалися швидше.

Додайте наведений нижче код у свій файл functions.php на основі суті Github. Код спочатку перевірить, чи існує плагін WooCommerce на вашому сайті, а потім вимкне стилі та сценарії на всіх сторінках, окрім сторінок товарів, кошиків та оформлення замовлення. Це допоможе видалити виклики “wc-ajax = get_refreshed_fragments" із усіх повідомлень/сторінок, крім сторінок, пов’язаних із 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' ); } } }

Попередження: Не забудьте додати лише один із блоку коду з наведених вище трьох варіантів. Не додайте кілька або всі коди у файл functions.php. Коли ви вимикаєте сценарії зі всієї сторони, також вимкніть опцію «Увімкнути додавання Ajax до кошика в архівах», доступну в розділі «Дисплей» меню «WooCommerce> Налаштування».

4 Використання плагінів для припинення викликів адміністратора Aox WooCommerce

Якщо ви не знайомі зі зміною файлу теми або створенням дочірньої теми, то є плагіни, які виконають роботу за вас. Перший варіант – використовувати преміальний плагін WP Rocket. Ви можете придбати WP Rocket, встановити та активувати плагін на панелі адміністратора WordPress. Цей плагін не має спеціальних налаштувань для WooCommerce. Проста активація плагіна вимкне фрагментацію кошика WooCommerce на всіх сторінках вашого сайту. Він працює з логікою перевірки, чи містить ваша сторінка виклик фрагмента Ajax у вихідному коді.

Якщо так, то під час завантаження сторінки він перевірить, чи кошик порожній. Коли обидві ці умови будуть виконані, WP Rocket буде кешувати сторінку в перехідному режимі та обслуговуватись при наступному завантаженні сторінки. Якщо ви виявите проблему, ви можете скористатися допоміжним плагіном для деактивації кешування фрагментів Ajax.

Плагіни, такі як W3 Total Cache, також пропонують фрагментний кеш як преміальне розширення. Однак для отримання преміальних функцій вам потрібно щорічно платити 99 доларів підписки. Натомість WP Rocket коштує 49 доларів на рік із простим налаштуванням, і ви також можете отримати знижку 10%, підписавшись на їх інформаційний бюлетень.

5 Тестування швидкості сторінки

Якщо ви додали код вручну, не забудьте очистити кеш свого плагіна кешування та очистити кешування лаків на сервері, якщо такий є. Так само очистіть усі рівні кешування, якщо ви встановили плагін WP Rocket. Після цього перевірте в Google PageSpeed ​​Insights, і ви не побачите сценарій “wc-ajax = get_refreshed_fragments” у розділі JavaScript, що блокує рендеринг. Ви також можете легко отримати 100 балів на мобільних та настільних комп’ютерах, коли час блокування становить 0 мс.

Виправте повільне завантаження сторінки за допомогою WooCommerce wc-ajax = get_refreshed_fragments

Вимкніть стилі та сценарії WooCommerce

Крім того, на Pingdom, WooCommerce скрипт для виклику «WC-Аякс = get_refreshed_fragments» не повинен бути видно в розділі «Файл» запити. Показник швидкості вашої сторінки слід помітно збільшити після відключення сценарію WooCommerce Ajax.

6 Зупинка WordPress Heartbeat API

Плагін WooCommerce додає багато привабливих віджетів на інформаційній панелі, які показують реальні продажі та статистику. Однак це буде дорого коштувати, якщо перетягнути швидкість завантаження вашого сайту. Віджети інформаційної панелі динамічно оновлюють вміст за допомогою викликів адміністратора Ajax, подібно до фрагментації кошика у WooCommerce. Це робиться за допомогою стандартного WordPress API під назвою heartbeat API.

Як правило, ми не рекомендуємо мати ці динамічні віджети на інформаційній панелі. Ви можете просто відключити виклики admin-ajax або WordPress heartbeat API, щоб зменшити навантаження на сервер та покращити швидкість завантаження сторінок вашого сайту WordPress. Плагіни, такі як WP Rocket, можуть допомогти вимкнути API серцевого ритму на панелі адміністратора.

Заключні слова

WooCommerce – це один із простих способів створення вашого інтернет -магазину в WordPress. Але інтернет -магазинам потрібні певні основні функції, такі як динамічне оновлення кошика. З нашого досвіду ми побачили, що 90% користувачів WooCommerce продають прості цифрові товари. Їх магазин-це просто доповнення до великого блогу або контентного сайту. У цьому випадку ми настійно рекомендуємо вимкнути адміністраторські виклики Ajax, щоб усі інші сторінки сайту завантажувалися швидше, не впливаючи на досвід користувача.

Якщо у вас є повноцінний магазин, то вам знадобиться функція фрагментації кошика для динамічного оновлення товарів у кошику без оновлення сторінки. У такому разі переконайтеся, що у вас є якісний хостинг -сервер разом із плагінами кешування, такими як WP Rocket або W3 Total Cache, який має преміальну опцію кешування фрагментів сторінки для підвищення швидкості сторінки.

Джерело запису: webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. ПрийнятиЧитати далі