Оптимизация времени загрузки сайта: проблемы и решения

1,113 views
1,029 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,113
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Оптимизация времени загрузки сайта: проблемы и решения

  1. 1. Разгоняем все, что движется Оптимизация времени загрузки сайта : проблемы и решения Мациевский Николай, Acronis webo.in 1 / 23
  2. 2. <ul><li>Уменьшение объема данных </li></ul><ul><ul><li>minify/gzip </li></ul></ul><ul><li>Уменьшение числа запросов </li></ul><ul><ul><li>CSS sprites </li></ul></ul><ul><li>Кеширование </li></ul><ul><li>Параллельные загрузки </li></ul><ul><li>Оптимизация JavaScript </li></ul>2 / 23 webo.in Основные направления технологические решения
  3. 3. <ul><ul><li>3 базовых типа страниц: </li></ul></ul><ul><ul><li>«Одноразовые»: 99,9% новых посещений </li></ul></ul><ul><ul><ul><li>Все-в-одном </li></ul></ul></ul><ul><ul><li>Для непостоянной аудитории : от 70% новых </li></ul></ul><ul><ul><ul><li>CSS Sprites </li></ul></ul></ul><ul><ul><ul><li>CSS/JS сжатие и минимизация </li></ul></ul></ul><ul><ul><li>Для постоянной аудитории: менее 70% новых </li></ul></ul><ul><ul><ul><li>Кеширование </li></ul></ul></ul><ul><ul><ul><li>«Ненавязчивый» JavaScript </li></ul></ul></ul>3 / 23 webo.in Основные направления посещаемость как критерий
  4. 4. <ul><ul><li>Стили и скрипты </li></ul></ul><ul><ul><ul><li>Сжатие CSS </li></ul></ul></ul><ul><ul><ul><li>Обфускация JavaScript </li></ul></ul></ul><ul><ul><li>minify / mod_gzip / mod_deflate </li></ul></ul><ul><ul><ul><li>Архивировать «на лету»… </li></ul></ul></ul><ul><ul><ul><li>… или статически? </li></ul></ul></ul><ul><ul><li>Сжатие изображений </li></ul></ul><ul><ul><ul><li>PNG против GIF: кто лучше? </li></ul></ul></ul><ul><ul><li>Семантическая верстка </li></ul></ul>Уменьшение объема данных основные направления 4 / 23 webo.in
  5. 5. <ul><ul><li>Сжатие CSS </li></ul></ul><ul><ul><ul><li>CSS Tidy </li></ul></ul></ul><ul><ul><ul><li>gzip </li></ul></ul></ul><ul><ul><ul><li>выигрыш: до 85% </li></ul></ul></ul><ul><ul><li>Сжатие JavaScript </li></ul></ul><ul><ul><ul><li>Dean Edwards Packer </li></ul></ul></ul><ul><ul><ul><li>YUI Compressor + gzip </li></ul></ul></ul><ul><ul><ul><li>выигрыш : до 85% </li></ul></ul></ul>5 / 23 webo.in Уменьшение объема данных стили и скрипты
  6. 6. <ul><ul><li>Apache 2 + mod_deflate = gzip </li></ul></ul><ul><ul><ul><li>поддержка: 99,5% </li></ul></ul></ul><ul><ul><ul><li>выигрыш: 7 0- 8 0 % </li></ul></ul></ul><ul><ul><li>Статическое сжатие </li></ul></ul><ul><ul><ul><li>CSS/JavaScript + gzip </li></ul></ul></ul><ul><ul><ul><li>Safari or not Safari? </li></ul></ul></ul><ul><ul><li>Поддержка браузеров </li></ul></ul><ul><ul><ul><li>прокси и «старые» браузеры </li></ul></ul></ul>6 / 23 webo.in Уменьшение объема данных архивирование
  7. 7. <ul><ul><li>Portable Network Graphics (PNG) </li></ul></ul><ul><ul><ul><li>поддержка (без альфа-канала): 99,5% </li></ul></ul></ul><ul><ul><ul><li>улучшенный алгоритм сжатия </li></ul></ul></ul><ul><ul><ul><li>альфа-канал через ImageAlphaLoader </li></ul></ul></ul><ul><ul><ul><li>выигрыш: 20-40% </li></ul></ul></ul><ul><ul><li>Graphics Interchange Format (GIF) </li></ul></ul><ul><ul><ul><li>анимированные изображения </li></ul></ul></ul><ul><ul><li>JPEG </li></ul></ul><ul><ul><ul><li>jpegtran: уменьшение без потери качества </li></ul></ul></ul>7 / 23 webo.in Уменьшение объема данных оптимизация изображений
  8. 8. <ul><ul><li>Преимущества </li></ul></ul><ul><ul><ul><li>нет «распорок» </li></ul></ul></ul><ul><ul><ul><li>кеширование стилей </li></ul></ul></ul><ul><ul><ul><li>лучше выглядит без стилей </li></ul></ul></ul><ul><ul><li>Недостатки </li></ul></ul><ul><ul><ul><li>ряд проблем с CSS Sprites </li></ul></ul></ul><ul><ul><ul><li>XHTML «весит» больше HTML </li></ul></ul></ul><ul><ul><li>Выход: HTML 4.01 + POSH </li></ul></ul><ul><ul><li>Общий выигрыш: 20-40% </li></ul></ul>8 / 23 webo.in Уменьшение объема данных семантическая верстка
  9. 9. <ul><ul><li>Стили и скрипты </li></ul></ul><ul><ul><ul><li>CSS: 1 файл через @media (IE5.5+) </li></ul></ul></ul><ul><ul><ul><li>JavaScript: комбинированный window.onload </li></ul></ul></ul><ul><ul><li>Объединение изображений </li></ul></ul><ul><ul><ul><li>CSS Sprites </li></ul></ul></ul><ul><ul><ul><li>Image Map </li></ul></ul></ul><ul><ul><li>1 HTML </li></ul></ul><ul><ul><ul><li>хотя iframe могут ускорить загрузку </li></ul></ul></ul><ul><ul><li>Общий выигрыш: 30- 80% </li></ul></ul>9 / 23 webo.in Уменьшение числа запросов основные направления
  10. 10. <ul><ul><li>CSS- файлы </li></ul></ul><ul><ul><ul><li>объединение в 1 файл через @media print { … } </li></ul></ul></ul><ul><ul><ul><li>.. или даже включение в HTML </li></ul></ul></ul><ul><ul><li>JavaScript- файлы </li></ul></ul><ul><ul><ul><li>влияют на отображение страницы </li></ul></ul></ul><ul><ul><ul><li>объединение в 1 файл … </li></ul></ul></ul><ul><ul><ul><li>… или загрузка в самом конце ( window.onload) </li></ul></ul></ul><ul><ul><ul><li>… или включение в HTML </li></ul></ul></ul><ul><ul><li>Общий выигрыш: 1 0- 30% </li></ul></ul>10 / 23 webo.in Уменьшение числа запросов стили и скрипты
  11. 11. <ul><ul><li>CSS Sprites </li></ul></ul><ul><ul><ul><li>5 групп файлов: анимация и разные повторения </li></ul></ul></ul><ul><ul><ul><li>поддержка браузерами: 99,9% </li></ul></ul></ul><ul><ul><ul><li>rollover- эффекты </li></ul></ul></ul><ul><ul><ul><li>все-в-одном </li></ul></ul></ul><ul><ul><ul><li>BackgroundImageCache </li></ul></ul></ul><ul><ul><li>Image Map </li></ul></ul><ul><ul><ul><li>когда много маленьких картинок </li></ul></ul></ul><ul><ul><li>Общий выигрыш: 7 0- 80% </li></ul></ul>11 / 23 webo.in Уменьшение числа запросов объединение изображений
  12. 12. <ul><ul><li>Объединяем HTML/CSS/JS </li></ul></ul><ul><ul><ul><li>yandex.ru / ya.ru / yahoo.com </li></ul></ul></ul><ul><ul><li>Изображения через date:image </li></ul></ul><ul><ul><ul><li>поддержка браузерами: 30% (все, кроме IE) </li></ul></ul></ul><ul><ul><ul><li>хаки для IE (* html, *:first-child+html, <!—[if IE]…, mhtml) </li></ul></ul></ul><ul><ul><ul><li>увеличение размера: +30-40 % </li></ul></ul></ul><ul><ul><li>+ mod_gzip </li></ul></ul><ul><ul><li>Общий выигрыш: 7 0-9 0% </li></ul></ul>1 2 / 23 webo.in Экстремальная оптимизация только 1 файл!
  13. 13. <ul><ul><li>Размер HTML: 2-10% </li></ul></ul><ul><ul><li>Cache-Control </li></ul></ul><ul><ul><ul><li>max-age, private </li></ul></ul></ul><ul><ul><ul><li>сброс кеша GET- строкой </li></ul></ul></ul><ul><ul><ul><li>статические ресурсы </li></ul></ul></ul><ul><ul><li>ETag </li></ul></ul><ul><ul><ul><li>когда срок кеша истек </li></ul></ul></ul><ul><ul><ul><li>проблемы репликации </li></ul></ul></ul><ul><ul><li>Общий выигрыш: до 100% </li></ul></ul>1 3 / 23 webo.in Кеширование основные направления
  14. 14. <ul><li>Несколько «легких» серверов ( alias) </li></ul><ul><li>Хеш-функция для имен файлов </li></ul><ul><li>Балансировка по нагрузке/географии </li></ul><ul><li>Балансировка на клиенте </li></ul><ul><li>Не больше 4 хостов </li></ul><ul><li>Общий выигрыш: до 85% </li></ul>14 / 23 webo.in Параллельные загрузки дважды два – быстрее!
  15. 15. <ul><li>Система JavaScript- пакетов </li></ul><ul><ul><li>загружаем только необходимые </li></ul></ul><ul><li>Первоначальный вид страницы </li></ul><ul><ul><li>формируем на сервере </li></ul></ul><ul><li>«Быстрый» window.onload </li></ul><ul><ul><li>DOMContentLoaded / defer </li></ul></ul><ul><li>Сайт должен работать и без JavaScript </li></ul><ul><ul><li>визуальное ускорение при загрузке </li></ul></ul>15 / 23 webo.in Оптимизация JavaScript загрузка «по требованию»
  16. 16. <ul><li>Уменьшаем число DOM -элементов </li></ul><ul><ul><li>создавайте локальные копии узлов </li></ul></ul><ul><ul><li>обновляйте дерево большими фрагментами </li></ul></ul><ul><li>Обработчики событий </li></ul><ul><ul><li>создавайте для родительских элементов </li></ul></ul><ul><ul><li>удаляйте для избежания утечек памяти в IE </li></ul></ul><ul><li>Используйте CSS , а не JavaScript </li></ul><ul><li>Избегайте CSS expressions / filters </li></ul>16 / 23 webo.in Оптимизация JavaScript DOM и события
  17. 17. <ul><li>Избегайте глобальных переменных </li></ul><ul><ul><li>кешируйте в локальные переменные: </li></ul></ul><ul><ul><ul><li>array.length -> var a=array.length // globarVar -> var localVar = globalVar </li></ul></ul></ul><ul><li>Избегайте eval + setTimeout / setInterval </li></ul><ul><ul><li>используйте анонимные функции </li></ul></ul><ul><li>Используйте элементарные функции </li></ul><ul><ul><li>myArray.push(value) -> myArray[idx++]=value </li></ul></ul><ul><li>Обновляйте UI в случае «тяжелых» вычислений </li></ul>17 / 23 webo.in Оптимизация JavaScript полезные советы
  18. 18. <ul><li>Кеширование: до 100% </li></ul><ul><li>Параллельные загрузки: до 85% </li></ul><ul><li>CSS Sprites: до 60% </li></ul><ul><li>Слияние + minify + gzip: до 40% </li></ul><ul><li>Оптимизация изображений: до 30% </li></ul><ul><li>Оптимизация JavaScript: до 20% </li></ul><ul><li>Семантическая верстка: до 10% </li></ul>18 / 23 webo.in Действенность методов что лучше?
  19. 19. <ul><li>Google: на 500 мс медленнее = 20% уменьшение трафика </li></ul><ul><li>Amazon: на 100 мс медленнее = 1% уменьшение продаж </li></ul><ul><li>Acronis: ускорение в 5 раз = 5% увеличение продаж </li></ul><ul><li>www.pmexpert.ru: ускорение в 2, 8 раза </li></ul><ul><li>www.creative.su: ускорение в 2,6 раза </li></ul>19 / 23 webo.in Действенность методов ROI
  20. 20. <ul><li>Firefox + Firebug + Yslow </li></ul><ul><ul><li>лучший в своем классе </li></ul></ul><ul><ul><li>оценка оптимизации </li></ul></ul><ul><ul><li>практические советы </li></ul></ul><ul><li>IE + AOL Pagetest </li></ul><ul><ul><li>диаграмма загрузки для IE </li></ul></ul><ul><li>IE Leak Detector aka Drip </li></ul><ul><ul><li>нахождение утечек памяти для IE </li></ul></ul>20 / 23 webo.in Обзор инструментов системные приложения
  21. 21. <ul><li>JsUnit </li></ul><ul><ul><li>тестирование и отладка </li></ul></ul><ul><li>AjaxView </li></ul><ul><ul><li>проксирование Ajax- запросов </li></ul></ul><ul><li>JsLex </li></ul><ul><ul><li>профессиональное профилирование </li></ul></ul><ul><li>YUI Profiler </li></ul><ul><ul><li>время выполнения функций </li></ul></ul><ul><li>Лучший тестер – пользователь! </li></ul>21 / 23 webo.in Обзор инструментов профилирование JavaScript
  22. 22. <ul><li>www.websiteoptimization.com </li></ul><ul><ul><li>подробный анализ узких мест при загрузке </li></ul></ul><ul><li>OctaGate SiteTimer / Pingdom Tools </li></ul><ul><ul><li>диаграмма загрузки сайта </li></ul></ul><ul><li>Практические советы от Yahoo! </li></ul><ul><li>webo.in </li></ul><ul><ul><li>анализ скорости загрузки / история проверок </li></ul></ul><ul><ul><li>диаграмма загрузки сайта (для 4 браузеров) </li></ul></ul><ul><ul><li>более 40 статей и докладов по оптимизации </li></ul></ul>22 / 23 webo.in Обзор инструментов онлайн-инструменты
  23. 23. Спасибо. Вопросы? Разгоняем все, что движется Мациевский Николай, Acronis webo.in 23 / 23

×