Зміна HTML? [зачинено]

99

Чи є в Інтернеті інструмент, в який ми можемо ввести джерело HTML сторінки та зменшити код?

Я б зробив це для файлів aspx, оскільки це не гарна ідея зробити веб-сервер gzip їх ...

html  minify 
— Пауло
джерело
19
Коли погана ідея мати сервер gzip?
— Чак
5
Я читав, що оскільки сторінки aspx не є статичними файлами, вони не будуть кешовані IIS, і тому він відкриє сторінку при кожному запиті ...
— Пауло
23
... і це проблема? Якщо у вас вже не 99,9% процесора, можливо, ні. gzipping - це звичайна річ і набагато ефективніша, ніж будь-яке «мінімізація».
— bobince
2
— StefanS
2
Відповіді тут застарілі, не кажучи вже про те, що деякі з них неправильні. Перевірте моє пояснення щодо проблеми та відповідний інструмент .
— Сальвадор Далі

Відповіді:

63

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

На жаль, розмітка не має поняття таблиць

У ньому представлено безліч виборів для оптимізації ваших сторінок до включення мінімізації скриптів (ompressor, компілятор закриття Google, власний компресор), де це було б безпечно. Набір параметрів за замовчуванням є досить консервативним, тому ви можете почати з цього і експериментувати з включенням більш агресивних варіантів.

Проект надзвичайно добре задокументований та підтримується.

— Тім Пост
джерело
58

Не робіть цього . А точніше, якщо ви наполягаєте на цьому, робіть це після завершення будь-яких більш значущих оптимізацій сайту. Швидше за все, що вартість / вигода для цих зусиль незначна, особливо якщо ви планували вручну використовувати онлайн-інструменти для обробки кожної сторінки.

Використання YSlow або Page Speed , щоб визначити , що вам дійсно потрібно зробити , щоб оптимізувати ваші сторінки. Я здогадуюсь, що зменшення байтів HTML не буде найбільшою проблемою вашого сайту. Набагато ймовірніше, що стиснення, кеш-керування, оптимізація зображень і т. Д. Значно впливатимуть на загальну ефективність вашого сайту. Ці інструменти покажуть, які найбільші проблеми - якщо ви зіткнулися з усіма ними і все-таки виявите, що мінімізація HTML має суттєву зміну, займіться цим.

(Якщо ви впевнені, що хочете скористатися цим, і ви використовуєте Apache httpd, можете подумати про використання mod_pagespeed і включити деякі варіанти зменшення пробілу тощо, але пам'ятайте про ризики .)

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

Ось коротка відповідь на ваше запитання: ви повинні мінімізувати свій HTML, CSS, JS . Існує простий у користуванні інструмент, який називається grunt . Це дозволяє автоматизувати безліч завдань. Серед них JS , CSS , мініфікація HTML , конкатенація файлів та багато інших .

Відповіді, написані тут, надзвичайно застаріли або навіть іноді не мають сенсу. Багато чого змінилося зі старого 2009 року, тому я спробую відповісти на це належним чином.

Коротка відповідь - ви обов'язково повинні мінімізувати HTML . Сьогодні це банально і дає приблизно 5% швидкості . Для більш тривалої відповіді прочитайте всю відповідь

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

То чому люди мінімізували js, але не html ? Коли ви мінімізуєте JS, ви виконуєте наступні дії:

  • видалити коментарі
  • видалити пробіли (вкладки, пробіли, нові рядки)
  • зміни довгих імен на короткі ( var isUserLoggedInна var a)

Що дало багато покращень навіть у старі часи. Але в html ви не змогли коротко змінити довгі імена, також за цей час майже нічого не можна було коментувати. Тож єдине, що залишилося - це видалити пробіли та нові рядки. Що дає лише невелику кількість покращення.

Один неправильний аргумент, написаний тут, полягає в тому, що оскільки вміст подається з gzip, мінімізація не має сенсу. Це абсолютно неправильно. Так, має сенс, що gzip зменшує поліпшення мінімізації, але навіщо вам gzip коментарі, пробіли, якщо ви можете правильно їх обрізати та gzip лише важливою частиною. Це те саме, що якщо у вас є папка для архіву, в якій є якесь лайно, яке ви ніколи не використовуватимете, і ви вирішите просто зашпаркувати його замість того, щоб прибирати та зашпилювати.

Ще один аргумент, чому безглуздо робити мінімізацію, це те, що це нудно. Можливо, це було правдою в 2009 році, але нові інструменти з’явилися після цього часу. Зараз вам не потрібно вручну мінімізувати розмітку. З такими речами, як Grunt , тривіально встановити grunt-contrib-htmlmin (покладається на HTMLMinifier від @kangax) та налаштувати його для мінімізації вашого html. Все, що вам потрібно, це як дві години, щоб навчитися бурчати і налаштувати все, і тоді все робиться автоматично менше ніж за секунду. Звучить, що 1 секунда (яку ви навіть можете автоматизувати, щоб нічого не робити за допомогою grunt-contrib-watch ) насправді не так вже й погано для приблизно 5% покращення (навіть за допомогою gzip).

Ще один аргумент полягає в тому, що CSS і JS є статичними , а HTML генерується сервером, тому ви не можете попередньо їх мінімізувати. Це було вірно і в 2009 році, але в даний час все більше і більше сайтів виглядають як додаток на одній сторінці, де сервер є тонким, а клієнт виконує всю маршрутизацію, шаблони та іншу логіку. Отже сервер надає вам лише JSON, а клієнт надає його. Тут у вас є багато html для сторінки та різних шаблонів.

Отже, щоб закінчити свої думки:

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

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

Цей інструмент працює за допомогою цих правил:

  • Усі коментарі HTML видалено
  • Запуски білих символів пробілу перетворюються на символи пробілу
  • Видаляються непотрібні символи пробілу всередині тегів
  • Символи білого пробілу між двома тегами, де один з цих двох тегів не є однократним
  • Весь вміст всередині styleтегу вважається CSS і мінімізується як такий
  • Весь вміст всередині scriptтегу вважається JavaScript, якщо не передбачено інший тип медіа, а потім мінімізований як такий

    • Для мінімізації CSS та JavaScript використовується сильно роздвоєна форма JSMin. Ця вилка розширена, щоб надати підтримку CSS, а також підтримувати синтаксис SCSS. Автоматичне вставлення крапки з комою підтримується для мінімізації JavaScript, однак автоматичне фігурне вставлення дужок ще не підтримується.
    — авст
    джерело
    7
    Привіт, видаліть цю лінію! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->
    — UnLoCo
    1
    так, це буде катастрофою, якщо ви використовуєте ko!
    — Рей Суельцер
    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 в єдиний рядок і мінімізувати його на можливому рівні (будується).
    — Ледачий DBA
    джерело
    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.