1. Speed Up Your Website
Dmitriy Yakubovskiy

2. Что можно оптимизировать?
Время загрузки Скорость работы
страницы интерфейсов
Уменьшение размера Взаимодействия с DOM
данных JS сценарии
Уменьшение числа ...
запросов
...
Стр 2 из 376

3. Зачем оптимизировать?

4. Фокус оптимизации

5. Уменьшение размера данных

6. Уменьшение размера данных
JS CSS
IMAGES

7. Сжатие GZIP / DEFLATE
Два варианта:
- статическое архивирование
- сжатие "на лету"
Accept-Encoding:
gzip, deflate
Content-
Encoding: gzip

8. Оптимизация изображений
JPEG:
- формат с потерей качества
- уменьшаем цвета
- чистим мусор (шум)
- В Photoshop сохраняем в качестве от 51 до 95
Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)

9. Оптимизация изображений
Последовательный JPEG (baseline) Прогрессивный JPEG (progressive)
baseline - 520Kb
progressive - 497Kb

10. Оптимизация изображений
Такие разные PNG:
1. PNG-24
- доступна вся цветовая палитра
- возможен любой уровень прозрачности
2. PNG-8
- палитра 256 цветов
- прозрачность или 0% или 100%
3. PNG-8 с альфа-прозрачностью
- палитра 256 цветов
- возможен любой уровень прозрачности

11. Оптимизация изображений
611Kb PNG-24 551Kb

12. Оптимизация изображений
Original
113Kb
FileOptimizer
44Kb
TinyPNG
12Kb

13. Оптимизация изображений
www.tinypng.org

14. Оптимизация CSS
1. Все внешние таблицы стилей в head (в идеале 1 css)
2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,
CSS Tidy)
3. Gzip cжатие css ( ~ 70-80% )

15. Оптимизация JavaScript
1. Все внешние js скрипты перед </body>, а лучше в постзагрузку
(в идеале 1 js файл)
2. Минимизация js (JSMin, JavaScript Minifier, Dojo ShrinkSafe aka
Rhino, YUI Compressor, Closure Compiler)
3. Gzip cжатие JavaScript ( ~ 60-70% )
Время загрузки = Время скачивания + Время исполнения

16. Оптимизация JavaScript
Если включен gzip лучше не использовать Dean Edwards Packer
SIZE (KB) GZIP(KB)
jq.uncompressed.js 277.9 92.6
jq.compressed.js 92.6 32.7
jq.closure-compiler-whitespace.js 142.2 41.0
jq.closure-compiler-simple.js 93.5 33.7
jq.packer.js 75.5 36.3

17. Уменьшение числа запросов

18. Кэширование
При первом посещении сайта ресурсы еще не в кэше
Небольшой размер кэша у мобильных браузеров:
- iOS Safari не имеет дискового кэша
- у Android кэш ограничен 20Мб
Фоновая предзагрузка в кэш

19. Кэширование
Простое кэширование:
Etag: "d8432-1851f-4d83418c05700" (Server->Browser)
If-None-Match: "d8432-1851f-4d83418c05700" (Browser->Server)
Last-Modified: Mon, 18 Mar 2013 14:49:32 GMT (Server->Browser)
If-Modified-Since: Mon, 18 Mar 2013 14:49:32 GMT (Browser->Server)
Ответ: 200 OK или 304 Not Modified

20. Кэширование
Жесткое кэширование + версионность:
<FilesMatch .( js | css | png | jpg | jpeg | gif )$>
# убираем версию
RewriteRule ^(.+).v(.*).(js|css|png|jpg|jpeg|gif)$ $1.$3 [QSA,L]
# жестко кешируем версионные файлы
Header append Cache-Control "public max-age=31536000"
ExpiresActive On
ExpiresDefault "access plus 1 year"
</FilesMatch>

21. Кэширование
Форсированное обновление кэша:
1. <script src="js/script123.js"></script>
2. <script src="js/script.js?v=123"></script>
(некоторые прокси-серверы не кэшируют файлы со строкой запроса)
3. <script src="js/script.v123.js"></script>
Как выбрать version:
- хэш (crc32, md5)
- номер релиза
- время сборки

22. CDN
- Увеличение скорости доставки данных
- Уменьшение нагрузки на сервер / кэширование

23. CSS спрайты
Комбинирование:
- по цветам
- по размеру (иконки)
- по назначению
Отдельно картинки для:
- repeat
- repeat-x
- repeat-y

24. data:URI
<img src="data:image/png;base64,iVBORw0KU...rkJggg==" />
.block {
background-image: url('data:image/png;base64,iVBORw0KU...
rkJggg==');
}
+ Экономит запросы, подойдет для промо страницы
- Не кэшируется в html, трудно поддерживать, IE8+
- Размер кода больше размера файла (gzip!)

25. Параллельные загрузки

26. Потоки по браузерам *
Firefox 3+ Chrome Opera 12 Safari 3-4 IE 6-7
6 потоков 6 потоков 6 потоков 4 потока 2 потока
Safari 5 IE 8-9
6 потоков 6 потоков
IE 10
8 потоков
* - число параллельных соединений к одному хосту

27. Параллельные загрузки

28. Параллельные загрузки
Решение с поддоменом:
<img src="http://images1.site.com/img1.png" />
<img src="http://images1.site.com/img2.png" />
<img src="http://images2.site.com/img3.png" />
<img src="http://images2.site.com/img4.png" />
Cookie free

29. Организация загрузки

30. Организация загрузки
Этап 1: Основная загрузка (html, css, images, js)
1. доставка контента и оформления
2. загрузка только необходимого функционала
- порядок загрузки элементов
Этап 2: Постзагрузка / Загрузка по запросу
1. дополнительный функционал, доп. изображения
2. сторонние виджеты
3. кэширование дополнительных ресурсов

31. Постзагрузка виджетов

32. Постзагрузка виджетов

33. Инструменты
● WebPageTest Online (www.webpagetest.org)
● Webkit Developer Toolbar (Timeline Tab)
● Firebug for FF (YSlow add-on, Net Tab)
● Fiddler (Web Debugging Proxy)
● DynaTrace Ajax Edition
● Sloppy (proxy server)

34. Вопросы
Задавайте умные вопросы. Получайте умные ответы.

35. Dmitriy Yakubovskiy
d.iakubovskiy@sysiq.com