Від автора: чіткої думки з приводу переваг минификации 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
Minimize – серверний HTML5-минификатор з відкритим вихідним кодом, заснований на node-htmlparser2. Інструмент:
вміє минифицировать HTML5-код (не старі чернетки HTML, инлайновый PHP або файли шаблонів);
має високу ступінь настраиваемости;
бачить умовні коментарі для IE.
… і багато іншого. Більш детально з можливостями можна ознайомитися на сторінці проекту на GitHub.
HTML Minifier Уілла Піві
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?
