client optimization drupal
TRANSCRIPT
Клиентская оптимизация
Егор ТалдыкинArdas Group Inc.
Dial-up DSL LAN
~5-6c
Среднее время
загрузки страницы
Генерация HTML (~10%)
Загрузка ресурсов/статики(~82%)
Рендеринг (~8%)
1. Генерация и доставка HTML2. Ресурсы (js/css/fonts)3. Статический контент (images/js/css)4. Lazyload (images/blocks/etc)
Направления оптимизации
1. Генерация и доставка HTML
11
Встроенное кэширование ядра и модулей
• Pagecache• Blocks• Views
11
Кэширование в коде
• drupal_static• cache_get/cache_set• Кэширование в renderable arrays• Entity cache
11
Boost
• Кэш для анонимов• Хранит кэш в файлах• Устанавливается правкой .htaccess• Подходит для shared-хостинга
11
Varnish
• Кэширующий прокси• Для анонимов• Модуль интеграции Varnish• Сброс кэша через purge-метод
11
Хостинг поближе к клиентам для региональных проектов / CDN для
международных проектов
• ping до ya.ru (RU), google.com (USA) — ~30 мс• ping до drupal.org (USA) — ~200 мс• ping до ua-ix.net.ua (UA) — ~9 мс
11
CDN
• Разбросан по миру• Идеален для статики• Позволяет использовать far future expiration
date для статики
11
gzip
• Сжатие до 70%• Идеальный вариант: сохранять результат
сжатия на диск (Javascript Aggregator в D6)
11
2. Ресурсы (js/css/шрифты)
11
Агрегация (ядро)
• 1 js на scope/group/every_page• 1 css на group/every_page• Css минифицируется• Много файлов кеша
11
Агрегация (core_library)
• 1 js на scope• 1 css на group• Css минифицируется ядром• Js минифицируется jsmin• Режим обучения
11
Хранение внешних ресурсов локально
• Web-шрифты (google fonts иногда лагает)• Сторонние js-файлы (Javasript Libraries;
возможны проблемы с document.write)
11
Js — вниз страницы
• Что бы не блокировать загрузку контента скриптами
• Избежать эффекта «белого сайта»
11
3. Статика (images/js/css/шрифты)
11
Спрайты/data-uri
• Меньше http-запросов• Могут генерироваться автоматически с
помощью Compass или подобных• Css embedded images для data-uri
11
Распараллеливание загрузки11
index.htmlimage1.jpegimage2.jpegimage3.jpegimage4.jpegimage5.jpegimage6.jpeg
Браузерная арифметика
• Opera 12.02: 16/64• Firefox 13.0.1: 15/256• Chrome 4+: 6/?• IE6-7: 2/?• IE8: 6/?
11
Поддомены для статики11
Nginx для статики
• Отдает статику в ~2 раза быстрее чем Apache• Может быть настроен на кэш статики в RAM
11
Cookie free домены
• 200-500 байт в каждую сторону, которые никогда не используются
• Поддомены если сайт с www, домены — если нет
11
Far future expiration date
• Реализуется модулем CDN• Уникальное имя для браузера
(site.com/cdn/farfuture/xxx/xxx/misc/throbber.gif)• Expire заголовок в будущем• CDN или пайка к Nginx
11
4. Lazy load
11
Lazyload изображений
• Перекрывает theme_image• Сохраняет настоящий путь в data-src• Заменяет картинку на 1пиксельный гиф• Показывает картинку js-ом
11
Ajax_blocks
• Отложенная загрузка блоков• Для определенных ролей• Сразу или через время• Получает все блоки одним ajax-запросом
11
Views infinite scroll
• Пейджер для Views• Грузит контент при скроле как вконтактик
11
Ajax pipe
• Агрегатор ajax-запросов• На клиенте поход на behaviours• На сервере hook_ajax_pipe()• Поддерживает стандартные ajax-комманды
11
Полезные ссылки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
