Разгоняем все, что движется Оптимизация времени загрузки сайта: проблемы и решения Мациевский Николай, Acronis webo.in1 / 23. - презентация

1 Разгоняем все, что движется Оптимизация времени загрузки сайта: проблемы и решения Мациевский Николай, Acronis webo.in1 / 23

2 Уменьшение объема данных – minify/gzip Уменьшение числа запросов – CSS sprites Кеширование Параллельные загрузки Оптимизация JavaScript 2 / 23webo.in Основные направления технологические решения

3 3 базовых типа страниц: «Одноразовые»: 99,9% новых посещений Все-в-одном Для непостоянной аудитории : от 70% новых CSS Sprites CSS/JS сжатие и минимизация Для постоянной аудитории: менее 70% новых Кеширование «Ненавязчивый» JavaScript 3 / 23webo.in Основные направления посещаемость как критерий

4 Стили и скрипты Сжатие CSS Обфускация JavaScript minify / mod_gzip / mod_deflate Архивировать «на лету»… … или статически? Сжатие изображений PNG против GIF: кто лучше? Семантическая верстка Уменьшение объема данных основные направления 4 / 23webo.in

5 Сжатие CSS CSS Tidy gzip выигрыш: до 85% Сжатие JavaScript Dean Edwards Packer YUI Compressor + gzip выигрыш: до 85% 5 / 23webo.in Уменьшение объема данных стили и скрипты

6 Apache 2 + mod_deflate = gzip поддержка: 99,5% выигрыш: 70-80% Статическое сжатие CSS/JavaScript + gzip Safari or not Safari? Поддержка браузеров прокси и «старые» браузеры 6 / 23webo.in Уменьшение объема данных архивирование

7 Portable Network Graphics (PNG) поддержка (без альфа-канала): 99,5% улучшенный алгоритм сжатия альфа-канал через ImageAlphaLoader выигрыш: 20-40% Graphics Interchange Format (GIF) анимированные изображения JPEG jpegtran: уменьшение без потери качества 7 / 23webo.in Уменьшение объема данных оптимизация изображений

8 Преимущества нет «распорок» кеширование стилей лучше выглядит без стилей Недостатки ряд проблем с CSS Sprites XHTML «весит» больше HTML Выход: HTML POSH Общий выигрыш: 20-40% 8 / 23webo.in Уменьшение объема данных семантическая верстка

9 Стили и скрипты CSS: 1 файл (IE5.5+) JavaScript: комбинированный window.onload Объединение изображений CSS Sprites Image Map 1 HTML хотя iframe могут ускорить загрузку Общий выигрыш: 30-80% 9 / 23webo.in Уменьшение числа запросов основные направления

10 CSS-файлы объединение в 1 файл print { … }.. или даже включение в HTML JavaScript-файлы влияют на отображение страницы объединение в 1 файл … … или загрузка в самом конце (window.onload) … или включение в HTML Общий выигрыш: 10-30% 10 / 23webo.in Уменьшение числа запросов стили и скрипты

11 CSS Sprites 5 групп файлов: анимация и разные повторения поддержка браузерами: 99,9% rollover-эффекты все-в-одном BackgroundImageCache Image Map когда много маленьких картинок Общий выигрыш: 70-80% 11 / 23webo.in Уменьшение числа запросов объединение изображений

12 Объединяем HTML/CSS/JS yandex.ru / ya.ru / yahoo.com Изображения через date:image поддержка браузерами: 30% (все, кроме IE) хаки для IE (* html, *:first-child+html,

13 Размер HTML: 2-10% Cache-Control max-age, private сброс кеша GET-строкой статические ресурсы ETag когда срок кеша истек проблемы репликации Общий выигрыш: до 100% 13 / 23webo.in Кеширование основные направления

14 Несколько «легких» серверов (alias) Хеш-функция для имен файлов Балансировка по нагрузке/географии Балансировка на клиенте Не больше 4 хостов Общий выигрыш: до 85% 14 / 23webo.in Параллельные загрузки дважды два – быстрее!

15 Система JavaScript-пакетов – загружаем только необходимые Первоначальный вид страницы – формируем на сервере «Быстрый» window.onload – DOMContentLoaded / defer Сайт должен работать и без JavaScript – визуальное ускорение при загрузке 15 / 23webo.in Оптимизация JavaScript загрузка «по требованию»

16 Уменьшаем число DOM-элементов – создавайте локальные копии узлов – обновляйте дерево большими фрагментами Обработчики событий – создавайте для родительских элементов – удаляйте для избежания утечек памяти в IE Используйте CSS, а не JavaScript Избегайте CSS expressions / filters 16 / 23webo.in Оптимизация JavaScript DOM и события

17 Избегайте глобальных переменных – кешируйте в локальные переменные: array.length var a=array.length // globarVar var localVar = globalVar Избегайте eval + setTimeout / setInterval – используйте анонимные функции Используйте элементарные функции – myArray.push(value) myArray[idx++]=value Обновляйте UI в случае «тяжелых» вычислений 17 / 23webo.in Оптимизация JavaScript полезные советы

18 Кеширование: до 100% Параллельные загрузки: до 85% CSS Sprites: до 60% Слияние + minify + gzip: до 40% Оптимизация изображений: до 30% Оптимизация JavaScript: до 20% Семантическая верстка: до 10% 18 / 23webo.in Действенность методов что лучше?

19 Google: на 500 мс медленнее = 20% уменьшение трафика Amazon: на 100 мс медленнее = 1% уменьшение продаж Acronis: ускорение в 5 раз = 5% увеличение продаж ускорение в 2,8 раза ускорение в 2,6 раза 19 / 23webo.in Действенность методов ROI

20 Firefox + Firebug + Yslow – лучший в своем классе – оценка оптимизации – практические советы IE + AOL Pagetest – диаграмма загрузки для IE IE Leak Detector aka Drip – нахождение утечек памяти для IE 20 / 23webo.in Обзор инструментов системные приложения

21 JsUnit – тестирование и отладка AjaxView – проксирование Ajax-запросов JsLex – профессиональное профилирование YUI Profiler – время выполнения функций Лучший тестер – пользователь! 21 / 23webo.in Обзор инструментов профилирование JavaScript

22 – подробный анализ узких мест при загрузке OctaGate SiteTimer / Pingdom Tools – диаграмма загрузки сайта Практические советы от Yahoo! webo.in – анализ скорости загрузки / история проверок – диаграмма загрузки сайта (для 4 браузеров) – более 40 статей и докладов по оптимизации 22 / 23webo.in Обзор инструментов онлайн-инструменты

23 Спасибо. Вопросы? Разгоняем все, что движется Мациевский Николай, Acronis webo.in23 / 23