Конспект оптимизации скорости загрузки

Полная статья

  • Минимизация HTTP запросов: CSS-спрайты, Inline-картинки через CSS
  • Избегайте перенаправлений (301 редирект)
  • Минимизируйте DNS Lookups
  • Использование CDN
  • Разделение загрузки ресурсов по разным доменам (static1.example.org, static2.example.org), но не более 2-4, так как идет задержка из-за DNS Lookups
  • Для ресурсов используйте домены, свободные от кукисов. Пример: использовать домен static.example.org для статики
  • Правильные HTTP заголовки Expires, Cache-Control, ETags
  • favicon.ico - сжать и закешировать
  • Gzip-сжатие
  • Файлы стилей - на верх страницы, скрипты - в самый низ, использование атрибута defer
  • Оптимизируйте размеры CSS, JS и картинок
  • iPhone - не кеширует ресурсы занимающие в несжатом виде более 25Кб
  • Упаковывайте несколько ресурсов в один мультидокумент (только вначале убедитесь по user-agent, что устройство его поддерживает, iPhone - не поддерживает)
  • Не используйте пустой атрибут src - будет лишний HTTP-запрос
  • Не масштабируйте картинки в HTML, лучше использовать свои картинки под различные размеры экрана
  • Избегайте CSS выражений
  • Используйте <link> вместо @import
  • Сделайте Ajax запросы кешируемыми
  • Очистите буфер вывода (фактически - отправить первую порцию данных через </head><?php flush(); ?><body>)
  • Используйте GET вместо POST при Ajax запросах - экономия на TCP-пакетах. IE имеет ограничение в 2К на GET-запрос
  • Отложенная загрузка компонентов страницы, в частности картинок
  • Предзагрузка компонентов. Используется после полной загрузки страницы, работает в фоне, цель - последующий быстрый серфинг по другим страницам.
  • Уменьшайте количество DOM и iframe элементов
  • Снизьте количество обращений к DOM
  • Избегайте 404 ответов, в том числе при загрузке ресурсов страницы. Браузер даже на 404 страницах будет искать что-либо полезное, интерпретируя содержимое как JavaScript :?:
  • Уменьшите размер Cookie
Печать/экспорт