Получить профессию в Skypro
Определение неиспользуемых CSS стилей и картинок на сайте
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для обнаружения неиспользуемого CSS и JavaScript применяйте вкладку "Покрытие" в Chrome DevTools. Чтобы найти неиспользуемые изображения, используйте краулер, например, Screaming Frog, который поможет обнаружить изображения, на которые не ссылаются.
Дополнительные инструменты для нахождения неиспользуемых ресурсов
Автоматизация: привлекаем скрипты!
Составление скрипта для регулярной проверки сайта — эффективный способ вовремя обнаружить устаревшие ресурсы и создать отчеты об этом.
За рамками Chrome: расширяем инструментарий
Инструменты разработки Firefox и приложения такие как Adobe Dreamweaver или GoLive могут помочь в определении и удалении ресурсов, которые больше не используются.
Выбор пользуется второстепенных решений
С применением таких инструментов, как PurifyCSS, а также веб-сервисов Unused-CSS и UnCSS Online, вы сможете анализировать веб-страницы и удалять неиспользуемые CSS-селекторы.
Визуализация
Воспринимайте веб-сайт как дом, наполненный мебелью (изображениями) и декором (стилями CSS). Используемые элементы создают удобство для пользователей, неиспользуемые — лишь занимают пространство.
Настройка производительности: не только очистка
Оптимизация кеширования и времени загрузки
Применяйте стратегии кеширования и заголовки Cache-Control, чтобы ускорить загрузку сайта путем сохранения часто запрашиваемых файлов в кеше браузера.
Прореживание библиотек стороннего разработчика
Проанализируйте, не используется ли вся библиотека для нескольких функций. Инструменты вроде "tree shaking" от Webpack помогут удалить ненужный код.
Проверки в системе непрерывной интеграции (Continuous Integration, CI)
В процесс CI включите проверки на наличие неиспользуемых ресурсов, чтобы предотвратить попадание избыточного кода в продакшн.