Как удалить неиспользуемые иконки FontAwesome из WordPress для ускорения загрузки

Диагностика проблемы: почему FontAwesome замедляет сайт

FontAwesome — популярный набор иконок, который часто подключают целиком, загружая все шрифты и стили. В результате вес страницы увеличивается, что негативно сказывается на скорости загрузки и производительности. Особенно это заметно, если иконок используется мало, а подключается вся библиотека.

Чтобы проверить, так ли обстоят дела, откройте сайт в браузере и воспользуйтесь инструментами разработчика (обычно F12). Перейдите на вкладку Network, отфильтруйте запросы по типу font и css. Если вы видите большой файл all.min.css или fontawesome-webfont.woff2, значит загружается вся библиотека.

Также в консоли браузера можно проверить, сколько иконок реально используется на странице: если это 2-3 иконки, а загружается вся библиотека, есть смысл оптимизировать.

Пошаговое решение: удаляем неиспользуемые иконки FontAwesome

1. Определяем используемые иконки

Просмотрите HTML-код или шаблоны темы, чтобы увидеть, какие именно классы иконок используются, например fa-shopping-cart, fa-user и т.п.

2. Подключаем только необходимые иконки через FontAwesome Kit или кастомный сборщик

FontAwesome предлагает сервис FontAwesome Kits, где можно выбрать только нужные иконки и получить облегченный код для подключения. Это самый простой способ оптимизировать загрузку.

Если хотите полностью контролировать процесс, скачайте исходники и создайте кастомный CSS с помощью Sass или npm инструментов.

3. Отключаем стандартное подключение FontAwesome в теме или плагине

В functions.php вашей темы или в плагине добавьте код, который отключит стандартный стиль FontAwesome, например:

function disable_default_fontawesome() {
    wp_dequeue_style('fontawesome'); // замените на фактический хендл стиля
    wp_deregister_style('fontawesome');
}
add_action('wp_enqueue_scripts', 'disable_default_fontawesome', 20);

Хендл стиля можно узнать в исходниках темы или плагина, где подключается FontAwesome.

4. Подключаем кастомный CSS с нужными иконками

Загрузите кастомный CSS-файл с выбранными иконками в папку вашей темы и подключите его в functions.php:

function enqueue_custom_fontawesome() {
    wp_enqueue_style('custom-fontawesome', get_stylesheet_directory_uri() . '/css/fontawesome-custom.css', array(), '6.4.0');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fontawesome');

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

Откройте инструменты разработчика и убедитесь, что в Network загружается только ваш кастомный файл CSS, а не весь FontAwesome. Вес файла должен быть значительно меньше (обычно в 5-10 раз).

Проверьте корректность отображения иконок на сайте — они должны быть видимы без ошибок в консоли.

Для теста скорости используйте сервисы PageSpeed Insights или GTmetrix. Время загрузки и оценка производительности должны улучшиться.

Частые ошибки и как их исправить

• Иконки не отображаются после отключения стандартного FontAwesome: проверьте, что вы подключили правильный кастомный CSS и используете верные классы иконок.
• Двойное подключение FontAwesome: иногда плагины и тема подключают библиотеку независимо, что увеличивает нагрузку. Используйте wp_dequeue_style для отключения лишних подключений.
• Неверный хендл стиля в wp_dequeue_style: используйте инспектор кода, чтобы найти точное имя стиля, иначе отключить не получится.
• Кэширование мешает увидеть изменения: очистите кэш браузера и кэш плагинов кэширования (например, WP Rocket или W3 Total Cache).

Практические советы по безопасности и производительности

• Храните кастомный CSS локально, чтобы избежать зависимостей от сторонних CDN и контролировать обновления.
• Используйте современные форматы шрифтов (woff2) для лучшей компрессии и скорости.
• Минимизируйте CSS, чтобы уменьшить размер файла.
• Следите за тем, чтобы кастомный набор иконок не содержал избыточных стилей и правил.
• Если используете плагины для иконок, убедитесь, что они не дублируют загрузку FontAwesome.

Сравнение способов оптимизации FontAwesome в WordPress