Есть ли способ быстро проанализировать css-файл на наличие большых картинок в data-url?
Всем привет,
На днях ко мне обратились с проблемой медленной загрузки сайта. На мой взгляд основная причина в огромном css-файле - 2Мб в сжатом виде. Изучая, что же такое там тяжелое, обратил внимание на то, что все картинки прописаны не в виде ссылок, в виде data-url, в основном это маленькие иконки, меньше 2.5Кб, но мне попалась парочка 250Кб монстров. Словно поддержкой сайта внезапно стал заниматься некто не понимающий причин хранения картинок внутри css и слепо копирующий подход. Вот мне и подумалось, что таких картинок может быть много, только вот не знаю как их выявить, ведь в ручную это слишком долго, ну уж очень много всяческих картинок. Может есть какой-нибудь онлайн-сервис-анализатор css-файлов или какой-нибудь другой способ?
Спасибо.
В первую очередь стоит поинтересоваться, а не использовался ли сборщик для этих стилей. Тогда при наличии исходников, все сведется к тому, чтобы поправить параметры и пересобрать стили.
ksim_miloff: Думаю вы понимаете, что я не смогу ответить на этот вопрос не зная что там =) Только приблизительно. Возможно, использовался какой либо плагин для встраивания картинок в css. Его настройки и крутить. Например для гальпа есть подобное, и в его настройках указывается максимальный размер файла, который нужно кодировать в base64, а остальное оставлять внешними картинками.
Сергей: нет, в исходнике указано так "background: inline_image('image_name.jpg')". Но я изучил вопрос, прежде спрашивать здесь и я не нашел возможности задавать максимальный размер для изображения.
ksim_miloff: Похоже на компасовский хелпер, у него, действительно нет никаких опций. В этой ситуации я бы поиском нашел все использования хелпера, проверил размеры картинок и убрал хелперы где используются большие картинки. При использовании хорошей IDE это займет не более 10-15 минут
Да, судя оп списку гемов, это компас, но я первый раз с ним работаю. "проверил размеры картинок" - вот изначальный вопрос был "как это сделать?". На IDE не жалуюсь, но к сожалению, компосовый хелпер она не воспринимает и получить доступ к файлу в одно действие не получается. Т.е. в конкретно этом случае моя IDE не превосходит блокнот, ну или я ее на столько не знаю. За последний час вручную проверил около 150 файлов, всего их около 500.
Учитывая, что жопа уже есть, я бы вынес все data:image в отдельный css и грузил бы его после основного, например асинхронно. По корявости загрузки - определить какие элементы все же стоит перенести в основной css. Это быстрый вариант, конечно не лучший.
А найти их не проблема, как уже сказал Ergonomic Code это любой редактор может сделать через поиск. Ну или написать скрипт, который создаст 2 css на основе одного, может и быстрее будет.
Максим Тимофеев: Я хочу быстро из scss (или уже готового css) быстро узнать, какие именно картинки больше 20Кб и только их вынести во вне. Думал, может есть инструменты для такой оптимизации?
