Поширені оптимізації для зменшення розміру 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 . Схожий на плагін Yahoo! 'S YSlow . Фактичне доповнення сторінки Швидкість перевірятиме на багато більше оптимізацій, ніж цей список пояснюється докладно. Також представлені інструкції щодо використання швидкості сторінки.

Кращі практики Yahoo для подорожчання вашого веб-сайту визначають подібний набір найкращих практик:

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

(Список Yahoo! - близько 35 пунктів, не потрібно цитувати його в повному обсязі.)

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

Хтось скаже, що розмітка повинна бути Gzipped, тому я також міг би бути одним.

Ось довге пояснення того, що таке Gzip , та посилання про те, як його встановити на Apache та IIS .

У статті про WebReference вказується, що ви знайдете наступні підвищення продуктивності при використанні модуля mod_gzip Apache.

За допомогою цього модуля веб-майстри зазвичай бачать на 150-160% збільшення продуктивності веб-сервера та зменшення використання пропускної здатності HTML / XML / JavaScript на 70% - 80%. Загальна економія пропускної здатності становить приблизно від 30 до 60%

Це, мабуть, не варто.

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

Реально, видалення пробілів та видалення каналів передач виконує ту роботу, яку стискає для нас. Ми просто додаємо максимум ефективності:

                  Сировина стиснута
Неоптимізований CSS 2299 байт 671 байт
Оптимізовано CSS 1758 байт 615 байт

(так, це говорить про CSS, але ті ж основні правила застосовуються і до HTML)

Проблема в тому,

1. GZIP робить 90% роботи за вас, тож це шалена мікрооптимізація. Я маю на увазі, можливо, якщо ви Google або Yahoo.
2. Це 10% -ве додаткове зменшення розміру припадає на досить круту вартість абсолютно нечитабельного HTML у "перегляді джерела"

добре, невеликий: зберігайте назви тегів та атрибути малі та послідовні (як до речі, стандартні мандати). Це збільшить коефіцієнт стиснення на відсоток або два.

Якщо ви надзвичайно об'ємний сайт, можливо, ви захочете скористатися надкороткими ідентифікаторами об’єктів та іменами класів, оскільки вони зменшують розмір як HTML-сторінки, так і сторінки CSS, використовуваної для її стилізації.

Також будьте обережні щодо надмірно структурованої композиції сайту; легко додавати розділи діва та прольоту, коли вони справді не потрібні. Ви також можете розглянути такі стратегії, як підказка для великих наборів результатів та подібних результатів.

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

Об'єднайте загальний css, зображення та javascripts в один файл. Це не зменшує розмір файлу, але зменшить кількість запитів http. Для менших файлів http накладні значно перевищує час завантаження. Легко написати сценарій для комбінування файлів css та javascript, щоб ви могли легше керувати ними під час розробки, але розгортати їх в один файл.

Див. Http://css-tricks.com/css-sprites для отримання додаткової інформації про поєднання зображень.

Також перегляньте компілятор закриття від 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 для багатьох елементів закриваючий тег не потрібно. Вступний тег для елемента тіла також не потрібно. Побачити:

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

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

• Протокол (http :) частина HTTP-URL-адрес може бути опущений.

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

• З такими тегами, як <br>, ви можете просто залишити косу рису, яка використовується в синтаксисі XHTML (<br />), якщо вам насправді не потрібно використовувати XHTML.

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

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

html5doctor.com/html-5-boilerplates/

Інші сказали це, але вони просто не протаранили точку додому: gzipping.

1. Практично ніяких зусиль чи недоліків.
2. З мого обмеженого досвіду, зменшує розмір HTML на 60% - 90%.

Всі інші налаштування, які ви можете зробити в HTML, вимагають більше зусиль / обслуговування та навряд чи матимуть ніякого ефекту порівняно з просто gzipping та забуттям. Вони просто не варті часу, якщо ви не Google. Ви не Google.

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

О, і якщо ви автоматично мінімізуєте свій HTML в якийсь момент процесу збирання / обслуговування, це не вимагає великих зусиль / обслуговування. Тут перелічено декілька HTML мініфікаторів:

/programming/728260/html-мініфікація