Быстродействие веб-сайтаМетодичный анализ и глубины клиентской оптимизации.

Евгений КотельницкийWebCamp 2014, Odessa

Евгений Котельницкий

+YevhenKotelnytskyi

@yeeevhenhttp://4coder.info/me

План

- Принципы работы 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/