Минимизация HTML? [закрыто]

99

Есть ли онлайн-инструмент, в который мы можем ввести HTML- код страницы и минимизировать код?

Я бы сделал это для файлов aspx, так как не рекомендуется делать сжатие их веб-сервером ...

html  minify 
— Пауло
источник
19
Когда использовать gzip для сервера - плохая идея?
— Чак
5
Я читал, что, поскольку страницы aspx не являются статическими файлами, они не будут кэшироваться IIS, и поэтому они будут архивировать страницу при каждом запросе ...
— Пауло,
23
... и это проблема? Если ваш сервер уже не загружен на 99,9% ЦП, вероятно, нет. gzip-архивирование - обычное дело, и оно намного более эффективно, чем любая «минификация».
— bob с
2
Это кажется довольно интересным: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier
— StefanS
2
Ответы здесь устарели, не говоря уже о том, что некоторые из них неверны. Пожалуйста, ознакомьтесь с моим объяснением проблемы и подходящим инструментом .
— Сальвадор Дали

Ответы:

63

Возможно, попробуйте HTML Compressor , вот таблица до и после, показывающая, что он может делать (в том числе для самого Stack Overflow):

Извините, в markdown нет понятия таблиц

Он имеет множество вариантов оптимизации ваших страниц, включая минимизацию скриптов (компрессор, Google Closure Compiler, ваш собственный компрессор), где это было бы безопасно. Набор параметров по умолчанию довольно консервативен, поэтому вы можете начать с него и поэкспериментировать с включением более агрессивных параметров.

Проект очень хорошо документирован и поддерживается.

— Тим Пост
источник
58

Не делай этого . Или, если вы настаиваете на этом, сделайте это после того, как будет завершена более значительная оптимизация сайта. Скорее всего, затраты / выгода для этих усилий ничтожны, особенно если вы планировали вручную использовать онлайн-инструменты для работы с каждой страницей.

Используйте YSlow или Page Speed, чтобы определить, что вам действительно нужно сделать для оптимизации ваших страниц. Я предполагаю, что уменьшение количества байтов HTML не будет самой большой проблемой для вашего сайта. Гораздо более вероятно, что сжатие, управление кешем, оптимизация изображений и т. Д. Повлияют на производительность вашего сайта в целом. Эти инструменты покажут вам, в чем заключаются самые большие проблемы - если вы справились со всеми ними и все же обнаружили, что минификация HTML имеет существенное значение, дерзайте.

(Если вы уверены, что хотите пойти на это, и используете Apache httpd, вы можете рассмотреть возможность использования mod_pagespeed и включения некоторых параметров для уменьшения пробелов и т. Д., Но помните о рисках .)

— Зак Томпсон
источник
25
Что плохого в оптимизации, если минимизированный код легко читать с помощью автоматического улучшения?
12
Вероятно, это не самая большая проблема - но если запуск разметки через минимизирующий набор регулярных выражений при компиляции из dev в qa или prod - тривиальный процесс, то почему бы вам не отправить меньшие документы разметки?
— Уилл Пиви
26
На самом деле это не ответ на исходный вопрос :(
— Чак Ле Батт
7
@Will, это почти наверняка не тривиальный процесс , чтобы запустить HTML через Минимизация регулярных выражений, и даже с помощью правильного синтаксического анализа это, вероятно , не является тривиальной или быстро. Более того, в отличие от минификации JS / CSS, минификация HTML не будет без потерь: любой тег может быть оформлен как white-space: pre, а минификация уничтожит предварительно отформатированный текст.
— Без век
3
@eyelidlessness - в настоящее время у меня есть тысячи страниц, которые минифицируются регулярными выражениями перед их обслуживанием. Эта функция не является сложной или дорогостоящей частью системы. ... С другой стороны, если вы хотите проанализировать вычисленный стиль, чтобы избежать минимизации элементов, стилизованных с помощью white-space:pre, то да, минимизация HTML была бы более сложной. Однако я не понимаю, почему кому-то нужно использовать white-space: pre, а не элемент preили code.
— Уилл Пиви
34

Вот краткий ответ на ваш вопрос: вы должны минимизировать свой HTML, CSS, JS . Существует простой в использовании инструмент, который называется ворчание . Это позволяет автоматизировать множество задач. Среди них JS , CSS , минификация HTML , конкатенация файлов и многие другие. .

Написанные здесь ответы крайне устарели или даже иногда не имеют смысла. По сравнению со старым 2009 годом многое изменилось, поэтому я постараюсь ответить на этот вопрос правильно.

Короткий ответ - вам обязательно нужно минимизировать HTML . Сегодня это банально и дает примерно 5% ускорения. . Для более подробного ответа прочтите весь ответ

Раньше люди вручную уменьшали css / js (запуская его через какой-то специальный инструмент для его минимизации). Было довольно сложно автоматизировать процесс и определенно требовались определенные навыки. Зная, что многие высокоуровневые сайты даже сейчас не используют gzip (что тривиально), понятно, что люди неохотно сокращали html.

Так почему же люди уменьшали js, а не html ? Когда вы минимизируете JS, вы делаете следующее:

  • удалить комментарии
  • удалить пробелы (табуляции, пробелы, новые строки)
  • изменить длинные имена на короткие ( var isUserLoggedInна var a)

Что дало много улучшений даже в старые времена. Но в html нельзя было менять длинные имена на короткие, да и комментировать за это время было практически нечего. Итак, единственное, что осталось, - это удалить пробелы и новые строки. Что дает лишь небольшое улучшение.

Здесь приведен один неверный аргумент: поскольку контент обслуживается с помощью gzip, минификация не имеет смысла. Это совершенно неверно. Да, имеет смысл, что gzip уменьшает улучшение минификации, но зачем вам gzip комментарии, пробелы, если вы можете правильно их обрезать и сжать только важную часть. Это то же самое, как если бы у вас есть папка для архивации, в которой есть какая-то хрень, которую вы никогда не будете использовать, и вы решили просто заархивировать ее, а не очищать и заархивировать.

Еще один аргумент в пользу бессмысленности минификации заключается в том, что это утомительно. Может быть, это было так в 2009 году, но после этого появились новые инструменты. Прямо сейчас вам не нужно вручную уменьшать разметку. Для таких вещей, как Grunt, довольно просто установить grunt-contrib-htmlmin (полагается на HTMLMinifier от @kangax) и настроить его для минимизации вашего html. Все, что вам нужно, это примерно 2 часа, чтобы выучить ворчание и все настроить, а затем все будет сделано автоматически менее чем за секунду. Похоже, что 1 секунда (которую вы даже можете автоматизировать, чтобы ничего не делать с помощью grunt-contrib-watch ) на самом деле не так уж и плоха для примерно 5% улучшения (даже с gzip).

Еще один аргумент заключается в том, что CSS и JS статичны , а HTML создается сервером, поэтому вы не можете его предварительно уменьшить. Так было и в 2009 году, но в настоящее время все больше и больше сайтов выглядят как одностраничные приложения, где сервер является тонким, а клиент выполняет всю маршрутизацию, шаблоны и другую логику. Таким образом, сервер предоставляет вам только JSON а клиент его отображает. Здесь много html для страницы и разных шаблонов.

Итак, чтобы закончить свои мысли:

  • Google сокращает HTML.
  • pageSpeed просит вас html
  • это тривиально сделать
  • дает ~ 5% улучшения
  • это не то же самое, что gzip
— Сальвадор Дали
источник
3
Minfying HTML абсолютно не тривиальна, поскольку пробельные имеет важное значение в HTML и зависит ли это любой данный пробел может быть удален на CSS. Кроме того, тонкие клиенты ужасны и, на мой взгляд, не могут служить хорошим аргументом против проблем, связанных с минимизацией динамического HTML. (Один из хороших способов сделать это - выбрать механизм шаблонов [Haml, Jade и т. Д.],
— Который
@minitech минимизация HTML тривиальна, также есть несколько возможных проблем с пробелами (например, <span>). Прежде всего, вы всегда можете найти способ написать действительный html, сделав его независимым от пробелов. Также вы можете быть удивлены, узнав, что минификатор JS / CSS также может вносить ошибку, что не означает, что вы не должны его использовать. Итак, есть два способа решить вашу проблему: научиться писать разметку, не зависящую от пробелов, протестировать свой продукт до / после минификации (CSS / HTML / JS). Также в Minifier вы можете указать, какие пробелы вы хотите сохранить.
— Сальвадор Дали,
Правильные минификаторы JavaScript в ненормальном коде (например, код, который не читает сам себя или не обманывает себя по времени) не могут привести к ошибке. И нет, не всегда есть способ написать HTML без пробелов, особенно потому, что HTML, опять же, не зависит от пробелов. Вообще. Обязательно протестируйте копирование и вставку на нем, если вы думаете, что поля сократят его. Указание того, какие пробелы я хочу сохранить, звучит как пустая трата времени (кроме Google)…
— Ry-
@minitech, можете ли вы показать мне CSS, который невозможно написать независимым от пробелов способом? Я минимизирую html уже давно, и пока проблем не видел.
— Сальвадор Дали
* { white-space: pre; }очевиден, но если вы удаляете все пробелы, а не просто сворачиваете их (вместо этого заменяя их полями), текст может копироваться неправильно и нанести ущерб текстовым браузерам и программам чтения с экрана.
— Ry-
23

Я написал веб-инструмент для минимизации HTML. http://prettydiff.com/?m=minify&html

Этот инструмент работает по следующим правилам:

  • Все комментарии HTML удалены
  • Ряды символов пробела преобразуются в символы одиночного пробела
  • Удаляются ненужные пробелы внутри тегов.
  • Удаляются символы пробела между двумя тегами, если один из этих двух тегов не является одноэлементным.
  • Все содержимое внутри styleПредполагается, что тега является CSS и минимизируется как таковой.
  • scriptПредполагается, что весь контент внутри тега является JavaScript, если не указан другой тип мультимедиа, а затем минимизирован как таковой.

    • Минификация CSS и JavaScript использует сильно разветвленную форму JSMin. Эта вилка расширена для поддержки CSS изначально, а также поддерживает синтаксис SCSS. Автоматическая вставка точки с запятой поддерживается для минификации JavaScript, однако автоматическая вставка фигурных скобок пока не поддерживается.
    — austincheney
    источник
    7
    Привет, удали эту строку! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->
    — UnLoCo,
    1
    да, это было бы катастрофой, если бы вы использовали ко!
    — Ray Suelzer 05
    8

    Это сработало для меня:

    http://minify.googlecode.com/git/min/lib/Minify/HTML.php

    Это еще не доступный онлайн-инструмент, но, будучи простым включением PHP, вы можете просто запустить его самостоятельно.

    Я бы не стал сохранять сжатые файлы, делаю это динамически, если вам действительно нужно, и всегда лучше включить сжатие сервера Gzip. Я не знаю, насколько это задействовано в IIS / .Net, но в PHP это так же тривиально, как добавление одной строки в глобальный включаемый файл.

    — adamJLev
    источник
    6

    CodeProject имеет опубликованный образец проекта ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ) для обработки некоторых из следующих ситуаций. .

    • Объединение вызовов ScriptResource.axd в один вызов
    • Сжимайте все клиентские скрипты в зависимости от возможностей браузера, включая gzip / deflate
    • ScriptMinifier для удаления комментариев, отступов и разрывов строк.
    • Компрессор HTML для сжатия всей разметки HTML в зависимости от возможностей браузера, включая gzip / deflate.
    • И, что наиболее важно, HTML Minifier для записи полного html в одну строку и минимизации его на возможном уровне (в стадии разработки).
    — Ленивый администратор базы данных
    источник
    1

    попробуйте http://code.mini-tips.com/html-minifier.html , это .NET Libary для Html Minifier

    HtmlCompressor - это небольшая, быстрая и очень простая в использовании библиотека .NET, которая минимизирует данный источник HTML или XML, удаляя лишние пробелы, комментарии и другие ненужные символы, не нарушая структуру содержимого. В результате страницы становятся меньше в размере и загружаются быстрее. Также доступна версия компрессора для командной строки.

    Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
    Licensed under cc by-sa 3.0 with attribution required.