Зменшіть розмір файлів за допомогою цих трьох інструментів минификации HTML

18

Від автора: чіткої думки з приводу переваг минификации HTML немає, однак якщо протестувати свій сайт на PageSpeed Insights, частина рад буде в бік минификации HTML, CSS і JavaScript. Минификация ресурсів – рятування від надлишкових елементів, елементів, які не потрібні браузеру для правильної обробки документа.

Якщо застосувати цю концепцію до HTML-документу, то минификация може включати в себе:

видалення коментарів в HTML, а також у инлайновом CSS і JS код;

видалення пробілів в HTML, инлайновом CSS і JS;

видалення непотрібних лапок, порожніх атрибутів і т. д;

видалення 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

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?