Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

От автора: четкого мнения по поводу преимуществ минификации 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

Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

Minimize – серверный HTML5-минификатор с открытым исходным кодом, основанный на node-htmlparser2. Инструмент:

умеет минифицировать HTML5-код (не старые черновики HTML, инлайновый PHP или файлы шаблонов);

имеет высокую степень настраиваемости;

видит условные комментарии для IE.

… и многое другое. Более детально с возможностями можно ознакомиться на странице проекта на GitHub.

HTML Minifier Уилла Пиви

Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

HTML Minifier – онлайн инструмент для минификации HTML, написан на PHP. Вставьте HTML в текстовую область и нажмите на кнопку Minify. В разметке может быть любой CSS и JS код.

Чтобы скрипты работали после минификации, Уильям советует закрывать JS-операторы точкой с запятой (;), а также использовать многострочные комментарии (/**/).

Kangax HTML Minifier

Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

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 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree