минифицированный код в обычный
Минификация HTML- и CSS-кода
Здравствуйте, друзья!
В этой статье я хочу рассказать о том, что такое минификация HTML- и CSS-кода, для чего она нужна, и как ее выполнить.
Сначала разберемся с HTML-кодом.
Что такое минифицированный код
Лучше всего это понять, рассмотрев примеры. Для этого попробуйте посмотреть коды страниц различных сайтов. Чтобы их увидеть, нужно сделать следующее:
Попробуйте сделать это несколько раз с разными сайтами. Код будет внешне выглядеть или как на первом скриншоте, или как на втором. 
В первом случае код разбит на пронумерованные строки, он имеет определенную структуру, каждый элемент страницы расположен на отдельной строчке, тэги имеют отступы и т. д.
Во втором случае код расположен очень компактно, нет никаких отступов, пробелов. Обратите внимание, на скриншоте не видна нумерация строк. Просто каждая строка содержит большой кусок кода, который в окне браузера визуально занимает несколько строк.
В первом случае мы имеем HTML-код в обычном виде, в котором его принято записывать при разработке сайта.
Во втором случае – компактный минифицированный код.
Структурирование кода на блоки, строки и т. п. необходимо для удобства чтения человеком. Мы воспринимаем такие блоки целиком, мы видим, где тэг открывается, где закрывается.
Для браузеров это не нужно, они считывают код последовательно, и лишние переводы строк, пробелы, комментарии в тексте только затрудняют его чтение и увеличивают время загрузки страницы.
Таким образом, можно выделить две главные причины необходимости минификации кода:
Как минифицировать код
Для того, чтобы выполнить эту операцию на своем блоге есть несколько способов.
Оптимизация на стадии разработки
Этот способ можно рекомендовать в том случае, если заказывается уникальный шаблон у профессионального разработчика и, важный момент, в дальнейшем не подразумевается внесение в него каких-либо изменений. Дело в том, что код такого шаблона практически не читаем, и редактировать его весьма сложно.
Чаще всего новички используют для создания своего сайта готовые темы, платные или бесплатные. Все они имеют код в обычном, удобном для чтения человеком виде. Такие шаблоны следует минифицировать.
Использование плагинов
Да, конечно, для этих целей разработаны специальные плагины. Вот некоторые из них:
Если цена этого плагина вас не устраивает, можно воспользоваться другим решением. Скрипт Dynamic Website Compressor стоит около 9$, его можно приобрести по ссылке.
Это не обычный плагин, устанавливаемый через панель управления WordPress, а скрипт, который нужно закачать в корневую директорию сайта и подключить, вставив специальный код в файл index.php.
Сам скрипт находится в файле compressor.php, поэтому в индексный файл вставляется строчка
После этого скрипт начинает работать.
И последний вариант, который я хочу предложить, — совсем бесплатный. Это плагин для WordPress WP-HTML-Compression. Он устанавливается обычным образом, не требует никакой настройки, начинает работать сразу после установки. На моем блоге установлен именно он
Оптимизация CSS
Если анализировать скорость загрузки сайта с помощью сервиса PageSpeed Insights, то он выдает рекомендации по ее увеличению. Одна из таких рекомендаций может быть – Сократите CSS. 
Кстати, сам сервис предлагает выполнить эту работу, но я могу предложить другой ресурс, который, по многим отзывам, сокращает CSS-код гораздо лучше. Вот ссылка на него. 
С помощью сервиса CSS Resizer можно выполнить минификацию css-файла или по указанию его url-адреса непосредственно на сервере, а можно закачав этот файл на сервис, а потом получив сжатый. Я обычно пользуюсь вторым вариантом для того, чтобы несжатые файлы стилей хранить на компьютере в отдельной папке для возможного дальнейшего редактирования. Как я уже отмечал, обработанные таким образом файлы редактировать очень сложно.
Пример использования сервиса CSS Resizer.
Скриншот части файла стилей style.css до обработки 
А это – после сжатия 
И размеры этого файла, соответственно, до 
И после 
Как видите, размер файла уменьшился более, чем в полтора раза. Кстати, css-файлов в шаблоне темы может быть несколько, и каждый из них можно таким образом минифицировать.
Надеюсь, объяснил понятно. Если есть вопросы, пишите в комментариях.
Как выжать максимум из минификации кода
Я использовал этот и некоторые другие упоротые способы для участия в конкурсе js13kGames, цель которого — написать игру, размер которой не превысит 13 килобайт.
Игра почти готова, осталось всего-то пару дней не спать.
Что за конкурс?
js13kGames, кажется, ещё не очень популярен в России, поэтому, кратко:
В ущерб читаемости
Думаю, во всём проекте только эти замены сохранили более килобайта.
При минификации все эти функции будут занимать один символ (вместо, например, трёх, если мы поместим их в объект), что даёт весьма впечатляющую экономию: одна только функция random() встречается в коде 77 раз, и её «глобальность» спасает 150 байт.
Откусив от геймплея
Некоторого количества кода удалось избежать, сымитировав поверхность, по которой бежит персонаж: на самом деле, это граница уровня, а текстура земли просто находится «за кадром». К сожалению, из-за этого решения платформер, по сути, почти перестал быть платформером, но на исправление такой фундаментальной оплошности времени уже не было.
В категорию «минус к играбельности» попадают и некоторые юниты, которые, хоть и заняли совсем мало места, получились слишком неадекватными.
Основной пример: камень, призванный разнообразить ландшафт, не смог стать поверхностью, на которую можно запрыгнуть. Вместо этого, он отталкивает игрока и наносит урон. Пришлось пойти на быстрый хак, чтобы выкрутиться: камень превратился в крысиное логово, и если начать по нему бить, то раз в пять ударов оттуда появляется крыса.
Анимация
Как я уже говорил, все спрайты хранятся в GIF-файлах, завёрнутых в base64. Размера они минимального, и при создании анимации увеличиваются в 16 раз (это размер внутриигрового «пикселя»). Объект с описанием спрайта также используются конструкторами юнитов для определения размеров; то есть, не анимация подгоняется под размер юнита, а наоборот.
Неиспользованное
Для создания музыки я использовал нотацию, где каждые два символа представляют звук: строка — ноту, число — знаменатель её длительности (ноль вместо строки — пауза). Реальная длительность в милисекундах рассчитывается делением длительности целой ноты на знаменатель длительности ноты.
В планах было сократить объём записи саундтрека введением «сэмплов» — переиспользуемых музыкальных фраз, но до этого дело не дошло, поскольку сочинительство музыки пришлось на последний час перед нажатием на кнопку Submit, и ни о каком звуковом разнообразии речи идти уже не могло.
Заключение
Как ни смешно, но большая часть этих оптимизаций для сжатия оказалась излишней: даже с оригинальными именами глобальных переменных файл с игрой превратился в zip-архив размером 10.1 Кб (при размере index.html в 31.9 Кб). Чего не хватило по-настоящему — так это времени. Особенно его не хватило на level-дизайн, внятный саундтрек и хотя бы небольшое количество плейтестов.
Я уже участвовал в js13kGames в прошлом году, но в тот раз приступил к работе за два дня до окончания сроков. Поэтому, а также из-за меньшего опыта, первый блин вышел комом. В этом году мне даже есть чем гордиться, хотя, конечно, до настоящих высот геймдева ещё далеко.
Для энтузиастов минификации: код доступен на GitHub.
Интересно узнать и о ваших tinycode-проектах, делитесь в комментариях!
[в закладки] 9 инструментов, повышающих продуктивность веб-разработчика
Интернет — это не только то место, где можно научиться программировать. Тут имеется множество полезных онлайновых инструментов, способных помочь разработчику на разных этапах работы над проектом и таким образом сэкономить немного времени.
Автор статьи, перевод которой мы сегодня публикуем, отобрал 9 таких инструментов.
1. Can I Use
Проверка поддержки технологии localStorage различными браузерами
2. Unminify
Ресурс unminify.com — это бесплатный онлайновый инструмент для деминификации (распаковки, деобфускации) JavaScript-, CSS- и HTML-кода. Он позволяет превратить минифицированный код в код, удобный для восприятия. Это один из самых широко используемых ресурсов для приведения кода в читабельный вид.
Хотите разобраться в чьём-то коде, написанном без отступов, или изучить содержимое файла, код в котором представляет собой одну нечитабельную строку? Для того чтобы всё это сделать — достаточно вставить код в соответствующее поле на ресурсе Unminify. Это позволит буквально тут же увидеть то, что раньше выглядело непонятным, в удобной для восприятия форме.
3. Compressor
Размеры файлов изображений — это то, что способно внести значительный вклад во время загрузки веб-страниц.
Compressor.io — это ресурс, который нацелен на уменьшение размеров изображений с сохранением их качества. Этот сайт отлично справляется со своей работой. В результате между исходными и сжатыми изображениями нет почти никаких внешних различий.
4. Cloudcraft
Проект Cloudcraft помогает проектировать облачные системы и рассчитывать затраты на облачные услуги. Его удобный интерфейс позволяет создавать объёмные схемы, манипулируя объектами, представляющими собой службы облачных инфраструктур (пока, правда, поддерживается только платформа AWS). Он, кроме того, позволяет рассчитывать стоимость использования проектируемых с его помощью облачных архитектур.
Планирование облачной архитектуры с использованием служб AWS
5. Repl.it
На сайте repl.it можно найти отличную онлайновую IDE. Возможно — именно такую, которую вы давно искали. Тут, буквально за пару секунд, можно получить доступ к среде разработки, рассчитанной на практически любой язык программирования или стек технологий.
Этот проект поддерживает все современные языки программирования. Среди них — Python, Kotlin, Ruby, JavaScript. Здесь можно устанавливать дополнительные библиотеки или пакеты и напрямую, без необходимости загружать их на локальную машину, ими пользоваться.
Ресурс позволяет делиться ссылками на рабочее окружение, содержащее код некоего проекта.
Разработка Express-приложения в среде Node.js
6. RequestBin
Проект RequestBin даёт разработчику доступ к конечным точкам HTTP, способным собирать все отправленные к ним запросы. Это позволяет анализировать такие запросы, проверять их и передаваемые в них данные.
Эти возможности могут оказаться очень кстати в тех случаях, например, когда нужно отлаживать Webhook-запросы от различных сайтов, в ситуациях, когда заранее неизвестна структура таких запросов и особенности имеющихся в них данных.
Данные, принятые конечной точкой в POST-запросе
7. Web Code
Web Code — это один из лучших существующих генераторов кода. Он позволяет автоматически создавать код для самых разных нужд, просто задавая требования к этому коду.
Этот инструмент может оказаться весьма полезным для веб-разработчиков, которые не особенно хорошо знакомы с некоторыми аспектами HTML и CSS.
Генерирование CSS-кода, позволяющего по-разному настроить границы элемента
8. BundlePhobia
С тех пор, как появились современные фронтенд-фреймворки, разработчики стремятся к тому, чтобы как можно сильнее сократить размеры бандлов своих приложений и снизить таким образом время загрузки своих проектов пользователями.
Ресурс BundlePhobia призван помочь разработчикам в деле анализа того, насколько некий npm-пакет способен увеличить размер сборки приложения.
На этот сайт можно загрузить файл package.json и получить сводку по используемым в проекте пакетам. Тут можно выяснить подробности и об отдельном пакете.
Выяснение размера библиотеки pdfmake
9. Fingerprint.js
Никого в наши дни не удивишь тем, что сбор уникальных идентификаторов браузеров через веб-сайт — это непростая задача.
Упростить решение этой задачи можно с помощью замечательной библиотеки fingerprint.js. Она помогает формировать особые идентификаторы браузеров, не используя при этом куки-файлы, или такие данные, на которые легко могут воздействовать недобросовестные пользователи. Она позволяет быстро собирать подробные сведения о браузере, которые можно использовать либо в исходном виде, либо — создавая на их основе хэш, который позволяет идентифицировать уникального пользователя.
Это библиотека позволяет формировать нечто вроде аналога идентификатора мобильного устройства UUID. Пользоваться ей можно и через CDN, и установив её в виде npm-пакета.
Извлечение из браузера информации о пользователе
Уважаемые читатели! Какие инструменты, повышающие продуктивность веб-разработчика, вы добавили бы в этот список?
Минификация кода веб-страниц
Минификация (сокращение) объёма кода является одним из эффективных приёмов оптимизации скорости загрузки сайта, обеспечивающим снижение общего размера веб-страниц.
Содержание
Принципы сокращения кода
Минификация (минимизация, сокращение) кода подразумевает его оптимизацию в пользу уменьшения объёма памяти, при этом в жертву приносится удобочитаемость.
Минифицированный код является полностью рабочим, но лишенным всех символов и участков, не влияющих на его работоспособность, к которым относятся:
Перечисленные символы и комментарии в коде применяются для лучшего его восприятия разработчиками при написании и редактировании, но «раздувают» его объём, увеличивая общий вес веб-страницы. Поэтому целесообразно их удалять перед применением на сайте, оставляя копию оригинала для возможного редактирования.
Сокращенные файлы фреймворков
bootstrap.js Версия для веб-разработчика. При необходимости может редактироваться и минифицироваться, в последующем заменяя собой сокращенную версию. bootstrap.min.js Сокращенная версия для применения на сайте.
| Файл | Нормальный | Сокращенный | Разница | Коэффициент |
|---|---|---|---|---|
| uikit-2.27.4.js | 119 КБ | 57 КБ | 62 КБ | 52% |
| uikit-2.27.4.css | 181 КБ | 105 КБ | 76 КБ | 42% |
| bootstrap-3.3.7.js | 69 КБ | 37 КБ | 32 КБ | 46% |
| bootstrap-3.3.7.css | 143 КБ | 119 КБ | 24 КБ | 17% |
| jquery-3.2.1.js | 261 КБ | 85 КБ | 176 КБ | 67% |
По данным таблицы не сложно заметить существенную разницу в размере обычных и сокращенных файлов: применение минифицированных версий определённо сделает веб-страницы легче, что благоприятно отразится на скорости загрузки сайта. Именно поэтому сервис PageSpeed Insights обращает внимание на объём кода (HTML, CSS и JS) и возможности по его сокращению для улучшения производительности:
Сокращение HTML-кода
Минификация HTML-кода не столь эффективна по отношению к сокращению CSS и JavaScript по двум причинам:
Поэтому предварительно минифицированные HTML-файлы могут применяться только на статичных веб-страницах. Но ведь PageSpeed Insights при наличии несокращенного кода на проверенной странице синим по белому пишет «Сократите код HTML». И действительно, есть выход даже для динамических сайтов: это расширения для CMS. Об этом читайте ниже.
Пример сокращения HTML-кода
Удобочитаемый фрагмент HTML-кода размером 313 Б:
Минифицированный вариант представленного выше HTML-кода составляет 208 Б:
Объём кода значительно сократился за счет удаления:
Все перечисленные сокращения сохраняют соответствие кода стандарту HTML5.
Минификация HTML онлайн
Сервис позволяет установить степень сокращения HTML-кода, определяющая необходимость удаления переносов строк, кавычек для значений атрибутов и прочее.
К минусам сервиса можно отнести отсутствие возможности передавать файл для оптимизации кода, а также отсутствие продвинутых параметров оптимизации CSS-кода (автоматическое совмещение свойств для одинаковых селекторов).
Сокращение CSS-кода
Объём CSS-кода, как правило, составляет куда большую часть веса веб-страницы, чем HTML, поэтому не следует игнорировать замечание сервиса PageSpeed Insights «Сократите CSS» и пренебрегать возможностью использовать сокращенный код в CSS-файлах для ускорения загрузки веб-страниц сайта.
Пример сокращения CSS-кода
Удобочитаемый фрагмент CSS-кода размером 123 Б:
Сокращённый вариант указанного фрагмента составляет 84 Б:
Размер уменьшился за счет:
Минификация CSS онлайн
Чтобы качественно сократить CSS-код рекомендуем применять специализированный онлайн-сервис CSS Resizer, который позволяет:
Сокращение JS-кода
Минификация кода JavaScript не менее актуальна, чем для CSS: во многих случаях JS-код занимает наибольший объём памяти по сравнению с CSS и HTML вместе взятыми, т. к. на сайтах применяются JS-скрипты CSS-фреймворков, а также JS-библиотеки и плагины.
Пример сокращения JS-кода
Удобочитаемый фрагмент JS-кода объёмом 328 B:
Сокращенный вариант фрагмента весит 172 B:
Как и в случае с HTML и CSS, уменьшение объёма происходит за счет удаления лишних элементов кода, не влияющих на его работоспособность.
Минификация JS онлайн
Сократить JavaScript онлайн можно с помощью рассмотренного на примере минификации HTML-кода сервиса HTML Compressor, который минифицирует JS-код не хуже прочих.
Для разнообразия предлагаем к рассмотрению другой узконаправленный онлайн-сервис JSCompress:
К плюсам сервиса можно отнести возможность отправлять код для минификации в файле, к минусам — отсутствие возможности редактировать сокращенный сервисом код в окне вывода.
Сокращение кода сайтов на CMS
Для популярных CMS, таких как WordPress или Joomla, существует масса расширений, автоматически минифицирующих код HTML, CSS и JS. Иначе говоря, достаточно установить и настроить определённый плагин, и «танцы с бубном» вокруг несокращенного кода отпадают сами собой: расширение обеспечит минификацию кода перед отправкой клиенту, после чего этот код будет хранится в кэше сервера и отдаваться при запросах определённое в настройках время.
В частности для Joomla и WordPress применятся превосходный плагин JCH Optimize, способный не только автоматически сокращать весь код веб-страниц, но и оптимизировать его согласно всем рекомендациям сервиса от Google.
Как работают сжиматели JavaScript
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Перед выкладыванием JavaScript на «боевую» машину – пропускаем его через минификатор (также говорят «сжиматель»), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.
В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.
Современные сжиматели
Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.
Самые широко используемые – первые два, поэтому будем рассматривать в первую очередь их.
Наша цель – понять, как они работают, и что интересного с их помощью можно сотворить.
С чего начать?
Google Closure Compiler также содержит песочницу для тестирования сжатия и веб-сервис, на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.
Что делает минификатор?
Все современные минификаторы работают следующим образом:
Разбирают JavaScript-код в синтаксическое дерево.
Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода…
Бегают по этому дереву, анализируют и оптимизируют его.
Записывают из синтаксического дерева получившийся код.
Как выглядит дерево?
Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.
Для GCC есть даже способ вывести его:
Сначала сгенерируем дерево в формате DOT:
Файл в этом формате используется в различных программах для графопостроения.
Чтобы превратить его в обычную картинку, подойдёт утилита dot из пакета Graphviz:
Результат, получившееся из my.js дерево:
В узлах-эллипсах на иллюстрации выше стоит тип, например FUNCTION (функция) или NAME (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.
Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.
Обычно когда код превращается в дерево – из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.
В них может содержаться информация о типе переменной ( number ) и другая, которая поможет сжимателю лучше оптимизировать код ( const – константа).
Оптимизации
Сжиматель бегает по дереву, ищет «паттерны» – известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево.
В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.
Объединение и сжатие констант
После оптимизации GCC:
Код после return удалён как недостижимый.
Переписывание синтаксических конструкций
Инлайнинг функции – приём оптимизации, при котором функция заменяется на своё тело.
После оптимизации (переводы строк также будут убраны):
Переменные заменяются на значение, если оно заведомо известно.
Переменная hi заменена на строку.
Казалось бы – зачем менять hi на строку? Ведь код стал ощутимо длиннее!
…Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают.
Алгоритм работы gzip заключается в том, что он ищет повторы в данных и выносит их в специальный «словарь», заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.
Плюс такого подхода станет очевиден, если сжать gzip оба кода – до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.
Подводные камни
Описанные оптимизации, в целом, безопасны, но есть ряд подводных камней.