1 / 20

Оптимизируем время загрузки страницы

Оптимизируем время загрузки страницы. Мациевский Николай, Acronis. Время загрузки страницы. * Данные получены с помощью Firefox/Firebug/YSlow. Время загрузки страницы. Основное время уходит на: Сетевые задержки Загрузку ресурсов (картинок и др.) Загрузку CSS- файлов

connor-black
Download Presentation

Оптимизируем время загрузки страницы

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Оптимизируем время загрузки страницы Мациевский Николай, Acronis

  2. Время загрузкистраницы * Данные получены с помощью Firefox/Firebug/YSlow

  3. Время загрузкистраницы Основное время уходит на: • Сетевые задержки • Загрузку ресурсов (картинок и др.) • Загрузку CSS-файлов • Загрузку JS-файлов

  4. Оптимизация загрузки Что можно уменьшить: • Время передачи запроса • Время передачи ответа • Число запросов

  5. Оптимизация загрузки Основные направления: • Сжатие данных (уменьшение времени ответа) • Кеширование (уменьшение числа запросов) • Слияние (уменьшение числа запросов) • Распределенные системы (уменьшение времени ответа)

  6. Сетевые задержки DNS lookup: • Обычно 20-120ms • Не более 2-4 хостов на страницу • Заголовок keep-alive • Избегаем редиректов (301/302)

  7. Сжатие данных (cookie)

  8. Сжатие данных (cookie) Уменьшаем размер заголовка Cookie: • Убираем ненужные • Следим за размером • Выставляем только на требуемых страницах • Следим за сроком действия (Expires)

  9. Сжатие данных (ответ) Уменьшаем размер кода: • Убираем все лишнее (minify) • AJAX-запросы. JSON вместо XML • gzip- / deflate-сжатие. Поддержка «старых» браузеров

  10. Сжатие данных (gzip)

  11. Сжатие данных (CSS) Уменьшаем размер кода: • Имена классов / идентификаторов • Пути к фоновым изображениям • CSS Tidy / gzip

  12. Сжатие данных (JS) Уменьшаем размер кода: • Dean Edwards Packer dean.edwards.name/packer/-78% • Dean Edwards Packer + gzip: -82% • YUI Compressor julienlecomte.net/yuicompressor/-50% • YUI Compressor + gzip: -83% * В качестве примера рассматривалась библиотека jQuery

  13. Кеширование Уменьшаем число повторных запросов: • Фоновые картинки (CSS) вместо <img> • Заголовки Expires / Cache-Control • ETags (уникальные идентификаторы запрашиваемых ресурсов) • Проблема версионности

  14. Слияние Уменьшаем число запросов: • Слияние CSS-файлов (подключение через @media) • Слияние JS-файлов («сборка» одного файла для публикации) • Слияние картинок: CSS sprites (все иконки в одном файле / roll-over эффекты)

  15. Экстремальное слияние Уменьшаем число запросов: • JS / CSS в одном файле (взаимные комментарии) • HTML / JS / CSS в одном файле (yandex) • CSS / картинки в одном файле (IE не поддерживает) • Минимальный размер страницы «по умолчанию» (google)

  16. Распределенные системы Уменьшаем время ответа: • Round-robin балансировка • Балансировка по нагрузке • Балансировка по географии • Балансировка на клиенте

  17. Распределенные системы Балансировка на клиенте: • Сеть серверов для обслуживания запросов • Список серверов в одном файле • AJAX/Flash-приложение для выбора сервера

  18. Балансировка на клиенте веб-сервер веб-сервер Выбор сервера производится непосредственно на клиенте веб-сервер

  19. Заключение Уменьшение времени загрузки страницы: • Yahoo: 2.4s -> 0.9s (2,7 раза) Общие рекомендации: • Загрузка за 10 секунд на модеме (общий размер меньше 36 кб)

  20. Спасибо за внимание Оптимизируем время загрузки страницы Мациевский Николай, Acronis

More Related