Общие оптимизации для уменьшения размера страницы HTML или XHTML?

Какие общие оптимизации выполняются для уменьшения размера страницы HTML или XHTML? Вот что приходит на ум:

• удаление комментариев,
• удаление посторонних пробелов,
• перемещение повторяющихся встроенных стилей в таблицу стилей CSS,
• и т.п.

Какие еще есть? Какое предложение является самым выгодным или может быть выполнено автоматически инструментом или модулем?

Google обрисовал в общих чертах и ​​объяснил их рекомендации, чтобы лучше минимизировать размер полезной нагрузки . Они включают в себя следующие методы:

1. Активировать сжатие
2. Удалить неиспользуемый CSS
3. Сократить JavaScript
4. Минимизировать CSS
5. Сократить HTML
6. Отложить загрузку JavaScript
7. Оптимизировать изображения
8. Служить масштабированным изображениям
9. Служить ресурсам по согласованному URL

Эти предложения являются частью их надстройки Firefox / Firebug с открытым исходным кодом под названием Page Speed . Подобно плагину YSlow от Yahoo ! . Фактический аддон Page Speed ​​будет проверять гораздо больше оптимизаций, чем этот список подробно объясняет. Инструкции по использованию Page Speed ​​также представлены.

В рекомендациях Yahoo! Для ускорения работы вашего веб-сайта вы найдете аналогичный набор рекомендаций:

1. Минимизируйте HTTP-запросы
2. Используйте сеть доставки контента
3. Добавьте Expires или Заголовок Cache-Control
4. Компоненты Gzip
5. Поместите таблицы стилей вверху
6. Поместите сценарии внизу
7. Избегайте выражений CSS
8. Сделайте JavaScript и CSS Внешними
9. Уменьшить количество DNS-запросов
10. ...

(Список Yahoo! ~ 35 пунктов, нет необходимости цитировать его полностью.)

И YSlow (ссылка на изображение), и Скорость страницы (ссылка на изображение) позволяют запускать тесты на своих страницах, предлагая варианты действий и показывая, что из их рекомендаций уже реализовано.

Кто-то скажет, что разметка должна быть Gzipped, так что я мог бы быть тем же.

Вот длинное объяснение того, что Gzip со ссылками на то, как настроить его на Apache и IIS .

В статье о WebReference говорится, что вы найдете следующие улучшения производительности при использовании модуля Apache mod_gzip.

Веб-мастера обычно видят увеличение производительности веб-сервера на 150–160% и использование полосы пропускания HTML / XML / JavaScript на 70–80% при использовании этого модуля. Общая экономия полосы составляет примерно от 30 до 60%.

Это, вероятно, не стоит того.

Я немного поиграл с удалением пробелов в HTML и увидел, что полезная нагрузка уменьшилась только на 10% после gzipping.

Реально, удаление пробелов и перевода строки выполняет работу, которую сжатие сделало бы для нас. Мы просто добавляем немного эффективности с помощью человека:

                  Сжатый
Неоптимизированный CSS 2,299 байт 671 байт
Оптимизирован CSS 1758 байт 615 байт

(да, это говорит о CSS, но те же основные правила применимы и к HTML)

Проблема в,

1. GZIP выполняет за вас 90% работы, так что это сумасшедшая микрооптимизация. Я имею в виду, может быть, если вы Google или Yahoo.
2. Это дополнительное уменьшение размера на 10% достигается за счет довольно высокой стоимости полностью нечитаемого HTML в «источнике просмотра»

хорошо, маленький: держите имена тегов и атрибуты строчными и непротиворечивыми (кстати, как стандартные мандаты). Это увеличит степень сжатия на процент или два.

Если вы очень объемный сайт, вы можете рассмотреть возможность использования сверхкоротких идентификаторов сущностей и имен классов, так как они уменьшают размер как страницы HTML, так и страницы CSS, используемой для ее стилизации.

Также будьте осторожны с чрезмерно структурированным составом сайта; легко добавлять разделы div и span, когда они действительно не нужны. Вы также можете рассмотреть такие стратегии, как разбиение на страницы для больших наборов результатов и аналогичные результаты.

На самом деле, эти оптимизации имеют чрезвычайно ограниченную окупаемость (и для стратегии пейджинга, потенциальные недостатки SEO), чтобы стоить того для сайтов, которые не относятся к той же категории трафика, что и Google. Просто следуйте рекомендациям jessegavin, чтобы включить сжатие GZip / Deflate и покончите с этим.

Объедините общие CSS, изображения и JavaScript в один файл. Это не уменьшает размер файла, но уменьшает количество http-запросов. Для небольших файлов издержки http намного превышают время загрузки. Легко написать сценарий для объединения файлов CSS и Javascript, чтобы вам было проще управлять ими во время разработки, но развернуть их в один файл.

Смотрите http://css-tricks.com/css-sprites для получения дополнительной информации о комбинировании изображений.

Кроме того, проверьте Closure Compiler от Google. Я не использовал его, но он утверждает, что javascript загружается и работает быстрее.

Как уже говорили другие, наибольшая выгода от gzipping.

Убедитесь, что вы используете соответствующие элементы HTML. Вместо того <div class="page-title">Hello World</div>, чтобы использовать <h1>Hello World</h1>.

И очевидный: не используйте таблицы для разметки! Используйте простую сеточную систему, такую ​​как 960.gs (или сверните свою собственную облегченную версию). Может быть большая разница между размером HTML, особенно с вложенными таблицами. Для сравнения:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

и

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Если вы используете веб-сайт ASP.NET, будьте осторожны с ViewState . Он может генерировать очень большие скрытые поля на странице, часто перегружая их, когда в этом нет необходимости (мне уже приходило в голову, что ViewState тяжелее, чем остальная часть страницы).
Это особенно верно, если вы используете AJAX, так как ViewState будет отправляться туда и обратно с каждым запросом, замедляя ваш сайт и увеличивая объем трафика.

Решение в коде .net, хотя.

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

Вот пара перефразированных моментов из Оценки производительности Zoompf:

• Избегайте динамически генерируемого контента (изображения). Попробуйте вместо рисования или изменения размера изображения в автономном режиме как статический файл изображения.
• Избегайте использования тегов изображений без размеров.
• Google Analytics (& Ads) поддерживает асинхронную загрузку своего файла JavaScript. В случае, если вы используете их, вы можете загрузить их асинхронно.

Обычно упускаемая из виду стратегия заключается в удалении всего ненужного HTML-кода со страницы.

Для любого конкретного проекта вам нужно будет решить, какую из этих стратегий использовать, основываясь на (X) HTML-версии, которую вы используете, и на том, как будет использоваться веб-сайт.

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

• В HTML4 и HTML5 для многих элементов закрывающий тег не требуется. Открывающий тег для элемента body также не требуется. Видеть:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• Часть протокола HTTP (http :) может быть опущена.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• С такими тегами, как <br>, вы можете просто не использовать косую черту, используемую в синтаксисе XHTML (<br />), если вам не нужно использовать XHTML.

• Вот несколько примеров небольших структур документа HTML:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Другие говорили об этом, но они просто не вникали в суть вопроса: gzipping.

1. Практически никаких усилий или недостатков.
2. По моему ограниченному опыту, уменьшает размер HTML на 60-90%.

Все другие настройки, которые вы можете внести в HTML, требуют больше усилий / поддержки и вряд ли окажут какое-либо влияние по сравнению с простыми заархивированными и забытыми. Они просто не стоят времени, если вы не Google. Вы не Google.

(Как уже упоминали другие, чем более согласован ваш HTML, тем больший эффект будет иметь gzipping, поскольку - согласно моему ограниченному пониманию - gzipping ищет идентичные строки в вашем файле и заменяет каждый повторяющийся экземпляр крошечным кодом, ссылающимся на Таким образом, авторские методы, такие как сохранение ваших атрибутов в одном и том же порядке и сохранение всех ваших оболочек в одном и том же месте, могут помочь в работе gzipping.)

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

/programming/728260/html-minification