Client optimization drupal

416 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Client optimization drupal

  1. 1. Клиентская оптимизация Егор Талдыкин Ardas Group Inc.
  2. 2. Среднее время загрузкистраницы ~5-6c Dial-up DSL LAN
  3. 3. Рендеринг (~8%) Генерация HTML (~10%) Загрузка ресурсов/статики(~82%)
  4. 4. Направления оптимизации1. Генерация и доставка HTML2. Ресурсы (js/css/fonts)3. Статический контент (images/js/css)4. Lazyload (images/blocks/etc)
  5. 5. 11. Генерация и доставка HTML
  6. 6. 1Встроенное кэширование ядра и модулей• Pagecache• Blocks• Views
  7. 7. 1 Кэширование в коде• drupal_static• cache_get/cache_set• Кэширование в renderable arrays• Entity cache
  8. 8. 1 Boost• Кэш для анонимов• Хранит кэш в файлах• Устанавливается правкой .htaccess• Подходит для shared-хостинга
  9. 9. 1 Varnish• Кэширующий прокси• Для анонимов• Модуль интеграции Varnish• Сброс кэша через purge-метод
  10. 10. 1 Хостинг поближе к клиентам длярегиональных проектов / CDN для международных проектов• ping до ya.ru (RU), google.com (USA) — ~30 мс• ping до drupal.org (USA) — ~200 мс• ping до ua-ix.net.ua (UA) — ~9 мс
  11. 11. 1 CDN• Разбросан по миру• Идеален для статики• Позволяет использовать far future expiration date для статики
  12. 12. 1 gzip• Сжатие до 70%• Идеальный вариант: сохранять результат сжатия на диск (Javascript Aggregator в D6)
  13. 13. 12. Ресурсы (js/css/шрифты)
  14. 14. 1 Агрегация (ядро)• 1 js на scope/group/every_page• 1 css на group/every_page• Css минифицируется• Много файлов кеша
  15. 15. 1 Агрегация (core_library)• 1 js на scope• 1 css на group• Css минифицируется ядром• Js минифицируется jsmin• Режим обучения
  16. 16. 1 Хранение внешних ресурсов локально• Web-шрифты (google fonts иногда лагает)• Сторонние js-файлы (Javasript Libraries; возможны проблемы с document.write)
  17. 17. 1 Js — вниз страницы• Что бы не блокировать загрузку контента скриптами• Избежать эффекта «белого сайта»
  18. 18. 13. Статика (images/js/css/шрифты)
  19. 19. 1 Спрайты/data-uri• Меньше http-запросов• Могут генерироваться автоматически с помощью Compass или подобных• Css embedded images для data-uri
  20. 20. 1Распараллеливание загрузки index.html image1.jpeg image2.jpeg image3.jpeg image4.jpeg image5.jpeg image6.jpeg
  21. 21. 1 Браузерная арифметика• Opera 12.02: 16/64• Firefox 13.0.1: 15/256• Chrome 4+: 6/?• IE6-7: 2/?• IE8: 6/?
  22. 22. 1Поддомены для статики
  23. 23. 1 Nginx для статики• Отдает статику в ~2 раза быстрее чем Apache• Может быть настроен на кэш статики в RAM
  24. 24. 1 Cookie free домены• 200-500 байт в каждую сторону, которые никогда не используются• Поддомены если сайт с www, домены — если нет
  25. 25. 1 Far future expiration date• Реализуется модулем CDN• Уникальное имя для браузера (site.com/cdn/farfuture/xxx/xxx/misc/throbber.gif)• Expire заголовок в будущем• CDN или пайка к Nginx
  26. 26. 14. Lazy load
  27. 27. 1 Lazyload изображений• Перекрывает theme_image• Сохраняет настоящий путь в data-src• Заменяет картинку на 1пиксельный гиф• Показывает картинку js-ом
  28. 28. 1 Ajax_blocks• Отложенная загрузка блоков• Для определенных ролей• Сразу или через время• Получает все блоки одним ajax-запросом
  29. 29. 1 Views infinite scroll• Пейджер для Views• Грузит контент при скроле как вконтактик
  30. 30. 1 Ajax pipe• Агрегатор ajax-запросов• На клиенте поход на behaviours• На сервере hook_ajax_pipe()• Поддерживает стандартные ajax-комманды
  31. 31. Полезные ссылкиdrupal.org/project/boostvarnish-cache.orgdrupal.org/project/varnishdrupal.org/project/core_librarydrupal.org/project/javascript_librariesdrupal.org/project/lazyloaddrupal.org/project/ajaxblocksdrupal.org/sandbox/taldy/1661592
  32. 32. Спасибо за вниманиеЕгор ТалдыкинE-mail: egor.taldykin@ardas.dp.uaSkype: taldykin.egor

×