Быстродействие веб сайта. Методичный анализ и глубины...
DESCRIPTION
Что влияет на производительность. Средства анализа показателей. Правильно определяем цели и задачи. Глубины клиентской оптимизации.TRANSCRIPT
Быстродействие веб-сайтаМетодичный анализ и глубины клиентской оптимизации.
Евгений КотельницкийWebCamp 2014, Odessa
План
- Принципы работы WWW
- На что уходит время?
- Методичный анализ
- Алгоритм оптимизации
- Некоторые правила
- Утилиты для мониторинга
- Клиентская оптимизация
- Психология ожидания
Принципы работы WWW
Схема загрузки компонентов 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
Детальнее…
Время загрузки HTML – 5% от общего *
* По данным компании Yahoo
На что уходит время?
Загрузка веб-страницы
Этап «Виновник»
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) Если для представления требуются другие компоненты
Мы можем уменьшить задержкина каждом этапе
Этап Оптимизация
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) Минимизировать кол-во компонентов и редиректов
Методичный анализ
Клиент Разработчик
Утрированный пример из жизни
Некоторые правила
Ищем узкие места (учитываем приоритеты)
Советы могут противоречить
Стандартные приёмы могут усугубить ситуацию
Учитываем задержки «без попадания в кэш»
1. Собираем симптомы
2. Формулируем цели
3. Определяем узкие места
4. Составляем список задач
5. Оцениваем ожидаемый эффект
6. Оцениваем затраты
7. Расставляем приоритеты
8. Анализируем эффект
9. Выполняем итерационно
Алгоритм оптимизации
Firebug + Yahoo Yslow
Google Chrome PageSpeed
Google Chrome Developer Tools
Pingdom Performance Tools
Google Analytics
Утилиты для мониторинга
Клиентская оптимизация
Минимизируем количество HTTP-запросов
1.DNS Lookup
2.Открытие TCP/IP соединения
3.Отправка HTTP запроса
4.Разбор запроса сервером
5.Генерация ответа
6.Компрессия ответа
7.Пересылка ответа
8.Распаковка ответа
9.Представление ответа
Редиректы нежелательны
404 - некорректные URL-адреса
Минимизация объёма данных, пересылаемых по сети
Компрессия и Минификация
Gzip компрессия
YUI Compressor (JS / CSS)
Что целесообразно «архивировать»?
Минимизация размера медиа-файлов
Минимизация размера HTTP-заголовка
Какие компоненты целесообразно «архивировать»?
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:
Нагрузка на сервер от Gzipкомпрессии
Gzip vs YUI Compressor. Степень сжатия JavaScript
Оптимизация компонентов / HTML
Уменьшим количество DOM-элементов
Реже используем <iframe />
Оптимизация компонентов / CSS
Используем <link> вместо @import;
Оптимизируем селекторы;
Избавляемся от CSS Expressions;
Не копируем бездумно код.
Оптимизация компонентов /Изображения
«Экономный» способ сохранения .jpg для Retina
1. Готовим изображение в 2 раза больше требуемого
2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%)
3. Уменьшаем размеры изображения в 2 раза с помощью CSS / HTML
4. Внешнее качество такой картинки повысится, а размер останется тем же
Оригинальный размерКачество 80%Размер 10Kb
Картинка в 2 раза большеКачество 40%Размер 11Kb
Картинка в 2 раза большеКачество 80%Размер 60Kb
Оптимизация компонентов /JavaScript
Отладка JavaScript в Google Chrome
Показываем статус долгого процесса
Не ждём чуда или «ТаймАут»
Preload
Lazy Load
Ajax Post-load
Кэширование компонентов браузером
Expires или Cache-Control
Last-Modified / If-Modified-Since
HTTP Etag (entity tag)
Кэширование AJAX-запросов
Кэширование компонентов браузером
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
Заголовок запроса Заголовок ответа
Сеть
Параллельная загрузка компонентов
Минимум различных доменов
CDN (Content Delivery Network)
Сookie-free domains
Психология ожидания
“Loading”-анимация
Progress bar
Вопросы?
Спасибо!
Материалы:
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/