Как удалить неиспользуемые иконки SVG из WordPress без плагинов

Диагностика проблемы: почему важно удалять неиспользуемые SVG-иконки

SVG-иконки часто добавляются в WordPress темы и плагины для улучшения визуального представления интерфейса. Однако с течением времени многие из них становятся неактуальными и остаются загружаться на страницы, замедляя загрузку и увеличивая размер страницы. Это негативно влияет на производительность сайта и UX.

Для диагностики проблемы нужно определить, какие SVG-файлы действительно используются на сайте, а какие нет. Если в тему или плагин встроено множество SVG, которые не выводятся на страницу, они увеличивают время загрузки и потребление ресурсов.

Как проверить, какие SVG загружаются и используются

• Откройте сайт в браузере и запустите инструменты разработчика (F12).
• Перейдите во вкладку Network и фильтруйте по типу img или svg.
• Обратите внимание на загружаемые SVG-файлы, которые не видны на странице.
• Сделайте аудит HTML-кода страницы на наличие вставок SVG — может быть, иконки встроены inline.
• Проверьте исходные файлы темы и плагинов на наличие SVG в папках /images/ или /assets/icons/.

Пошаговое решение: удаление неиспользуемых SVG без плагинов

1. Найдите SVG-файлы в теме и плагинах

Подключитесь к серверу через FTP или используйте файловый менеджер хостинга. Перейдите в папки темы (/wp-content/themes/your-theme/) и плагинов (/wp-content/plugins/), найдите директории с SVG-файлами.

2. Создайте список SVG-файлов

Сделайте простой список всех SVG-файлов, например с помощью команды в терминале (если есть SSH-доступ):

find wp-content/themes/your-theme/ -type f -name "*.svg" > theme-svgs.txt
find wp-content/plugins/ -type f -name "*.svg" > plugins-svgs.txt

3. Проверьте использование SVG в шаблонах

Ищите упоминания SVG-файлов в PHP и JS с помощью поиска:

grep -rl 'icon-name.svg' wp-content/themes/your-theme/
grep -rl 'icon-name.svg' wp-content/plugins/

Если SVG-файл нигде не упоминается, вероятно, он не используется.

4. Удалите неиспользуемые SVG

Аккуратно удалите файлы, которые не находятся в использовании. Обязательно сделайте резервную копию перед удалением.

5. Оптимизируйте подключение SVG

Если SVG вставлены inline, убедитесь, что они подключаются только в нужных местах, чтобы не перегружать страницы.

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

• Очистите кэш сайта и браузера.
• Загрузите страницы и проверьте вкладку Network в инструментах разработчика — SVG-файлы, которые вы удалили, не должны загружаться.
• Проверьте визуальное отображение страниц — иконки должны отображаться корректно.
• Измерьте скорость загрузки страниц с помощью сервисов типа Google PageSpeed Insights или GTmetrix — время должно улучшиться.

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

• Удаление нужных SVG-файлов. Перед удалением всегда ищите ссылки на файл в коде и делайте резервную копию.
• Кэширование мешает увидеть изменения. Очищайте кэш плагинов и браузера после удаления.
• SVG вставлены inline и не удаляются с файлом. В этом случае нужно править шаблоны, чтобы убрать лишние вставки.
• SVG используются динамически. Например, название иконки передается в переменную — ищите вызовы функций, генерирующих SVG.

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

• SVG — это XML, в них могут быть вредоносные скрипты. Всегда проверяйте SVG на наличие вредоносного кода перед загрузкой на сайт.
• Используйте Clearfy Pro для очистки и оптимизации сайта, включая удаление мусорных файлов и оптимизацию загрузки.
• Для оптимизации SVG используйте утилиты типа SVGO перед загрузкой на сайт.
• Минимизируйте количество SVG, загружаемых на страницу — загружайте только нужные иконки.

Сравнение способов удаления неиспользуемых SVG