Что влияет на производительность. Средства анализа показателей. Правильно определяем цели и задачи. Глубины клиентской оптимизации.

1. Быстродействие веб-сайта
Методичный анализ и глубины
клиентской оптимизации.
Евгений Котельницкий
WebCamp 2014, Odessa

2. Евгений Котельницкий
+YevhenKotelnytskyi
@yeeevhen
http://4coder.info/me

3. План
- Принципы работы WWW
- На что уходит время?
- Методичный анализ
-Алгоритм оптимизации
-Некоторые правила
- Утилиты для мониторинга
- Клиентская оптимизация
- Психология ожидания

4. Принципы работы WWW

5. Схема загрузки компонентов
WEB-страницы
1) Index.PHP
2) Style.CSS
3) jQuery.JS
4) Image1.JPG
5) Logo.PNG
6) Sprite.PNG
Text / HTML
Text / CSS
Image / JPEG
Image/PNG
Image/PNG
Text / JavaScript

6. Детальнее…

7. Время загрузки HTML – 5% от общего *
* По данным компании Yahoo

8. На что уходит время?

9. Загрузка веб-страницы
Этап «Виновник»
1 Ожидание в очереди HTTP спец.
2 DNS Lookup Сеть
3 Открытие TCP/IP соединения Сеть
4 Отправка HTTP запроса Сеть
5 Разбор запроса сервером Сервер
6 Формирование ответа Сервер
7 Компрессия ответа (1) Сервер
8 Пересылка ответа Сеть
9 Распаковка ответа (1) Браузер
10 Представление ответа Браузер
11 Закрытие соединения? (2) HTTP спец.
12 Отправка следующего запроса (3) HTML
1) Если компрессия включена
2) Соединение не закрывается - ждём следующий запрос
3) Если для представления требуются другие компоненты

10. Мы можем уменьшить задержки
на каждом этапе
Этап Оптимизация
1 Ожидание в очереди Уменьшить количество компонентов
2 DNS Lookup Уменьшить количество различных доменов
3 Открытие TCP/IP соединения Использовать сервера, которые географически ближе
4 Отправка HTTP запроса Минимизировать размер шапки запроса (Cookies)
5 Разбор запроса сервером Настройка / оптимизация сервера
6 Формирование ответа Зависит от типа компонента
7 Компрессия ответа (1) Отключить компрессию? А как же пункт 8?
8 Пересылка ответа Минимизировать размер ответа
9 Распаковка ответа (1) См. п. 7
10 Представление ответа Оптимизировать HTML, CSS, JS и д.р.
11 Закрытие соединения? (2) К счастью, соединение не закрывается в HTTP 1.1
12 Отправка следующего запроса (3) Минимизировать кол-во компонентов и редиректов

11. Методичный анализ

12. Клиент Разработчик
Утрированный пример из жизни

13. Некоторые правила
 Ищем узкие места (учитываем приоритеты)
 Советы могут противоречить
 Стандартные приёмы могут усугубить ситуацию
 Учитываем задержки «без попадания в кэш»

14. 1. Собираем симптомы
2. Формулируем цели
3. Определяем узкие места
4. Составляем список задач
5. Оцениваем ожидаемый эффект
6. Оцениваем затраты
7. Расставляем приоритеты
8. Анализируем эффект
9. Выполняем итерационно
Алгоритм оптимизации

15.  Firebug + Yahoo Yslow
 Google Chrome PageSpeed
 Google Chrome Developer Tools
 Pingdom Performance Tools
 Google Analytics
Утилиты для мониторинга

16. Клиентская оптимизация

17. Минимизируем количество
HTTP-запросов
1.DNS Lookup
2.Открытие TCP/IP соединения
3.Отправка HTTP запроса
4.Разбор запроса сервером
5.Генерация ответа
6.Компрессия ответа
7.Пересылка ответа
8.Распаковка ответа
9.Представление ответа

18. Редиректы нежелательны

19. 404 - некорректные URL-адреса

20. Минимизация объёма данных,
пересылаемых по сети
 Компрессия и Минификация
 Gzip компрессия
 YUI Compressor (JS / CSS)
 Что целесообразно «архивировать»?
 Минимизация размера медиа-файлов
 Минимизация размера HTTP-заголовка

21. Какие компоненты целесообразно
«архивировать»?
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE image/svg+xml
Настройка “mod_deflate” для Apache:

22. Нагрузка на сервер от Gzip
компрессии

23. Gzip vs YUI Compressor.
Степень сжатия JavaScript

24. Оптимизация компонентов / HTML
 Уменьшим количество DOM-элементов
 Реже используем <iframe />

25. Оптимизация компонентов / CSS
 Используем <link> вместо @import;
 Оптимизируем селекторы;
 Избавляемся от CSS Expressions;
 Не копируем бездумно код.

26. Оптимизация компонентов /
Изображения

27. «Экономный» способ
сохранения .jpg для Retina
1. Готовим изображение в 2 раза больше требуемого
2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%)
3. Уменьшаем размеры изображения в 2 раза с помощью CSS / HTML
4. Внешнее качество такой картинки повысится, а размер останется тем же
Оригинальный размер
Качество 80%
Размер 10Kb
Картинка в 2 раза больше
Качество 40%
Размер 11Kb
Картинка в 2 раза больше
Качество 80%
Размер 60Kb

28. Оптимизация компонентов /
JavaScript
 Отладка JavaScript в Google Chrome
 Показываем статус долгого процесса
 Не ждём чуда или «ТаймАут»
 Preload
 Lazy Load
 Ajax Post-load

29. Кэширование компонентов
браузером
 Expires или Cache-Control
 Last-Modified / If-Modified-Since
 HTTP Etag (entity tag)
 Кэширование AJAX-запросов

30. Кэширование компонентов браузером
GET /encrypted-area HTTP/1.1
Host: www.example.com
Accept-Encoding: gzip, deflate
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-
Hat/Linux)
Last-Modified: Wed, 08 Jan 2003
23:11:55 GMT
Etag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Заголовок запроса Заголовок ответа

31. Сеть
 Параллельная загрузка компонентов
 Минимум различных доменов
 CDN (Content Delivery Network)
 Сookie-free domains

32. Психология ожидания
 “Loading”-анимация
 Progress bar

33. Вопросы?

34. Спасибо!

35. Материалы:
 http://developer.yahoo.com/performance/rules.html/
 http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/
 http://webo.in/articles/habrahabr/30-gzip-versus-broadband/
 http://developer.yahoo.com/yui/compressor/
 http://www.appelsiini.net/projects/lazyload/
Утилиты:
1. http://developer.yahoo.com/yslow/
2. https://developers.google.com/speed/pagespeed/
3. http://tools.pingdom.com/fpt/
4. http://refresh-sf.com/yui/
5. http://www.smushit.com/ysmush.it/