Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации. Евгений Котельницкий Что влияет на производительность; средства анализа показателей; правильно определяем цели и задачи; глубины клиентской оптимизации; анализ нескольких сайтов, которые назовёт аудитория.

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

2. Евгений Котельницкий+YevhenKotelnytskyi@yeeevhenhttp://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 PingdomPerformance 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/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/atom_xmlAddOutputFilterByType DEFLATE application/x-javascriptAddOutputFilterByType DEFLATE application/x-httpd-phpAddOutputFilterByType DEFLATE application/x-httpd-fastphpAddOutputFilterByType DEFLATE application/x-httpd-erubyAddOutputFilterByType DEFLATE image/svg+xmlНастройка “mod_deflate” для Apache:

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

23. GzipvsYUI Compressor. Степень сжатия JavaScript

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

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

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

27. «Экономный» способ сохранения.jpg для Retina1.Готовим изображение в 2 раза больше требуемого2.Сохраняем как .jpg с высокой компрессией (качество 30 -40%) 3.Уменьшаем размеры изображения в 2 раза с помощью CSS/ HTML4.Внешнее качество такой картинки повысится, а размер останется тем же
Оригинальный размер
Качество 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/