Оптимізація WordPress: як прискорити сайт і покращити SEO
Привіт:) У цій статті розгляну способи, інструменти та власні спостереження оптимізації WordPress для, які використовую у своїй роботі для покращення швидкодії роботи сайту та вищих балів PageSpeed.
А тому для кожного конкретного сайту доцільність застосування того чи іншого методу може відрізнятися. У більшості випадків це визначається у процесі ознайомлення із сайтом. Але зазвичай ефективність виявляється вже після реалізації та впровадження.
- Оптимізація зображень
- Видалення зображень що не використовуються
- Оновлення ядра WordPress, тем і плагінів
- Вимкнення зайвих плагінів і тем
- Перехід на нову версію PHP
- Перехід на LiteSpeed Web Server
- Збільшення ліміту оперативної пам'яті для роботи адмін-частини
- Оптимізація бази даних
- Вимкнення зберігання у базі даних ревізій постів та сторінок
- Під'єднання зовнішніх JavaScript- та CSS-бібліотек локально
- Перенесення виклику скриптів JavaScript ближче до </body>
- Під'єднання зовнішніх шрифтів локально
- Вимкнення функціоналу плагінів на сторінках сайту, де вони не задіюються
- Contact Form 7
- WooCommerce
- Оптимізація Elementor
- Шрифти
- Оптимізація завантаження локальних шрифтів
- Шрифт Font Awesome
- Elementor Icons (Eicons)
- Ревізії
- Інші налаштування оптимізації Elementor
- Оптимізація Google Analytics (Tag)
- Вимкнення зайвого функціоналу WordPress
- Вимкнення Emoji
- Вимкнення примусової перевірки нових версій WordPress, плагінів і теми в адмін-частині
- Вимкнення створення копій зображень
- Для чого WordPress створює копії?
- Переваги вимкнення створення копій зображень
- Ризики вимкнення створення копій зображень
Розгляну кожен спосіб та інструмент детально.
Оптимізація зображень
Часто на клієнтських сайтах зустрічаються розмір файлів зображень від 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 розмір файлу зображення буде меншим за оригінальний.
Видалення зображень що не використовуються
Така робота проводиться для зменшення дискового простору. Цю задачу вирішую окремим плагіном Media Cleaner. Він коректно видаляє лише ті фото, які не прикріплені до жодного посту.
Оновлення ядра WordPress, тем і плагінів
Регулярне оновлення ядра WordPress, тем і плагінів безпосередньо впливає на швидкість роботи сайту, оскільки нові версії часто містять оптимізації продуктивності та виправлення неефективного коду. Розробники прибирають зайві SQL-запити, оптимізують роботу з кешем і адаптують код під сучасні версії PHP. Оновлення теми дозволяє позбутися застарілих підходів до підключення CSS і JavaScript, які блокують рендеринг сторінки. Актуальні плагіни краще взаємодіють між собою та з ядром WordPress, зменшуючи конфлікти й зайві навантаження. Крім того, нові версії зазвичай краще працюють із OPcache, Object Cache та серверним кешуванням. У підсумку сайт обробляє запити швидше, стабільніше тримає навантаження і показує кращі результати в PageSpeed та Core Web Vitals.
до змісту ↑Вимкнення зайвих плагінів і тем
Часто на клієнтських сайтах помічаю використання зайвих плагінів (див. Скільки плагінів можна встановити на WordPress). Наприклад, плагін, який не використовується взагалі або був застосований всього лише один раз.
Також вимикаю зайві теми. Залишаю лише активну та одну із стандартних тем WordPress. Останню рекомендується залишати у випадку, якщо в активній темі виникне критична помилка, та система автоматично увімкне тему за замовчуванням.
до змісту ↑Перехід на нову версію 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 визначається якістю теми й плагінів, а не обмеженнями серверної інфраструктури.
до змісту ↑Збільшення ліміту оперативної пам'яті для роботи адмін-частини
Зазвичай ефективно якщо:
- на сайті багато публікацій та/або з ними працює декілька авторів;
- встановлені конструктори сайтів (наприклад, Elementor);
- плагін WooCommerce.
Серед вбудованих функцій WordPress є можливість змінювати ліміти оперативної пам'яті (RAM) для адміністративної та користувацької частин сайту.
Щоб збільшити ліміт RAM для роботи адмін-частини у файлі wp-config.php достатньо додати рядок
define( 'WP_MAX_MEMORY_LIMIT', '512M' );
// або
define( 'WP_MAX_MEMORY_LIMIT', '1024M' );
Оптимізація бази даних
Для оптимізації бази даних WordPress зазвичай застосовую декілька методів.
- Заміна у базі даних типу таблиць із MyISAM на InnoDB (це дозволяє також, наприклад, плагін WP-Optimize).
- Додавання індексів до таблиць бази даних. Наприклад, до таблиць, які додає плагін WooCommerce. Наприклад, плагін Index WP MySQL For Speed. Також Оптимізація бази даних WordPress: додавання індексів до користувацьких таблиць.
- Очищення бази даних від надлишкових даних (тимчасові опції транзієнти, ревізії, метаполя що не використовуються).
- Видалення непотрібних таблиць. Наприклад, таких, які залишилися після видалення якогось плагіну. Виявлення та коректне видалення таких таблиць дозволяє плагін WP-Optimize. Якщо є сумнівні таблиці, які не видаляє вказаний плагін, то після введення назви такої таблиці у Google-пошуку, є можливість визначити який саме плагін їх створив.
- Очищення надлишкових та непотрібних даних у базі даних.
Вимкнення зберігання у базі даних ревізій постів та сторінок
Вимкнення зберігання ревізій постів і сторінок у WordPress — це обмеження або повна заборона збереження проміжних версій контенту в базі даних. За замовчуванням WordPress створює ревізію майже після кожного автозбереження або редагування, що з часом призводить до роздування таблиць wp_posts. Це збільшує обсяг бази даних, уповільнює SQL-запити та негативно впливає на продуктивність сайту, особливо на великих проєктах. Вимкнення або лімітування ревізій зменшує навантаження на базу даних і прискорює роботу адмінки та фронтенду. Така оптимізація є доцільною для продакшн-сайтів, де не потрібна історія правок кожного запису.
Щоб вимкнути ревізії:
- У файл wp-config.php додайте рядок
/* Вимкнення автозберігання на 1 рік */
define( 'AUTOSAVE_INTERVAL', 60*60*60*24*365 );
/**
* Вимкнення ревізій
*/
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;
}
}
до змісту ↑
Під'єднання зовнішніх 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 );
до змісту ↑
Під'єднання зовнішніх шрифтів локально
Часто у темах розробники викликають шрифти із зовнішніх ресурсів. Наприклад, із fonts.googleapis.com. А тому завантажую файли шрифтів локально та під'єдную їх у темі.
У випадку якщо це зробити неможливо, до виклику зовнішнього шрифту додаю GET-параметр display=swap:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
Вимкнення функціоналу плагінів на сторінках сайту, де вони не задіюються
Для кожного плагіну — це окремий код у файлі 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' );
}
}
до змісту ↑
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 );
до змісту ↑
Оптимізація Elementor
Elementor — це візуальний конструктор сторінок із простим drag-and-drop редактором для створення повноцінного WordPress-сайту без необхідності писати код. Але закладений у нього функціонал додає значну кількість CSS, JavaScript та динамічних запитів, що можуть уповільнювати завантаження сторінок. Для оптимізації його роботи є декілька варіантів.
Шрифти
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.
до змісту ↑Оптимізація завантаження локальних шрифтів
В 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;
} );
Іноді для коректної роботи цього коду потрібно виконати наступні кроки:
- Очистити повністю кеш (у плагіні кешування, в налаштуваннях CDN-сервісу (наприклад, ClaudFlare), на хостингу).
- У меню Elementor -> Editor -> Settings -> Performance значення опції Element Cache встановити як Disable.
- У меню Elementor -> Editor -> Tools натиснути кнопки Clear Files & Data та Save Changes.
- У меню Elementor -> Editor -> Settings -> Performance значення опції CSS Print Method встановити як Internal Embedding.
- У меню Elementor -> Editor -> Settings -> Performance значення опції Element Cache встановити як 1 Day.
Шрифт 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 );
до змісту ↑
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 );
до змісту ↑
Ревізії
У процесі редагування сторінки в Elementor кожне збереження змін створює нову ревізію, тобто копію сторінки, яка зберігається у базі даних сайту. Якщо сторінок багато, то з часом база даних може розростися до великих розмірів.
Щоб обмежити кількість ревізій (наприклад, до 3-х) для кожної сторінки:
add_filter( 'wp_revisions_to_keep', function( $num, $post ) {
return 3;
}, 10, 2 );
Інші налаштування оптимізації Elementor
Плагін має вбудовані інструменти та налаштування для оптимізації швидкості, які знаходяться в адмін-розділі Elementor -> Editor -> Settings -> Performance. Серед них:
- Optimized Image Loading. Для зображень додаються параметри
fetchpriority="high"таloading="lazy". - Lazy Load Background Images. "Ліниве" завантаження всіх фонових зображень, окрім першого.
- Element Cache. Тривалість зберігання блоків Elementor у кеші. Кешування елементів пришвидшує завантаження, надаючи попередньо відрендерені копії елементів, а не оновлюючи їх щоразу.
Оптимізація 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 -->
до змісту ↑
Вимкнення зайвого функціоналу 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;
}
}
Вимкнення примусової перевірки нових версій 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' );
}
Вимкнення створення копій зображень
Коли ви завантажуєте одне зображення через адмін-меню Медіафайли, WordPress автоматично створює цілу пачку його копій. Ось чому це відбувається і чи варто це обмежувати.
Для чого WordPress створює копії?
- Адаптивність (Responsive Images). Це головна причина. WordPress створює різні розміри, щоб браузер міг вибрати найменший підходящий файл. Наприклад, на смартфоні завантажиться картинка шириною
300px, а на моніторі —1200px. - Дизайн теми. Різні частини сайту вимагають різних форматів. На головній сторінці потрібна маленька мініатюра, а всередині статті — велике фото.
- Швидкість завантаження. Менші копії важать менше, що дозволяє сторінкам відкриватися швидше.
Переваги вимкнення створення копій зображень
Видалення зайвих розмірів (large, 1536x1536, 2048x2048) дає суттєві плюси:
- Колосальна економія місця. Видалення найбільш "важких" копій, які часто майже не відрізняються за розміром файлу від оригіналу. Це економить до 80% дискового простору.
- Прискорення бекапів. Копіювання сайту стає в рази швидшим, оскільки серверу не потрібно обробляти тисячі дрібних файлів.
- Чистота на сервері. каталог
uploadsне перетворюється на звалище однакових зображень. - Зниження навантаження на CPU. Сервер не витрачає ресурси на "нарізання" картинок під час кожного завантаження.
Ризики вимкнення створення копій зображень
Перед впровадженням коду нижче важливо врахувати недоліки:
- Навантаження на трафік. Якщо ви видалили розмір
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' );
}
1600px по ширині) та стискайте їх. Тоді відсутність автоматичних копій не зашкодить швидкості вашого сайту.