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/