От автора: четкого мнения по поводу преимуществ минификации HTML нет, однако если протестировать свой сайт на PageSpeed Insights, часть советов будет в сторону минификации HTML, CSS и JavaScript. Минификация ресурсов – избавление от избыточных элементов, элементов, которые не нужны браузеру для правильной обработки документа.
Если применить эту концепцию к HTML-документу, то минификация может включать в себя:
удаление комментариев в HTML, а также в инлайновом CSS и JS коде;
удаление пробелов в HTML, инлайновом CSS и JS;
удаление ненужных кавычек, пустых атрибутов и т.д;
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееудаление CDATA-разделов.
Эти операции снижают вес файла, а также поддерживают чистоту кода и его обслуживаемость.
GZip-сжатие или минификация ресурсов
Нужно ли минифицировать HTML после сжатия GZip? Один из аргументов против минификации HTML заключается в том, что gzip-сжатие само убирает пробелы и снижает вес файла, что делает минификацию бесполезной.
Во-первых, стоит понять, что это разные операции, и они достигают разных целей. Минификация дает нам файл с идеально валидным кодом, который браузер может парсить и выполнять так же, как и с неминифицированной версией файла. С другой стороны: «GZip-сжатие находит все повторяющиеся строки и заменяет их на указатели на первое вхождение этой строки. … В интернете gzip-сжатие выполняется прямо на сервере. … Сервер сжимает файл и посылает его по сети таким же образом. Браузер получает файл и распаковывает его перед использованием.»
Тем не менее, используя оба метода, можно сэкономить пару байт. Например, в статье эффекты GZip-сжатия или минификация HTML-файлов Mads Kristensen обсуждает небольшой эксперимент, в котором минифицировались и сжимались через gzip HTML-файлы популярных сайтов (amazon.com, cnn.com, twitter.com и xbox.com). Результаты показали, что оба варианта снижают вес файла на 9-16%.
Представленные ниже инструменты автоматизируют процесс минификации.
Minimize
Minimize – серверный HTML5-минификатор с открытым исходным кодом, основанный на node-htmlparser2. Инструмент:
умеет минифицировать HTML5-код (не старые черновики HTML, инлайновый PHP или файлы шаблонов);
имеет высокую степень настраиваемости;
видит условные комментарии для IE.
… и многое другое. Более детально с возможностями можно ознакомиться на странице проекта на GitHub.
HTML Minifier Уилла Пиви
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееHTML Minifier – онлайн инструмент для минификации HTML, написан на PHP. Вставьте HTML в текстовую область и нажмите на кнопку Minify. В разметке может быть любой CSS и JS код.
Чтобы скрипты работали после минификации, Уильям советует закрывать JS-операторы точкой с запятой (;), а также использовать многострочные комментарии (/**/).
Kangax HTML Minifier
Kangax HTML Minifier – HTML-минификатор на основе JS с супервозможностями. Это лишь некоторые из возможностей:
удаление HTML-комментариев;
удаление комментариев из стилей и скриптов;
удаление CDATA-разделов;
удаление кавычек в атрибутах;
удаление ненужных атрибутов;
удаление пустых атрибутов;
валидация входных данных через HTMLLint.
Все опции можно настроить под свои нужды.
Заключение
HTML-минификация входит в рекомендации PageSpeed Insights, хотя и не так распространена, как минификация CSS и JS. Проводить минификацию HTML нужно, но вопрос остается открытым.
В этой статье я перечислил три инструмента, которые с помощью автоматизации ряда задач по минификации HTML помогут вам сэкономить пару байт на веб-страницах.
А как вы думаете, стоит ли проводить минификацию HTML? Какой ваш любимый инструмент для минификации HTML?
Автор: Maria Antonietta Perna
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
