1. Клиентская оптимизация
Егор Талдыкин
Ardas Group Inc.

2. Среднее
время
загрузки
страницы
~5-6c
Dial-up DSL LAN

3. Рендеринг (~8%) Генерация HTML (~10%)
Загрузка ресурсов/статики(~82%)

4. Направления оптимизации
1. Генерация и доставка HTML
2. Ресурсы (js/css/fonts)
3. Статический контент (images/js/css)
4. Lazyload (images/blocks/etc)

5. 1
1. Генерация и доставка HTML

6. 1
Встроенное кэширование ядра и
модулей
• Pagecache
• Blocks
• Views

7. 1
Кэширование в коде
• drupal_static
• cache_get/cache_set
• Кэширование в renderable arrays
• Entity cache

8. 1
Boost
• Кэш для анонимов
• Хранит кэш в файлах
• Устанавливается правкой .htaccess
• Подходит для shared-хостинга

9. 1
Varnish
• Кэширующий прокси
• Для анонимов
• Модуль интеграции Varnish
• Сброс кэша через purge-метод

10. 1
Хостинг поближе к клиентам для
региональных проектов / CDN для
международных проектов
• ping до ya.ru (RU), google.com (USA) — ~30 мс
• ping до drupal.org (USA) — ~200 мс
• ping до ua-ix.net.ua (UA) — ~9 мс

11. 1
CDN
• Разбросан по миру
• Идеален для статики
• Позволяет использовать far future expiration
date для статики

12. 1
gzip
• Сжатие до 70%
• Идеальный вариант: сохранять результат
сжатия на диск (Javascript Aggregator в D6)

13. 1
2. Ресурсы (js/css/шрифты)

14. 1
Агрегация (ядро)
• 1 js на scope/group/every_page
• 1 css на group/every_page
• Css минифицируется
• Много файлов кеша

15. 1
Агрегация (core_library)
• 1 js на scope
• 1 css на group
• Css минифицируется ядром
• Js минифицируется jsmin
• Режим обучения

16. 1
Хранение внешних ресурсов
локально
• Web-шрифты (google fonts иногда лагает)
• Сторонние js-файлы (Javasript Libraries;
возможны проблемы с document.write)

17. 1
Js — вниз страницы
• Что бы не блокировать загрузку контента
скриптами
• Избежать эффекта «белого сайта»

18. 1
3. Статика (images/js/css/шрифты)

19. 1
Спрайты/data-uri
• Меньше http-запросов
• Могут генерироваться автоматически с
помощью Compass или подобных
• Css embedded images для data-uri

20. 1
Распараллеливание загрузки
index.html
image1.jpeg
image2.jpeg
image3.jpeg
image4.jpeg
image5.jpeg
image6.jpeg

21. 1
Браузерная арифметика
• Opera 12.02: 16/64
• Firefox 13.0.1: 15/256
• Chrome 4+: 6/?
• IE6-7: 2/?
• IE8: 6/?

22. 1
Поддомены для статики

23. 1
Nginx для статики
• Отдает статику в ~2 раза быстрее чем Apache
• Может быть настроен на кэш статики в RAM

24. 1
Cookie free домены
• 200-500 байт в каждую сторону, которые
никогда не используются
• Поддомены если сайт с www, домены — если
нет

25. 1
Far future expiration date
• Реализуется модулем CDN
• Уникальное имя для браузера
(site.com/cdn/farfuture/xxx/xxx/misc/throbber.gif)
• Expire заголовок в будущем
• CDN или пайка к Nginx

26. 1
4. Lazy load

27. 1
Lazyload изображений
• Перекрывает theme_image
• Сохраняет настоящий путь в data-src
• Заменяет картинку на 1пиксельный гиф
• Показывает картинку js-ом

28. 1
Ajax_blocks
• Отложенная загрузка блоков
• Для определенных ролей
• Сразу или через время
• Получает все блоки одним ajax-запросом

29. 1
Views infinite scroll
• Пейджер для Views
• Грузит контент при скроле как вконтактик

30. 1
Ajax pipe
• Агрегатор ajax-запросов
• На клиенте поход на behaviours
• На сервере hook_ajax_pipe()
• Поддерживает стандартные ajax-комманды

31. Полезные ссылки
drupal.org/project/boost
varnish-cache.org
drupal.org/project/varnish
drupal.org/project/core_library
drupal.org/project/javascript_libraries
drupal.org/project/lazyload
drupal.org/project/ajaxblocks
drupal.org/sandbox/taldy/1661592

32. Спасибо за внимание
Егор Талдыкин
E-mail: egor.taldykin@ardas.dp.ua
Skype: taldykin.egor