ThinkPHP #3: Оптимизация быстродействия Веб-сайта

Transcript

1. Оптимизация быстродействия Веб-сайта (обзорная) Евгений Котельницкий Харьков 2012 г.
2. План: - Среда и принципы работы WWW - Что мы можем оптимизировать? - Средства для мониторинга / утилиты - Правильно определяем цели и задачи - Детальнее про клиентскую оптимизацию
3. Принципы работы WWW Статические и динамические компоненты WEB-страниц Схема загрузки компонентов WEB-страницы: 1) Index.PHP 2) Style.CSS 3) jQuery.JS 4) Image1.JPG 5) Image2.JPG 6) Image3.JPG Text / HTML Text / CSS Image / JPEG Image/JPEG Image/JPEG Text / JavaScript
4. Принципы работы WWW Схема загрузки объектов страницы
5. Принципы работы WWW Как загружаются компоненты страницы? Этап Нагрузка на: 1 DNS Lookup Сеть 2 Открытие TCP/IP соединения Сеть 3 Пересылка HTTP запроса Сеть 4 Разбор запроса сервером Сервер 5 Формирование ответа Сервер 6 Компрессия ответа (1) Сервер 7 Пересылка ответа Сеть 8 Распаковка ответа (1) Браузер 9 Представление ответа Браузер 10 Закрытие соединения? (2) 11 Отправка следующего запроса (3) 1) Если компрессия включена 2) Соединение не закрывается - ждѐм следующий запрос 3) Если для представления текущего ответа требуются другие компоненты
6. Что мы можем оптимизировать? Мы можем уменьшить задержки на каждом этапе: Этап Возможное уменьшение задержки на этапе 1 DNS Lookup Уменьшим количество различных доменов 2 Открытие TCP/IP соединения Используем сервера, которые географически ближе 3 Отправка HTTP запроса Минимизируем размер шапки запроса 4 Разбор запроса сервером Настройка/оптимизация сервера 5 Формирование ответа Зависит от типа компонента 6 Компрессия ответа (1) Отключим компрессию? А как же пункт 7 ? 7 Пересылка ответа Минимизируем размер ответа 8 Распаковка ответа (1) См. п. 6 9 Представление ответа Оптимизируем HTML, CSS, JS и д.р. 10 Закрытие соединения? (2) К счастью, соединение не закрывается 11 Отправка следующего запроса (3) Минимизируем кол-во запросов
7. Средства для мониторинга / утилиты 1.Firebug + Yahoo YSlow 2.Google PageSpeed 3.Pingdom Performance Tools
8. Правильно определяем цели и задачи Перед тем как "рваться в бой" проанализируем ситуацию Методично собираем симптомы, чтобы не было как на рисунке: Клиент Разработчик
9. Правильно определяем цели и задачи О чём не стоит забывать?  Расставляем и учитываем приоритеты;  Учитываем целесообразность изменений;  Учитываем скорость загрузки без попадания в кэш;  Действия могут противоречить;  Стандартные приѐмы могут усугубить ситуацию.
10. Про клиентскую оптимизацию Минимизируем количество HTTP-запросов
11. Про клиентскую оптимизацию Редиректы не желательны
12. Про клиентскую оптимизацию К чему приводят ответы 404 (некорректные URL-адреса)?
13. Про клиентскую оптимизацию Минимизация объёма данных, пересылаемых по сети  Gzip компрессия;  Что целесообразно «архивировать»?  Компрессия vs Минификация;  YUI Compressor (JS / CSS);  Минимизация размера медиа-файлов;  Минимизация размера HTTP-заголовка.
14. Про клиентскую оптимизацию Какие компоненты целесообразно «архивировать»? 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:
15. Про клиентскую оптимизацию Нагрузка на сервер от Gzip компрессии
16. Про клиентскую оптимизацию Gzip vs YUI Compressor. Степень сжатия JavaScript
17. Про клиентскую оптимизацию Оптимизация компонентов - HTML  Уменьшим количество DOM-элементов  Реже используем <iframe />
18. Про клиентскую оптимизацию Оптимизация компонентов - CSS  Используем <link> вместо @import;  Оптимизируем селекторы;  Избавляемся от CSS Expressions;  Не копируем бездумно код.
19. Про клиентскую оптимизацию Оптимизация компонентов - JavaScript  Распределяем нагрузку по времени;  Отладка JavaScript в Google Chrome.
20. Про клиентскую оптимизацию Оптимизация компонентов - Изображения
21. Про клиентскую оптимизацию Кэширование компонентов браузером  Expires или Cache-Control Header  Last-Modified / If-Modified-Since  Etags  Кэширование AJAX-запросов
22. Про клиентскую оптимизацию Кэширование компонентов браузером 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 Заголовок запрорса Заголовок ответа
23. Про клиентскую оптимизацию Pre / Post-load. Всему своё время.  Lazy Load;  Preload;  Ajax Post-load.
24. Про клиентскую оптимизацию Сеть  Параллельная загрузка компонентов;  Минимизируем количество различных доменов;  CDN (Content Delivery Network);  Сookie-free domains;
25. Вопросы?
26. Спасибо!
27. Материалы: 1. http://developer.yahoo.com/performance/rules.html/ 2. http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/ 3. http://webo.in/articles/habrahabr/30-gzip-versus-broadband/ 4. http://developer.yahoo.com/yui/compressor/ 5. 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/