Эффективные методы уменьшения пропускной способности (и, следовательно, времени загрузки страницы)?

Каковы наиболее эффективные методы сокращения полосы пропускания, необходимой веб-сайту для отображения страницы?

Агрессивное кеширование? Сокращение JS / CSS? Gzip? CMS? Спрайты?

Несколько основных методов, легко реализуемых любым веб-сайтом:

• Сожмите ваш HTML, CSS и Javascript с помощью deflateили gzipесли браузер, который сделал запрос, поддерживает это.
• Сократите свой JavaScript с помощью Google Closure Compiler
• Сократите ваши CSS с YUI Compressor

Немного больше вовлечено:

• Если страница или изображение вряд ли изменятся, попросите браузер кэшировать их. Большинство веб-серверов уже делают это для статических файлов, поэтому все, что вам нужно, это добавлять их в динамические скрипты, где это возможно.
• Автоматически объединяйте файлы CSS и JS в один . Это выгодно, так как уменьшает HTTP-запросы (которые имеют накладные расходы и которые некоторые глупые браузеры - и под этим я имею в виду Internet Explorer - ограничивают по умолчанию 2 запроса одновременно на домен).
• Переместите ваши статические файлы (CSS, JS, изображения и т. Д.) В отдельное доменное имя. Это приводит к тому, что информация cookie не отправляется в HTTP-запросе.

• Используйте спрайты, которые генерируются автоматически . Спрайт - это одно изображение, содержащее несколько значков или другие маленькие изображения; Затем вы выбираете, какое изображение показывать с помощью backgroundсвойства CSS . Пример .

  Преимущество состоит в том, что клиент делает меньше запросов HTTP (которые имеют накладные расходы).

Я выделил «автоматически», потому что, если вы делаете это вручную, то это определенно не стоит того, и это делает обслуживание кода кошмаром. Обычно делать это автоматически означает написание собственного скрипта, поэтому он «немного более сложный»,

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 (ссылка на изображение), и Скорость страницы (ссылка на изображение) позволяют запускать тесты на своих страницах, предлагая варианты действий и показывая, что из их рекомендаций уже реализовано.