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

12

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

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

bandwidth compression Марк Хендерсон
источник
Двойной вопрос получает повторяющийся ответ: webmasters.stackexchange.com/questions/569/…
Брайсон
1
Этот вопрос был первым, поэтому другой является дубликатом
Марк Хендерсон

Ответы:

10

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

  • Сожмите ваш 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 (которые имеют накладные расходы).

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

Томас Бонини
источник
Я собирался ответить, но я думаю, что вы покрыли все :)
Эхо говорит восстановить Monica
накладные расходы действительно важны для небольшого файла, они могут представлять собой хороший источник передаваемых данных.
HoLyVieR
Не используйте deflate, если вы также не проверите внимательно пользовательский агент, так как в Internet Explorer есть ошибка вокруг deflate.
@ Kinopiko: да, хороший совет. Смотрите мой вопрос о переполнении стека.
Томас Бонини
5

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

Брайсон
источник