Как да оптимизираме зареждането на скриптове и стилове в WordPress и WooCommerce

В WordPress имаме удобен начин да ограничим зареждането на излишни скриптове и стилове на определени страници. Това е особено полезно при използване на WooCommerce магазин, който създава различни типове страници — като начална, страница на продукт, категория, чекаут, както и персонализирани страници като „Контакти“, „За нас“, блог статии и други.

Много плъгини и теми, създадени с мисъл за масовия потребител, зареждат ненужно голям обем от CSS и JavaScript файлове на всяка страница, без реална нужда. Добрата новина е, че в WordPress можем лесно да открием и изключим тези ресурси.

Примери за излишно зареждане на скриптове

• Stripe за плащане се зарежда на всички продуктови и категорийни страници — необходим е само на чекаут страницата.
• Elementor зарежда скриптове и стилове дори на страници, които не използват този билдър.
• Contact Form 7 зарежда своите файлове на целия сайт, въпреки че формулярът се използва само на страницата „Контакти“.

Как да оптимизираме скриптовете още днес

1. Проверка на зарежданите скриптове и стилове

Първата стъпка е да разберем какво точно се зарежда. С помощта на следния код във functions.php на вашата тема можете да видите кои ресурси се зареждат:

За JavaScript файлове:

phpCopyEditadd_action('wp_print_scripts', function () {
    global $wp_scripts;
    echo '<pre><strong>Loaded Scripts:</strong><br>';
    foreach ($wp_scripts->queue as $script) {
        echo $script . '<br>';
    }
    echo '</pre>';
});

За CSS файлове:

phpCopyEditadd_action('wp_print_styles', function () {
    global $wp_styles;
    echo '<pre><strong>Loaded Styles:</strong><br>';
    foreach ($wp_styles->queue as $style) {
        echo $style . '<br>';
    }
    echo '</pre>';
});

Това ще ви даде списък от идентификатори (handles), като например:

• theme-style
• woocommerce-layout
• contact-form-7
• elementor
• stripe-payment

2. Изключване на излишни скриптове и стилове

След като знаете точните имена (handles) на скриптовете и стиловете, можете да ги изключите от определени страници.

Пример: изключване на ненужни ресурси от продуктовата страница:

phpCopyEditadd_action('wp_enqueue_scripts', function () {
    if (is_product()) {
        wp_dequeue_style('elementor');        // Уверете се, че това е точният handle
        wp_deregister_style('stripe');
        wp_deregister_style('contact-form-7');
    }
}, 100);

Полезни функции за определяне на страници в WordPress

Можете да използвате следните условни функции, за да насочите премахването на скриптове:

• is_page('контакти')
• is_category()
• is_product()
• is_cart()
• is_checkout()

Инструменти за анализ

Препоръчително е да използвате Google PageSpeed Insights, за да анализирате:

• кои скриптове
  Увеличи продажбите си – безплатен анализ
  забавят зареждането;
• какво може да се отложи или изключи;
• дали има CSS/JS, които блокират рендерирането.

Заключение

С изчистване на ненужни CSS и JavaScript файлове можете значително да подобрите:

• скоростта на зареждане на сайта;
• потребителското изживяване;
• SEO резултатите.

WordPress предоставя мощни инструменти за контрол над ресурсите, стига да знаем как да ги използваме. Оптимизацията на скриптове е лесна за внедряване и дава моментален ефект.

Ще направим сайта ви бърз, лек и стабилен. Разгледайте нашата професионална услуга за поддръжка на сайт.