Сторінка гальмує, а PageSpeed Insights мовчки вказує на dashicons.min.css, 30 КБ іконок, які не відображаються в жодному видимому елементі. Ви не встановлювали цей файл, не підключали його в темі, але він справно завантажується кожному відвідувачу. Звідки він і як його позбутися?

WordPress за замовчуванням тягне dashicons на фронтенд заради одного вузького завдання: адмін-бар для залогінених користувачів. Звичайний гість адмін-бар не бачить, але браузер чесно завантажує CSS, парсить його, будує CSSOM і лише потім розуміє, що жоден клас не знадобився. На повільному мобільному інтернеті ці 30 КБ перетворюються на зайві 300-400 мс блокувального завантаження, достатньо, щоб просісти в Core Web Vitals.

Нижче три способи вимкнути dashicons: від ручного сніпета до однієї позначки в плагіні оптимізації. Усі методи безпечні, оборотні та перевірені на реальних інсталяціях WordPress.

💡 Швидкий огляд:

• Відкрийте DevTools або PageSpeed Insights і переконайтеся, що dashicons.min.css справді завантажується на вашому сайті
• Оберіть відповідний спосіб вимкнення, код у functions.php або готовий плагін оптимізації
• Повторно протестуйте швидкість і перевірте, що файл зник зі звіту
• Переконайтеся, що адмін-бар адміністратора продовжує працювати без помилок

Що таке dashicons і навіщо вони завантажуються на фронтенді

Dashicons — це вбудований іконковий шрифт WordPress, що з’явився у версії 3.8. В адмін-панелі він усюди: іконки розділів меню, типів записів, кнопок тулбару. Без dashicons адмінка перетворюється на голий текст, і WordPress не може від них відмовитися.

Проблема в механізмі реєстрації. Ядро реєструє стилі dashicons глобально та додає їх у чергу не лише для адмінки, а й для фронтенду, заради єдиного сценарію: залогінений користувач заходить на сайт і бачить чорну смужку адмін-бару з іконками. Гість адмін-бар не отримує, а CSS-файл отримує. Браузер парсить його, виявляє, що жоден селектор не збігся, і викидає в смітник, але час уже витрачено.

PageSpeed Insights і GTmetrix фіксують dashicons.min.css у рекомендації «Remove unused CSS» і зрізають бали. Один такий файл — це дрібниця. Але коли до нього додаються emoji-стилі WordPress, CSS невикористовуваних плагінів і мертві блоки теми, сумарна економія сягає 150-300 КБ. Для мобільної продуктивності це відчутно.

Як перевірити, що dashicons завантажується на вашому сайті

Перш ніж щось вимикати, переконайтеся, що проблема існує. Три способи, менше хвилини кожен.

Chrome DevTools. Відкрийте сайт у режимі інкогніто (щоб адмін-бар не впливав на перевірку), натисніть F12, вкладка Network, у рядку фільтра введіть dashicons. Бачите файл зі статусом 200 і розміром близько 30 КБ, він завантажується для всіх відвідувачів.

PageSpeed Insights. Вставте URL у pagespeed.web.dev і запустіть тест. Розгорніть рекомендацію «Remove unused CSS», dashicons.min.css буде в списку із зазначенням розміру та потенційної економії в кілобайтах.

GTmetrix. Вкладка Waterfall, фільтр за dashicons. Файл у ланцюжку завантаження з позначкою «Low» або «Lowest» все одно блокує рендеринг і тягне оцінку вниз.

Жоден спосіб не показав файл, тема або плагін оптимізації вже вимкнули dashicons, статтю можна закривати. Виявили, ідемо далі.

Спосіб 1: вимикаємо через код у functions.php

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

Додайте цей код у functions.php дочірньої теми або через плагін Code Snippets (безпечніше, переживе зміну теми):

1
/**
2
 * Отключаем dashicons.min.css на фронтенде для всех,
3
 * кроме пользователей с правами администратора.
4
 */
5
function sdstudio_disable_dashicons_frontend() {
6
    if ( current_user_can( 'update_core' ) ) {
7
        return;
8
    }
9
    wp_deregister_style( 'dashicons' );
10
}
11
add_action( 'wp_enqueue_scripts', 'sdstudio_disable_dashicons_frontend' );

Хук wp_enqueue_scripts спрацьовує під час формування черги стилів на фронтенді. current_user_can('update_core') перевіряє право на оновлення ядра, за замовчуванням воно є лише в адміністраторів. Для звичайних відвідувачів перевірка не проходить, і wp_deregister_style('dashicons') повністю видаляє файл із черги.

Чому deregister, а не dequeue. wp_dequeue_style прибирає стиль із черги, але залишає його зареєстрованим, інший плагін може повторно додати dashicons у вивід. wp_deregister_style знімає реєстрацію повністю, і відновити файл можна лише явним викликом wp_register_style. Для dashicons це правильний вибір: ми не хочемо, щоб плагін соцмереж або галереї випадково повернув їх на фронтенд.

Запобіжні заходи. Помилка в functions.php кладе сайт білим екраном. Перед правкою скопіюйте файл у functions.php.bak для швидкого відкату. Використовуйте дочірню тему або Code Snippets. Перевірте синтаксис: кожна дужка та крапка з комою на своєму місці.

Спосіб 2: плагіни оптимізації, одна позначка замість коду

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

Perfmatters. У розділі General → Options є перемикач «Disable Dashicons». Один клік, і файл зникає з фронтенду. Perfmatters також виключає dashicons із Used CSS у функції Remove Unused CSS, тобто проблема закривається подвійним контуром. Плагін платний, але закриває десятки інших вузьких місць продуктивності, від вимкнення emoji-стилів до керування heartbeat API.

WP Rocket. У розділі File Optimization → Optimize CSS Delivery увімкніть «Remove Unused CSS». WP Rocket проаналізує сторінки та виріже невикористовувані стилі, включно з dashicons.min.css. Працює автоматично для всього сайту. Якщо Remove Unused CSS конфліктує з іншою оптимізацією, додайте dashicons.min.css до списку винятків, WP Rocket відкладе його завантаження замість повного видалення.

Asset CleanUp (безплатний). Плагін Asset CleanUp дозволяє вибірково вимикати CSS і JS на рівні окремих сторінок і типів контенту. Зайдіть у CSS/JS Manager, знайдіть dashicons.min.css і вивантажте його для всього сайту. Безплатної версії достатньо для базового очищення.

Який спосіб обрати? Якщо вже стоїть Perfmatters або WP Rocket, використовуйте вбудовану функціональність, не плодіть код у functions.php. Якщо сайт на мінімальному наборі плагінів і вам комфортно в PHP, сніпет зі способу 1 легший і не тягне залежностей.

Перевіряємо результат

Після вимкнення dashicons відкрийте сайт у режимі інкогніто та повторіть перевірку з другого розділу. Файл dashicons.min.css має зникнути зі списку завантажених ресурсів у DevTools. Запустіть повторний тест у PageSpeed Insights, показник «Remove unused CSS» зменшиться, а потенційна економія трафіку зросте на ті самі 30 КБ.

Реальний приріст у балах залежить від стеку. На легких сайтах з однією-двома CSS-проблемами вимкнення dashicons додає 1-3 бали в мобільному PageSpeed. На роздутих сайтах із десятками невикористовуваних стилів це крапля, але правильна: кожен кілобайт на рахунку, і такі «краплі» в сумі дають відчутний результат.

Обов’язково перевірте адмін-бар: залогіньтеся під адміністратором і переконайтеся, що чорна смужка зверху відображається нормально, а іконки в ній на місці. Код зі способу 1 і перемикач у Perfmatters залишають dashicons для адміністраторів недоторканими, різниці ви не помітите.

⁉️🤔 Часті запитання

Чи вплине вимкнення dashicons на зовнішній вигляд сайту?

Якщо ваша тема використовує dashicons для іконок на фронтенді, стрілочки слайдера, хрестики закриття, меню-гамбургер, вимкнення зламає їх. Перевірити просто: вимкніть файл і пройдіться сторінками. Іконки зникли, тема спирається на dashicons. У цьому випадку використовуйте агресивне кешування через Cloudflare або плагін кешу: 30 КБ із браузерного кешу не критичні.

Чи працює метод із блоковими темами (FSE)?

У блокових темах, Twenty Twenty-Four, Ollie та аналогічних, dashicons найчастіше не завантажуються на фронтенд. Блоковий редактор використовує власні SVG-іконки, і ядро не підключає іконковий шрифт для відвідувачів. Перевірте через DevTools: скоріш за все файлу там немає. Якщо виявили, код зі способу 1 працює однаково для класичних і блокових тем.

Чи можна вимкнути dashicons лише для частини сторінок?

Так, через умовні теги WordPress. Наприклад, залишити dashicons тільки на головній:

1
function sdstudio_conditional_dashicons() {
2
    if ( is_front_page() ) {
3
        return;
4
    }
5
    if ( current_user_can( 'update_core' ) ) {
6
        return;
7
    }
8
    wp_deregister_style( 'dashicons' );
9
}
10
add_action( 'wp_enqueue_scripts', 'sdstudio_conditional_dashicons' );

Усі доступні умовні теги описано в документації WordPress. Серед них is_single для окремих записів, is_page для сторінок, is_archive для архівів і is_home для головної.

Плагін кешу вже пришвидшує сайт, dashicons все одно вимикати?

Кешувальний плагін пришвидшує повторні завантаження, але перший холодний візит все одно тягне dashicons.min.css. PageSpeed Insights під час кожного тесту емулює чистий кеш, тому файл буде у звіті незалежно від кешу на сервері. Вимкнення dashicons скорочує обсяг переданих даних на рівні джерела — це бачать і метрики, і реальні відвідувачі під час першого входу.

Чи достатньо вимкнення dashicons для хорошої оцінки PageSpeed?

Ні, це лише один крок із десятків. Основний виграш зазвичай дають оптимізація зображень (стиснення, сучасні формати, lazy load), відкладене завантаження JavaScript і серверне кешування. Сприймайте вимкнення dashicons як гігієнічний мінімум: швидко, безпечно та з вимірюваним ефектом. З нього зручно починати розчищення фронтенду.

Який спосіб вимкнення dashicons обрати під ваше завдання

Короткий підсумок за трьома способами та конкретні сценарії.

Якщо ви працюєте з кодом і сайт на полегшеному стеку, беріть сніпет зі способу 1. Дві хвилини на вставку в functions.php або Code Snippets, і питання закрите назавжди. Жодних додаткових плагінів, жодного навантаження на адмінку.

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

Якщо потрібен безплатний інструмент без правки PHP, Asset CleanUp впорається за два кліки. Підійде новачкам і тим, хто не хоче ризикувати з functions.php.

Загальний принцип: dashicons не роблять сайт повільним самі по собі. Але вони, частина фонового шуму, який у сумі з невикористовуваними стилями плагінів, важкими шрифтами та неоптимізованими зображеннями забиває канал і гальмує рендеринг. Прибрати dashicons — це швидка перемога, з якої зручно починати планомірну оптимізацію.

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