Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Хотя нет четкого соглашения о преимуществах минимизации HTML, если вы протестируете свой веб-сайт с помощью PageSpeed Insights от Google, в результате вы можете получить ответ, состоящий в том, что вы должны минимизировать HTML, CSS и JavaScript .
Минимизация ресурса означает избавление от лишних элементов, то есть элементов, которые не нужны браузеру для правильной обработки документа.
Применяя эту концепцию к документу HTML, минификация может включать такие вещи, как:
- Удаление HTML-комментариев, а также комментариев внутри встроенного кода CSS и JavaScript
- Удаление пробелов как в HTML-коде, так и во встроенном CSS и JavaScript
- Удаление ненужных кавычек, пустых атрибутов и т. Д.
- Избавляемся от разделов CDATA
Эти операции способствуют уменьшению размера файла, но также облегчают поддержание кода в чистоте и поддержке .
GZipping и минимизирующие ресурсы
Стоит ли минимизировать HTML, если вы используете GZip?
Одним из аргументов против минимизации HTML является то, что сжатие страниц HTML уже избавляет от пробелов и уменьшает размер файла. Это делает минификацию совершенно бесполезной.
Во-первых, важно отметить, что эти две операции не одинаковы и не дают одинаковых результатов.
В результате минимизации создается файл, созданный из совершенно корректного кода, который браузер может анализировать и выполнять, точно так же как незавершенная версия того же файла. С другой стороны,
Gzipping находит все повторяющиеся строки и заменяет их указателями на первый экземпляр этой строки. … В сети gzipping выполняется непосредственно вашим сервером. … Сервер сжимает файл и отправляет его по сети таким образом. Браузер получает файл и распаковывает его перед использованием.
Крис Койер о хитростях CSS
Тем не менее, использование обоих методов может заставить вас сэкономить несколько байтов. Например, в статье «Эффекты GZipping против минимизации HTML-файлов» Мэдс Кристенсен обсуждает небольшой эксперимент, состоящий из минимизации и распаковки HTML-файлов четырех популярных веб-сайтов, например amazon.com, cnn.com, twitter.com и xbox.com. , Результаты показывают, что при прохождении gzipping и minification размер файла уменьшается на 9-16%.
Следующие инструменты автоматизируют процесс минификации для вас.
Свести к минимуму
Minimize — это серверный HTML5 -минификатор с открытым исходным кодом, основанный на node-htmlparser2 .
Этот инструмент:
- Может минимизировать код HTML5 (не более старые черновики HTML, нет встроенного кода PHP или файлов шаблонов)
- Это легко настраивается
- Можно различить условные комментарии IE
… и более. Вы можете посетить страницу проекта на GitHub для более подробной информации.
Уилл Пиви HTML Minifier
HTML Minifier — это онлайн-инструмент для минимизации HTML, созданный на PHP.
Чтобы использовать его, вставьте ваш HTML в текстовое поле, включая любые CSS и JavaScript, которые вы могли добавить в разметку, и нажмите кнопку Minify .
Чтобы скрипты работали после минимизации, Peavy рекомендует завершать операторы JavaScript точкой с запятой (;) и использовать многострочные комментарии ( /* */
Кангакс HTML Minifier
Kangax HTML Minifier — это основанный на JavaScript HTML-минатор со сверхспособностями.
Это лишь некоторые из возможностей этого инструмента:
- Удаление комментариев HTML
- Удаление комментариев из стилей и скриптов
- Удаление разделов CDATA
- Удаление атрибутов цитат
- Удаление ненужных атрибутов
- Удаление пустых атрибутов
- Подтверждение ввода через HTMLLint
Вы можете настроить каждую опцию в соответствии со своими потребностями.
Чтобы узнать больше о HTML Minifier, вы найдете всю информацию в Kangax’s Эксперименты с HTML Minifier и Perfection Kills .
Вывод
Хотя минимизация HTML не так распространена, как минимизация CSS и JavaScript, она является частью рекомендаций Google PageSpeed Insights. Стоит ли это делать, остается открытым вопросом .
В этой статье я перечислил три инструмента, которые могут помочь вам сэкономить несколько байтов на ваших веб-страницах за счет автоматизации ряда задач минимизации HTML.
Как вы думаете, как вы думаете, минимизировать HTML — хорошая идея? Какой ваш любимый инструмент минимизации HTML?