WebCamp: Developer Day: Быстродействие веб-сайта. Методичный...
-
Upload
geekslab -
Category
Technology
-
view
113 -
download
1
description
Transcript of WebCamp: Developer Day: Быстродействие веб-сайта. Методичный...
![Page 1: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/1.jpg)
Быстродействие веб-сайтаМетодичный анализ и глубины клиентской оптимизации.
Евгений КотельницкийWebCamp 2014, Odessa
![Page 3: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/3.jpg)
План
- Принципы работы WWW
- На что уходит время?
- Методичный анализ
- Алгоритм оптимизации
- Некоторые правила
- Утилиты для мониторинга
- Клиентская оптимизация
- Психология ожидания
![Page 4: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/4.jpg)
Принципы работы WWW
![Page 5: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/5.jpg)
Схема загрузки компонентов 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
![Page 6: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/6.jpg)
Детальнее…
![Page 7: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/7.jpg)
Время загрузки HTML – 5% от общего *
* По данным компании Yahoo
![Page 8: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/8.jpg)
На что уходит время?
![Page 9: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/9.jpg)
Загрузка веб-страницы
Этап «Виновник»
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) Если для представления требуются другие компоненты
![Page 10: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/10.jpg)
Мы можем уменьшить задержкина каждом этапе
Этап Оптимизация
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) Минимизировать кол-во компонентов и редиректов
![Page 11: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/11.jpg)
Методичный анализ
![Page 12: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/12.jpg)
Клиент Разработчик
Утрированный пример из жизни
![Page 13: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/13.jpg)
Некоторые правила
Ищем узкие места (учитываем приоритеты)
Советы могут противоречить
Стандартные приёмы могут усугубить ситуацию
Учитываем задержки «без попадания в кэш»
![Page 14: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/14.jpg)
1. Собираем симптомы
2. Формулируем цели
3. Определяем узкие места
4. Составляем список задач
5. Оцениваем ожидаемый эффект
6. Оцениваем затраты
7. Расставляем приоритеты
8. Анализируем эффект
9. Выполняем итерационно
Алгоритм оптимизации
![Page 15: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/15.jpg)
Firebug + Yahoo Yslow
Google Chrome PageSpeed
Google Chrome Developer Tools
Pingdom Performance Tools
Google Analytics
Утилиты для мониторинга
![Page 16: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/16.jpg)
Клиентская оптимизация
![Page 17: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/17.jpg)
Минимизируем количество HTTP-запросов
1.DNS Lookup
2.Открытие TCP/IP соединения
3.Отправка HTTP запроса
4.Разбор запроса сервером
5.Генерация ответа
6.Компрессия ответа
7.Пересылка ответа
8.Распаковка ответа
9.Представление ответа
![Page 18: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/18.jpg)
Редиректы нежелательны
![Page 19: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/19.jpg)
404 - некорректные URL-адреса
![Page 20: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/20.jpg)
Минимизация объёма данных, пересылаемых по сети
Компрессия и Минификация
Gzip компрессия
YUI Compressor (JS / CSS)
Что целесообразно «архивировать»?
Минимизация размера медиа-файлов
Минимизация размера HTTP-заголовка
![Page 21: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/21.jpg)
Какие компоненты целесообразно «архивировать»?
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:
![Page 22: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/22.jpg)
Нагрузка на сервер от Gzipкомпрессии
![Page 23: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/23.jpg)
Gzip vs YUI Compressor. Степень сжатия JavaScript
![Page 24: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/24.jpg)
Оптимизация компонентов / HTML
Уменьшим количество DOM-элементов
Реже используем <iframe />
![Page 25: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/25.jpg)
Оптимизация компонентов / CSS
Используем <link> вместо @import;
Оптимизируем селекторы;
Избавляемся от CSS Expressions;
Не копируем бездумно код.
![Page 26: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/26.jpg)
Оптимизация компонентов /Изображения
![Page 27: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/27.jpg)
«Экономный» способ сохранения .jpg для Retina
1. Готовим изображение в 2 раза больше требуемого
2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%)
3. Уменьшаем размеры изображения в 2 раза с помощью CSS / HTML
4. Внешнее качество такой картинки повысится, а размер останется тем же
Оригинальный размерКачество 80%Размер 10Kb
Картинка в 2 раза большеКачество 40%Размер 11Kb
Картинка в 2 раза большеКачество 80%Размер 60Kb
![Page 28: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/28.jpg)
Оптимизация компонентов /JavaScript
Отладка JavaScript в Google Chrome
Показываем статус долгого процесса
Не ждём чуда или «ТаймАут»
Preload
Lazy Load
Ajax Post-load
![Page 29: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/29.jpg)
Кэширование компонентов браузером
Expires или Cache-Control
Last-Modified / If-Modified-Since
HTTP Etag (entity tag)
Кэширование AJAX-запросов
![Page 30: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/30.jpg)
Кэширование компонентов браузером
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
Заголовок запроса Заголовок ответа
![Page 31: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/31.jpg)
Сеть
Параллельная загрузка компонентов
Минимум различных доменов
CDN (Content Delivery Network)
Сookie-free domains
![Page 32: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/32.jpg)
Психология ожидания
“Loading”-анимация
Progress bar
![Page 33: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/33.jpg)
Вопросы?
![Page 34: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/34.jpg)
Спасибо!
![Page 35: WebCamp: Developer Day: Быстродействие веб-сайта. Методичный анализ и глубины клиентской оптимизации - Евгений](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d64a1a28aba32a8b465c/html5/thumbnails/35.jpg)
Материалы:
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/