Оптимізація WordPress: як прискорити сайт і покращити SEO

Привіт:) У цій статті розгляну способи, інструменти та власні спостереження оптимізації WordPress для, які використовую у своїй роботі для покращення швидкодії роботи сайту та вищих балів PageSpeed.

Наприклад, WordPress-плагін WooCommerce є досить вимогливим до ресурсів хостингу. Складна логіка роботи його скриптів та велика кількість функціоналу вимагає більших ресурсів сервера у порівнянні, наприклад, із простим блогом. Для оптимізації потрібно діяти особливо обережно, щоб не порушити роботу основної його функції — торгового майданчика.

А тому для кожного конкретного сайту доцільність застосування того чи іншого методу може відрізнятися. У більшості випадків це визначається у процесі ознайомлення із сайтом. Але зазвичай ефективність виявляється вже після реалізації та впровадження.

Розгляну кожен спосіб та інструмент детально.

Оптимізація зображень

Часто на клієнтських сайтах зустрічаються розмір файлів зображень від 400 Кб і до 3 Мб. Зазвичай така ситуація виникає через невірний вибір формату графічного файлу, а також розмірами самого зображення. Наприклад, складна фотографія може мати розміри 4000х3000 пікселів. Зазвичай для комфортного її відображення достатньо ширини у 1200 пікселів.

Мої подальші дії з оптимізації зображень залежать від кількості неоптимізованих файлів зображень.

Якщо їх до 30 штук:

• завантажую їх локально;
• пропорційно зменшую розмір фотографії (наприклад, за допомогою GIMP);
• конвертую у формат WebP;
• оптимізую файл без втрати якості (наприклад, tinypng.com, imagecompressor.com або Caesium Image Compressor);
• на сторінках сайту замінюю на новий файл.

Якщо більше 30:

• завантажую локально;
• пакетно оптимізую без втрати якості (tinypng.com, imagecompressor.com);
• завантажую із перезаписом у відповідний каталог сайту.

Якщо картинок більше тисячі (та/або періодично додаються нові на сайт):

• встановлюю та налаштовую WordPress-плагін, який оптимізує та зменшує розмір вже завантажених файлів зображень та автоматично застосовує цю процедуру для тих, які будуть завантажені у майбутньому. Наприклад, Converter for Media – Optimize images (або WebP Express). Особливістю цих плагінів є автоматичне конвертування у формат WebP та підміна на цей формат файлу у коді користувацької частини сайту. Підміна застосовується лише у тому випадку, якщо у новому форматі WebP розмір файлу зображення буде меншим за оригінальний.

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

back to contents ↑

Видалення зображень що не використовуються

Така робота проводиться для зменшення дискового простору. Цю задачу вирішую окремим плагіном Media Cleaner. Він коректно видаляє лише ті фото, які не прикріплені до жодного посту.

Оновлення ядра WordPress, тем і плагінів

Регулярне оновлення ядра WordPress, тем і плагінів безпосередньо впливає на швидкість роботи сайту, оскільки нові версії часто містять оптимізації продуктивності та виправлення неефективного коду. Розробники прибирають зайві SQL-запити, оптимізують роботу з кешем і адаптують код під сучасні версії PHP. Оновлення теми дозволяє позбутися застарілих підходів до підключення CSS і JavaScript, які блокують рендеринг сторінки. Актуальні плагіни краще взаємодіють між собою та з ядром WordPress, зменшуючи конфлікти й зайві навантаження. Крім того, нові версії зазвичай краще працюють із OPcache, Object Cache та серверним кешуванням. У підсумку сайт обробляє запити швидше, стабільніше тримає навантаження і показує кращі результати в PageSpeed та Core Web Vitals.

back to contents ↑

Вимкнення зайвих плагінів і тем

Часто на клієнтських сайтах помічаю використання зайвих плагінів. Наприклад, плагін, який не використовується взагалі або був застосований всього лише один раз.

Також вимикаю зайві теми. Залишаю лише активну та одну із стандартних тем WordPress. Останню рекомендується залишати у випадку, якщо в активній темі виникне критична помилка, та система автоматично увімкне тему за замовчуванням.

back to contents ↑

Перехід на нову версію PHP

Часто клієнтські WordPress сайти працюють на застарілих версіях PHP. У цьому випадку на хостингу оновлюю до останньої, яка працює швидше за рахунок багатьох оптимізацій, поліпшення обробки типів і кешування.

Перехід на LiteSpeed Web Server

LiteSpeed Web Server дає WordPress ключову перевагу за рахунок серверного Page Cache, який віддає готовий HTML без запуску PHP і ядра CMS. Це суттєво зменшує TTFB і навантаження на сервер, особливо на сайтах з високим трафіком або WooCommerce. На відміну від PHP-кеш-плагінів, LSCache працює на рівні веб-сервера і тісно інтегрований з хуками WordPress. LiteSpeed підтримує HTTP/3, QUIC, Brotli та сучасні версії PHP "з коробки", без складних налаштувань. У результаті продуктивність WordPress визначається якістю теми й плагінів, а не обмеженнями серверної інфраструктури.

back to contents ↑

Збільшення ліміту оперативної пам'яті для роботи адмін-частини

Зазвичай ефективно якщо:

• на сайті багато публікацій та/або з ними працює декілька авторів;
• встановлені конструктори сайтів (наприклад, Elementor);
• плагін WooCommerce.

Серед вбудованих функцій WordPress є можливість змінювати ліміти оперативної пам'яті (RAM) для адміністративної та користувацької частин сайту.

Щоб збільшити ліміт RAM для роботи адмін-частини у файлі wp-config.php достатньо додати рядок

define( 'WP_MAX_MEMORY_LIMIT', '512M' );

// або

define( 'WP_MAX_MEMORY_LIMIT', '1024M' );

Перед виставленням ліміту рекомендую дізнатися у свого хостера, яке максимальне значення RAM надає ваш тарифний план.

back to contents ↑

Оптимізація бази даних

Для оптимізації бази даних WordPress зазвичай застосовую декілька методів.

1. Заміна у базі даних типу таблиць із MyISAM на InnoDB (це дозволяє також, наприклад, плагін WP-Optimize).
2. Додавання індексів до таблиць бази даних. Наприклад, до таблиць, які додає плагін WooCommerce. Наприклад, плагін Index WP MySQL For Speed.
3. Очищення бази даних від надлишкових даних (тимчасові опції транзієнти, ревізії, метаполя що не використовуються).
4. Видалення непотрібних таблиць. Наприклад, таких, які залишилися після видалення якогось плагіну. Виявлення та коректне видалення таких таблиць дозволяє плагін WP-Optimize. Якщо є сумнівні таблиці, які не видаляє вказаний плагін, то після введення назви такої таблиці у Google-пошуку, є можливість визначити який саме плагін їх створив.

back to contents ↑

Вимкнення зберігання у базі даних ревізій постів та сторінок

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

Щоб вимкнути ревізії:

1. У файл wp-config.php додайте рядок

/* Вимкнення створення ревізій */
define( 'WP_POST_REVISIONS', false );

/* Вимкнення автозберігання на 1 рік */
define( 'AUTOSAVE_INTERVAL', 60*60*60*24*365 );

2. У файлі functions.php вставте код

/**
 * Вимкнення ревізій
 */
if ( ! function_exists( 'mp_revisions_to_keep' ) ) {
	add_filter( 'wp_revisions_to_keep', 'mp_revisions_to_keep' );
	function mp_revisions_to_keep( $revisions ) {
		return 0;
	}
}

/**
 * Заборона автозберігання у браузері
 */
if ( ! function_exists( 'mp_disable_autosave' ) ) {
	add_action( 'wp_print_scripts', 'mp_disable_autosave' );
	add_action( 'admin_init', 'mp_disable_autosave' );
	function mp_disable_autosave() {
		wp_deregister_script( 'autosave' );
	}
}

/**
 * Заборона автозберігання у редакторі Gutenberg
 */
if ( ! function_exists( 'mp_change_gutenberg_autosave_interval' ) ) {
	add_filter( 'block_editor_settings_all', 'mp_change_gutenberg_autosave_interval', 10, 2 );
	function mp_change_gutenberg_autosave_interval( $editor_settings, $post ) {
		$editor_settings['autosaveInterval'] = 604800;

		return $editor_settings;
	}
}

back to contents ↑

Під'єднання зовнішніх JavaScript- та CSS-бібліотек локально

Періодично помічаю, що у темах JS-бібліотеки (наприклад, (jQuery, AOS, Swiper, Fancybox та ін.) викликаються із зовнішніх ресурсів. А тому під'єдную їх локально. Для цього використовую WordPress-функції wp_enqueue_style() та wp_enqueue_script().

Перенесення виклику скриптів JavaScript ближче до </body>

Перенесення виклику JavaScript-скриптів ближче до HTML-тегу </body> дозволяє браузеру спочатку завантажити й відрендерити HTML-розмітку без блокування. Це зменшує час до першого відображення контенту (FCP) і покращує сприйняття швидкості сайту користувачем. У WordPress такий підхід особливо актуальний, оскільки багато плагінів під'єднують скрипти глобально та синхронно. Завантаження JS після основного контенту знижує ризик затримок у відображенні сторінки та блокування DOM. Додатково це позитивно впливає на Core Web Vitals і загальну оцінку PageSpeed. Така оптимізація є базовою практикою для продакшн-сайтів із високими вимогами до продуктивності.

Наступний код спрацьовує для скриптів активних тем та плагінів, які були додані за допомогою WordPress-функції wp_enqueue_script().

/**
 * Перенесення JS-скриптів ближче до HTML-тегу </body>
 */
add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_admin() ) {
        remove_action( 'wp_head', 'wp_print_scripts' );
        remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
        remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );

        add_action( 'wp_footer', 'wp_print_scripts', 5 );
        add_action( 'wp_footer', 'wp_enqueue_scripts', 5 );
        add_action( 'wp_footer', 'wp_print_head_scripts', 5 );
    }
}, 0 );

/**
 * Додавання атрибуту defer
 */
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    if ( is_admin() ) {
        return $tag;
    }

    // Пропустити бібліотеку jQuery, щоб не зламати плагіни/тему
    if ( $handle === 'jquery-core' || $handle === 'jquery-migrate' || $handle === 'highlightjs' ) {
        return $tag;
    }

    // Додати defer
    return '<script src="' . esc_url( $src ) . '" defer></script>';
}, 10, 3 );

back to contents ↑

Під'єднання зовнішніх шрифтів локально

Часто у темах розробники викликають шрифти із зовнішніх ресурсів. Наприклад, із fonts.googleapis.com. А тому завантажую файли шрифтів локально та під'єдную їх у темі.

У випадку якщо це зробити неможливо, до виклику зовнішнього шрифту додаю GET-параметр display=swap:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">

Для автоматизації розміщення Google-шрифтів локально можна скористатися відповідними плагінами. Вони дають можливість завантажити свій шрифт або завантажують локально Googe-шрифт.

back to contents ↑

Вимкнення функціоналу плагінів на сторінках сайту, де вони не задіюються

Для кожного плагіну — це окремий код у файлі functions.php.

Contact Form 7

Таке рішення оправдано, якщо, наприклад, форма виводиться лише одній сторінці — Контакти.

Щоб не задіювати функціонал плагіну Contact Form 7 на сторінках сайту, де він не потрібен:

/** 
 * Вимкнення функціоналу Contact Form 7 на сайті, де він не потрібен
 */
require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ( is_plugin_active( 'contact-form-7/wp-contact-form-7.php' ) ) {
	add_action( 'wp_print_styles', 'mp_deregister_cf7_styles', 100 );
	add_action( 'wp_print_scripts', 'mp_deregister_cf7_scripts', 100 );
}
function mp_deregister_cf7_styles() {
	if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
		wp_deregister_style( 'contact-form-7' );
	}
}
function mp_deregister_cf7_scripts() {
	if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
		wp_deregister_script( 'contact-form-7' );
	}
}

back to contents ↑

WooCommerce

Часто на сайті інтернет-магазину, окрім розділу з товарами, є статичні сторінки та/або публікації блогу. На них не потрібен функціонал Кошика, а тому його можна вимкнути.

/**
 * Вимкнення WooCommerce на сайті, де він не потрібен
 */
add_action( 'wp_enqueue_scripts', function() {
    // Якщо WooCommerce не активний — нічого не робимо
    if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }

    // Якщо це будь-яка WooCommerce-сторінка — нічого не вимикаємо
    if (
        is_woocommerce()
        || is_cart()
        || is_checkout()
        || is_account_page()
        || wp_doing_ajax()
        || wp_doing_rest()
    ) {
        return;
    }

    /**
     * 1. Вимикаємо ВСІ стандартні стилі WooCommerce
     * (найбезпечніший спосіб, рекомендований самою Woo)
     */
    add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

    /**
     * 2. Вимикаємо cart-fragments
     * (єдиний скрипт, який Woo тягне глобально)
     */
    wp_dequeue_script( 'wc-cart-fragments' );

}, 20 );

back to contents ↑

Оптимізація Elementor

Elementor — це візуальний конструктор сторінок із простим drag-and-drop редактором для створення повноцінного WordPress-сайту без необхідності писати код. Але закладений у нього функціонал додає значну кількість CSS, JavaScript та динамічних запитів, що можуть уповільнювати завантаження сторінок. Для оптимізації його роботи є декілька варіантів.

Редактор

Через деякий час роботи процес редагування сторінки (особливо якщо є велика кількість блоків та віджетів) може помітно "тормозити".

Способи вирішення:

• очищення наявних ревізій (кодом або плагіном WP-Optimize чи Advanced Database Cleaner) та обмеження їх створення;
• збільшення ліміту пам'яті WordPress для його адмін-частини;
• увімкнення методу завантаження редактора (Switch Editor Loader). Це вбудований механізм обходу проблем із конфігурацією сервера, який змінює спосіб обробки запитів редактором і часто прибирає "зависання". Для цього в адмін-меню Elementor -> Editor -> Settings -> Advanced в опції Switch Editor Loader Method обрати Enable;
• вимкнення невикористовуваних віджетів Elementor. В адмін-меню Elementor -> Editor -> System -> Element Manager вимкнути віджети, які не планується використовувати;
• налаштуйте Heartbeat API. WordPress кожні 15–60 секунд відправляє запити на сервер (Heartbeat API) для автозбереження, перевірки сесії тощо. Коли ви редагуєте велику сторінку, ці запити накладаються на роботу конструктора і створюють мікро-фризи. Щоб обмежити або повністю вимкнути Heartbeat в адмінці:

add_action( 'init', function() {
    wp_deregister_script( 'heartbeat' );
}, 1 );

back to contents ↑

Шрифти

Elementor за замовчуванням використовує Google-шрифти. Якщо для сайту використовуються системні (наприклад, Arial) або локально завантажені шрифти, то підтримку Google-шрифтів можна вимкнути.

Щоб вимкнути використання Google-шрифтів, в адмін-меню Elementor -> Editor -> Settings -> Advanced значення опції Google Fonts встановити Disable. Або ж використати код:

/**
 * Deactivate Google Fonts
 * 
 * https://elementor.com/help/speed-up-a-slow-site/
 * 
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Якщо шрифти Google все ж використовуватимуться, то на тій же сторінці налаштувань Elementor -> Editor -> Settings -> Advanced опції Google Fonts Load надаю значення Swap. Також у розділі Elementor -> Editor -> Settings -> Performance для опції Load Google Fonts Locally задаю як Enable.

back to contents ↑

Оптимізація завантаження локальних шрифтів

В Elementor Pro за замовчуванням є можливість завантажити власні шрифти (для безкоштовної версії можна використати окремий плагін. Наприклад, Use Any Font | Custom Font Uploader).

При перевірці у сервісі PageSpeed Insights з'являється рекомендація оптимізувати виклик локальних шрифтів. А саме додати властивість font-display: swap.

За замовчуванням Elementor не додає цю властивість для локально завантажених шрифтів. Але цю поведінку можна змінити, додавши наступний код у functions.php активної теми або у mu-plugin:

/**
 * Add font-display: swap for local fonts
 */
add_filter( 'elementor/fonts/additional_font_data', function( $data ) {
    if ( isset( $data['display'] ) ) {
        $data['display'] = 'swap';
    }
    
    return $data;
} );

add_filter( 'elementor_fonts_font_display', function( $current_value, $font_family, $data ) {
    return 'swap';
}, 99, 3 );

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
    return 'swap';
}, 10, 3 );

// For Elementor icons
add_action( 'wp_head', function() {
    $elementor_url = defined( 'ELEMENTOR_ASSETS_URL' ) 
        ? ELEMENTOR_ASSETS_URL 
        : str_replace( abspath( str_replace( '\\', '/', ABSPATH ) ), get_site_url() . '/', str_replace( '\\', '/', ELEMENTOR_PATH ) ) . 'assets/';

    $font_base = $elementor_url . 'lib/font-awesome/webfonts/';

    $fonts = array(
        'fa-solid-900.woff2',
        'fa-brands-400.woff2',
        'fa-regular-400.woff2'
    );

    foreach ( $fonts as $font ) {
        echo '<link rel="preload" href="' . esc_url( $font_base . $font ) . '" as="font" type="font/woff2" crossorigin>' . PHP_EOL;
    }
}, 1 );
add_filter( 'elementor_icons_manager_font_display', function( $display ) {
    return 'swap';
}, 99 );

// If icons are loaded as Google Fonts (rare, but can happen)
add_filter( 'elementor/frontend/print_google_fonts', function( $print ) {
    add_filter( 'elementor/frontend/print_google_fonts', function() { 
        return true;
    } );

    return $print;
} );

Іноді для коректної роботи цього коду потрібно виконати наступні кроки:

1. Очистити повністю кеш (у плагіні кешування, в налаштуваннях CDN-сервісу (наприклад, ClaudFlare), на хостингу).
2. У меню Elementor -> Editor -> Settings -> Performance значення опції Element Cache встановити як Disable.
3. У меню Elementor -> Editor -> Tools натиснути кнопки Clear Files & Data та Save Changes.
4. У меню Elementor -> Editor -> Settings -> Performance значення опції CSS Print Method встановити як Internal Embedding.
5. У меню Elementor -> Editor -> Settings -> Performance значення опції Element Cache встановити як 1 Day.

back to contents ↑

Шрифт Font Awesome

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

/**
 * Deactivate Font Awesome
 * 
 * https://elementor.com/help/speed-up-a-slow-site/
 * 
 */
add_action( 'elementor/frontend/after_register_styles', function() {
 	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
 		wp_deregister_style( 'elementor-icons-fa-' . $style );
 	}
}, 20 );

back to contents ↑

Elementor Icons (Eicons)

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

/**
 * Deactivate Eicons
 * 
 * https://elementor.com/help/speed-up-a-slow-site/
 * 
 */
add_action( 'wp_enqueue_scripts', function() {
	wp_dequeue_style( 'elementor-icons' );
	wp_deregister_style( 'elementor-icons' );
}, 11 );

back to contents ↑

Ревізії

У процесі редагування сторінки в Elementor кожне збереження змін створює нову ревізію, тобто копію сторінки, яка зберігається у базі даних сайту. Якщо сторінок багато, то з часом база даних може розростися до великих розмірів.

Щоб обмежити кількість ревізій (наприклад, до 3-х) для кожної сторінки:

add_filter( 'wp_revisions_to_keep', function( $num, $post ) {
    return 3;
}, 10, 2 );

Щоб повністю вимкнути створення ревізій.

back to contents ↑

Інші налаштування оптимізації Elementor

Плагін має вбудовані інструменти та налаштування для оптимізації швидкості, які знаходяться в адмін-розділі Elementor -> Editor -> Settings -> Performance. Серед них:

• Optimized Image Loading. Для зображень додаються параметри fetchpriority="high" та loading="lazy".
• Lazy Load Background Images. "Ліниве" завантаження всіх фонових зображень, окрім першого.
• Element Cache. Тривалість зберігання блоків Elementor у кеші. Кешування елементів пришвидшує завантаження, надаючи попередньо відрендерені копії елементів, а не оновлюючи їх щоразу.

back to contents ↑

Оптимізація Google Analytics (Tag)

Один із способів — встановити з'єднання із сервером Google заздалегідь через Preconnect. Це найкращий спосіб прискорити завантаження без ризику втратити дані. Це дає браузеру команду заздалегідь встановити зв'язок із серверами Google, поки він ще читає заголовок сторінки. Такий варіант може зекономити 100-300 мс на DNS-запитах та "рукостисканні" SSL.

Для цього у файлі header.php використовую код:

<!-- Google Tag Manager -->
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

<script async src="https://www.googletagmanager.com/gtag/js?id=G-YHKF9VKRN0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YHKF9VKRN0');
</script>
<!-- /.Google Tag Manager -->

back to contents ↑

Вимкнення зайвого функціоналу WordPress

У WordPress за замовчуванням є функціонал, який в цілому ніяк не впливає на роботу сайту, але здійснює додаткові запити до бази даних, а також вставляє зайвий HTML-код на сторінки сайту.

Наступний код для вимкнення непотрібних функцій WordPress додайте у файл functions.php.

Вимкнення Emoji

Смайлики — це не лише емоції. Технічно це частина стандарту Unicode, яка дозволяє відображати символи (як-от 😊) на будь-якому пристрої. Насправді вони вже є в кожному сучасному пристрої (iOS, Android, Windows). Однак WordPress за замовчуванням завантажує власний набір іконок та спеціальний скрипт, щоб смайлики виглядали однаково навіть у дуже старих браузерах, які не підтримують сучасний текст. Але цей функціонал можна оптимізувати. І ось чому це потрібно зробити.

• Очищення коду. Видалення зайвих блоків JavaScript та CSS, які завантажуються на кожній сторінці.
• Заборона звернення до сторонніх серверів. Сайт перестає робити запити до s.w.org за картинками-смайлами.
• Оптимізація RSS та Email. Заборона конвертації тексту в картинки у розсилках.
• Продуктивність. Менше скриптів у <head> — швидше завантаження першого екрана сторінки.
• Сучасність. Ваші Emoji нікуди не зникнуть. Вони просто стануть "текстовими" і будуть відображатися системними шрифтами користувача (що виглядає чіткіше на Retina-дисплеях).
• Приватність та стабільність. Незалежність від зовнішніх ресурсів WordPress.org.

/**
 * Disable emoji
 * https://petrov.net.ua/wordpress-optimization/
 */
if ( ! function_exists( 'mp_disable_emojis' ) ) {
	add_action( 'init', 'mp_disable_emojis' );
	function mp_disable_emojis() {
		remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
		remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
		remove_action( 'wp_print_styles', 'print_emoji_styles' );
		remove_action( 'admin_print_styles', 'print_emoji_styles' );
		remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
		remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
		remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
		add_filter( 'emoji_svg_url', '__return_empty_string' );
		add_filter( 'tiny_mce_plugins', 'mp_disable_emojis_tinymce' );
		add_filter( 'wp_resource_hints', 'mp_disable_emojis_remove_dns_prefetch', 10, 2 );
	}
	function mp_disable_emojis_tinymce( $plugins ) {
		if ( is_array( $plugins ) ) {
			return array_diff( $plugins, array( 'wpemoji' ) );
		} else {
			return array();
		}
	}
	function mp_disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
		if ( 'dns-prefetch' == $relation_type ) {
			$emoji_svg_url_bit = 'https://s.w.org/images/core/emoji/';
			foreach ( $urls as $key => $url ) {
				if ( strpos( $url, $emoji_svg_url_bit ) !== false ) {
					unset( $urls[$key] );
				}
			}
		}

		return $urls;
	}
}

Також вимкнути Emoji можна за допомогою плагіну Disable Emojis (GDPR friendly).

back to contents ↑

Вимкнення примусової перевірки нових версій WordPress, плагінів і теми в адмін-частині

Щоразу, коли ви заходите в адмін-панель, WordPress у фоні звертається до своїх серверів, щоб перевірити, чи не вийшли нові версії ядра, плагінів або тем. Якщо сервер WordPress.org гальмує або у вашого хостингу повільне з'єднання, кожна сторінка адмінки буде "задумуватися" на 1-3 секунди. Рішення просте — заборона WordPress робити ці перевірки під час звичайного перегляду сторінок. Адмін-частина працює помітно швидше.

/**
 * Disabling automatic checks for new versions of WordPress, plugins, and themes in the admin panel
 * https://petrov.net.ua/wordpress-optimization/
 */
if ( is_admin() ) {
	// Disable the check for updates whenever someone logs into the admin panel
	remove_action( 'admin_init', '_maybe_update_core' );
	remove_action( 'admin_init', '_maybe_update_plugins' );
	remove_action( 'admin_init', '_maybe_update_themes' );

	// Disable the update check when visiting a specific page in the admin panel
	remove_action( 'load-plugins.php', 'wp_update_plugins' );
	remove_action( 'load-themes.php', 'wp_update_themes' );

	// Disable the prompt to update the browser in the console
	add_filter( 'pre_site_transient_browser_'. md5( $_SERVER['HTTP_USER_AGENT'] ), '__return_empty_array' );
}

Якщо на сайті встановлено багато плагінів (30+), цей код дасть найбільш відчутний ефект. Якщо плагінів 2–3, то різниця буде майже непомітною.

back to contents ↑

Вимкнення створення копій зображень

Коли ви завантажуєте одне зображення через адмін-меню Медіафайли, WordPress автоматично створює цілу пачку його копій. Ось чому це відбувається і чи варто це обмежувати.

Для чого WordPress створює копії?

1. Адаптивність (Responsive Images). Це головна причина. WordPress створює різні розміри, щоб браузер міг вибрати найменший підходящий файл. Наприклад, на смартфоні завантажиться картинка шириною 300px, а на моніторі — 1200px.
2. Дизайн теми. Різні частини сайту вимагають різних форматів. На головній сторінці потрібна маленька мініатюра, а всередині статті — велике фото.
3. Швидкість завантаження. Менші копії важать менше, що дозволяє сторінкам відкриватися швидше.

back to contents ↑

Переваги вимкнення створення копій зображень

Видалення зайвих розмірів (large, 1536x1536, 2048x2048) дає суттєві плюси:

• Колосальна економія місця. Видалення найбільш "важких" копій, які часто майже не відрізняються за розміром файлу від оригіналу. Це економить до 80% дискового простору.
• Прискорення бекапів. Копіювання сайту стає в рази швидшим, оскільки серверу не потрібно обробляти тисячі дрібних файлів.
• Чистота на сервері. каталог uploads не перетворюється на звалище однакових зображень.
• Зниження навантаження на CPU. Сервер не витрачає ресурси на "нарізання" картинок під час кожного завантаження.

back to contents ↑

Ризики вимкнення створення копій зображень

Перед впровадженням коду нижче важливо врахувати недоліки:

• Навантаження на трафік. Якщо ви видалили розмір large, а тема вимагає його, вона може підтягнути оригінал. Якщо оригінал важить 5 МБ, мобільний користувач буде довго чекати завантаження сторінки.
• Погіршення показників LCP (Core Web Vitals). Google може знизити рейтинг сайту, якщо ви змушуєте браузер масштабувати величезні картинки під маленькі екрани.
• Проблеми з версткою. Деякі теми "зав'язані" на конкретні розміри (наприклад, medium_large для сітки новин). Якщо їх немає, картинки можуть стати розмитими або взагалі не відображатися у певних блоках.

/**
 * Disable the creation of duplicate images generated by WordPress itself
 * https://petrov.net.ua/wordpress-optimization/
 */
add_action( 'intermediate_image_sizes_advanced', 'mp_disable_image_sizes' );
// Disable image resizing
add_filter( 'big_image_size_threshold', '__return_false' );
add_action( 'init', 'mp_disable_other_image_sizes' );
// Disable generated image dimensions
function mp_disable_image_sizes( $sizes ) {
	// Disable thumbnails
	//unset( $sizes['thumbnail'] );
	// Disable medium size
	unset( $sizes['medium'] );
	// Disable large size
	unset( $sizes['large'] );
	// Disable medium large size
	unset( $sizes['medium_large'] );
	// Disable 2x medium large size
	unset( $sizes['1536x1536'] );
	// Disable 2x large size
	unset( $sizes['2048x2048'] );	

	return $sizes;
}
// Disable other image sizes
function mp_disable_other_image_sizes() {
	// Disable images added via `set_post_thumbnail_size()`
	remove_image_size( 'post-thumbnail' );
	// Disable other added image sizes, which are defined via `add_image_size()` in themes or plugins
	remove_image_size( 'another-size' );
}

ПОРАДА. Якщо ви використовуєте цей код, обов’язково перед завантаженням на сайт використовуйте формати зображень WebP та SVG, самостійно зменшуйте оригінали фото до розумних меж (наприклад, не більше 1600px по ширині) та стискайте їх. Тоді відсутність автоматичних копій не зашкодить швидкості вашого сайту.

back to contents ↑

Покращення показників Core Web Vitals та FCP

Google розділяє метрики завантаження на дві категорії.

1. Core Web Vitals (Ключові метрики).
2. Diagnostic Metrics / Other Web Vitals (Діагностичні метрики).

Core Web Vitals — це набір із трьох метрик Google, які вимірюють реальний користувацький досвід взаємодії зі сторінкою: швидкість завантаження, реакцію на дії (чуйність) та візуальну стабільність. Ці метрики Google безпосередньо використовує як фактор ранжування в пошуковій видачі:

• LCP (Швидкість завантаження),
• INP (Чуйність та інтерактивність),
• CLS (Візуальна стабільність).

До метрик Diagnostic Metrics / Other Web Vitals входять FCP (First Contentful Paint), а також TTFB (Time to First Byte), TBT (Total Blocking Time) та інші.

back to contents ↑

Оптимізація LCP (Завантаження)

• Оптимізація Hero-зображення. Використання сучасних форматів зображень (WebP / AVIF), задання атрибуту fetchpriority="high" для головної картинки та вимкнення для неї Lazy Load.
• Кешування та сервер. Використання плагіну кешування та сервера з підтримкою HTTP/2 або HTTP/3.
• Критичний CSS. Налаштування виділення та вбудовування критичного CSS для прискорення тексту що відмальовується.

back to contents ↑

Оптимізація INP (Чуйність)

• Зменшення навантаження від JavaScript. Відкладене завантаження некритичного JS (Google Analytics, чати, пікселі) за допомогою атрибутів defer або delay.
• Видалення важких плагінів. Видалення плагінів, які завантажують громіздкі скрипти на кожній сторінці, та оптимізація роботи DOM-дерева (зокрема при використанні пейдж-білдерів типу Elementor).

Оптимізація CLS (Стабільність)

Фіксовані розміри для медіафайлів.

Найчастіша причина стрибків — браузер не знає розміру картинки, поки вона не завантажиться повністю. Коли вона нарешті з'являється, текст під нею різко падає вниз.

• Перевірка атрибутів зображень. Всі зображення (особливо в блозі та шаблонах) повинні мати чітко прописані атрибути width та height. Сучасні теми роблять це автоматично, але кастомний код або старі плагіни можуть їх вирізати.
• Правило для CSS. Використання сучасної CSS-властивості aspect-ratio для адаптивних зображень, щоб браузер резервував пропорційне місце на екрані під час рендерингу.

back to contents ↑

Відкладене завантаження (Lazy Loading)

Lazy Loading — це супер для швидкості, але якщо воно налаштоване неправильно, то сильно псує CLS.

• Вимкнення перших екранів (LCP-елементи). Зображення, які користувач бачить одразу без скролу (логотип, банер на головній, головне фото статті), ніколи не повинні завантажуватися через Lazy Load.
• Додання до них атрибуту fetchpriority="high".

back to contents ↑

Резервування місця під динамічний контент (реклама та віджети)

Блоки, які підвантажуються через сторонні скрипти (Google AdSense, банери, спливаючі вікна, віджети коментарів або соцмереж), ламають верстку найагресивніше.

• Обгорнення реклами в контейнери. Створення для рекламних місць тегів із фіксованою мінімальною висотою через CSS (наприклад, min-height: 250px;). Якщо реклама не завантажиться або запізниться, на сторінці просто буде порожнє місце, а не різкий стрибок усього контенту.

back to contents ↑

Оптимізація завантаження шрифтів

Коли сайт використовує кастомні веб-шрифти (наприклад, Google Fonts), браузер спочатку може показати системний шрифт, а потім замінити його на красивий кастомний. Оскільки вони мають різну ширину літер, весь текст на сторінці перемальовується і зсувається (це називається FOIT/FOUT).

• Додавання font-display: swap. Це змусить браузер показати системний шрифт миттєво.
• Попереднє завантаження (Preload). Розміщення шрифтів локально та додання для них <link rel="preload"> у шапці сайту.

back to contents ↑

Оптимізація CSS та JavaScript

Асинхронне завантаження CSS (Critical CSS) — крута штука, але якщо плагін неправильно визначив "критичні" стилі для першого екрану, сайт спочатку завантажиться без дизайну, а через секунду "зійдеться" докупи. Це дає величезний CLS.

• Використання для скриптів та стилів атрибутів defer / delay.

Оптимізація FCP

Якщо присутнє просідання саме по FCP, це зазвичай означає, що браузер довго чекає на відповідь сервера або заблокований важкими ресурсами:

• Зменшення TTFB (Server Response Time). Використання швидкого хостингу, серверного кешування (Object Cache / Redis / Memcached) та CDN (наприклад, Cloudflare).
• Усунення ресурсів, що блокують рендеринг (Render-blocking resources). Увімкнення критичних CSS правил та відкладення завантаження некритичного JS (defer/async).
• Попереднє підключення (Preconnect/DNS-prefetch). Додання preconnect для зовнішніх доменів (наприклад, Google Fonts чи CDN).