основные направления

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